스킬 design-md
🎨
設計系統通常被困在技術性的 CSS 值中，難以轉換為提示詞。這個技能可以分析視覺資產，並將它們翻譯成自然語言的設計文件，確保一致的 UI 生成。
지원: Claude Codex Code(CC)
1
스킬 ZIP 다운로드
2
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
3
토글을 켜고 사용 시작
테스트해 보기
"design-md" 사용 중입니다. Analyze the Furniture Collection project and generate a DESIGN.md file from the Home screen.
예상 결과:
- # Design System: Furniture Collections List
- **Project ID:** 13534454087919359824
- ## 1. Visual Theme & Atmosphere
- The Furniture Collections List embodies a sophisticated, minimalist sanctuary that marries the pristine simplicity of Scandinavian design with the refined visual language of luxury editorial presentation...
- ## 2. Color Palette & Roles
- ### Primary Foundation
- - **Warm Barely-There Cream** (#FCFAFA) – Primary background color...
- ### Accent & Interactive
- - **Deep Muted Teal-Navy** (#294056) – The sole vibrant accent in the palette...
보안 감사
안전v1 • 1/29/2026
All static findings are false positives. The scanner incorrectly flagged hex color codes as weak cryptographic algorithms, markdown backticks as shell execution, and Stitch MCP tool names as C2 keywords. This is documentation-only content that generates design system files using authorized API calls.
3
스캔된 파일
363
분석된 줄 수
4
발견 사항
1
총 감사 수
높은 위험 문제 (3)
False Positive: Hex Color Codes Flagged as Cryptographic Patterns
Scanner flagged hex color codes (e.g., #294056, #FCFAFA) as weak cryptographic algorithms. These are legitimate design tokens in documentation.
False Positive: Markdown Backticks Flagged as Shell Execution
Scanner flagged markdown code block syntax (backticks) as Ruby/shell backtick execution. Markdown backticks are formatting syntax, not code execution.
False Positive: Stitch MCP Tool Names Flagged as C2 Keywords
Scanner flagged legitimate Stitch MCP tool names (list_projects, get_screen, list_screens) as C2 command-and-control keywords.
중간 위험 문제 (1)
False Positive: Standard Documentation URLs Flagged
Scanner flagged the official Stitch documentation URL as a hardcoded network endpoint.
감사자: claude
품질 점수
38
아키텍처
100
유지보수성
83
콘텐츠
20
커뮤니티
70
보안
83
사양 준수
만들 수 있는 것
為新的 Stitch 專案建立一致的設計語言
生成一個全面的 DESIGN.md，作為提示 Stitch 建立符合現有設計語言的新螢幕的參考依據。
記錄現有設計模式以促進團隊協作
分析完成的螢幕並生成人類可讀的設計文件，幫助團隊成員理解和擴展設計系統。
為 AI 輔助設計迭代建立參考文件
建立一個語義設計指南，實現對現有螢幕進行精確提示以進行增量改進，同時保持設計一致性。
이 프롬프트를 사용해 보세요
基本設計文件
分析 [Project Name] 專案並從 Home 螢幕生成 DESIGN.md 文件來記錄設計系統。
特定螢幕分析
從 [Project Name] 專案中檢索 [Screen Name] 螢幕。分析視覺設計並創建全面的 DESIGN.md，涵蓋調色板、文字、組件樣式和佈局原則。
設計 Token 提取
從 [Project Name] 專案中提取所有設計 token，包括顏色、間距值、邊框圓角模式和陰影樣式。為每個 token 生成具有功能角色的語義描述。
多螢幕設計綜合
分析 [Project Name] 專案中的多個螢幕，以識別一致的設計模式。合成一個統一的 DESIGN.md，捕捉核心設計語言，同時記錄組件特定的變體。
모범 사례
- 使用傳達特性和目的的語義顏色名稱（例如，「深色柔和 Navy 藍」而不仅仅是「深藍色」）
- 始終為顏色同時包含描述性名稱和十六進位碼，以實現精確的 AI 提示
- 記錄每個設計元素的功能角色，以指導跨螢幕的一致使用
피하기
- 使用技術性的 CSS 類名稱而不翻譯（例如，「rounded-xl」而不是「圓角」
- 省略顏色碼，只依賴描述性名稱
- 未能解釋設計元素的功能目的
자주 묻는 질문
什麼是 DESIGN.md？為什麼我需要它？
DESIGN.md 作為提示 Stitch 生成新螢幕的參考依據。它將技術設計值翻譯成 Stitch 可以理解的自然語言，以實現一致的 UI 創建。
使用此技能需要什麼存取權限？
您需要存取 Stitch MCP Server 以及一個有待分析設計螢幕的 Stitch 專案。
此技能支持什麼格式？
此技能適用於 HTML、CSS 和 Tailwind 設計。它提取 Tailwind 類和自定義 CSS 來創建設計 token。
文件生成需要多長時間？
根據螢幕複雜度，此技能通常在 2 分鐘內完成分析和文件生成。
隨著專案演進，我可以更新 DESIGN.md 嗎？
可以。在更新的螢幕上重新運行此技能，以生成反映設計變更的修訂文件。
什麼是好的語義設計文件？
好的文件對所有設計元素使用生動、人類可讀的描述，並始終為每個組件包含功能上下文。