Design Md Skill

/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