{"id":"c8a128e5-8e65-47de-ac08-be6f231345ed","entityType":"agent","slug":"clawhub-namepain-style-extractor","name":"style-extractor","canonicalUrl":"https://www.xpersona.co/agent/clawhub-namepain-style-extractor","canonicalPath":"/agent/clawhub-namepain-style-extractor","generatedAt":"2026-10-11T21:53:29.017Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T19:48:36.077Z","emptyReason":null},"description":"从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。 Skill: style-extractor Owner: namepain Summary: 从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。 Tags: latest:0.1.0 Version history: v0.1.0 | 2026-08-10T07:42:30.846Z | auto Style Extractor 2.0.0 introduces a comprehensive design token extraction and packaging pipeline for web projects, images, and codebases. - Extracts full UI design systems from URLs, scr","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s173xe0t6gv3a8j1p6atk0v1cs8c6x4v:style-extractor","sourceUrl":"https://clawhub.ai/namepain/style-extractor","homepage":"https://clawhub.ai/namepain/skills/style-extractor","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/namepain/style-extractor","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/namepain/skills/style-extractor","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。 Skill: style-extractor Owner: namepain Summary: 从 "},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T19:48:36.077Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T19:48:36.077Z","emptyReason":null},"stars":null,"forks":null,"downloads":1001,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"0.1.0","tractionLabel":"1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T19:48:36.009Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T19:48:36.077Z","lastCrawledAt":"2026-10-11T19:48:36.009Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T19:48:36.009Z","lastVerifiedAt":null,"highlights":[{"version":"0.1.0","createdAt":"2026-08-10T07:42:30.846Z","changelog":"Style Extractor 2.0.0 introduces a comprehensive design token extraction and packaging pipeline for web projects, images, and codebases. - Extracts full UI design systems from URLs, screenshots, or project source code. - Implements a rigorous three-layer token architecture: Primitive, Semantic, and Component levels. - Tags all extracted values with evidence grades (Defined, Measured, Inferred, Assumed) for migration confidence. - Supports mode selection: audit-only, design-only, generate, and verify. - Automatically detects Tailwind, CSS custom properties, and common style sources. - Packages results as reusable WorkBuddy style skills, streamlining design token adoption.","fileCount":19,"zipByteSize":30738}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s173xe0t6gv3a8j1p6atk0v1cs8c6x4v:style-extractor","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-namepain-style-extractor/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-namepain-style-extractor/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-namepain-style-extractor/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-namepain-style-extractor/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-namepain-style-extractor/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-namepain-style-extractor/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T21:53:29.015Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-namepain-style-extractor/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-namepain-style-extractor/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-namepain-style-extractor/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-namepain-style-extractor/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T19:48:36.077Z","emptyReason":null},"readme":"Skill: style-extractor\n\nOwner: namepain\n\nSummary: 从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。\n\nTags: latest:0.1.0\n\nVersion history:\n\nv0.1.0 | 2026-08-10T07:42:30.846Z | auto\n\nStyle Extractor 2.0.0 introduces a comprehensive design token extraction and packaging pipeline for web projects, images, and codebases.\n\n- Extracts full UI design systems from URLs, screenshots, or project source code.\n- Implements a rigorous three-layer token architecture: Primitive, Semantic, and Component levels.\n- Tags all extracted values with evidence grades (Defined, Measured, Inferred, Assumed) for migration confidence.\n- Supports mode selection: audit-only, design-only, generate, and verify.\n- Automatically detects Tailwind, CSS custom properties, and common style sources.\n- Packages results as reusable WorkBuddy style skills, streamlining design token adoption.\n\nArchive index:\n\nArchive v0.1.0: 19 files, 30738 bytes\n\nFiles: .gitignore (16b), assets (0b), assets/style-skill-template (0b), assets/style-skill-template/references (0b), assets/style-skill-template/references/colors.md.template (1632b), assets/style-skill-template/references/components.md.template (611b), assets/style-skill-template/references/known-gaps.md.template (1097b), assets/style-skill-template/references/spacing.md.template (1341b), assets/style-skill-template/references/typography.md.template (1011b), assets/style-skill-template/SKILL.md.template (3755b), README.md (2732b), references (0b), references/common-pitfalls.md (6159b), references/extraction-checklist.md (11740b), references/output-format.md (14181b), references/validation-checklist.md (4966b), skill-card.md (2544b), SKILL.md (16012b), _meta.json (134b)\n\nFile v0.1.0:SKILL.md\n\n---\nname: style-extractor\nversion: 2.0.0\ntitle: \"Style Extractor — UI 视觉风格提取与 Design Token 系统构建\"\ndescription: \"从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。\"\nauthor: namepain\ntype: command\ncategory: development\ntags:\n  - ui\n  - design-system\n  - design-tokens\n  - css\n  - visual-style\ninvocation: \"/style-extractor\"\ndifficulty: intermediate\npermissions:\n  read:\n    - project files\n    - web pages\n  write:\n    - project files\n  network: required\nexamples:\n  - input: \"/style-extractor https://linear.app 的设计风格\"\n    output: \"抓取页面 CSS → 提取设计变量 → 生成三层 Token → 封装 brand-style-linear 技能\"\n  - input: \"/style-extractor 这张截图里的 UI 风格给我封装成 skill\"\n    output: \"多模态分析截图 → 推断配色/排版/间距 → 标志为证据 A 级 → 生成技能供用户确认\"\n  - input: \"/style-extractor ./my-nextjs-app 的 tailwind 主题\"\n    output: \"扫描 tailwind.config + globals.css → 提取 Primitive 色阶/Semantic 角色 → 生成品牌技能\"\nagent_created: true\n---\n\n# Style Extractor\n\nExtract a complete design system from any web page, image, or codebase and package it as a reusable WorkBuddy style skill.\n\n## Overview\n\nThis skill provides a multi-phase pipeline with optional mode splitting:\n\n| Phase | Mode | Output |\n|-------|------|--------|\n| Phase 1 — Audit | Audit-only mode | Evidence inventory, raw values, duplicates, drift, exceptions |\n| Phase 2 — Design | Design mode | Three-layer tokens (Primitive → Semantic → Component), naming, theme mappings |\n| Phase 3 — Package | Generate mode | Complete WorkBuddy style skill with all references |\n| Phase 4 — Verify | Verify mode | Format, reference, theme, and state validation + optional demo page |\n\nBy default, run all phases. The user can request audit-only, design-only, or verify-only mode.\n\n## Core Principles\n\n### Evidence Grading\n\nEvery extracted value MUST be tagged with one of four evidence levels:\n\n| Grade | Label | Meaning |\n|-------|-------|---------|\n| **D** | 已定义 (Defined) | Found in existing CSS variables, theme config, or design token files |\n| **M** | 已测量 (Measured) | Confirmed from source code references, browser computed styles, or rendered output |\n| **I** | 有依据的归纳 (Inferred) | Reasonably deduced from repeated patterns across multiple pages/components |\n| **A** | 暂时假设 (Assumed) | Best guess based on limited data; MUST be explicitly flagged for user review |\n\nNever present an assumed value as a confirmed fact. The evidence grade determines how aggressively the token can be used in migration.\n\n### Three-Layer Token Architecture\n\nTokens are organized into three layers, NOT a flat list:\n\n```\nPrimitive (原材料)    →  color.blue.600, space.4, radius.md, font.size.lg\n                            ↑ reference only — do not use in components directly\nSemantic (设计角色)   →  color.action.primary, color.bg.surface, space.container.padding\n                            ↑ components use these\nComponent (组件特化)  →  button.primary.bg.default, input.border.focus, dialog.shadow\n                            ↑ only when semantic tokens are insufficient\n```\n\n**Why three layers matters:**\n- `#FFFFFF` in light theme = page background; in dark theme = inverse text. Same primitive value, DIFFERENT semantic roles. If merged into one flat `--white`, theme switching breaks.\n- `color.blue.600` could be used for buttons, links, and focus rings. If a component references the primitive directly, changing the brand color requires hunting down every usage. If it references `color.action.primary` (which maps to `color.blue.600`), it changes everywhere at once.\n\n**Layer decision rules:**\n- Primitive: Raw materials (color scales, spacing steps, font sizes, radius steps, duration values). Named by what they ARE, not where they're used.\n- Semantic: Design roles (backgrounds, text levels, borders, actions, statuses). Named by what they DO. Must reference primitives, never copy values.\n- Component: Per-component overrides that can't be expressed by semantic tokens alone. Only create when a component has a genuinely independent design decision.\n\n**Do NOT create a component token when:**\n- The component value equals a semantic token → just use the semantic token directly\n- The component value could be expressed by combining existing semantic tokens\n- You're creating an alias that adds no governance value (e.g., `card.background.default` when it's always `color.bg.surface`)\n\n## Quick Start\n\nWhen the user provides an input, determine the type and follow the corresponding workflow:\n\n| Input Type | Detection | Workflow Section |\n|---|---|---|\n| URL | starts with `http://` or `https://` | [URL Extraction](#url-extraction) |\n| Screenshot / Image | file path ending in `.png`, `.jpg`, `.jpeg`, `.webp`, `.gif` | [Screenshot Extraction](#screenshot-extraction) |\n| Project Directory | local folder path | [Project Source Extraction](#project-source-extraction) |\n\nIf input type is ambiguous, ask the user to clarify.\n\n## Phase 0 — Determine Output Name and Mode\n\nBefore extraction:\n1. Ask the user: **\"What should I name this style? (e.g., `notion`, `stripe`, `my-brand`)\"**\n2. The output skill directory will be named `brand-style-{name}`\n3. If only one style is being extracted and the user doesn't specify, infer from the source\n4. If the user wants audit-only, stop after Phase 2. If verify-only, start from Phase 4.\n\n## Phase 1 — Audit: Ingest and Inventory\n\n### URL Extraction\n\nWhen input is a URL:\n\n1. **Fetch the page:** Use WebFetch to retrieve the HTML content of the target URL\n2. **Fetch CSS:** Use WebFetch on any linked CSS file URLs found in the HTML\n3. **Catalog raw values** with evidence grades:\n   - **Colors:** All hex/rgb/hsl values, noting which come from `--*` variables (grade D), which are inline (grade M), and which are computed (grade M)\n   - **Typography:** Font families, sizes, weights, line-heights, letter-spacing — note `@font-face` vs system stack vs Google Fonts\n   - **Spacing:** Padding/margin patterns, gap values, typical container widths\n   - **Shadows:** box-shadow values with color, offset, blur, spread\n   - **Border Radius:** All border-radius values, noting which elements use them\n   - **Layout:** Flex/grid patterns, column counts, responsive breakpoints\n   - **Components:** Recurring patterns with their CSS properties\n\n**Tailwind Detection:** If the page uses Tailwind CSS, map utility classes to computed values and document both the class name and the equivalent CSS. Grade these as D (defined in config) or M (observed in DOM).\n\n**CSS Variable Detection:** If the page uses CSS custom properties, extract the full variable hierarchy. These are grade D. Note any variables that reference other variables (e.g., `--color-text-primary: var(--gray-900)`).\n\n### Screenshot Extraction\n\nWhen input is a screenshot/image:\n\n1. **Read the image:** Use the Read tool to analyze the screenshot visually\n2. **Extract visual properties** (all grade I or A — inferred from visual, not exact):\n   - **Color palette:** Dominant colors, accent colors, background/surface colors, text colors\n   - **Typography:** Font styles observed, size hierarchy, weight usage\n   - **Spacing:** Visual spacing patterns, content density\n   - **Shape language:** Rounded vs sharp corners, shadow usage, border treatment\n   - **Component patterns:** Cards, buttons, navigation, forms\n3. **Explicitly flag** that screenshot extraction yields inferred values (grade I/A). Invite the user to refine exact hex codes and font names.\n\n### Project Source Extraction\n\nWhen input is a local project directory:\n\n1. **Discover style files:** Use Glob to find:\n   - `**/*.css`, `**/*.scss`, `**/*.less` → grade D/M\n   - `tailwind.config.{js,ts,mjs,cjs}` → grade D\n   - `**/theme.{js,ts,tsx}`, `**/tokens.{js,ts,json}` → grade D\n   - `**/GlobalStyles.{js,ts,tsx}`, `**/styled.{js,ts,tsx}` → grade M\n2. **Read key files:** Prioritize theme/config files (grade D), then component styles (grade M)\n3. **Parse and catalog:**\n   - **Tailwind config:** `theme.extend.colors`, `theme.extend.fontFamily`, etc. → grade D\n   - **CSS variables:** All `:root { }` blocks → grade D, but note if variables reference other variables\n   - **Theme objects:** JS/TS theme definitions → grade D\n   - **Global styles:** body defaults, heading resets → grade M\n4. **If the project can run**, open key pages and record computed styles (upgrade M → D where confirmed)\n5. **If the project cannot run**, explicitly state this and keep browser-dependent values at grade I\n\n## Phase 2 — Design: Identify Patterns, Drift, and Exceptions\n\nAfter cataloging raw values, analyze them. See `references/common-pitfalls.md` for what to avoid.\n\n### Step 1: Find Duplicates and Conflicts\n\nOutput a structured issues list:\n1. **同值异名 (Same value, different names):** Multiple variable names resolving to the same value and same semantic role — candidates for merging\n2. **同名异值 (Same name, different values):** Same variable name expressing different meanings across themes, scopes, or files — these MUST stay separate\n3. **近似重复 (Near duplicates):** Values like 15px/16px/17px or similar grays — investigate whether the difference is intentional (font metrics, component sizing, responsive) or drift\n4. **语义误绑 (Semantic misbinding):** Same current value but different semantic roles (e.g., `#FFFFFF` as both page background and inverse text) — these MUST become separate semantic tokens\n5. **硬编码逃逸 (Hardcoded escapes):** Raw values used in components even though variables exist — flag for migration\n6. **组件漂移 (Component drift):** Same component type with different sizing/colors/spacing across pages — identify the canonical version\n\n### Step 2: Build Three-Layer Tokens\n\n**Primitive tokens** — raw materials only:\n```\ncolor.blue.50  → #E8F3FF    color.blue.500  → #165DFF    color.blue.900  → #001B4D\ncolor.gray.50  → #F7F8FA    color.gray.500  → #86909C    color.gray.900  → #1D2129\nspace.1  → 4px    space.2  → 8px    space.4  → 16px    space.6  → 24px\nradius.sm → 2px  radius.md → 4px   radius.lg → 8px\nfont.size.sm → 12px   font.size.base → 14px   font.size.lg → 16px\n```\n\n**Semantic tokens** — design roles referencing primitives:\n```\ncolor.action.primary      → color.blue.500\ncolor.action.primary.hover → color.blue.400\ncolor.bg.page             → color.gray.50 (light) / color.gray.900 (dark)\ncolor.bg.surface          → white (light) / color.gray.800 (dark)\ncolor.text.primary        → color.gray.900 (light) / white (dark)\ncolor.text.secondary      → color.gray.500\ncolor.border.default      → color.gray.200\nspace.container.padding   → space.6\nshadow.overlay            → {specific shadow}\n```\n\nShow theme mappings for light/dark if applicable. When the same primitive maps to different semantics in different themes, this is exactly why the three-layer system exists — document it explicitly.\n\n**Component tokens** — only where necessary:\n```\nbutton.primary.bg.default  → color.action.primary\nbutton.primary.bg.hover    → color.action.primary.hover\ninput.border.focus         → color.action.primary (with alpha)\ndialog.shadow              → shadow.overlay\ntable.row.height.compact   → 36px\n```\n\nIf a component token simply equals a semantic token (e.g., `card.bg → color.bg.surface`), do NOT create it — just document that cards use `color.bg.surface`.\n\n### Step 3: Handle Exceptions\n\nSome values are genuinely local and should NOT become tokens:\n- One-off decorative gradients\n- Chart/dataviz algorithm-generated colors\n- Third-party component internal styles\n- Experimental/A-B test variants\n\nDocument these in the output's Known Gaps / Exceptions section with justification.\n\n## Phase 3 — Package: Generate the Output Style Skill\n\nGenerate the output style skill using the templates in `assets/style-skill-template/`.\n\n### Output Skill Structure\n\n```\nbrand-style-{name}/\n├── SKILL.md                       # YAML frontmatter + three-layer overview + quick reference\n├── references/\n│   ├── colors.md                  # Primitive color scales + Semantic color roles + theme mappings\n│   ├── typography.md              # Primitive font scale + Semantic text roles\n│   ├── spacing.md                 # Primitive spacing/radius/shadow scales + Semantic layout tokens\n│   ├── components.md              # Component tokens and patterns\n│   └── known-gaps.md              # Unresolved discrepancies, exceptions, assumptions\n```\n\n### Output Format\n\nSee `references/output-format.md` for the detailed specification. Key requirements:\n\n**SKILL.md:** Must include YAML frontmatter with structured token data. See the template.\n\n**All reference files:** Every token table must include an **Evidence** column (D/M/I/A).\n\n**known-gaps.md:** Required. Documents:\n- Conflicts between documentation and source code (and which was chosen)\n- Values that couldn't be confirmed\n- Assumptions that need user review\n- Genuine exceptions with justification\n\n### Post-Generation Validation\n\nAfter generating all files, run the validations in `references/validation-checklist.md`:\n\n1. **Format:** YAML parses cleanly; all required frontmatter fields present\n2. **References:** Every `{colors.xxx}` style reference resolves to a defined token\n3. **Color validity:** All hex values are legitimate 3/6/8-digit hex\n4. **Layer consistency:** Semantic tokens reference primitives (not copy values); component tokens reference semantics (not primitives directly)\n5. **No cross-contamination:** No tokens, brand names, or rules from other design systems\n6. **Section completeness:** All required sections present and in order\n\nReport: file path, total lines, token counts per layer, grades distribution, validation results, and remaining Known Gaps.\n\n## Phase 4 — Verify: Demo and Refine\n\nAfter generating the skill, optionally validate it's actually usable:\n\n1. **Generate a demo page** that exercises the tokens: background layers, text hierarchy, buttons (all variants), form elements, cards, navigation, and data display\n2. **Check:** Does the demo look like the source? Are any values clearly wrong?\n3. **Offer to refine:** \"Would you like me to adjust any colors, fonts, or values?\"\n\n## Common Pitfalls to Avoid\n\nThese are the five most common extraction mistakes. See `references/common-pitfalls.md` for full details.\n\n1. **Treating frequency as correctness.** A value appearing 50 times may just be copy-paste legacy. A value appearing once (e.g., brand title font) may be critical.\n2. **Force-merging near-duplicates.** 15px/16px/17px differences may come from font metrics, component sizing, or responsive breakpoints. Investigate before averaging.\n3. **Skipping browser rendering.** Source code values can be overridden by specificity, theme scopes, or runtime injection. Static analysis alone is incomplete.\n4. **Renaming without aliasing.** Changing `#165DFF` to `color-blue-500` is just a rename. The real value is mapping it to semantic roles that survive theme changes.\n5. **Mass-replacing the entire codebase.** Start with one representative page. Verify it handles all states and themes. Then expand.\n\n## References\n\n- `references/extraction-checklist.md` — Comprehensive token extraction checklist with evidence grading\n- `references/output-format.md` — Detailed specification for output file format and three-layer structure\n- `references/validation-checklist.md` — Post-generation validation steps and criteria\n- `references/common-pitfalls.md` — The five most common extraction mistakes and how to avoid them\n- `assets/style-skill-template/` — Template directory for generated style skills\n\nFile v0.1.0:README.md\n\n# Style Extractor\n\n从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统，封装为可复用的通用风格技能。\n\n## 核心特性\n\n- **三种输入源** — URL（自动抓取 CSS）、截图（多模态分析）、前端项目源码（解析 Tailwind/CSS/Theme）\n- **三层 Token 架构** — Primitive（原材料）→ Semantic（设计角色）→ Component（组件特化），解耦值与角色\n- **四级证据标注** — D（已定义）/ M（已测量）/ I（有依据归纳）/ A（暂时假设），每一条 token 都可追溯\n- **多运行模式** — 审计（只盘点）/ 设计（建三层）/ 打包（生成技能）/ 验证（8 项检查 + demo 页）\n- **通用输出格式** — 产出标准 WorkBuddy 风格技能，不限任何 AI 工具\n\n## 快速开始\n\n```\n/style-extractor https://linear.app\n/style-extractor ./my-nextjs-app\n/style-extractor screenshot.png\n```\n\n## 工作流\n\n| 阶段 | 模式 | 产物 |\n|---|---|---|\n| Phase 1 — 审计 | 审计模式 | 证据清单、原始值、冲突发现 |\n| Phase 2 — 设计 | 设计模式 | 三层 Token（Primitive → Semantic → Component） |\n| Phase 3 — 打包 | 生成模式 | 完整 WorkBuddy 风格技能 + 5 个参考文档 |\n| Phase 4 — 验证 | 验证模式 | 格式/引用/层级/主题 8 项检查 + 可选 demo 页 |\n\n## 输出技能结构\n\n```\nbrand-style-{name}/\n├── SKILL.md                    # 三层架构总览 + 快速参考\n└── references/\n    ├── colors.md               # Primitive 色阶 + Semantic 颜色角色 + 主题映射\n    ├── typography.md            # Primitive 字号阶梯 + Semantic 文字角色\n    ├── spacing.md               # Primitive 间距/圆角/阴影 + Semantic 布局角色\n    ├── components.md            # Component 层 + 组件指纹\n    └── known-gaps.md            # 来源冲突、待确认假设、设计例外、提取局限\n```\n\n## 内置参考\n\n- `references/extraction-checklist.md` — 带证据标注的完整提取清单\n- `references/output-format.md` — YAML + 三层 Token 输出格式规范\n- `references/validation-checklist.md` — 8 项后验证检查\n- `references/common-pitfalls.md` — 5 类常见翻车 + 避坑指南\n\n## 设计理念\n\n基于 [Kryon 的文章](https://mp.weixin.qq.com/s/SwzGgLLW9RC2fTDw1cWRZQ) 和 [skillui](https://www.npmjs.com/package/skillui) 的实践，融合了三层 Token 架构、证据分级系统和后验证闭环。\n\n**不要做的事**比**应该做什么**更有价值——详见 `references/common-pitfalls.md`。\n\n## 作者\n\n- **Author**: [namepain](https://github.com/namepain)\n- **GitHub**: https://github.com/namepain/style-extractor\n\nFile v0.1.0:_meta.json\n\n{\n  \"ownerId\": \"kn7dqfmkmy25x2hq1p4jt5kycd8c6bj3\",\n  \"slug\": \"style-extractor\",\n  \"version\": \"0.1.0\",\n  \"publishedAt\": 1786347750846\n}\n\nFile v0.1.0:references/common-pitfalls.md\n\n# Common Pitfalls in Design Token Extraction\n\nThese are the five most common mistakes when extracting design tokens from existing UI. Understanding them saves more time than any extraction technique.\n\n---\n\n## Pitfall 1: Treating Frequency as Design Intent\n\n**The mistake:** Counting occurrences — \"this value appears 47 times, it must be a token.\"\n\n**Why it's wrong:**\n- A value appearing 50 times may just be early copy-paste code replicated across the codebase\n- A value appearing once (e.g., brand title font, maximum page width, top-layer modal shadow) may be the most important design decision in the entire system\n- Frequency indicates \"where to look,\" not \"what matters\"\n\n**The fix:**\nFor each candidate value, ask:\n1. Does it express a stable design role (not an accident of history)?\n2. Would changing it break the design coherence?\n3. Should it change together with other instances?\n4. Does it need to vary by theme?\n\nA value that scores yes on 1-2 of these is a strong candidate. A value that scores yes on all four is a mandatory token.\n\n---\n\n## Pitfall 2: Force-Merging Near-Duplicates\n\n**The mistake:** Seeing 15px, 16px, 17px and averaging them to 16px to get a \"clean 4px scale.\"\n\n**Why it's wrong:**\n- 15px may be a button height constrained by the font's x-height\n- 16px may be a text size set by the design system's base unit\n- 17px may be a table row height with a 1px border compensation\n- Differences from font metrics, component sizing constraints, responsive scaling, or intentional optical adjustments are NOT drift — they serve a purpose\n\n**The fix:**\n1. List all \"near-duplicate\" values with their locations\n2. For each, determine whether the difference is intentional (font metrics, component identity, responsive) or accidental (copy-paste drift)\n3. Only merge values confirmed to be accidental drift\n4. For intentional differences, either keep separate tokens OR document as a known exception\n5. Never let \"looks nicer on a 4px grid\" override functional intent\n\n---\n\n## Pitfall 3: Skipping Browser Rendering\n\n**The mistake:** Running a global regex search for hex codes and pixel values, cataloging everything found in source files.\n\n**Why it's wrong:**\n- CSS specificity can override values declared in theme files\n- Theme scopes (`.dark`, `[data-brand=\"x\"]`) can remap variables at runtime\n- Third-party component libraries may inject their own styles that override yours\n- Media queries can change values at different viewports\n- Some CSS variables may reference other variables that resolve differently at runtime\n- Deprecated code may still exist in files but has no effect\n\n**The fix:**\nIf the project can run:\n1. Open key pages in a browser\n2. Inspect actual computed styles on real elements\n3. Check `getComputedStyle()` for final resolved values\n4. Note which theme variables are actually being consumed\n5. Flag values that exist in source but are overridden at runtime\n\nIf the project cannot run:\n1. Flag ALL values as grade I (inferred) or A (assumed)\n2. Document that browser verification was not possible\n3. Recommend the user spot-check a few values in their browser\n\n---\n\n## Pitfall 4: Renaming Without Aliasing\n\n**The mistake:** Replacing `#165DFF` with `--color-blue-500` and calling it done.\n\n**Why it's wrong:**\n- This is a rename, not a token extraction. The real value is not \"blue-500\" — it's \"this is the color that means primary action.\"\n- If the brand color changes from blue to purple next year, every component referencing `--color-blue-500` by name is now semantically wrong\n- The name `color-blue-500` tells you only the current value, not what design decision it represents\n\n**The fix:**\n1. Primitive tokens get descriptive names: `color.blue.500`\n2. Semantic tokens get role-based names: `color.action.primary`\n3. Components reference semantic tokens, not primitives\n4. When the brand color changes, only the semantic→primitive mapping changes — component code stays untouched\n\n**The alias relationship is the core value of token extraction.** Without it, you've just created a CSS variable dictionary. With it, you've created a design system.\n\n---\n\n## Pitfall 5: Mass-Replacing the Entire Codebase\n\n**The mistake:** Generating tokens, then doing a find-and-replace across all files.\n\n**Why it's wrong:**\n- You can't verify all states (hover, focus, active, disabled, loading, error, empty) at once\n- Naming disagreements surface as you replace — you'll find yourself arguing about whether a gray is \"secondary\" or \"tertiary\" while 47 new bugs appear\n- Some values are genuinely local and should NOT have been turned into tokens\n- Visual changes, naming debates, and historical exceptions all blend into one unmanageable diff\n\n**The fix:**\n1. Pick ONE representative page or component group\n2. Migrate it to tokens and verify ALL states (at least: default, hover, focus, active, disabled, empty, error, loading)\n3. Run visual regression — screenshot before and after\n4. If the page is stable, expand to the next batch\n5. Keep old variable → new token mappings so you can trace back any breakage\n6. Stop at any sign of unexpected visual change and investigate before continuing\n\n**Schedule:**\n- Batch 1: One representative page (proves the tokens work)\n- Batch 2: Foundation components (buttons, inputs, cards, navigation)\n- Batch 3: Remaining pages\n- Batch 4: Special cases and intentionally local exceptions\n\n---\n\n## Quick Self-Check Before Finalizing\n\nAsk these five questions before presenting extraction results:\n\n| # | Question | If No... |\n|---|----------|----------|\n| 1 | Are same-value tokens with different semantics separated? | You'll break theme switching |\n| 2 | Do semantic tokens reference primitives (not copy values)? | You've just renamed, not tokenized |\n| 3 | Are all assumed values (grade A) explicitly flagged? | You're presenting guesses as facts |\n| 4 | Could a new developer build a page using only semantic tokens? | Your semantic layer is incomplete |\n| 5 | Would theme switching change the right things and leave the rest alone? | Your semantic mappings are wrong |\n\nIf you can't answer yes to all five, go back and fix the extraction before packaging.\n\nFile v0.1.0:references/extraction-checklist.md\n\n# Extraction Checklist\n\nComprehensive checklist for extracting design tokens from any source. Each item should be tagged with an evidence grade and a target token layer.\n\n## Evidence Grades\n\n| Grade | Label | Meaning |\n|-------|-------|---------|\n| **D** | 已定义 (Defined) | Found in CSS variables, theme config, or design token files |\n| **M** | 已测量 (Measured) | Confirmed from source code or browser computed styles |\n| **I** | 有依据的归纳 (Inferred) | Reasonably deduced from patterns across multiple components |\n| **A** | 暂时假设 (Assumed) | Best guess; MUST be reviewed by user |\n\n## Token Layers\n\n| Layer | Purpose | Naming Rule |\n|-------|---------|-------------|\n| **Primitive** | Raw materials (color scales, spacing steps, font sizes) | Name what it IS: `color.blue.500`, `space.4`, `radius.md` |\n| **Semantic** | Design roles (backgrounds, text, actions, statuses) | Name what it DOES: `color.action.primary`, `color.bg.page` |\n| **Component** | Per-component overrides | Name what it's FOR: `button.primary.bg.default`, `input.border.focus` |\n\n## Colors\n\nFor each color discovered, record:\n\n- [ ] **Hex value** (e.g., `#3B82F6`) — include alpha channel if used (e.g., `#165DFF14`)\n- [ ] **Evidence grade:** D (from CSS variable) / M (from computed style) / I (from visual sampling) / A (assumed)\n- [ ] **Target layer:** Primitive (raw color) → Semantic (role) → Component (per-element)\n- [ ] **Current role(s):** What elements use this color (buttons, headings, backgrounds, borders, icons)\n- [ ] **Theme variation:** If source has light/dark mode, document both — different themes may map to the same primitive\n- [ ] **Same-value warning:** If this hex value also appears in a DIFFERENT semantic role, flag it — they must become separate semantic tokens\n\n### Extraction Methods by Source\n\n**URL:** Extract from CSS `color`, `background-color`, `border-color`, `--*` variables (D), Tailwind `bg-*`, `text-*` classes (D), computed styles (M)\n**Screenshot:** Identify dominant colors by visual sampling (I); accent, surface, and text colors are more reliable than subtle variations\n**Project:** Parse theme configs (D), CSS variables (D), design token JSON (D), SCSS `$variables` (D), computed styles from browser (M)\n\n### Three-Layer Organization\n\n```markdown\n## Primitive: Color Scales (evidence: D)\n\n| Token | Hex | Evidence | Notes |\n|-------|-----|----------|-------|\n| `color.blue.50` | `#E8F3FF` | D | Lightest blue |\n| `color.blue.100` | `#BEDAFF` | D | |\n| ... | | | |\n| `color.blue.500` | `#165DFF` | D | Default interaction blue |\n| `color.blue.600` | `#0E42D2` | D | Hover state |\n| ... | | | |\n| `color.blue.900` | `#001B4D` | D | Darkest blue |\n| `color.gray.50` | `#F7F8FA` | D | Lightest gray |\n| ... | | | |\n| `color.gray.900` | `#1D2129` | D | Darkest gray |\n\n## Semantic: Design Roles (evidence: I)\n\n| Token | Maps To | Light Theme | Dark Theme | Evidence |\n|-------|---------|-------------|------------|----------|\n| `color.action.primary` | `color.blue.500` | `#165DFF` | `#4080FF` | I |\n| `color.action.primary.hover` | `color.blue.400` | `#4080FF` | `#5C9DFF` | I |\n| `color.bg.page` | `color.gray.50` | `#F7F8FA` | `#17171A` | I |\n| `color.bg.surface` | white | `#FFFFFF` | `#232324` | I |\n| `color.text.primary` | `color.gray.900` | `#1D2129` | `rgba(255,255,255,.9)` | I |\n| `color.text.secondary` | `color.gray.600` | `#4E5969` | `rgba(255,255,255,.7)` | I |\n\n## Component: Per-Element Tokens (evidence: I)\n\n| Token | Maps To | Evidence |\n|-------|---------|----------|\n| `button.primary.bg.default` | `color.action.primary` | I |\n| `button.primary.bg.hover` | `color.action.primary.hover` | I |\n| `input.border.focus` | `color.action.primary` (20% alpha) | I |\n```\n\n## Typography\n\nFor each font/level, record:\n\n- [ ] **Evidence grade** — D (from theme config/CSS variable), M (from computed style), I (from visual), A (assumed)\n- [ ] **Font family** — Primary, secondary, monospace; note source (Google Fonts, system stack, `@font-face`)\n- [ ] **Size scale** — Document in rem with px fallback, note if rem base is 16px or other\n- [ ] **Weight usage pattern** — 400 for body, 500-600 for headings, 700+ for hero\n- [ ] **Line-height pattern** — Headings usually 1.1-1.3, body 1.5-1.6\n- [ ] **Letter-spacing** — Negative for large headings, normal for body\n\n### Three-Layer Organization\n\n```markdown\n## Primitive: Font Scale (evidence: D)\n\n| Token | Size | Evidence |\n|-------|------|----------|\n| `font.size.xs` | 12px / 0.75rem | D |\n| `font.size.sm` | 13px / 0.8125rem | D |\n| `font.size.base` | 14px / 0.875rem | D |\n| `font.size.lg` | 16px / 1rem | D |\n| `font.size.xl` | 20px / 1.25rem | D |\n| `font.size.2xl` | 24px / 1.5rem | D |\n| `font.size.3xl` | 30px / 1.875rem | D |\n| `font.weight.normal` | 400 | D |\n| `font.weight.medium` | 500 | D |\n| `font.weight.semibold` | 600 | D |\n| `font.weight.bold` | 700 | D |\n\n## Semantic: Text Roles (evidence: I)\n\n| Token | Font | Size | Weight | Line-Height | Evidence |\n|-------|------|------|--------|-------------|----------|\n| `text.heading.page` | primary | `font.size.3xl` | `font.weight.bold` | 1.2 | I |\n| `text.heading.section` | primary | `font.size.2xl` | `font.weight.semibold` | 1.3 | I |\n| `text.heading.card` | primary | `font.size.xl` | `font.weight.medium` | 1.3 | I |\n| `text.body` | primary | `font.size.base` | `font.weight.normal` | 1.5715 | I |\n| `text.body.small` | primary | `font.size.sm` | `font.weight.normal` | 1.5 | I |\n| `text.caption` | primary | `font.size.xs` | `font.weight.normal` | 1.4 | I |\n\n### Extraction Methods by Source\n\n**URL:** Extract from CSS `font-family`, `font-size`, `font-weight`, `line-height`, `letter-spacing`; Tailwind `text-*`, `font-*`; computed styles\n**Screenshot:** Identify font category (sans-serif/serif/mono), gauge size hierarchy visually (I/A grade)\n**Project:** Parse theme config `fontFamily`, `fontSize`; CSS variables; global defaults\n```\n\n## Spacing & Sizing\n\n- [ ] **Evidence grade** per value\n- [ ] **Base unit** — Usually 4px / 0.25rem; verify from the actual scale\n- [ ] **Spacing scale** — Values used for padding, margin, gap; note any gaps in the scale\n- [ ] **Border radius scale** — `none` / `sm` / `md` / `lg` / `full`; note which components use each\n- [ ] **Shadow scale** — Full CSS box-shadow strings; note color, offset, blur, spread, and opacity\n- [ ] **Z-index layers** — Page content, sticky headers, overlays, modals, tooltips, notifications\n- [ ] **Container widths** — Max-width for content containers\n- [ ] **Responsive breakpoints** — `sm` / `md` / `lg` / `xl` / `2xl` with actual px values\n\n### Three-Layer Organization\n\n```markdown\n## Primitive: Spacing Scale (evidence: D)\n\n| Token | Value | Evidence |\n|-------|-------|----------|\n| `space.0` | 0 | D |\n| `space.1` | 4px | D |\n| `space.2` | 8px | D |\n| `space.3` | 12px | D |\n| `space.4` | 16px | D |\n| `space.5` | 20px | D |\n| `space.6` | 24px | D |\n| `space.8` | 32px | D |\n| `space.12` | 48px | D |\n\n## Primitive: Radius Scale (evidence: D)\n\n| Token | Value | Evidence |\n|-------|-------|----------|\n| `radius.none` | 0 | D |\n| `radius.sm` | 2px | D |\n| `radius.md` | 4px | D |\n| `radius.lg` | 8px | D |\n| `radius.full` | 9999px | D |\n\n## Primitive: Shadow Scale (evidence: D)\n\n| Token | CSS | Evidence |\n|-------|-----|----------|\n| `shadow.sm` | `0 1px 2px 0 rgba(0,0,0,.06)` | D |\n| `shadow.md` | `0 4px 10px 0 rgba(0,0,0,.08)` | D |\n| `shadow.lg` | `0 8px 24px 0 rgba(0,0,0,.12)` | D |\n\n## Semantic: Layout Roles (evidence: I)\n\n| Token | Maps To | Evidence |\n|-------|---------|----------|\n| `space.container.padding` | `space.6` | I |\n| `space.section.gap` | `space.8` | I |\n| `shadow.overlay` | `shadow.lg` | I |\n```\n\n## Layout\n\n- [ ] **Layout mode** — Centered single-column, multi-column grid, full-width sections\n- [ ] **Grid system** — Column count, gap, responsive behavior\n- [ ] **Section patterns** — Hero, features, CTA, footer; note recurring structure\n- [ ] **Evidence grade** for layout patterns (usually I — inferred from observation)\n\n## Component Patterns\n\nFor each recurring component, record:\n\n- [ ] **Component name**\n- [ ] **Visual description** — 1-2 sentences\n- [ ] **Key CSS properties** — padding, border-radius, shadows, colors, typography\n- [ ] **Variants** — primary/secondary, sm/md/lg/hover/active/disabled/focus\n- [ ] **Token references** — Which semantic tokens this component uses\n- [ ] **Component tokens** — Only if the component has values that differ from semantic defaults\n- [ ] **Evidence grade** — Usually I (inferred from pattern repetition)\n- [ ] **Drift check** — Does the same component type appear with different values across pages?\n\n### Component Token Decision Flow\n\n```\nDoes the component value equal a semantic token?\n  YES → Use the semantic token directly. Do NOT create a component token.\n  NO  → Is this value unique to this component and stable across instances?\n           YES → Create a component token.\n           NO  → Investigate: is this component drift or a bug?\n```\n\n```yaml\nButton:\n  Variants:\n    Primary:\n      bg.default:   → color.action.primary        # semantic — no component token needed\n      bg.hover:     → color.action.primary.hover    # semantic — no component token needed\n      bg.active:    → color.action.primary.active   # semantic — no component token needed\n      bg.disabled:  → color.action.disabled          # semantic — no component token needed\n      text:         → color.text.on.action           # semantic — no component token needed\n      padding:      → space.2 space.4               # uses primitive directly (common pattern)\n      radius:       → radius.md                     # uses primitive directly\n      height:       32px                            # component token — unique to buttons\n    Secondary:\n      bg:           transparent\n      border:       → color.border.default\n      text:         → color.text.primary\n      height:       32px                            # component token — matches primary\n  Evidence: I\n  Drift check: Button height consistent across all pages? Non-standard sizes in modals?\n```\n\n## Interactions & Motion\n\n- [ ] **Hover states** — Color shift, scale, shadow change, underline animation; note duration\n- [ ] **Focus rings** — Color, width, offset; `:focus` vs `:focus-visible`\n- [ ] **Transitions** — Duration (ms), easing curves (ease, ease-in-out, custom cubic-bezier)\n- [ ] **Animations** — Keyframe names, duration, iteration\n- [ ] **Reduced motion** — Does the source provide `prefers-reduced-motion` alternatives?\n- [ ] **Evidence grade** — D (from CSS), M (from observed behavior), I (inferred)\n\n## Don't Forget\n\n### Same-Value / Different-Semantic Traps\n\nFor every color, ask: \"Could this same hex value mean different things in different contexts?\"\n\n| Value | Context A | Context B | Same Token? |\n|-------|-----------|-----------|-------------|\n| `#FFFFFF` | Page background (light theme) | Inverse text (dark theme) | **NO** — separate semantic tokens |\n| `#165DFF` | Primary button | Link text | **Maybe** — depends on whether they should always change together |\n| `#1D2129` | Primary text (light) | Page background (dark) | **NO** — different semantic roles |\n\n### Frequency ≠ Importance Checklist\n\nBefore upgrading a value to a token, ask:\n1. Does it appear across multiple pages/components? (if no → likely local exception)\n2. Would changing it break the design? (if no → low priority)\n3. Does it have a clear semantic role? (if no → may be accidental)\n4. Would it need to change with theme? (if yes → must be semantic token)\n5. Is it tied to a specific component's identity? (if yes → component token)\n\nFile v0.1.0:references/output-format.md\n\n# Output Format Specification\n\nSpecifies the exact format for each file in the generated style skill, using the three-layer token architecture.\n\n## SKILL.md\n\n### YAML Frontmatter (Machine-Parseable)\n\nEvery generated style skill MUST include a YAML frontmatter block with structured token data. This is for machine parsing AND human reading:\n\n```yaml\n---\nname: brand-style-{name}\ndescription: Reusable UI style skill extracted from {source}. Contains three-layer design tokens (P primitive + S semantic + C component) with evidence grading. Load this skill when generating UI matching the {name} visual language.\nversion: \"1.0\"\nsource: {url_or_path}\nsource_type: url | screenshot | project\nextracted_at: {ISO date}\nevidence_summary:\n  defined: {count}      # grade D\n  measured: {count}     # grade M\n  inferred: {count}     # grade I\n  assumed: {count}      # grade A\ntoken_summary:\n  primitive_colors: {count}\n  semantic_colors: {count}\n  component_colors: {count}\n  primitive_typography: {count}\n  semantic_typography: {count}\n  primitive_spacing: {count}\n  semantic_spacing: {count}\n  components: {count}\ntheme_support: none | light_dark | multi_brand\n---\n```\n\n### Body Structure\n\n```markdown\n# {Name} Design Style\n\n[2-4 sentence overview: aesthetic, key characteristics, source, extraction method, evidence quality.]\n\n## Token Architecture\n\nThis style uses a three-layer token system:\n\n| Layer | Purpose | Count | Example |\n|-------|---------|-------|---------|\n| **Primitive** | Raw design materials | {N} | `color.blue.500`, `space.4`, `radius.md` |\n| **Semantic** | Design roles | {N} | `color.action.primary`, `color.bg.surface` |\n| **Component** | Per-component overrides | {N} | `button.primary.bg.default` |\n\n## Quick Reference — CSS Variables\n\n```css\n:root {\n  /* Primitive */\n  --color-blue-500: #XXXXXX;\n  --space-4: 16px;\n  --radius-md: 4px;\n\n  /* Semantic */\n  --color-action-primary: var(--color-blue-500);\n  --color-bg-surface: #FFFFFF;\n  --color-text-primary: #XXXXXX;\n\n  /* Component */\n  --button-primary-bg-default: var(--color-action-primary);\n}\n```\n\n## Theme Mappings (if applicable)\n\n| Semantic Token | Light Theme | Dark Theme |\n|---------------|-------------|------------|\n| `color.bg.page` | `#F7F8FA` | `#17171A` |\n| `color.bg.surface` | `#FFFFFF` | `#232324` |\n| `color.text.primary` | `#1D2129` | `rgba(255,255,255,.9)` |\n\n> Note: `color.bg.surface` (light) and `color.text.on.action` (dark) both resolve to `#FFFFFF` but MUST remain separate semantic tokens — they serve different roles and change independently.\n\n## Using This Style\n\nTo generate UI matching this style:\n1. **Reference semantic tokens** in component code, not primitive values\n2. **Primitive tokens** are building materials — use only through semantic aliases\n3. **Component tokens** exist only where semantic defaults don't fit\n\n## References\n\n- `references/colors.md` — Primitive color scales + Semantic color roles + Theme mappings\n- `references/typography.md` — Primitive font scale + Semantic text roles\n- `references/spacing.md` — Primitive spacing/radius/shadow scales + Semantic layout roles\n- `references/components.md` — Component tokens, patterns, variants, and state mappings\n- `references/known-gaps.md` — Unresolved discrepancies, exceptions, and assumptions needing review\n```\n\n## references/colors.md\n\nMUST use three-layer structure with evidence column:\n\n```markdown\n# Color Palette — {Name}\n\n> Extracted from: {source} | Evidence quality: {high/medium/low based on D+M vs I+A ratio}\n\n## Primitive: Color Scales\n\n### Blue Scale\n| Token | Hex | Evidence | Notes |\n|-------|-----|----------|-------|\n| `color.blue.50` | `#E8F3FF` | D | Lightest |\n| `color.blue.500` | `#165DFF` | D | Default interaction |\n| `color.blue.900` | `#001B4D` | D | Darkest |\n\n### Neutral/Gray Scale\n| Token | Hex | Evidence | Notes |\n|-------|-----|----------|-------|\n| `color.gray.50` | `#F7F8FA` | D | Lightest |\n| `color.gray.500` | `#86909C` | D | Mid-gray |\n| `color.gray.900` | `#1D2129` | D | Near-black |\n\n### Additional Color Scales\n[Red, Green, Yellow, Orange, Purple, etc. — same format]\n\n## Semantic: Design Roles\n\n| Token | Maps To | Light Theme | Dark Theme | Evidence | Notes |\n|-------|---------|-------------|------------|----------|-------|\n| `color.action.primary` | `color.blue.500` | `#165DFF` | `#4080FF` | I | Buttons, links, focus rings |\n| `color.action.primary.hover` | `color.blue.400` | `#4080FF` | `#5C9DFF` | I | Hover state |\n| `color.action.primary.active` | `color.blue.600` | `#0E42D2` | `#2B6AE6` | I | Active/pressed state |\n| `color.action.primary.disabled` | `color.blue.200` | `#BEDAFF` | `#4A6FA5` | I | Disabled state |\n| `color.bg.page` | `color.gray.50` | `#F7F8FA` | `#17171A` | I | Page background |\n| `color.bg.surface` | white | `#FFFFFF` | `#232324` | I | Card/panel background |\n| `color.bg.surface.hover` | `color.gray.50` | `#F7F8FA` | `#2B2B2D` | I | Hovered surface |\n| `color.text.primary` | `color.gray.900` | `#1D2129` | `rgba(255,255,255,.9)` | I | Headings, body |\n| `color.text.secondary` | `color.gray.600` | `#4E5969` | `rgba(255,255,255,.7)` | I | Captions, descriptions |\n| `color.text.tertiary` | `color.gray.500` | `#86909C` | `rgba(255,255,255,.5)` | I | Placeholders, hints |\n| `color.text.disabled` | `color.gray.400` | `#C9CDD4` | `rgba(255,255,255,.3)` | I | Disabled text |\n| `color.text.on.action` | white | `#FFFFFF` | `#FFFFFF` | I | Text on primary buttons |\n| `color.border.default` | `color.gray.200` | `#E5E6EB` | `#353537` | I | Default borders |\n| `color.status.success` | `color.green.500` | `#00B42A` | `#27C346` | I | Success |\n| `color.status.warning` | `color.orange.500` | `#FF7D00` | `#FF9A2E` | I | Warning |\n| `color.status.danger` | `color.red.500` | `#F53F3F` | `#F76560` | I | Error/danger |\n| `color.status.info` | `color.blue.500` | `#165DFF` | `#4080FF` | I | Informational |\n\n### Same-Value / Different-Semantic Alerts\n\n| Value | Token A | Token B | Why Separate |\n|-------|---------|---------|-------------|\n| `#FFFFFF` | `color.bg.surface` (light) | `color.text.on.action` (both) | Different roles, change independently with theme |\n\n## Component: Per-Element Tokens\n\n| Token | Maps To | Evidence | Notes |\n|-------|---------|----------|-------|\n| `button.primary.bg.default` | `color.action.primary` | I | |\n| `button.primary.bg.hover` | `color.action.primary.hover` | I | |\n| `input.border.focus` | `color.action.primary` (20% alpha) | I | |\n\n> Only tokens that genuinely differ from semantic defaults are listed here.\n> Components that use semantic tokens directly (e.g., buttons using `color.action.primary`) are documented in components.md, not re-declared here.\n\n## CSS Variables\n\n```css\n:root {\n  /* === Primitive: Color Scales === */\n  --color-blue-50: #E8F3FF;\n  /* ... all primitives ... */\n\n  /* === Semantic: Design Roles === */\n  --color-action-primary: var(--color-blue-500);\n  --color-bg-page: var(--color-gray-50);\n  --color-bg-surface: #FFFFFF;\n  --color-text-primary: var(--color-gray-900);\n  /* ... all semantics ... */\n\n  /* === Dark Theme Overrides === */\n  [data-theme=\"dark\"] {\n    --color-action-primary: #4080FF;\n    --color-bg-page: #17171A;\n    --color-bg-surface: #232324;\n    --color-text-primary: rgba(255, 255, 255, 0.9);\n    /* ... all overrides ... */\n  }\n}\n```\n```\n\n## references/typography.md\n\n```markdown\n# Typography — {Name}\n\n> Extracted from: {source} | Evidence quality: {level}\n\n## Primitive: Font Scale\n\n### Font Families\n| Token | Stack | Evidence | Notes |\n|-------|-------|----------|-------|\n| `font.family.primary` | `Inter, -apple-system, ...` | D | UI text |\n| `font.family.mono` | `Menlo, Consolas, monospace` | D | Code |\n\n### Size Scale\n| Token | Size | Evidence |\n|-------|------|----------|\n| `font.size.xs` | 12px / 0.75rem | D |\n| `font.size.sm` | 13px / 0.8125rem | D |\n| `font.size.base` | 14px / 0.875rem | D |\n| `font.size.lg` | 16px / 1rem | D |\n| `font.size.xl` | 20px / 1.25rem | D |\n| `font.size.2xl` | 24px / 1.5rem | D |\n| `font.size.3xl` | 30px / 1.875rem | D |\n\n### Weight Scale\n| Token | Weight | Evidence |\n|-------|--------|----------|\n| `font.weight.normal` | 400 | D |\n| `font.weight.medium` | 500 | D |\n| `font.weight.semibold` | 600 | D |\n| `font.weight.bold` | 700 | D |\n\n### Line Height Scale\n| Token | Value | Evidence |\n|-------|-------|----------|\n| `font.leading.tight` | 1.2 | D |\n| `font.leading.normal` | 1.5715 | D |\n| `font.leading.relaxed` | 1.8 | D |\n\n## Semantic: Text Roles\n\n| Token | Family | Size | Weight | Leading | Evidence | Usage |\n|-------|--------|------|--------|---------|----------|-------|\n| `text.heading.page` | primary | `font.size.3xl` | `font.weight.bold` | `font.leading.tight` | I | Page titles |\n| `text.heading.section` | primary | `font.size.2xl` | `font.weight.semibold` | 1.3 | I | Section headings |\n| `text.heading.card` | primary | `font.size.xl` | `font.weight.medium` | 1.3 | I | Card titles |\n| `text.body` | primary | `font.size.base` | `font.weight.normal` | `font.leading.normal` | I | Body text |\n| `text.body.small` | primary | `font.size.sm` | `font.weight.normal` | 1.5 | I | Secondary text |\n| `text.caption` | primary | `font.size.xs` | `font.weight.normal` | 1.4 | I | Captions, meta |\n| `text.code` | mono | `font.size.sm` | `font.weight.normal` | 1.5 | I | Code blocks |\n\n## CSS Variables\n\n```css\n:root {\n  --font-family-primary: Inter, -apple-system, ...;\n  --font-size-base: 14px;\n  --text-heading-page: 700 30px/1.2 var(--font-family-primary);\n}\n```\n```\n\n## references/spacing.md\n\n```markdown\n# Spacing & Sizing — {Name}\n\n> Extracted from: {source} | Evidence quality: {level}\n\n## Primitive: Spacing Scale\n\n| Token | px | rem | Evidence |\n|-------|----|-----|----------|\n| `space.0` | 0 | 0 | D |\n| `space.1` | 4px | 0.25rem | D |\n| `space.2` | 8px | 0.5rem | D |\n| `space.3` | 12px | 0.75rem | D |\n| `space.4` | 16px | 1rem | D |\n| `space.5` | 20px | 1.25rem | D |\n| `space.6` | 24px | 1.5rem | D |\n| ... | | | |\n\n## Primitive: Radius Scale\n| Token | Value | Evidence |\n|-------|-------|----------|\n| `radius.none` | 0 | D |\n| `radius.sm` | 2px | D |\n| `radius.md` | 4px | D |\n| `radius.lg` | 8px | D |\n| `radius.full` | 9999px | D |\n\n## Primitive: Shadow Scale\n| Token | CSS Box-Shadow | Evidence |\n|-------|---------------|----------|\n| `shadow.none` | `none` | D |\n| `shadow.sm` | `0 1px 2px 0 rgba(0,0,0,.06)` | D |\n| `shadow.md` | `0 4px 10px 0 rgba(0,0,0,.08)` | D |\n| `shadow.lg` | `0 8px 24px 0 rgba(0,0,0,.12)` | D |\n\n## Primitive: Z-Index Scale\n| Token | Value | Evidence |\n|-------|-------|----------|\n| `z.base` | 0 | D |\n| `z.dropdown` | 1000 | D |\n| `z.sticky` | 1100 | D |\n| `z.modal` | 1300 | D |\n| `z.notification` | 1500 | D |\n\n## Semantic: Layout Roles\n\n| Token | Maps To | Evidence |\n|-------|---------|----------|\n| `space.container.padding` | `space.6` | I |\n| `space.section.gap` | `space.8` | I |\n| `space.card.padding` | `space.6` | I |\n| `shadow.card` | `shadow.sm` | I |\n| `shadow.overlay` | `shadow.lg` | I |\n\n## Container Widths & Breakpoints\n\n| Token | Value | Evidence |\n|-------|-------|----------|\n| `container.xs` | 480px | D |\n| `container.sm` | 640px | D |\n| `container.md` | 768px | D |\n| `container.lg` | 1024px | D |\n| `container.xl` | 1280px | D |\n| `breakpoint.sm` | 640px | D |\n| `breakpoint.md` | 768px | D |\n| `breakpoint.lg` | 1024px | D |\n| `breakpoint.xl` | 1280px | D |\n\n## CSS Variables\n\n```css\n:root {\n  --space-4: 16px;\n  --radius-md: 4px;\n  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.06);\n  --container-padding: var(--space-6);\n}\n```\n```\n\n## references/components.md\n\n```markdown\n# Component Patterns — {Name}\n\n> Extracted from: {source} | Evidence quality: {level}\n\nEach component documents: visual description, token references, variants, states, and evidence grade.\n\n## Button\n\n**Description:** [1-2 sentences describing the visual appearance]\n\n### Token References\n| Property | Value | Evidence |\n|----------|-------|----------|\n| Height (default) | 32px | I |\n| Height (small) | 28px | I |\n| Height (large) | 36px | I |\n| Padding (default) | `space.2` `space.4` | I |\n| Border Radius | `radius.sm` | I |\n| Font Size | `font.size.base` | I |\n| Font Weight | `font.weight.normal` | I |\n\n### Variants\n\n#### Primary (Solid)\n| State | Background | Text | Border | Evidence |\n|-------|-----------|------|--------|----------|\n| Default | `color.action.primary` | `color.text.on.action` | transparent | I |\n| Hover | `color.action.primary.hover` | `color.text.on.action` | transparent | I |\n| Active | `color.action.primary.active` | `color.text.on.action` | transparent | I |\n| Focus | `color.action.primary` | `color.text.on.action` | `color.action.primary` (ring) | I |\n| Disabled | `color.action.primary.disabled` | `color.text.on.action` (50% opacity) | transparent | I |\n\n#### Secondary (Outlined)\n| State | Background | Text | Border | Evidence |\n|-------|-----------|------|--------|----------|\n| Default | transparent | `color.text.primary` | `color.border.default` | I |\n| Hover | `color.bg.surface.hover` | `color.action.primary` | `color.action.primary` | I |\n| ... | | | | |\n\n### Component Tokens\n| Token | Value | Evidence |\n|-------|-------|----------|\n| `button.height.default` | 32px | I |\n| `button.height.small` | 28px | I |\n| `button.height.large` | 36px | I |\n\n> Other properties use semantic tokens directly — no component token needed.\n```\n\n## references/known-gaps.md\n\n```markdown\n# Known Gaps & Exceptions — {Name}\n\n> All unresolved discrepancies, assumptions needing review, and deliberate exceptions.\n\n## Source Conflicts\n\n| Issue | Source A | Source B | Resolution | Impact |\n|-------|----------|----------|------------|--------|\n| Font family | Docs: Nunito | Code: Inter | Used code (Inter) | Typography section |\n\n## Unconfirmed Assumptions\n\n| Token | Assumption | Reason | Action Needed |\n|-------|-----------|--------|---------------|\n| `color.blue.700-900` | Extrapolated from gradient | Only 50-600 found in source | Review against brand guidelines |\n\n## Deliberate Exceptions\n\n| Value | Location | Why Not a Token |\n|-------|----------|-----------------|\n| `#FF6B6B` | Hero gradient overlay | One-off decorative; doesn't repeat elsewhere |\n```\n\nFile v0.1.0:references/validation-checklist.md\n\n# Post-Generation Validation Checklist\n\nAfter generating the output style skill, run these validations before presenting results to the user.\n\n## 1. Format Validation\n\n- [ ] **YAML frontmatter parses cleanly** — no syntax errors in the SKILL.md YAML block\n- [ ] **All required fields present:** `name`, `description`, `version`, `source`, `source_type`, `extracted_at`, `evidence_summary`, `token_summary`\n- [ ] **Evidence counts are integers** and sum matches the actual token counts\n- [ ] **Token counts are integers** and match the actual number of tokens in each layer\n\n## 2. Token Reference Validation\n\n- [ ] **Every `{colors.xxx}` reference resolves** to a defined token in colors.md\n- [ ] **Every `{typography.xxx}` reference resolves** to a defined token in typography.md\n- [ ] **Every `{spacing.xxx}` / `{shadow.xxx}` / `{radius.xxx}` reference resolves**\n- [ ] **No dangling references** — no token references that point to undefined tokens\n- [ ] **No circular references** — tokens that reference each other in a loop (e.g., `A→B→A`)\n\n## 3. Color Value Validation\n\n- [ ] **All hex values are valid** (3, 6, or 8 hex digits, with or without `#`)\n- [ ] **All alpha values are in valid range** (0–1 or 0%–100% or valid hex alpha)\n- [ ] **No obviously wrong colors** — e.g., pure black/white that should be near-black/near-white\n- [ ] **Dark theme values don't accidentally use light theme hex codes** (common pitfall)\n\n## 4. Layer Consistency Validation\n\n- [ ] **Every semantic token references a primitive token** (not a raw hex value or another semantic)\n- [ ] **Every component token references a semantic token** (not a raw value or primitive directly)\n- [ ] **No component token duplicates a semantic token** — if `card.bg` = `color.bg.surface`, card should just use the semantic token\n- [ ] **Same-value/different-semantic pairs are separated** — e.g., `#FFFFFF` as page background AND inverse text are two different semantic tokens\n- [ ] **Primitive tokens are named by what they ARE** (not where they're used) — `color.blue.500`, not `color.button`\n\n## 5. Cross-Contamination Check\n\n- [ ] **No tokens or brand names from other design systems** — no Material Design color names, no Tailwind default names, no Ant Design tokens\n- [ ] **No \"Lorem ipsum\" or placeholder values** left in the output\n- [ ] **No references to internal paths** from the extraction machine\n\n## 6. Section Completeness\n\n- [ ] **SKILL.md:** Token Architecture table, Quick Reference CSS block, Theme Mappings (if dark mode), References list\n- [ ] **colors.md:** Primitive scales + Semantic roles + Component tokens + Same-value alerts + CSS variables\n- [ ] **typography.md:** Primitive families/sizes/weights + Semantic text roles + CSS variables\n- [ ] **spacing.md:** Primitive spacing/radius/shadow/z-index scales + Semantic layout roles + Breakpoints + CSS variables\n- [ ] **components.md:** Each component has variants, states, token references, and evidence grades\n- [ ] **known-gaps.md:** Exists and is not empty (at minimum, state \"No unresolved gaps found\")\n\n## 7. Theme Validation (if applicable)\n\n- [ ] **Light and dark theme mappings are defined** for all semantic tokens\n- [ ] **Same-value traps are documented** — tokens with identical values in light theme but different dark theme mappings\n- [ ] **Theme switching doesn't break semantic relationships** — a token that's \"primary action\" in light stays \"primary action\" in dark\n\n## 8. Demo Page Validation (Optional but Recommended)\n\nGenerate a demo HTML page that exercises the tokens:\n\n- [ ] **Page renders without errors** in a browser\n- [ ] **All semantic color roles appear** — backgrounds, surfaces, text levels, actions, statuses\n- [ ] **Typography hierarchy is visible** — headings through captions all present and correct\n- [ ] **Component demos cover all variants and states** — buttons (all variants × all states), inputs, cards, etc.\n- [ ] **Visual output matches the source's aesthetic** — if it looks completely different, the extraction has errors\n- [ ] **Dark mode toggle works** (if applicable) and all colors shift correctly\n\n## Validation Report Template\n\nAfter running validations, output:\n\n```\n## Validation Report: brand-style-{name}\n\n**Format:** ✅ YAML parses / ⚠️ {issue}\n**References:** ✅ {N} references all resolve / ⚠️ {dangling tokens}\n**Colors:** ✅ {N} hex values valid / ⚠️ {invalid values}\n**Layers:** ✅ Primitive→Semantic→Component chain intact / ⚠️ {breaks}\n**Contamination:** ✅ No foreign design system tokens / ⚠️ {foreign tokens}\n**Sections:** ✅ All {N} sections present / ⚠️ {missing sections}\n**Theme:** ✅ {N} theme mappings complete / ⚠️ {gaps}\n\n**Files:** {path} — {lines} lines\n**Tokens:** {P} primitive + {S} semantic + {C} component = {total} total\n**Evidence:** {D} defined + {M} measured + {I} inferred + {A} assumed\n**Known Gaps:** {count} items → see references/known-gaps.md\n```\n\nFile v0.1.0:skill-card.md\n\n## Description:\n\nExtracts UI visual style from URLs, screenshots, or frontend project source, builds a three-layer design-token system, and packages it as a reusable WorkBuddy style skill.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[namepain](https://clawhub.ai/user/namepain)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and designers use this skill to audit UI style from URLs, screenshots, or frontend source, derive evidence-graded design tokens, and generate reusable WorkBuddy style skills for consistent UI generation.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: URL mode can fetch arbitrary pages and linked CSS without clear network-safety limits.\n\nMitigation: Use trusted public URLs only; avoid internal services, localhost, cloud metadata endpoints, and admin pages.\n\nRisk: Project-source mode may process repositories containing secrets or private code.\n\nMitigation: Run only on sandboxed projects that have been reviewed for secrets and sensitive files.\n\nRisk: Screenshot and static extraction can produce inferred or assumed token values.\n\nMitigation: Review evidence grades and verify assumptions before using generated style skills in production.\n\n## Reference(s):\n\n- [Server-resolved GitHub provenance](https://github.com/namepain/style-extractor)\n- [ClawHub skill page](https://clawhub.ai/namepain/skills/style-extractor)\n- [Kryon design-token article](https://mp.weixin.qq.com/s/SwzGgLLW9RC2fTDw1cWRZQ)\n- [skillui package](https://www.npmjs.com/package/skillui)\n- [Extraction checklist](artifact/references/extraction-checklist.md)\n- [Output format specification](artifact/references/output-format.md)\n- [Validation checklist](artifact/references/validation-checklist.md)\n- [Common pitfalls](artifact/references/common-pitfalls.md)\n\n## Skill Output:\n\n**Output Type(s):** [Markdown, Code, Configuration, Guidance, Files]\n\n**Output Format:** [Markdown files with YAML frontmatter and structured design-token tables]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Outputs preserve evidence grades for extracted tokens and identify assumptions for review.]\n\n## Skill Version(s):\n\n0.1.0 (source: server release metadata; artifact frontmatter lists 2.0.0)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.","readmeExcerpt":"Skill: style-extractor Owner: namepain Summary: 从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。 Tags: latest:0.1.0 Version history: v0.1.0 | 2026-08-10T07:42:30.846Z | auto Style Extractor 2.0.0 introduces a comprehensive design token extraction and packaging pipeline for web projects, images, and codebases. - Extracts full UI design systems from URLs, scr","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"Primitive (原材料)    →  color.blue.600, space.4, radius.md, font.size.lg\n                            ↑ reference only — do not use in components directly\nSemantic (设计角色)   →  color.action.primary, color.bg.surface, space.container.padding\n                            ↑ components use these\nComponent (组件特化)  →  button.primary.bg.default, input.border.focus, dialog.shadow\n                            ↑ only when semantic tokens are insufficient"},{"language":"text","snippet":"color.blue.50  → #E8F3FF    color.blue.500  → #165DFF    color.blue.900  → #001B4D\ncolor.gray.50  → #F7F8FA    color.gray.500  → #86909C    color.gray.900  → #1D2129\nspace.1  → 4px    space.2  → 8px    space.4  → 16px    space.6  → 24px\nradius.sm → 2px  radius.md → 4px   radius.lg → 8px\nfont.size.sm → 12px   font.size.base → 14px   font.size.lg → 16px"},{"language":"text","snippet":"color.action.primary      → color.blue.500\ncolor.action.primary.hover → color.blue.400\ncolor.bg.page             → color.gray.50 (light) / color.gray.900 (dark)\ncolor.bg.surface          → white (light) / color.gray.800 (dark)\ncolor.text.primary        → color.gray.900 (light) / white (dark)\ncolor.text.secondary      → color.gray.500\ncolor.border.default      → color.gray.200\nspace.container.padding   → space.6\nshadow.overlay            → {specific shadow}"},{"language":"text","snippet":"button.primary.bg.default  → color.action.primary\nbutton.primary.bg.hover    → color.action.primary.hover\ninput.border.focus         → color.action.primary (with alpha)\ndialog.shadow              → shadow.overlay\ntable.row.height.compact   → 36px"},{"language":"text","snippet":"brand-style-{name}/\n├── SKILL.md                       # YAML frontmatter + three-layer overview + quick reference\n├── references/\n│   ├── colors.md                  # Primitive color scales + Semantic color roles + theme mappings\n│   ├── typography.md              # Primitive font scale + Semantic text roles\n│   ├── spacing.md                 # Primitive spacing/radius/shadow scales + Semantic layout tokens\n│   ├── components.md              # Component tokens and patterns\n│   └── known-gaps.md              # Unresolved discrepancies, exceptions, assumptions"},{"language":"text","snippet":"/style-extractor https://linear.app\n/style-extractor ./my-nextjs-app\n/style-extractor screenshot.png"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: style-extractor\nversion: 2.0.0\ntitle: \"Style Extractor — UI 视觉风格提取与 Design Token 系统构建\"\ndescription: \"从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。\"\nauthor: namepain\ntype: command\ncategory: development\ntags:\n  - ui\n  - design-system\n  - design-tokens\n  - css\n  - visual-style\ninvocation: \"/style-extractor\"\ndifficulty: intermediate\npermissions:\n  read:\n    - project files\n    - web pages\n  write:\n    - project files\n  network: required\nexamples:\n  - input: \"/style-extractor https://linear.app 的设计风格\"\n    output: \"抓取页面 CSS → 提取设计变量 → 生成三层 Token → 封装 brand-style-linear 技能\"\n  - input: \"/style-extractor 这张截图里的 UI 风格给我封装成 skill\"\n    output: \"多模态分析截图 → 推断配色/排版/间距 → 标志为证据 A 级 → 生成技能供用户确认\"\n  - input: \"/style-extractor ./my-nextjs-app 的 tailwind 主题\"\n    output: \"扫描 tailwind.config + globals.css → 提取 Primitive 色阶/Semantic 角色 → 生成品牌技能\"\nagent_created: true\n---\n\n# Style Extractor\n\nExtract a complete design system from any web page, image, or codebase and package it as a reusable WorkBuddy style skill.\n\n## Overview\n\nThis skill provides a multi-phase pipeline with optional mode splitting:\n\n| Phase | Mode | Output |\n|-------|------|--------|\n| Phase 1 — Audit | Audit-only mode | Evidence inventory, raw values, duplicates, drift, exceptions |\n| Phase 2 — Design | Design mode | Three-layer tokens (Primitive → Semantic → Component), naming, theme mappings |\n| Phase 3 — Package | Generate mode | Complete WorkBuddy style skill with all references |\n| Phase 4 — Verify | Verify mode | Format, reference, theme, and state validation + optional demo page |\n\nBy default, run all phases. The user can request audit-only, design-only, or verify-only mode.\n\n## Core Principles\n\n### Evidence Grading\n\nEvery extracted value MUST be tagged with one of four evidence levels:\n\n| Grade | Label | Meaning |\n|-------|-------|---------|\n| **D** | 已定义 (Defined) | Found in existing CSS variables, theme config, or design token files |\n| **M** | 已测量 (Measured) | Confirmed from source code references, browser computed styles, or rendered output |\n| **I** | 有依据的归纳 (Inferred) | Reasonably deduced from repeated patterns across multiple pages/components |\n| **A** | 暂时假设 (Assumed) | Best guess based on limited data; MUST be explicitly flagged for user review |\n\nNever present an assumed value as a confirmed fact. The evidence grade determines how aggressively the token can be used in migration.\n\n### Three-Layer Token Architecture\n\nTokens are organized into three layers, NOT a flat list:\n\n```\nPrimitive (原材料)    →  color.blue.600, space.4, radius.md, font.size.lg\n                            ↑ reference only — do not use in components directly\nSemantic (设计角色)   →  color.action.primary, color.bg.surface, space.container.padding\n                            ↑ components use these\nComponent (组件特化)  →  button.primary.bg.default, input.border.focus, dialog.shadow\n                            ↑ only when semantic tokens are insufficient\n```\n\n*"},{"path":"README.md","content":"# Style Extractor\n\n从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统，封装为可复用的通用风格技能。\n\n## 核心特性\n\n- **三种输入源** — URL（自动抓取 CSS）、截图（多模态分析）、前端项目源码（解析 Tailwind/CSS/Theme）\n- **三层 Token 架构** — Primitive（原材料）→ Semantic（设计角色）→ Component（组件特化），解耦值与角色\n- **四级证据标注** — D（已定义）/ M（已测量）/ I（有依据归纳）/ A（暂时假设），每一条 token 都可追溯\n- **多运行模式** — 审计（只盘点）/ 设计（建三层）/ 打包（生成技能）/ 验证（8 项检查 + demo 页）\n- **通用输出格式** — 产出标准 WorkBuddy 风格技能，不限任何 AI 工具\n\n## 快速开始\n\n```\n/style-extractor https://linear.app\n/style-extractor ./my-nextjs-app\n/style-extractor screenshot.png\n```\n\n## 工作流\n\n| 阶段 | 模式 | 产物 |\n|---|---|---|\n| Phase 1 — 审计 | 审计模式 | 证据清单、原始值、冲突发现 |\n| Phase 2 — 设计 | 设计模式 | 三层 Token（Primitive → Semantic → Component） |\n| Phase 3 — 打包 | 生成模式 | 完整 WorkBuddy 风格技能 + 5 个参考文档 |\n| Phase 4 — 验证 | 验证模式 | 格式/引用/层级/主题 8 项检查 + 可选 demo 页 |\n\n## 输出技能结构\n\n```\nbrand-style-{name}/\n├── SKILL.md                    # 三层架构总览 + 快速参考\n└── references/\n    ├── colors.md               # Primitive 色阶 + Semantic 颜色角色 + 主题映射\n    ├── typography.md            # Primitive 字号阶梯 + Semantic 文字角色\n    ├── spacing.md               # Primitive 间距/圆角/阴影 + Semantic 布局角色\n    ├── components.md            # Component 层 + 组件指纹\n    └── known-gaps.md            # 来源冲突、待确认假设、设计例外、提取局限\n```\n\n## 内置参考\n\n- `references/extraction-checklist.md` — 带证据标注的完整提取清单\n- `references/output-format.md` — YAML + 三层 Token 输出格式规范\n- `references/validation-checklist.md` — 8 项后验证检查\n- `references/common-pitfalls.md` — 5 类常见翻车 + 避坑指南\n\n## 设计理念\n\n基于 [Kryon 的文章](https://mp.weixin.qq.com/s/SwzGgLLW9RC2fTDw1cWRZQ) 和 [skillui](https://www.npmjs.com/package/skillui) 的实践，融合了三层 Token 架构、证据分级系统和后验证闭环。\n\n**不要做的事**比**应该做什么**更有价值——详见 `references/common-pitfalls.md`。\n\n## 作者\n\n- **Author**: [namepain](https://github.com/namepain)\n- **GitHub**: https://github.com/namepain/style-extractor"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7dqfmkmy25x2hq1p4jt5kycd8c6bj3\",\n  \"slug\": \"style-extractor\",\n  \"version\": \"0.1.0\",\n  \"publishedAt\": 1786347750846\n}"},{"path":"references/common-pitfalls.md","content":"# Common Pitfalls in Design Token Extraction\n\nThese are the five most common mistakes when extracting design tokens from existing UI. Understanding them saves more time than any extraction technique.\n\n---\n\n## Pitfall 1: Treating Frequency as Design Intent\n\n**The mistake:** Counting occurrences — \"this value appears 47 times, it must be a token.\"\n\n**Why it's wrong:**\n- A value appearing 50 times may just be early copy-paste code replicated across the codebase\n- A value appearing once (e.g., brand title font, maximum page width, top-layer modal shadow) may be the most important design decision in the entire system\n- Frequency indicates \"where to look,\" not \"what matters\"\n\n**The fix:**\nFor each candidate value, ask:\n1. Does it express a stable design role (not an accident of history)?\n2. Would changing it break the design coherence?\n3. Should it change together with other instances?\n4. Does it need to vary by theme?\n\nA value that scores yes on 1-2 of these is a strong candidate. A value that scores yes on all four is a mandatory token.\n\n---\n\n## Pitfall 2: Force-Merging Near-Duplicates\n\n**The mistake:** Seeing 15px, 16px, 17px and averaging them to 16px to get a \"clean 4px scale.\"\n\n**Why it's wrong:**\n- 15px may be a button height constrained by the font's x-height\n- 16px may be a text size set by the design system's base unit\n- 17px may be a table row height with a 1px border compensation\n- Differences from font metrics, component sizing constraints, responsive scaling, or intentional optical adjustments are NOT drift — they serve a purpose\n\n**The fix:**\n1. List all \"near-duplicate\" values with their locations\n2. For each, determine whether the difference is intentional (font metrics, component identity, responsive) or accidental (copy-paste drift)\n3. Only merge values confirmed to be accidental drift\n4. For intentional differences, either keep separate tokens OR document as a known exception\n5. Never let \"looks nicer on a 4px grid\" override functional intent\n\n---\n\n## Pitfall 3: Skipping Browser Rendering\n\n**The mistake:** Running a global regex search for hex codes and pixel values, cataloging everything found in source files.\n\n**Why it's wrong:**\n- CSS specificity can override values declared in theme files\n- Theme scopes (`.dark`, `[data-brand=\"x\"]`) can remap variables at runtime\n- Third-party component libraries may inject their own styles that override yours\n- Media queries can change values at different viewports\n- Some CSS variables may reference other variables that resolve differently at runtime\n- Deprecated code may still exist in files but has no effect\n\n**The fix:**\nIf the project can run:\n1. Open key pages in a browser\n2. Inspect actual computed styles on real elements\n3. Check `getComputedStyle()` for final resolved values\n4. Note which theme variables are actually being consumed\n5. Flag values that exist in source but are overridden at runtime\n\nIf the project cannot run:\n1. Flag ALL values as grade I (inferred) or A (assumed)\n2. Docu"},{"path":"references/extraction-checklist.md","content":"# Extraction Checklist\n\nComprehensive checklist for extracting design tokens from any source. Each item should be tagged with an evidence grade and a target token layer.\n\n## Evidence Grades\n\n| Grade | Label | Meaning |\n|-------|-------|---------|\n| **D** | 已定义 (Defined) | Found in CSS variables, theme config, or design token files |\n| **M** | 已测量 (Measured) | Confirmed from source code or browser computed styles |\n| **I** | 有依据的归纳 (Inferred) | Reasonably deduced from patterns across multiple components |\n| **A** | 暂时假设 (Assumed) | Best guess; MUST be reviewed by user |\n\n## Token Layers\n\n| Layer | Purpose | Naming Rule |\n|-------|---------|-------------|\n| **Primitive** | Raw materials (color scales, spacing steps, font sizes) | Name what it IS: `color.blue.500`, `space.4`, `radius.md` |\n| **Semantic** | Design roles (backgrounds, text, actions, statuses) | Name what it DOES: `color.action.primary`, `color.bg.page` |\n| **Component** | Per-component overrides | Name what it's FOR: `button.primary.bg.default`, `input.border.focus` |\n\n## Colors\n\nFor each color discovered, record:\n\n- [ ] **Hex value** (e.g., `#3B82F6`) — include alpha channel if used (e.g., `#165DFF14`)\n- [ ] **Evidence grade:** D (from CSS variable) / M (from computed style) / I (from visual sampling) / A (assumed)\n- [ ] **Target layer:** Primitive (raw color) → Semantic (role) → Component (per-element)\n- [ ] **Current role(s):** What elements use this color (buttons, headings, backgrounds, borders, icons)\n- [ ] **Theme variation:** If source has light/dark mode, document both — different themes may map to the same primitive\n- [ ] **Same-value warning:** If this hex value also appears in a DIFFERENT semantic role, flag it — they must become separate semantic tokens\n\n### Extraction Methods by Source\n\n**URL:** Extract from CSS `color`, `background-color`, `border-color`, `--*` variables (D), Tailwind `bg-*`, `text-*` classes (D), computed styles (M)\n**Screenshot:** Identify dominant colors by visual sampling (I); accent, surface, and text colors are more reliable than subtle variations\n**Project:** Parse theme configs (D), CSS variables (D), design token JSON (D), SCSS `$variables` (D), computed styles from browser (M)\n\n### Three-Layer Organization\n\n```markdown\n## Primitive: Color Scales (evidence: D)\n\n| Token | Hex | Evidence | Notes |\n|-------|-----|----------|-------|\n| `color.blue.50` | `#E8F3FF` | D | Lightest blue |\n| `color.blue.100` | `#BEDAFF` | D | |\n| ... | | | |\n| `color.blue.500` | `#165DFF` | D | Default interaction blue |\n| `color.blue.600` | `#0E42D2` | D | Hover state |\n| ... | | | |\n| `color.blue.900` | `#001B4D` | D | Darkest blue |\n| `color.gray.50` | `#F7F8FA` | D | Lightest gray |\n| ... | | | |\n| `color.gray.900` | `#1D2129` | D | Darkest gray |\n\n## Semantic: Design Roles (evidence: I)\n\n| Token | Maps To | Light Theme | Dark Theme | Evidence |\n|-------|---------|-------------|------------|----------|\n| `color.action.primary` | `color.blue.500` | `#165DFF` | `#4080"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。 Skill: style-extractor Owner: namepain Summary: 从 URL、截图或前端项目源码中逆向提取 UI 视觉风格，产出三层 Design Token 系统（Primitive → Semantic → Component），封装为可复用的 WorkBuddy 通用风格技能。 Tags: latest:0.1.0 Version history: v0.1.0 | 2026-08-10T07:42:30.846Z | auto Style Extractor 2.0.0 introduces a comprehensive design token extraction and packaging pipeline for web projects, images, and codebases. - Extracts full UI design systems from URLs, scr","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1576,"uniquenessScore":48,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T19:48:36.077Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T19:48:36.077Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-11T21:53:29.017Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}