Back to Details

design-context-extract

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Context Extract

设计上下文提取

Extract the "Design DNA" from existing applications — colors, typography, spacing, and component patterns — and output as structured tokens.
bash
/ork:design-context-extract /tmp/screenshot.png       # From screenshot
/ork:design-context-extract https://example.com        # From live URL
/ork:design-context-extract current project            # Scan project's existing styles
从现有应用中提取「设计DNA」——包括颜色、排版、间距和组件模式——并以结构化令牌的形式输出。
bash
/ork:design-context-extract /tmp/screenshot.png       # 从截图提取
/ork:design-context-extract https://example.com        # 从在线URL提取
/ork:design-context-extract current project            # 扫描项目现有样式

Pipeline

流程

Input (screenshot/URL/project)
  │
  ▼
┌──────────────────────────────┐
│ Capture                       │  Screenshot or fetch HTML/CSS
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Extract                       │  Stitch extract_design_context
│                               │  OR multimodal analysis (fallback)
│ → Colors (hex + oklch)        │
│ → Typography (families, scale)│
│ → Spacing (padding, gaps)     │
│ → Components (structure)      │
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Output                        │  Choose format:
│ → design-tokens.json (W3C)    │
│ → tailwind.config.ts          │
│ → tokens.css (CSS variables)  │
│ → Markdown spec               │
└──────────────────────────────┘
输入（截图/URL/项目）
  │
  ▼
┌──────────────────────────────┐
│ 捕获                       │  截图或获取HTML/CSS
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ 提取                       │  使用Stitch的extract_design_context
│                               │  或多模态分析（备选方案）
│ → 颜色（hex + oklch格式）        │
│ → 排版（字体族、字号层级）│
│ → 间距（内边距、间隙）     │
│ → 组件（结构）      │
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ 输出                        │  选择输出格式：
│ → design-tokens.json（遵循W3C规范）    │
│ → tailwind.config.ts          │
│ → tokens.css（CSS变量）  │
│ → Markdown规范文档               │
└──────────────────────────────┘

Step 0: Detect Input and Context

步骤0：检测输入与上下文

python
INPUT = ""

TaskCreate(subject="Extract design context: {INPUT}", description="Extract design DNA")
python
INPUT = ""

TaskCreate(subject="Extract design context: {INPUT}", description="Extract design DNA")

Determine input type

确定输入类型

"/path/to/file.png" → screenshot

"/path/to/file.png" → 截图

"http..." → URL

"http..." → URL

"current project" → scan project styles

"current project" → 扫描项目样式

undefined
undefined

Step 1: Capture Source

步骤1：捕获源数据

For screenshots: Read the image directly (Claude is multimodal).
For URLs:
python
undefined
针对截图： 直接读取图片（Claude支持多模态）。
针对URL：
python
undefined

If stitch available: use get_screen + get_project

如果Stitch可用：使用get_screen + get_project

If not: WebFetch the URL and analyze HTML/CSS

如果不可用：通过WebFetch获取URL并分析HTML/CSS


**For current project:**
```python
Glob("**/tailwind.config.*")
Glob("**/tokens.css")
Glob("**/*.css")  # Look for design token files
Glob("**/theme.*")

**针对当前项目：**
```python
Glob("**/tailwind.config.*")
Glob("**/tokens.css")
Glob("**/*.css")  # 查找设计令牌文件
Glob("**/theme.*")

Read and analyze existing style definitions

读取并分析现有样式定义

undefined
undefined

Step 2: Extract Design Context

步骤2：提取设计上下文

If stitch MCP is available:
python
undefined
如果Stitch MCP可用：
python
undefined

Use official Stitch MCP tools: get_screen, get_project, list_screens

使用官方Stitch MCP工具：get_screen, get_project, list_screens

Returns structured design data: colors, typography, layout, components

返回结构化设计数据：颜色、排版、布局、组件


**If stitch MCP is NOT available (fallback):**
```python

**如果Stitch MCP不可用（备选方案）：**
```python

Multimodal analysis of screenshot:

对截图进行多模态分析：

- Identify dominant colors (sample from regions)

- 识别主色调（从不同区域采样）

- Detect font families and size hierarchy

- 检测字体族和字号层级

- Measure spacing patterns

- 测量间距模式

- Catalog component types (cards, buttons, headers, etc.)

- 归类组件类型（导航栏、英雄区、卡片、按钮、页脚等）

For URLs: parse CSS custom properties, Tailwind config, computed styles

针对URL：解析CSS自定义属性、Tailwind配置、计算后的样式


Extracted data structure:
```json
{
  "colors": {
    "primary": { "hex": "#3B82F6", "oklch": "oklch(0.62 0.21 255)" },
    "secondary": { "hex": "#10B981", "oklch": "oklch(0.69 0.17 163)" },
    "background": { "hex": "#FFFFFF" },
    "text": { "hex": "#1F2937" },
    "muted": { "hex": "#9CA3AF" }
  },
  "typography": {
    "heading": { "family": "Inter", "weight": 700 },
    "body": { "family": "Inter", "weight": 400 },
    "scale": [12, 14, 16, 18, 24, 30, 36, 48]
  },
  "spacing": {
    "base": 4,
    "scale": [4, 8, 12, 16, 24, 32, 48, 64]
  },
  "components": ["navbar", "hero", "card", "button", "footer"]
}

提取的数据结构示例：
```json
{
  "colors": {
    "primary": { "hex": "#3B82F6", "oklch": "oklch(0.62 0.21 255)" },
    "secondary": { "hex": "#10B981", "oklch": "oklch(0.69 0.17 163)" },
    "background": { "hex": "#FFFFFF" },
    "text": { "hex": "#1F2937" },
    "muted": { "hex": "#9CA3AF" }
  },
  "typography": {
    "heading": { "family": "Inter", "weight": 700 },
    "body": { "family": "Inter", "weight": 400 },
    "scale": [12, 14, 16, 18, 24, 30, 36, 48]
  },
  "spacing": {
    "base": 4,
    "scale": [4, 8, 12, 16, 24, 32, 48, 64]
  },
  "components": ["navbar", "hero", "card", "button", "footer"]
}

Step 3: Choose Output Format

步骤3：选择输出格式

python
AskUserQuestion(questions=[{
  "question": "Output format for extracted tokens?",
  "header": "Format",
  "options": [
    {"label": "Tailwind config (Recommended)", "description": "tailwind.config.ts with extracted theme values"},
    {"label": "W3C Design Tokens", "description": "design-tokens.json following W3C DTCG spec"},
    {"label": "CSS Variables", "description": "tokens.css with CSS custom properties"},
    {"label": "Markdown spec", "description": "Human-readable design specification document"}
  ],
  "multiSelect": false
}])
python
AskUserQuestion(questions=[{
  "question": "Output format for extracted tokens?",
  "header": "Format",
  "options": [
    {"label": "Tailwind config (Recommended)", "description": "tailwind.config.ts with extracted theme values"},
    {"label": "W3C Design Tokens", "description": "design-tokens.json following W3C DTCG spec"},
    {"label": "CSS Variables", "description": "tokens.css with CSS custom properties"},
    {"label": "Markdown spec", "description": "Human-readable design specification document"}
  ],
  "multiSelect": false
}])

Step 4: Generate Output

步骤4：生成输出

Write the extracted tokens in the chosen format. If the project already has tokens, show a diff of what's new vs existing.
以选定格式写入提取的令牌。如果项目已存在令牌，展示新增内容与现有内容的差异对比。

Anti-Patterns

反模式

  • NEVER guess colors without analyzing the actual source — use precise extraction
  • NEVER skip the oklch conversion — all colors must have oklch equivalents
  • NEVER output flat token structures — use three-tier hierarchy (global/alias/component)
  • 绝对不要 在未分析实际源数据的情况下猜测颜色——使用精准提取方式
  • 绝对不要 跳过oklch格式转换——所有颜色必须包含对应的oklch格式值
  • 绝对不要 输出扁平化的令牌结构——使用三级层级结构（全局/别名/组件）

Related Skills

相关技能

  • ork:design-to-code
    — Full pipeline that uses this as Stage 1
  • ork:design-system-tokens
    — Token architecture and W3C spec compliance
  • ork:component-search
    — Find components that match extracted patterns
  • ork:design-to-code
    —— 完整流程，本功能作为其第一阶段
  • ork:design-system-tokens
    —— 令牌架构与W3C规范合规性
  • ork:component-search
    —— 查找与提取模式匹配的组件