wenyen-hsu

Design Md Skill — Design skill for Claude Code

Design community

Claude Code skill for generating DESIGN.md design system files with Figma MCP integration.

How to install Design Md Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open wenyen-hsu/design-md-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Design Md Skill does

Claude Code skill for generating DESIGN.md design system files with Figma MCP integration.

Alternatives in Design

Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
Plannotator — Interactive plan review UI for Claude Code with visual annotation, offline sharing, and Obsidian/Bear integrat 3.3k ★

README

/design — DESIGN.md Skill for Claude Code

A Claude Code custom skill that generates, manages, and syncs design system files (`DESIGN.md`) with Figma integration. Decide all your colors, typography, spacing, and component styles **before** building any application — and update them after.

一個 Claude Code 自訂技能，用於生成、管理及同步設計系統檔案（`DESIGN.md`），支援 Figma 雙向整合。在開發任何應用程式**之前**就決定好所有顏色、字型、間距和元件樣式，開發後也能隨時更新。

How It Works / 運作方式

The default flow is **Figma-first** and interactive:

預設流程以 **Figma 為核心**，互動式引導：

/design
  1. Claude asks about your project preferences (Q&A)
     Claude 詢問你的專案偏好（問答）

  2. Generates a proposed color palette
     生成建議的調色盤

  3. Creates a Figma file with color swatches via Figma MCP
     透過 Figma MCP 建立含有色票的 Figma 檔案

  4. You adjust colors visually in Figma
     你在 Figma 中視覺化調整顏色

  5. Claude reads back your final choices
     Claude 讀取你的最終選擇

  6. Generates complete DESIGN.md (9 sections)
     生成完整的 DESIGN.md（9 個章節）

Demo / 示範

# Start guided flow with Figma / 啟動 Figma 引導流程
/design

# Skip Q&A, provide description / 跳過問答，直接描述
/design modern minimalist SaaS with indigo accents

# Text-only, no Figma / 純文字模式，不使用 Figma
/design --no-figma clean dashboard with blue tones

# Extract from a website / 從網站擷取設計
/design --from-url https://linear.app

# Extract from Figma file / 從 Figma 檔案擷取
/design --from-figma https://figma.com/design/abc123/MyDesign

# Update colors later / 之後更新顏色
/design --update-colors "warmer tones, switch to green"

# Apply tokens to project files / 套用設計到專案檔案
/design --apply

# Push DESIGN.md to Figma / 將 DESIGN.md 推送到 Figma
/design --to-figma

# Bidirectional Figma sync / Figma 雙向同步
/design --sync-figma https://figma.com/design/abc123/MyApp

# Interactive layout assembly / 互動式版面組裝
/design --layout landing-page

# Video: create new — pick scenes + colors → Figma storyboard → scaffold
# 影片：從零開始 — 選場景 + 配色 → Figma 分鏡 → scaffold 程式碼
/design --video-layout

# Video: modify existing — read frames → Figma → edit c