{"id":"4a44723f-d2b5-414a-ac15-c835d21a5f24","entityType":"agent","slug":"clawhub-zhouchang1988-make-design-md","name":"make-design-md","canonicalUrl":"https://www.xpersona.co/agent/clawhub-zhouchang1988-make-design-md","canonicalPath":"/agent/clawhub-zhouchang1988-make-design-md","generatedAt":"2026-10-11T10:52:15.964Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T08:15:15.823Z","emptyReason":null},"description":"网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求\"分析设计风格\"、\"提取设计规范\"、\"生成设计文档\"、\"从XX网站提取风格\"、\"分析这个页面的设计\"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。 Skill: make-design-md Owner: zhouchang1988 Summary: 网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求\"分析设计风格\"、\"提取设计规范\"、\"生成设计文档\"、\"从XX网站提取风格\"、\"分析这个页面的设计\"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。 Tags: latest:1.2.0 Version history: v1.2.0 | 2026-07-27T06:43:43.107Z | user Release v1.2.0 from GitHub v1.1.0 | 2026-04-29T07:24:47.253Z | user Release v1.1.0 from GitHub v1.0.0 | 2026-04-22T13:2","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s1720bd1njpgkfeygpnhevb7z184dag4:make-design-md","sourceUrl":"https://clawhub.ai/zhouchang1988/make-design-md","homepage":"https://clawhub.ai/zhouchang1988/skills/make-design-md","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/zhouchang1988/make-design-md","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/zhouchang1988/skills/make-design-md","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":61,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求\"分析设计风格\"、\"提取设计规范\"、\"生成设计文档\"、\"从XX网站提取风格\"、\"分析这个页面的设计\"等任务时触发此skill。也支持用户直接提供URL、HTML文件路"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T08:15:15.823Z","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-11T08:15:15.823Z","emptyReason":null},"stars":null,"forks":null,"downloads":1115,"packageName":null,"latestVersion":"1.2.0","tractionLabel":"1.1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T08:15:15.817Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T08:15:15.823Z","lastCrawledAt":"2026-10-11T08:15:15.817Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T08:15:15.817Z","lastVerifiedAt":null,"highlights":[{"version":"1.2.0","createdAt":"2026-07-27T06:43:43.107Z","changelog":"Release v1.2.0 from GitHub","fileCount":6,"zipByteSize":12905},{"version":"1.1.0","createdAt":"2026-04-29T07:24:47.253Z","changelog":"Release v1.1.0 from GitHub","fileCount":5,"zipByteSize":10553},{"version":"1.0.0","createdAt":"2026-04-22T13:21:23.008Z","changelog":"Release v1.0.0 from GitHub","fileCount":3,"zipByteSize":7722}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s1720bd1njpgkfeygpnhevb7z184dag4:make-design-md","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-zhouchang1988-make-design-md/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/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-11T10:52:15.963Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/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-11T08:15:15.823Z","emptyReason":null},"readme":"Skill: make-design-md\n\nOwner: zhouchang1988\n\nSummary: 网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求\"分析设计风格\"、\"提取设计规范\"、\"生成设计文档\"、\"从XX网站提取风格\"、\"分析这个页面的设计\"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。\n\nTags: latest:1.2.0\n\nVersion history:\n\nv1.2.0 | 2026-07-27T06:43:43.107Z | user\n\nRelease v1.2.0 from GitHub\n\nv1.1.0 | 2026-04-29T07:24:47.253Z | user\n\nRelease v1.1.0 from GitHub\n\nv1.0.0 | 2026-04-22T13:21:23.008Z | user\n\nRelease v1.0.0 from GitHub\n\nArchive index:\n\nArchive v1.2.0: 6 files, 12905 bytes\n\nFiles: LICENSE (1070b), README.md (2637b), references/design-template.md (11031b), skill-card.md (2255b), SKILL.md (10656b), _meta.json (133b)\n\nFile v1.2.0:SKILL.md\n\n---\nname: make-design-md\ndescription: 网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求\"分析设计风格\"、\"提取设计规范\"、\"生成设计文档\"、\"从XX网站提取风格\"、\"分析这个页面的设计\"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。\nlicense: MIT\n---\n\n# Make Design MD\n\n从网站、HTML文件或截图分析设计风格，生成符合 [Google design.md 规范](https://github.com/google-labs-code/design.md) 的结构化 DESIGN.md 设计规范文档。\n\n## 规范说明\n\n本技能遵循 Google 开源的 design.md 规范，生成的文档包含：\n\n1. **YAML Front Matter** - 机器可读的设计令牌（colors, typography, spacing, rounded, components）\n2. **Markdown Body** - 人类可读的设计原理说明\n\n生成的 DESIGN.md 可通过官方 CLI 工具（当前版本 0.3.x）验证和导出：\n```bash\nnpx @google/design.md lint DESIGN.md                     # 验证格式（JSON 输出）\nnpx @google/design.md export --format css-tailwind DESIGN.md  # 导出 Tailwind v4 主题\n```\n\n## 工作流程\n\n### 输入类型判断\n\n根据用户提供的输入类型选择相应的分析路径：\n\n| 输入类型 | 识别方式 | 处理方法 |\n|---------|---------|---------|\n| 网站URL | 以 http:// 或 https:// 开头 | 使用 WebFetch 抓取页面内容 |\n| HTML文件 | 以 .html 或 .htm 结尾的文件路径 | 使用 Read 工具读取文件 |\n| 截图文件 | 以 .png、.jpg、.jpeg、.webp 结尾 | 使用 Read 工具查看图片 |\n\n### 分析流程\n\n1. **获取内容**\n   - URL：使用 WebFetch 抓取页面 HTML\n   - HTML文件：使用 Read 工具读取\n   - 截图：使用 Read 工具查看并分析视觉元素\n\n2. **提取设计令牌**\n\n   从内容中提取以下设计令牌：\n\n   **colors** - 颜色系统\n   - `primary` - 主品牌色（必须）\n   - `primary-hover` - 主色悬停态（配合组件变体使用）\n   - `secondary` - 次级强调色\n   - `background` - 背景色（可包含多个层级如 `background-subtle`）\n   - `surface` - 表面色（卡片、面板）\n   - `text` - 文字色（main, muted, subtle）\n   - `border` - 边框色\n   - `success`, `warning`, `error`, `info` - 状态色\n\n   **typography** - 字体排版对象\n   每个排版角色包含：`fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`\n   ```yaml\n   typography:\n     display:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"64px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.0\"\n       letterSpacing: \"-0.04em\"\n     heading1:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"48px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.1\"\n     body:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"16px\"\n       fontWeight: \"400\"\n       lineHeight: \"1.5\"\n   ```\n\n   **spacing** - 间距刻度\n   ```yaml\n   spacing:\n     0: \"0\"\n     1: \"4px\"\n     2: \"8px\"\n     3: \"12px\"\n     4: \"16px\"\n     5: \"24px\"\n     6: \"32px\"\n     8: \"48px\"\n     10: \"64px\"\n   ```\n\n   **rounded** - 圆角刻度\n   ```yaml\n   rounded:\n     none: \"0px\"\n     sm: \"4px\"\n     md: \"8px\"\n     lg: \"12px\"\n     xl: \"16px\"\n     2xl: \"24px\"\n     full: \"9999px\"\n   ```\n\n   **components** - 组件样式（使用令牌引用）\n   ```yaml\n   components:\n     button-primary:\n       backgroundColor: \"{colors.primary}\"\n       textColor: \"#ffffff\"\n       typography: \"{typography.body}\"\n       rounded: \"{rounded.md}\"\n       padding: \"{spacing.2} {spacing.4}\"\n     button-primary-hover:\n       backgroundColor: \"{colors.primary-hover}\"\n     card:\n       backgroundColor: \"{colors.surface}\"\n       borderColor: \"{colors.border}\"\n       rounded: \"{rounded.lg}\"\n   ```\n\n   组件属性的规范清单：`backgroundColor`, `textColor`, `typography`, `rounded`, `padding`, `size`, `height`, `width`。其他属性（如 `borderColor`, `backdropFilter`）会被接受但 lint 时给出警告，非必要时优先使用规范内属性。\n\n   交互状态变体（hover、active、pressed）以独立的组件条目表示，命名与基础组件相关联（如 `button-primary-hover`）。\n\n3. **生成 DESIGN.md**\n\n   按照以下结构生成文档：\n\n   ```markdown\n   ---\n   version: \"alpha\"\n   name: \"设计系统名称\"\n   description: \"简短描述\"\n   colors:\n     primary: \"#533afd\"\n     background: \"#ffffff\"\n     text-main: \"#1a1a1a\"\n     # ...\n   typography:\n     display:\n       fontFamily: \"Inter, sans-serif\"\n       fontSize: \"64px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.0\"\n     # ...\n   spacing:\n     1: \"4px\"\n     2: \"8px\"\n     # ...\n   rounded:\n     sm: \"4px\"\n     md: \"8px\"\n     # ...\n   components:\n     button-primary:\n       backgroundColor: \"{colors.primary}\"\n       textColor: \"#ffffff\"\n   ---\n\n   ## Overview\n\n   设计系统概述和视觉哲学...\n\n   ## Colors\n\n   颜色系统详细说明...\n\n   ## Typography\n\n   字体排版说明...\n\n   ## Layout\n\n   布局与间距说明...\n\n   ## Elevation & Depth\n\n   阴影与层级说明...\n\n   ## Shapes\n\n   圆角与形状说明...\n\n   ## Components\n\n   组件样式说明...\n\n   ## Do's and Don'ts\n\n   设计宜忌...\n   ```\n\n4. **生成预览文件**\n\n   同时生成 HTML 预览文件，从 YAML front matter 提取令牌值：\n\n   **preview.html** - 浅色/默认模式预览\n   **preview-dark.html** - 深色模式预览（如适用）\n\n   **字体 CDN 替换规则（必须遵循）**\n\n   生成网页/预览文件时，若引用 Google Fonts，必须使用国内镜像自动替换：\n   - `fonts.googleapis.com` → `fonts.loli.net`\n   - `fonts.gstatic.com` → `gstatic.loli.net`\n\n   ```html\n   <!-- 错误 -->\n   <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\" rel=\"stylesheet\">\n   <!-- 正确 -->\n   <link href=\"https://fonts.loli.net/css2?family=Inter:wght@400;700&display=swap\" rel=\"stylesheet\">\n   ```\n\n   ```css\n   :root {\n     --color-primary: #533afd;\n     --color-background: #ffffff;\n     --spacing-1: 4px;\n     --spacing-2: 8px;\n     --rounded-md: 8px;\n   }\n   ```\n\n### 章节顺序（必须遵循）\n\n按 Google design.md 规范，章节必须按以下顺序排列：\n\n| 顺序 | 章节名 | 别名 |\n|-----|--------|------|\n| 1 | Overview | Brand & Style |\n| 2 | Colors | - |\n| 3 | Typography | - |\n| 4 | Layout | Layout & Spacing |\n| 5 | Elevation & Depth | Elevation |\n| 6 | Shapes | - |\n| 7 | Components | - |\n| 8 | Do's and Don'ts | - |\n\n### 令牌格式规范\n\n**颜色 (Color)**\n- 格式：任意 CSS 颜色（hex、`rgb()`、`rgba()`、`oklch()`、命名颜色等）\n- 示例：`#1A1C1E`, `#FF5722`, `rgba(0, 0, 0, 0.8)`, `oklch(62% 0.18 250)`\n\n**尺寸 (Dimension)**\n- 格式：数字 + 单位（`px`, `em`, `rem`）；spacing 令牌也允许纯数字\n- 示例：`48px`, `1.5rem`, `-0.02em`\n- 注意：无单位的 `\"0\"` 不是合法 dimension（lint 报错），零值需写成 `\"0px\"`\n\n**令牌引用**\n- 格式：`{path.to.token}`\n- 示例：`{colors.primary}`, `{typography.body.fontSize}`, `{spacing.4}`\n\n**排版对象 (Typography)**\n```yaml\nheading1:\n  fontFamily: \"Inter, system-ui, sans-serif\"\n  fontSize: \"48px\"\n  fontWeight: \"700\"\n  lineHeight: \"1.1\"\n  letterSpacing: \"-0.02em\"        # 可选\n  fontFeature: \"\\\"calt\\\", \\\"kern\\\"\"  # 可选\n  fontVariation: \"\\\"wght\\\" 400\"      # 可选\n```\n\n### 分析技巧\n\n**从 CSS 提取**\n- 查找 `<style>` 标签内的样式\n- 分析 `style` 属性中的内联样式\n- 识别 CSS 变量（`--color-primary` 等）\n- 提取 Tailwind/CSS 框架的类名\n\n**从视觉推断（截图）**\n- 使用颜色提取识别主色调\n- 观察字体风格推断字体族\n- 测量间距规律\n- 分析组件形态\n\n**从 HTML 结构推断**\n- 语义化标签暗示布局意图\n- class 名称可能包含设计信息\n- 嵌套层级反映视觉层级\n\n### 验证与导出\n\n生成的 DESIGN.md 可使用 Google 官方 CLI 工具（所有命令接受文件路径或 `-` 表示 stdin，输出默认为 JSON）：\n\n```bash\n# 验证文档格式（存在 error 时退出码为 1）\nnpx @google/design.md lint DESIGN.md\n\n# 比较两个版本（after 文件 findings 变多时退出码为 1）\nnpx @google/design.md diff DESIGN.md DESIGN-v2.md\n\n# 导出为 Tailwind v3 配置（theme.extend JSON）\nnpx @google/design.md export --format json-tailwind DESIGN.md\n\n# 导出为 Tailwind v4 主题（CSS @theme 块）\nnpx @google/design.md export --format css-tailwind DESIGN.md\n\n# 导出为 DTCG 格式（W3C Design Tokens Format）\nnpx @google/design.md export --format dtcg DESIGN.md\n\n# 查看规范（可注入 agent prompt）\nnpx @google/design.md spec\n```\n\n**注意事项**\n- `--format tailwind` 是 `json-tailwind` 的兼容别名。\n- **Windows/PowerShell**：`design.md` 这个 bin 名的 `.md` 后缀会与 Windows 的 Markdown 文件关联冲突，导致 `npx @google/design.md` 无输出。改用无点的 `designmd` 别名：`npx -p @google/design.md designmd lint DESIGN.md`。\n- **`npm error ENOVERSIONS`**：说明 npm 未查询公共 registry（`.npmrc` 自定义了 registry 或公司镜像未同步该包）。用 `npm config get registry` 检查，正常应为 `https://registry.npmjs.org/`。\n\n**Lint 规则说明**（共 9 条规则）\n\n| 规则 | 级别 | 检查内容 |\n|------|------|---------|\n| `broken-ref` | error | 令牌引用无法解析（如 `{colors.primary}` 未定义） |\n| `missing-primary` | warning | 定义了 colors 但缺少 primary 颜色 |\n| `contrast-ratio` | warning | 组件背景/文字对比度低于 WCAG AA（4.5:1） |\n| `orphaned-tokens` | warning | 定义了但未被任何组件引用的颜色令牌 |\n| `token-summary` | info | 各部分的令牌数量统计 |\n| `missing-sections` | info | 存在其他令牌但缺少可选部分（spacing、rounded） |\n| `missing-typography` | warning | 定义了 colors 但没有 typography 令牌 |\n| `section-order` | warning | 章节顺序不符合规范 |\n| `unknown-key` | warning | 顶层 YAML 键疑似已知 schema 键的拼写错误 |\n\n## 使用示例\n\n**分析网站 URL**\n```\n分析 https://linear.app 的设计风格，生成 DESIGN.md\n```\n\n**分析本地 HTML**\n```\n分析 ./dist/index.html 的设计风格\n```\n\n**分析截图**\n```\n分析 ./screenshots/homepage.png 的设计风格\n```\n\n**生成后验证**\n```\n生成 DESIGN.md 后用 Google CLI 验证格式是否正确\n```\n\n**导出为 Tailwind 配置**\n```\n将 DESIGN.md 导出为 tailwind.config.js\n```\n\n## 资源\n\n- `references/design-template.md` - DESIGN.md 文档模板结构\n- [Google design.md 规范](https://github.com/google-labs-code/design.md) - 官方规范仓库\n\nFile v1.2.0:README.md\n\n# make-design-md\n\n网站设计风格分析器 — 从网站 URL、HTML 文件或截图提取设计规范，生成符合 [Google design.md 规范](https://github.com/google-labs-code/design.md) 的结构化 DESIGN.md 文档。\n\n## 功能\n\n- **URL 分析** — 输入网站地址，自动抓取并提取设计令牌\n- **HTML 文件分析** — 读取本地 HTML，解析 CSS 样式与结构\n- **截图分析** — 从视觉截图中推断颜色、字体、间距等设计元素\n- **规范输出** — 生成包含 YAML front matter 和 Markdown 正文的 DESIGN.md\n- **预览生成** — 同时输出浅色/深色模式的 HTML 预览文件\n- **验证导出** — 支持 Google 官方 CLI 验证格式、导出 Tailwind/DTCG 配置\n\n## 快速开始\n\n### 作为 Claude Code Skill 使用\n\n在 Claude Code 中直接对话即可触发：\n\n```\n分析 https://linear.app 的设计风格，生成 DESIGN.md\n```\n\n```\n分析 ./dist/index.html 的设计风格\n```\n\n```\n分析 ./screenshots/homepage.png 的设计风格\n```\n\n### 使用 Google CLI 验证与导出\n\n```bash\n# 验证文档格式（JSON 输出）\nnpx @google/design.md lint DESIGN.md\n\n# 导出为 Tailwind v3 配置（theme.extend JSON，--format tailwind 为其别名）\nnpx @google/design.md export --format json-tailwind DESIGN.md\n\n# 导出为 Tailwind v4 主题（CSS @theme 块）\nnpx @google/design.md export --format css-tailwind DESIGN.md\n\n# 导出为 DTCG 格式（W3C Design Tokens Format）\nnpx @google/design.md export --format dtcg DESIGN.md\n```\n\n> Windows/PowerShell 下若 `npx @google/design.md` 无输出，改用无点的别名：`npx -p @google/design.md designmd lint DESIGN.md`。\n\n## 输出结构\n\n生成的 DESIGN.md 包含：\n\n| 部分 | 说明 |\n|------|------|\n| YAML Front Matter | 机器可读的设计令牌（colors, typography, spacing, rounded, components） |\n| Markdown Body | 人类可读的设计原理说明 |\n\n章节按规范顺序排列：Overview → Colors → Typography → Layout → Elevation & Depth → Shapes → Components → Do's and Don'ts\n\n## 字体 CDN 规则\n\n生成网页/预览文件时，Google Fonts 必须使用国内镜像：\n\n| 原始地址 | 替换为 |\n|---------|--------|\n| `fonts.googleapis.com` | `fonts.loli.net` |\n| `fonts.gstatic.com` | `gstatic.loli.net` |\n\n## 项目结构\n\n```\n├── SKILL.md                  # Skill 定义文件\n├── references/\n│   └── design-template.md    # DESIGN.md 文档模板\n└── LICENSE                   # MIT 许可证\n```\n\n## 参考\n\n- [Google design.md 规范](https://github.com/google-labs-code/design.md) — 官方规范仓库\n\n## License\n\n[MIT](LICENSE)\n\nFile v1.2.0:_meta.json\n\n{\n  \"ownerId\": \"kn7a799d479xj5aftb4bqm6ea984cv4m\",\n  \"slug\": \"make-design-md\",\n  \"version\": \"1.2.0\",\n  \"publishedAt\": 1785134623107\n}\n\nFile v1.2.0:references/design-template.md\n\n# DESIGN.md 模板\n\n此模板遵循 [Google design.md 规范](https://github.com/google-labs-code/design.md)，定义了设计规范文档的标准结构。\n\n## YAML Front Matter 结构\n\n每个 DESIGN.md 必须以 YAML front matter 开头，包含机器可读的设计令牌：\n\n```yaml\n---\nversion: \"alpha\"                    # 可选，当前版本为 \"alpha\"\nname: \"设计系统名称\"\ndescription: \"简短描述\"             # 可选\ncolors:\n  primary: \"#533afd\"                # 必须：主品牌色\n  primary-hover: \"#4330e0\"          # 主色悬停态\n  secondary: \"#00d4ff\"\n  background: \"#ffffff\"\n  background-subtle: \"#f5f5f7\"\n  surface: \"#ffffff\"\n  surface-elevated: \"#ffffff\"\n  text-main: \"#1a1a1a\"\n  text-muted: \"#6b6b6b\"\n  text-subtle: \"#999999\"\n  border: \"#e5e5e5\"\n  border-subtle: \"#f0f0f0\"\n  success: \"#22c55e\"\n  warning: \"#f59e0b\"\n  error: \"#ef4444\"\n  info: \"#3b82f6\"\ntypography:\n  display:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"64px\"\n    fontWeight: \"700\"\n    lineHeight: \"1.0\"\n    letterSpacing: \"-0.04em\"\n  heading1:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"48px\"\n    fontWeight: \"700\"\n    lineHeight: \"1.1\"\n    letterSpacing: \"-0.02em\"\n  heading2:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"36px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.2\"\n    letterSpacing: \"-0.01em\"\n  heading3:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"24px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.3\"\n  heading4:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"18px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.4\"\n  body:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"16px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.5\"\n  body-small:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"14px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.5\"\n  caption:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"12px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.4\"\n  code:\n    fontFamily: \"JetBrains Mono, Consolas, monospace\"\n    fontSize: \"14px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.6\"\nspacing:\n  0: \"0\"\n  0.5: \"2px\"\n  1: \"4px\"\n  1.5: \"6px\"\n  2: \"8px\"\n  3: \"12px\"\n  4: \"16px\"\n  5: \"20px\"\n  6: \"24px\"\n  8: \"32px\"\n  10: \"40px\"\n  12: \"48px\"\n  16: \"64px\"\n  20: \"80px\"\nrounded:\n  none: \"0px\"\n  sm: \"4px\"\n  md: \"8px\"\n  lg: \"12px\"\n  xl: \"16px\"\n  2xl: \"24px\"\n  3xl: \"32px\"\n  full: \"9999px\"\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"#ffffff\"\n    typography: \"{typography.body}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.2} {spacing.4}\"\n    height: \"40px\"\n  button-primary-hover:\n    backgroundColor: \"{colors.primary-hover}\"\n  button-secondary:\n    backgroundColor: \"transparent\"\n    textColor: \"{colors.primary}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.2} {spacing.4}\"\n  card:\n    backgroundColor: \"{colors.surface}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded.lg}\"\n    padding: \"{spacing.4}\"\n  input:\n    backgroundColor: \"{colors.background}\"\n    textColor: \"{colors.text-main}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.2} {spacing.3}\"\n    height: \"40px\"\n---\n```\n\n**组件属性说明**\n- 规范内的组件属性：`backgroundColor`, `textColor`, `typography`, `rounded`, `padding`, `size`, `height`, `width`\n- 其他属性（如 `borderColor`, `backdropFilter`）会被接受，但 lint 时产生警告\n- 交互状态变体（hover、active、pressed）用独立条目表示，命名与基础组件关联，如 `button-primary-hover`\n\n## Markdown Body 章节顺序\n\n章节必须按以下顺序排列（Google design.md 规范强制要求）：\n\n### 1. Overview（别名：Brand & Style）\n\n设计系统概述，描述整体设计哲学和视觉印象：\n\n```markdown\n## Overview\n\n[设计系统名称] 是一个 [风格定位] 的设计系统。\n\n**视觉哲学**\n- 设计风格定位（极简、奢华、技术感、温暖等）\n- 整体视觉印象（深色/浅色优先、色彩策略等）\n- 关键视觉特征列表\n\n**设计原则**\n1. 原则一：说明\n2. 原则二：说明\n```\n\n### 2. Colors\n\n详细记录颜色系统：\n\n```markdown\n## Colors\n\n### 品牌色\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Primary | `#533afd` | 主要品牌色、CTA 按钮 |\n| Secondary | `#00d4ff` | 次级强调、链接 |\n\n### 背景与表面\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Background | `#ffffff` | 页面主背景 |\n| Background Subtle | `#f5f5f7` | 次级背景区域 |\n| Surface | `#ffffff` | 卡片、面板背景 |\n\n### 文字颜色\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Text Main | `#1a1a1a` | 主要文字、标题 |\n| Text Muted | `#6b6b6b` | 次要文字、描述 |\n| Text Subtle | `#999999` | 占位符、禁用状态 |\n\n### 状态色\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Success | `#22c55e` | 成功状态 |\n| Warning | `#f59e0b` | 警告状态 |\n| Error | `#ef4444` | 错误状态 |\n```\n\n### 3. Typography\n\n字体排版规则：\n\n```markdown\n## Typography\n\n### 字体族\n\n**主字体**：Inter（无衬线，现代几何风格）\n**等宽字体**：JetBrains Mono（代码展示）\n\n### 排版层级\n\n| 角色 | 字号 | 字重 | 行高 | 字间距 | 用途 |\n|------|------|------|------|--------|------|\n| Display | 64px | 700 | 1.0 | -0.04em | 首屏大标题 |\n| H1 | 48px | 700 | 1.1 | -0.02em | 页面主标题 |\n| H2 | 36px | 600 | 1.2 | -0.01em | 章节标题 |\n| H3 | 24px | 600 | 1.3 | - | 卡片标题 |\n| H4 | 18px | 600 | 1.4 | - | 小节标题 |\n| Body | 16px | 400 | 1.5 | - | 正文内容 |\n| Small | 14px | 400 | 1.5 | - | 辅助信息 |\n| Caption | 12px | 400 | 1.4 | - | 标签、时间戳 |\n\n### 排版原则\n\n- 标题使用紧密的字间距（负值）增强冲击力\n- 正文保持舒适行高（1.5）提升可读性\n- 字重仅使用 400、600、700 三个档位\n```\n\n### 4. Layout（别名：Layout & Spacing）\n\n布局与间距系统：\n\n```markdown\n## Layout\n\n### 间距刻度\n\n基于 4px 基础单位的间距系统：\n\n| 级别 | 值 | 用途 |\n|------|-----|------|\n| 1 | 4px | 紧凑元素间距 |\n| 2 | 8px | 相关元素间距 |\n| 3 | 12px | 组件内间距 |\n| 4 | 16px | 标准内边距 |\n| 6 | 24px | 区块间距 |\n| 8 | 32px | 大区块间距 |\n\n### 网格系统\n\n- 最大内容宽度：1200px\n- 列数：12 列\n- 列间距：24px\n- 边距：16px（移动端）/ 24px（桌面端）\n\n### 断点\n\n| 名称 | 宽度 | 用途 |\n|------|------|------|\n| Mobile | < 640px | 手机竖屏 |\n| Tablet | 640-1024px | 平板/小屏笔记本 |\n| Desktop | > 1024px | 桌面端 |\n```\n\n### 5. Elevation & Depth（别名：Elevation）\n\n阴影与层级系统：\n\n```markdown\n## Elevation & Depth\n\n### 阴影层级\n\n| 级别 | 阴影值 | 用途 |\n|------|--------|------|\n| Subtle | `0 1px 2px rgba(0,0,0,0.05)` | 卡片默认状态 |\n| Medium | `0 4px 12px rgba(0,0,0,0.1)` | 悬停状态、下拉菜单 |\n| High | `0 8px 24px rgba(0,0,0,0.15)` | 模态框、弹窗 |\n\n### 层级原则\n\n- 扁平优先：尽量减少阴影使用\n- 语义层级：通过背景色差异表达层级\n- 交互反馈：悬停时增加阴影深度\n```\n\n### 6. Shapes\n\n圆角与形状系统：\n\n```markdown\n## Shapes\n\n### 圆角刻度\n\n| 级别 | 值 | 用途 |\n|------|-----|------|\n| none | 0 | 无圆角 |\n| sm | 4px | 小按钮、标签 |\n| md | 8px | 输入框、按钮 |\n| lg | 12px | 卡片 |\n| xl | 16px | 大卡片、模态框 |\n| 2xl | 24px | 特殊容器 |\n| full | 9999px | 胶囊形状、头像 |\n\n### 形状原则\n\n- 按钮和输入框使用统一圆角（8px）\n- 卡片使用较大圆角（12px）增强柔和感\n- 头像和徽章使用完全圆形\n```\n\n### 7. Components\n\n组件样式详细说明：\n\n```markdown\n## Components\n\n### 按钮\n\n**主要按钮**\n- 背景：`{colors.primary}`\n- 文字：`#ffffff`\n- 圆角：`{rounded.md}`\n- 高度：40px\n- 内边距：8px 16px\n\n**次要按钮**\n- 背景：透明\n- 文字：`{colors.primary}`\n- 边框：`{colors.border}`\n- 圆角：`{rounded.md}`\n\n**幽灵按钮**\n- 背景：透明\n- 文字：`{colors.text-main}`\n- 无边框\n- 悬停时背景：`{colors.background-subtle}`\n\n### 卡片\n\n- 背景：`{colors.surface}`\n- 边框：`{colors.border}`（可选）\n- 圆角：`{rounded.lg}`\n- 内边距：`{spacing.4}`\n- 阴影：Subtle（默认）→ Medium（悬停）\n\n### 输入框\n\n- 背景：`{colors.background}`\n- 边框：`{colors.border}`\n- 圆角：`{rounded.md}`\n- 高度：40px\n- 聚焦边框：`{colors.primary}`\n\n### 徽章\n\n- 背景：`{colors.primary}`（透明度 10%）\n- 文字：`{colors.primary}`\n- 圆角：`{rounded.full}`\n- 内边距：4px 12px\n```\n\n### 8. Do's and Don'ts\n\n设计宜忌：\n\n```markdown\n## Do's and Don'ts\n\n### ✅ Do\n\n- 使用一致的间距刻度（4px 倍数）\n- 标题使用负字间距增强可读性\n- 保持按钮最小点击区域 44px\n- 卡片悬停时提供视觉反馈\n- 使用语义化的颜色名称\n\n### ❌ Don't\n\n- 不要混用多种主品牌色\n- 不要在正文使用负字间距\n- 不要使用纯黑（#000）作为文字颜色\n- 不要过度使用阴影效果\n- 不要忽略对比度要求（WCAG AA）\n```\n\n## 完整示例\n\n```markdown\n---\nversion: \"alpha\"\nname: \"Atmospheric Glass\"\ndescription: \"A glassmorphism weather app with frosted crystalline UI\"\ncolors:\n  primary: \"#60A5FA\"\n  secondary: \"#818CF8\"\n  background: \"#0F172A\"\n  background-glass: \"rgba(255, 255, 255, 0.1)\"\n  text-main: \"#F8FAFC\"\n  text-muted: \"#94A3B8\"\ntypography:\n  display:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: \"72px\"\n    fontWeight: \"200\"\n    lineHeight: \"1.0\"\n  body:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: \"16px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.5\"\nspacing:\n  1: \"4px\"\n  2: \"8px\"\n  4: \"16px\"\n  6: \"24px\"\nrounded:\n  md: \"8px\"\n  lg: \"16px\"\n  xl: \"24px\"\ncomponents:\n  glass-card:\n    backgroundColor: \"rgba(255, 255, 255, 0.1)\"\n    backdropFilter: \"blur(20px)\"\n    rounded: \"{rounded.xl}\"\n    border: \"1px solid rgba(255, 255, 255, 0.2)\"\n---\n\n## Overview\n\nAtmospheric Glass captures the ethereal beauty of weather through a glassmorphism aesthetic...\n\n## Colors\n\n[颜色说明...]\n\n## Typography\n\n[排版说明...]\n\n[...其余章节...]\n```\n\n## 验证\n\n使用 Google CLI 工具验证生成的 DESIGN.md：\n\n```bash\nnpx @google/design.md lint DESIGN.md\n```\n\nLint 规则一览（共 9 条）：\n\n| 规则 | 级别 | 检查内容 |\n|------|------|---------|\n| `broken-ref` | error | 令牌引用无法解析 |\n| `missing-primary` | warning | 定义了 colors 但缺少 primary 颜色 |\n| `contrast-ratio` | warning | 颜色对比度低于 WCAG AA（4.5:1） |\n| `orphaned-tokens` | warning | 定义了但未被组件引用的颜色令牌 |\n| `token-summary` | info | 各部分令牌数量统计 |\n| `missing-sections` | info | 缺少可选部分（spacing、rounded） |\n| `missing-typography` | warning | 定义了 colors 但没有 typography 令牌 |\n| `section-order` | warning | 章节顺序不符合规范 |\n| `unknown-key` | warning | 顶层 YAML 键疑似拼写错误 |\n\nFile v1.2.0:skill-card.md\n\n## Description:\n\nmake-design-md analyzes a website URL, HTML file, or screenshot to extract design tokens and produce a Google design.md-compatible DESIGN.md document.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[zhouchang1988](https://clawhub.ai/user/zhouchang1988)\n\n### License/Terms of Use:\n\nMIT\n\n## Use Case:\n\nDevelopers and designers use this skill to turn a website, local HTML file, or screenshot into a structured DESIGN.md design specification, preview files, and validation or export commands.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Running an unpinned @google/design.md CLI through npx can fetch an unexpected package version.\n\nMitigation: Pin @google/design.md to an exact reviewed version or run it from a lockfile-managed dependency, and avoid running npx with production credentials available.\n\nRisk: Fetched websites are untrusted inputs and may influence generated design guidance.\n\nMitigation: Review generated DESIGN.md and previews before use, and keep sensitive credentials out of the agent environment while fetching pages.\n\nRisk: The skill mandates a third-party font mirror for generated previews.\n\nMitigation: Replace the font mirror with local fonts or a user-approved CDN before using generated previews in controlled environments.\n\n## Reference(s):\n\n- [Google design.md specification](https://github.com/google-labs-code/design.md)\n- [DESIGN.md template](references/design-template.md)\n\n## Skill Output:\n\n**Output Type(s):** [markdown, text, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown DESIGN.md with YAML front matter, optional HTML preview files, and inline validation or export shell commands]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include design-token references, preview HTML, and guidance for validating or exporting with the Google design.md CLI.]\n\n## Skill Version(s):\n\n1.2.0 (source: server release metadata)\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.\n\nFile v1.2.0:LICENSE\n\nMIT License\n\nCopyright (c) 2026 zhouchang1988\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\nArchive v1.1.0: 5 files, 10553 bytes\n\nFiles: README.md (2270b), references/design-template.md (10084b), skill-card.md (2498b), SKILL.md (8337b), _meta.json (133b)\n\nFile v1.1.0:SKILL.md\n\n---\nname: make-design-md\ndescription: 网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求\"分析设计风格\"、\"提取设计规范\"、\"生成设计文档\"、\"从XX网站提取风格\"、\"分析这个页面的设计\"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。\n---\n\n# Make Design MD\n\n从网站、HTML文件或截图分析设计风格，生成符合 [Google design.md 规范](https://github.com/google-labs-code/design.md) 的结构化 DESIGN.md 设计规范文档。\n\n## 规范说明\n\n本技能遵循 Google 开源的 design.md 规范，生成的文档包含：\n\n1. **YAML Front Matter** - 机器可读的设计令牌（colors, typography, spacing, rounded, components）\n2. **Markdown Body** - 人类可读的设计原理说明\n\n生成的 DESIGN.md 可通过官方 CLI 工具验证和导出：\n```bash\nnpx @google/design.md lint DESIGN.md        # 验证格式\nnpx @google/design.md export --format tailwind DESIGN.md  # 导出 Tailwind 配置\n```\n\n## 工作流程\n\n### 输入类型判断\n\n根据用户提供的输入类型选择相应的分析路径：\n\n| 输入类型 | 识别方式 | 处理方法 |\n|---------|---------|---------|\n| 网站URL | 以 http:// 或 https:// 开头 | 使用 WebFetch 抓取页面内容 |\n| HTML文件 | 以 .html 或 .htm 结尾的文件路径 | 使用 Read 工具读取文件 |\n| 截图文件 | 以 .png、.jpg、.jpeg、.webp 结尾 | 使用 Read 工具查看图片 |\n\n### 分析流程\n\n1. **获取内容**\n   - URL：使用 WebFetch 抓取页面 HTML\n   - HTML文件：使用 Read 工具读取\n   - 截图：使用 Read 工具查看并分析视觉元素\n\n2. **提取设计令牌**\n\n   从内容中提取以下设计令牌：\n\n   **colors** - 颜色系统\n   - `primary` - 主品牌色（必须）\n   - `secondary` - 次级强调色\n   - `background` - 背景色（可包含多个层级如 `background-subtle`）\n   - `surface` - 表面色（卡片、面板）\n   - `text` - 文字色（main, muted, subtle）\n   - `border` - 边框色\n   - `success`, `warning`, `error`, `info` - 状态色\n\n   **typography** - 字体排版对象\n   每个排版角色包含：`fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`\n   ```yaml\n   typography:\n     display:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"64px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.0\"\n       letterSpacing: \"-0.04em\"\n     heading1:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"48px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.1\"\n     body:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"16px\"\n       fontWeight: \"400\"\n       lineHeight: \"1.5\"\n   ```\n\n   **spacing** - 间距刻度\n   ```yaml\n   spacing:\n     0: \"0\"\n     1: \"4px\"\n     2: \"8px\"\n     3: \"12px\"\n     4: \"16px\"\n     5: \"24px\"\n     6: \"32px\"\n     8: \"48px\"\n     10: \"64px\"\n   ```\n\n   **rounded** - 圆角刻度\n   ```yaml\n   rounded:\n     none: \"0\"\n     sm: \"4px\"\n     md: \"8px\"\n     lg: \"12px\"\n     xl: \"16px\"\n     2xl: \"24px\"\n     full: \"9999px\"\n   ```\n\n   **components** - 组件样式（使用令牌引用）\n   ```yaml\n   components:\n     button-primary:\n       backgroundColor: \"{colors.primary}\"\n       textColor: \"#ffffff\"\n       typography: \"{typography.body}\"\n       rounded: \"{rounded.md}\"\n       padding: \"{spacing.2} {spacing.4}\"\n     card:\n       backgroundColor: \"{colors.surface}\"\n       borderColor: \"{colors.border}\"\n       rounded: \"{rounded.lg}\"\n   ```\n\n3. **生成 DESIGN.md**\n\n   按照以下结构生成文档：\n\n   ```markdown\n   ---\n   version: \"alpha\"\n   name: \"设计系统名称\"\n   description: \"简短描述\"\n   colors:\n     primary: \"#533afd\"\n     background: \"#ffffff\"\n     text-main: \"#1a1a1a\"\n     # ...\n   typography:\n     display:\n       fontFamily: \"Inter, sans-serif\"\n       fontSize: \"64px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.0\"\n     # ...\n   spacing:\n     1: \"4px\"\n     2: \"8px\"\n     # ...\n   rounded:\n     sm: \"4px\"\n     md: \"8px\"\n     # ...\n   components:\n     button-primary:\n       backgroundColor: \"{colors.primary}\"\n       textColor: \"#ffffff\"\n   ---\n\n   ## Overview\n\n   设计系统概述和视觉哲学...\n\n   ## Colors\n\n   颜色系统详细说明...\n\n   ## Typography\n\n   字体排版说明...\n\n   ## Layout\n\n   布局与间距说明...\n\n   ## Elevation & Depth\n\n   阴影与层级说明...\n\n   ## Shapes\n\n   圆角与形状说明...\n\n   ## Components\n\n   组件样式说明...\n\n   ## Do's and Don'ts\n\n   设计宜忌...\n   ```\n\n4. **生成预览文件**\n\n   同时生成 HTML 预览文件，从 YAML front matter 提取令牌值：\n\n   **preview.html** - 浅色/默认模式预览\n   **preview-dark.html** - 深色模式预览（如适用）\n\n   **字体 CDN 替换规则（必须遵循）**\n\n   生成网页/预览文件时，若引用 Google Fonts，必须使用国内镜像自动替换：\n   - `fonts.googleapis.com` → `fonts.loli.net`\n   - `fonts.gstatic.com` → `gstatic.loli.net`\n\n   ```html\n   <!-- 错误 -->\n   <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\" rel=\"stylesheet\">\n   <!-- 正确 -->\n   <link href=\"https://fonts.loli.net/css2?family=Inter:wght@400;700&display=swap\" rel=\"stylesheet\">\n   ```\n\n   ```css\n   :root {\n     --color-primary: #533afd;\n     --color-background: #ffffff;\n     --spacing-1: 4px;\n     --spacing-2: 8px;\n     --rounded-md: 8px;\n   }\n   ```\n\n### 章节顺序（必须遵循）\n\n按 Google design.md 规范，章节必须按以下顺序排列：\n\n| 顺序 | 章节名 | 别名 |\n|-----|--------|------|\n| 1 | Overview | Brand & Style |\n| 2 | Colors | - |\n| 3 | Typography | - |\n| 4 | Layout | Layout & Spacing |\n| 5 | Elevation & Depth | Elevation |\n| 6 | Shapes | - |\n| 7 | Components | - |\n| 8 | Do's and Don'ts | - |\n\n### 令牌格式规范\n\n**颜色 (Color)**\n- 格式：`#` + 十六进制（sRGB）\n- 示例：`#1A1C1E`, `#FF5722`\n- RGBA 格式：`rgba(0, 0, 0, 0.8)`\n\n**尺寸 (Dimension)**\n- 格式：数字 + 单位（`px`, `em`, `rem`）\n- 示例：`48px`, `1.5rem`, `-0.02em`\n\n**令牌引用**\n- 格式：`{path.to.token}`\n- 示例：`{colors.primary}`, `{typography.body.fontSize}`, `{spacing.4}`\n\n**排版对象 (Typography)**\n```yaml\nheading1:\n  fontFamily: \"Inter, system-ui, sans-serif\"\n  fontSize: \"48px\"\n  fontWeight: \"700\"\n  lineHeight: \"1.1\"\n  letterSpacing: \"-0.02em\"        # 可选\n  fontFeature: \"\\\"calt\\\", \\\"kern\\\"\"  # 可选\n  fontVariation: \"\\\"wght\\\" 400\"      # 可选\n```\n\n### 分析技巧\n\n**从 CSS 提取**\n- 查找 `<style>` 标签内的样式\n- 分析 `style` 属性中的内联样式\n- 识别 CSS 变量（`--color-primary` 等）\n- 提取 Tailwind/CSS 框架的类名\n\n**从视觉推断（截图）**\n- 使用颜色提取识别主色调\n- 观察字体风格推断字体族\n- 测量间距规律\n- 分析组件形态\n\n**从 HTML 结构推断**\n- 语义化标签暗示布局意图\n- class 名称可能包含设计信息\n- 嵌套层级反映视觉层级\n\n### 验证与导出\n\n生成的 DESIGN.md 可使用 Google 官方 CLI 工具：\n\n```bash\n# 验证文档格式\nnpx @google/design.md lint DESIGN.md\n\n# 比较两个版本\nnpx @google/design.md diff DESIGN.md DESIGN-v2.md\n\n# 导出为 Tailwind 配置\nnpx @google/design.md export --format tailwind DESIGN.md\n\n# 导出为 DTCG 格式\nnpx @google/design.md export --format dtcg DESIGN.md\n\n# 查看规范\nnpx @google/design.md spec\n```\n\n**Lint 规则说明**\n- `broken-ref` - 令牌引用无法解析\n- `missing-primary` - 未定义 primary 颜色\n- `contrast-ratio` - WCAG AA 对比度检查\n- `orphaned-tokens` - 未使用的颜色令牌\n- `section-order` - 章节顺序不符合规范\n\n## 使用示例\n\n**分析网站 URL**\n```\n分析 https://linear.app 的设计风格，生成 DESIGN.md\n```\n\n**分析本地 HTML**\n```\n分析 ./dist/index.html 的设计风格\n```\n\n**分析截图**\n```\n分析 ./screenshots/homepage.png 的设计风格\n```\n\n**生成后验证**\n```\n生成 DESIGN.md 后用 Google CLI 验证格式是否正确\n```\n\n**导出为 Tailwind 配置**\n```\n将 DESIGN.md 导出为 tailwind.config.js\n```\n\n## 资源\n\n- `references/design-template.md` - DESIGN.md 文档模板结构\n- [Google design.md 规范](https://github.com/google-labs-code/design.md) - 官方规范仓库\n\nFile v1.1.0:README.md\n\n# make-design-md\n\n网站设计风格分析器 — 从网站 URL、HTML 文件或截图提取设计规范，生成符合 [Google design.md 规范](https://github.com/google-labs-code/design.md) 的结构化 DESIGN.md 文档。\n\n## 功能\n\n- **URL 分析** — 输入网站地址，自动抓取并提取设计令牌\n- **HTML 文件分析** — 读取本地 HTML，解析 CSS 样式与结构\n- **截图分析** — 从视觉截图中推断颜色、字体、间距等设计元素\n- **规范输出** — 生成包含 YAML front matter 和 Markdown 正文的 DESIGN.md\n- **预览生成** — 同时输出浅色/深色模式的 HTML 预览文件\n- **验证导出** — 支持 Google 官方 CLI 验证格式、导出 Tailwind/DTCG 配置\n\n## 快速开始\n\n### 作为 Claude Code Skill 使用\n\n在 Claude Code 中直接对话即可触发：\n\n```\n分析 https://linear.app 的设计风格，生成 DESIGN.md\n```\n\n```\n分析 ./dist/index.html 的设计风格\n```\n\n```\n分析 ./screenshots/homepage.png 的设计风格\n```\n\n### 使用 Google CLI 验证与导出\n\n```bash\n# 验证文档格式\nnpx @google/design.md lint DESIGN.md\n\n# 导出为 Tailwind 配置\nnpx @google/design.md export --format tailwind DESIGN.md\n\n# 导出为 DTCG 格式\nnpx @google/design.md export --format dtcg DESIGN.md\n```\n\n## 输出结构\n\n生成的 DESIGN.md 包含：\n\n| 部分 | 说明 |\n|------|------|\n| YAML Front Matter | 机器可读的设计令牌（colors, typography, spacing, rounded, components） |\n| Markdown Body | 人类可读的设计原理说明 |\n\n章节按规范顺序排列：Overview → Colors → Typography → Layout → Elevation & Depth → Shapes → Components → Do's and Don'ts\n\n## 字体 CDN 规则\n\n生成网页/预览文件时，Google Fonts 必须使用国内镜像：\n\n| 原始地址 | 替换为 |\n|---------|--------|\n| `fonts.googleapis.com` | `fonts.loli.net` |\n| `fonts.gstatic.com` | `gstatic.loli.net` |\n\n## 项目结构\n\n```\n├── SKILL.md                  # Skill 定义文件\n├── references/\n│   └── design-template.md    # DESIGN.md 文档模板\n└── LICENSE                   # MIT 许可证\n```\n\n## 参考\n\n- [Google design.md 规范](https://github.com/google-labs-code/design.md) — 官方规范仓库\n\n## License\n\n[MIT](LICENSE)\n\nFile v1.1.0:_meta.json\n\n{\n  \"ownerId\": \"kn7a799d479xj5aftb4bqm6ea984cv4m\",\n  \"slug\": \"make-design-md\",\n  \"version\": \"1.1.0\",\n  \"publishedAt\": 1777447487253\n}\n\nFile v1.1.0:references/design-template.md\n\n# DESIGN.md 模板\n\n此模板遵循 [Google design.md 规范](https://github.com/google-labs-code/design.md)，定义了设计规范文档的标准结构。\n\n## YAML Front Matter 结构\n\n每个 DESIGN.md 必须以 YAML front matter 开头，包含机器可读的设计令牌：\n\n```yaml\n---\nversion: \"alpha\"                    # 可选，当前版本为 \"alpha\"\nname: \"设计系统名称\"\ndescription: \"简短描述\"             # 可选\ncolors:\n  primary: \"#533afd\"                # 必须：主品牌色\n  secondary: \"#00d4ff\"\n  background: \"#ffffff\"\n  background-subtle: \"#f5f5f7\"\n  surface: \"#ffffff\"\n  surface-elevated: \"#ffffff\"\n  text-main: \"#1a1a1a\"\n  text-muted: \"#6b6b6b\"\n  text-subtle: \"#999999\"\n  border: \"#e5e5e5\"\n  border-subtle: \"#f0f0f0\"\n  success: \"#22c55e\"\n  warning: \"#f59e0b\"\n  error: \"#ef4444\"\n  info: \"#3b82f6\"\ntypography:\n  display:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"64px\"\n    fontWeight: \"700\"\n    lineHeight: \"1.0\"\n    letterSpacing: \"-0.04em\"\n  heading1:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"48px\"\n    fontWeight: \"700\"\n    lineHeight: \"1.1\"\n    letterSpacing: \"-0.02em\"\n  heading2:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"36px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.2\"\n    letterSpacing: \"-0.01em\"\n  heading3:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"24px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.3\"\n  heading4:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"18px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.4\"\n  body:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"16px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.5\"\n  body-small:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"14px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.5\"\n  caption:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"12px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.4\"\n  code:\n    fontFamily: \"JetBrains Mono, Consolas, monospace\"\n    fontSize: \"14px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.6\"\nspacing:\n  0: \"0\"\n  0.5: \"2px\"\n  1: \"4px\"\n  1.5: \"6px\"\n  2: \"8px\"\n  3: \"12px\"\n  4: \"16px\"\n  5: \"20px\"\n  6: \"24px\"\n  8: \"32px\"\n  10: \"40px\"\n  12: \"48px\"\n  16: \"64px\"\n  20: \"80px\"\nrounded:\n  none: \"0\"\n  sm: \"4px\"\n  md: \"8px\"\n  lg: \"12px\"\n  xl: \"16px\"\n  2xl: \"24px\"\n  3xl: \"32px\"\n  full: \"9999px\"\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"#ffffff\"\n    typography: \"{typography.body}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.2} {spacing.4}\"\n    height: \"40px\"\n  button-secondary:\n    backgroundColor: \"transparent\"\n    textColor: \"{colors.primary}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.2} {spacing.4}\"\n  card:\n    backgroundColor: \"{colors.surface}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded.lg}\"\n    padding: \"{spacing.4}\"\n  input:\n    backgroundColor: \"{colors.background}\"\n    textColor: \"{colors.text-main}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.2} {spacing.3}\"\n    height: \"40px\"\n---\n```\n\n## Markdown Body 章节顺序\n\n章节必须按以下顺序排列（Google design.md 规范强制要求）：\n\n### 1. Overview（别名：Brand & Style）\n\n设计系统概述，描述整体设计哲学和视觉印象：\n\n```markdown\n## Overview\n\n[设计系统名称] 是一个 [风格定位] 的设计系统。\n\n**视觉哲学**\n- 设计风格定位（极简、奢华、技术感、温暖等）\n- 整体视觉印象（深色/浅色优先、色彩策略等）\n- 关键视觉特征列表\n\n**设计原则**\n1. 原则一：说明\n2. 原则二：说明\n```\n\n### 2. Colors\n\n详细记录颜色系统：\n\n```markdown\n## Colors\n\n### 品牌色\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Primary | `#533afd` | 主要品牌色、CTA 按钮 |\n| Secondary | `#00d4ff` | 次级强调、链接 |\n\n### 背景与表面\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Background | `#ffffff` | 页面主背景 |\n| Background Subtle | `#f5f5f7` | 次级背景区域 |\n| Surface | `#ffffff` | 卡片、面板背景 |\n\n### 文字颜色\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Text Main | `#1a1a1a` | 主要文字、标题 |\n| Text Muted | `#6b6b6b` | 次要文字、描述 |\n| Text Subtle | `#999999` | 占位符、禁用状态 |\n\n### 状态色\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Success | `#22c55e` | 成功状态 |\n| Warning | `#f59e0b` | 警告状态 |\n| Error | `#ef4444` | 错误状态 |\n```\n\n### 3. Typography\n\n字体排版规则：\n\n```markdown\n## Typography\n\n### 字体族\n\n**主字体**：Inter（无衬线，现代几何风格）\n**等宽字体**：JetBrains Mono（代码展示）\n\n### 排版层级\n\n| 角色 | 字号 | 字重 | 行高 | 字间距 | 用途 |\n|------|------|------|------|--------|------|\n| Display | 64px | 700 | 1.0 | -0.04em | 首屏大标题 |\n| H1 | 48px | 700 | 1.1 | -0.02em | 页面主标题 |\n| H2 | 36px | 600 | 1.2 | -0.01em | 章节标题 |\n| H3 | 24px | 600 | 1.3 | - | 卡片标题 |\n| H4 | 18px | 600 | 1.4 | - | 小节标题 |\n| Body | 16px | 400 | 1.5 | - | 正文内容 |\n| Small | 14px | 400 | 1.5 | - | 辅助信息 |\n| Caption | 12px | 400 | 1.4 | - | 标签、时间戳 |\n\n### 排版原则\n\n- 标题使用紧密的字间距（负值）增强冲击力\n- 正文保持舒适行高（1.5）提升可读性\n- 字重仅使用 400、600、700 三个档位\n```\n\n### 4. Layout（别名：Layout & Spacing）\n\n布局与间距系统：\n\n```markdown\n## Layout\n\n### 间距刻度\n\n基于 4px 基础单位的间距系统：\n\n| 级别 | 值 | 用途 |\n|------|-----|------|\n| 1 | 4px | 紧凑元素间距 |\n| 2 | 8px | 相关元素间距 |\n| 3 | 12px | 组件内间距 |\n| 4 | 16px | 标准内边距 |\n| 6 | 24px | 区块间距 |\n| 8 | 32px | 大区块间距 |\n\n### 网格系统\n\n- 最大内容宽度：1200px\n- 列数：12 列\n- 列间距：24px\n- 边距：16px（移动端）/ 24px（桌面端）\n\n### 断点\n\n| 名称 | 宽度 | 用途 |\n|------|------|------|\n| Mobile | < 640px | 手机竖屏 |\n| Tablet | 640-1024px | 平板/小屏笔记本 |\n| Desktop | > 1024px | 桌面端 |\n```\n\n### 5. Elevation & Depth（别名：Elevation）\n\n阴影与层级系统：\n\n```markdown\n## Elevation & Depth\n\n### 阴影层级\n\n| 级别 | 阴影值 | 用途 |\n|------|--------|------|\n| Subtle | `0 1px 2px rgba(0,0,0,0.05)` | 卡片默认状态 |\n| Medium | `0 4px 12px rgba(0,0,0,0.1)` | 悬停状态、下拉菜单 |\n| High | `0 8px 24px rgba(0,0,0,0.15)` | 模态框、弹窗 |\n\n### 层级原则\n\n- 扁平优先：尽量减少阴影使用\n- 语义层级：通过背景色差异表达层级\n- 交互反馈：悬停时增加阴影深度\n```\n\n### 6. Shapes\n\n圆角与形状系统：\n\n```markdown\n## Shapes\n\n### 圆角刻度\n\n| 级别 | 值 | 用途 |\n|------|-----|------|\n| none | 0 | 无圆角 |\n| sm | 4px | 小按钮、标签 |\n| md | 8px | 输入框、按钮 |\n| lg | 12px | 卡片 |\n| xl | 16px | 大卡片、模态框 |\n| 2xl | 24px | 特殊容器 |\n| full | 9999px | 胶囊形状、头像 |\n\n### 形状原则\n\n- 按钮和输入框使用统一圆角（8px）\n- 卡片使用较大圆角（12px）增强柔和感\n- 头像和徽章使用完全圆形\n```\n\n### 7. Components\n\n组件样式详细说明：\n\n```markdown\n## Components\n\n### 按钮\n\n**主要按钮**\n- 背景：`{colors.primary}`\n- 文字：`#ffffff`\n- 圆角：`{rounded.md}`\n- 高度：40px\n- 内边距：8px 16px\n\n**次要按钮**\n- 背景：透明\n- 文字：`{colors.primary}`\n- 边框：`{colors.border}`\n- 圆角：`{rounded.md}`\n\n**幽灵按钮**\n- 背景：透明\n- 文字：`{colors.text-main}`\n- 无边框\n- 悬停时背景：`{colors.background-subtle}`\n\n### 卡片\n\n- 背景：`{colors.surface}`\n- 边框：`{colors.border}`（可选）\n- 圆角：`{rounded.lg}`\n- 内边距：`{spacing.4}`\n- 阴影：Subtle（默认）→ Medium（悬停）\n\n### 输入框\n\n- 背景：`{colors.background}`\n- 边框：`{colors.border}`\n- 圆角：`{rounded.md}`\n- 高度：40px\n- 聚焦边框：`{colors.primary}`\n\n### 徽章\n\n- 背景：`{colors.primary}`（透明度 10%）\n- 文字：`{colors.primary}`\n- 圆角：`{rounded.full}`\n- 内边距：4px 12px\n```\n\n### 8. Do's and Don'ts\n\n设计宜忌：\n\n```markdown\n## Do's and Don'ts\n\n### ✅ Do\n\n- 使用一致的间距刻度（4px 倍数）\n- 标题使用负字间距增强可读性\n- 保持按钮最小点击区域 44px\n- 卡片悬停时提供视觉反馈\n- 使用语义化的颜色名称\n\n### ❌ Don't\n\n- 不要混用多种主品牌色\n- 不要在正文使用负字间距\n- 不要使用纯黑（#000）作为文字颜色\n- 不要过度使用阴影效果\n- 不要忽略对比度要求（WCAG AA）\n```\n\n## 完整示例\n\n```markdown\n---\nversion: \"alpha\"\nname: \"Atmospheric Glass\"\ndescription: \"A glassmorphism weather app with frosted crystalline UI\"\ncolors:\n  primary: \"#60A5FA\"\n  secondary: \"#818CF8\"\n  background: \"#0F172A\"\n  background-glass: \"rgba(255, 255, 255, 0.1)\"\n  text-main: \"#F8FAFC\"\n  text-muted: \"#94A3B8\"\ntypography:\n  display:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: \"72px\"\n    fontWeight: \"200\"\n    lineHeight: \"1.0\"\n  body:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: \"16px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.5\"\nspacing:\n  1: \"4px\"\n  2: \"8px\"\n  4: \"16px\"\n  6: \"24px\"\nrounded:\n  md: \"8px\"\n  lg: \"16px\"\n  xl: \"24px\"\ncomponents:\n  glass-card:\n    backgroundColor: \"rgba(255, 255, 255, 0.1)\"\n    backdropFilter: \"blur(20px)\"\n    rounded: \"{rounded.xl}\"\n    border: \"1px solid rgba(255, 255, 255, 0.2)\"\n---\n\n## Overview\n\nAtmospheric Glass captures the ethereal beauty of weather through a glassmorphism aesthetic...\n\n## Colors\n\n[颜色说明...]\n\n## Typography\n\n[排版说明...]\n\n[...其余章节...]\n```\n\n## 验证\n\n使用 Google CLI 工具验证生成的 DESIGN.md：\n\n```bash\nnpx @google/design.md lint DESIGN.md\n```\n\n常见 lint 错误：\n- `broken-ref` - 令牌引用无法解析\n- `missing-primary` - 缺少 primary 颜色定义\n- `contrast-ratio` - 颜色对比度不符合 WCAG AA\n- `orphaned-tokens` - 存在未使用的颜色令牌\n- `section-order` - 章节顺序不符合规范\n\nFile v1.1.0:skill-card.md\n\n## Description: <br>\nAnalyzes website URLs, HTML files, or screenshots to extract design tokens and generate Google design.md-compatible DESIGN.md documentation with optional HTML previews. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[zhouchang1988](https://clawhub.ai/user/zhouchang1988) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers and designers use this skill to turn an existing web page, local HTML file, or screenshot into a structured DESIGN.md design specification. The generated document captures colors, typography, spacing, shapes, component guidance, and preview HTML for review or export. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Inputs can include web pages, local files, or screenshots that may contain private or sensitive information. <br>\nMitigation: Analyze only content the user is authorized to share and review generated DESIGN.md and preview files before publishing or reusing them. <br>\nRisk: Generated preview HTML may reference third-party font CDN domains such as fonts.loli.net and gstatic.loli.net. <br>\nMitigation: Review preview HTML and replace, self-host, or remove external font links when they are not appropriate for the deployment environment. <br>\nRisk: Optional validation and export examples use npx, which can execute external packages. <br>\nMitigation: Run validation or export commands only in a trusted environment and confirm the package source before execution. <br>\n\n\n## Reference(s): <br>\n- [Google design.md specification](https://github.com/google-labs-code/design.md) <br>\n- [DESIGN.md template](references/design-template.md) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [Markdown, Code, Shell commands, Configuration, Guidance] <br>\n**Output Format:** [Markdown DESIGN.md with YAML front matter, optional HTML preview files, and inline validation/export commands] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [May include light and dark preview HTML; generated preview font links should be reviewed before publishing.] <br>\n\n## Skill Version(s): <br>\n1.1.0 (source: server release metadata) <br>\n\n## Ethical Considerations: <br>\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. <br>\n\nArchive v1.0.0: 3 files, 7722 bytes\n\nFiles: references/design-template.md (10084b), SKILL.md (7863b), _meta.json (133b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: make-design-md\ndescription: 网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求\"分析设计风格\"、\"提取设计规范\"、\"生成设计文档\"、\"从XX网站提取风格\"、\"分析这个页面的设计\"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。\n---\n\n# Make Design MD\n\n从网站、HTML文件或截图分析设计风格，生成符合 [Google design.md 规范](https://github.com/google-labs-code/design.md) 的结构化 DESIGN.md 设计规范文档。\n\n## 规范说明\n\n本技能遵循 Google 开源的 design.md 规范，生成的文档包含：\n\n1. **YAML Front Matter** - 机器可读的设计令牌（colors, typography, spacing, rounded, components）\n2. **Markdown Body** - 人类可读的设计原理说明\n\n生成的 DESIGN.md 可通过官方 CLI 工具验证和导出：\n```bash\nnpx @google/design.md lint DESIGN.md        # 验证格式\nnpx @google/design.md export --format tailwind DESIGN.md  # 导出 Tailwind 配置\n```\n\n## 工作流程\n\n### 输入类型判断\n\n根据用户提供的输入类型选择相应的分析路径：\n\n| 输入类型 | 识别方式 | 处理方法 |\n|---------|---------|---------|\n| 网站URL | 以 http:// 或 https:// 开头 | 使用 WebFetch 抓取页面内容 |\n| HTML文件 | 以 .html 或 .htm 结尾的文件路径 | 使用 Read 工具读取文件 |\n| 截图文件 | 以 .png、.jpg、.jpeg、.webp 结尾 | 使用 Read 工具查看图片 |\n\n### 分析流程\n\n1. **获取内容**\n   - URL：使用 WebFetch 抓取页面 HTML\n   - HTML文件：使用 Read 工具读取\n   - 截图：使用 Read 工具查看并分析视觉元素\n\n2. **提取设计令牌**\n\n   从内容中提取以下设计令牌：\n\n   **colors** - 颜色系统\n   - `primary` - 主品牌色（必须）\n   - `secondary` - 次级强调色\n   - `background` - 背景色（可包含多个层级如 `background-subtle`）\n   - `surface` - 表面色（卡片、面板）\n   - `text` - 文字色（main, muted, subtle）\n   - `border` - 边框色\n   - `success`, `warning`, `error`, `info` - 状态色\n\n   **typography** - 字体排版对象\n   每个排版角色包含：`fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`\n   ```yaml\n   typography:\n     display:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"64px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.0\"\n       letterSpacing: \"-0.04em\"\n     heading1:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"48px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.1\"\n     body:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"16px\"\n       fontWeight: \"400\"\n       lineHeight: \"1.5\"\n   ```\n\n   **spacing** - 间距刻度\n   ```yaml\n   spacing:\n     0: \"0\"\n     1: \"4px\"\n     2: \"8px\"\n     3: \"12px\"\n     4: \"16px\"\n     5: \"24px\"\n     6: \"32px\"\n     8: \"48px\"\n     10: \"64px\"\n   ```\n\n   **rounded** - 圆角刻度\n   ```yaml\n   rounded:\n     none: \"0\"\n     sm: \"4px\"\n     md: \"8px\"\n     lg: \"12px\"\n     xl: \"16px\"\n     2xl: \"24px\"\n     full: \"9999px\"\n   ```\n\n   **components** - 组件样式（使用令牌引用）\n   ```yaml\n   components:\n     button-primary:\n       backgroundColor: \"{colors.primary}\"\n       textColor: \"#ffffff\"\n       typography: \"{typography.body}\"\n       rounded: \"{rounded.md}\"\n       padding: \"{spacing.2} {spacing.4}\"\n     card:\n       backgroundColor: \"{colors.surface}\"\n       borderColor: \"{colors.border}\"\n       rounded: \"{rounded.lg}\"\n   ```\n\n3. **生成 DESIGN.md**\n\n   按照以下结构生成文档：\n\n   ```markdown\n   ---\n   version: \"alpha\"\n   name: \"设计系统名称\"\n   description: \"简短描述\"\n   colors:\n     primary: \"#533afd\"\n     background: \"#ffffff\"\n     text-main: \"#1a1a1a\"\n     # ...\n   typography:\n     display:\n       fontFamily: \"Inter, sans-serif\"\n       fontSize: \"64px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.0\"\n     # ...\n   spacing:\n     1: \"4px\"\n     2: \"8px\"\n     # ...\n   rounded:\n     sm: \"4px\"\n     md: \"8px\"\n     # ...\n   components:\n     button-primary:\n       backgroundColor: \"{colors.primary}\"\n       textColor: \"#ffffff\"\n   ---\n\n   ## Overview\n\n   设计系统概述和视觉哲学...\n\n   ## Colors\n\n   颜色系统详细说明...\n\n   ## Typography\n\n   字体排版说明...\n\n   ## Layout\n\n   布局与间距说明...\n\n   ## Elevation & Depth\n\n   阴影与层级说明...\n\n   ## Shapes\n\n   圆角与形状说明...\n\n   ## Components\n\n   组件样式说明...\n\n   ## Do's and Don'ts\n\n   设计宜忌...\n   ```\n\n4. **生成预览文件**\n\n   同时生成 HTML 预览文件，从 YAML front matter 提取令牌值：\n\n   **preview.html** - 浅色/默认模式预览\n   **preview-dark.html** - 深色模式预览（如适用）\n\n   ```html\n   <style>\n     :root {\n       --color-primary: #533afd;\n       --color-background: #ffffff;\n       --spacing-1: 4px;\n       --spacing-2: 8px;\n       --rounded-md: 8px;\n     }\n   </style>\n   ```\n\n### 章节顺序（必须遵循）\n\n按 Google design.md 规范，章节必须按以下顺序排列：\n\n| 顺序 | 章节名 | 别名 |\n|-----|--------|------|\n| 1 | Overview | Brand & Style |\n| 2 | Colors | - |\n| 3 | Typography | - |\n| 4 | Layout | Layout & Spacing |\n| 5 | Elevation & Depth | Elevation |\n| 6 | Shapes | - |\n| 7 | Components | - |\n| 8 | Do's and Don'ts | - |\n\n### 令牌格式规范\n\n**颜色 (Color)**\n- 格式：`#` + 十六进制（sRGB）\n- 示例：`#1A1C1E`, `#FF5722`\n- RGBA 格式：`rgba(0, 0, 0, 0.8)`\n\n**尺寸 (Dimension)**\n- 格式：数字 + 单位（`px`, `em`, `rem`）\n- 示例：`48px`, `1.5rem`, `-0.02em`\n\n**令牌引用**\n- 格式：`{path.to.token}`\n- 示例：`{colors.primary}`, `{typography.body.fontSize}`, `{spacing.4}`\n\n**排版对象 (Typography)**\n```yaml\nheading1:\n  fontFamily: \"Inter, system-ui, sans-serif\"\n  fontSize: \"48px\"\n  fontWeight: \"700\"\n  lineHeight: \"1.1\"\n  letterSpacing: \"-0.02em\"        # 可选\n  fontFeature: \"\\\"calt\\\", \\\"kern\\\"\"  # 可选\n  fontVariation: \"\\\"wght\\\" 400\"      # 可选\n```\n\n### 分析技巧\n\n**从 CSS 提取**\n- 查找 `<style>` 标签内的样式\n- 分析 `style` 属性中的内联样式\n- 识别 CSS 变量（`--color-primary` 等）\n- 提取 Tailwind/CSS 框架的类名\n\n**从视觉推断（截图）**\n- 使用颜色提取识别主色调\n- 观察字体风格推断字体族\n- 测量间距规律\n- 分析组件形态\n\n**从 HTML 结构推断**\n- 语义化标签暗示布局意图\n- class 名称可能包含设计信息\n- 嵌套层级反映视觉层级\n\n### 验证与导出\n\n生成的 DESIGN.md 可使用 Google 官方 CLI 工具：\n\n```bash\n# 验证文档格式\nnpx @google/design.md lint DESIGN.md\n\n# 比较两个版本\nnpx @google/design.md diff DESIGN.md DESIGN-v2.md\n\n# 导出为 Tailwind 配置\nnpx @google/design.md export --format tailwind DESIGN.md\n\n# 导出为 DTCG 格式\nnpx @google/design.md export --format dtcg DESIGN.md\n\n# 查看规范\nnpx @google/design.md spec\n```\n\n**Lint 规则说明**\n- `broken-ref` - 令牌引用无法解析\n- `missing-primary` - 未定义 primary 颜色\n- `contrast-ratio` - WCAG AA 对比度检查\n- `orphaned-tokens` - 未使用的颜色令牌\n- `section-order` - 章节顺序不符合规范\n\n## 使用示例\n\n**分析网站 URL**\n```\n分析 https://linear.app 的设计风格，生成 DESIGN.md\n```\n\n**分析本地 HTML**\n```\n分析 ./dist/index.html 的设计风格\n```\n\n**分析截图**\n```\n分析 ./screenshots/homepage.png 的设计风格\n```\n\n**生成后验证**\n```\n生成 DESIGN.md 后用 Google CLI 验证格式是否正确\n```\n\n**导出为 Tailwind 配置**\n```\n将 DESIGN.md 导出为 tailwind.config.js\n```\n\n## 资源\n\n- `references/design-template.md` - DESIGN.md 文档模板结构\n- [Google design.md 规范](https://github.com/google-labs-code/design.md) - 官方规范仓库\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn7a799d479xj5aftb4bqm6ea984cv4m\",\n  \"slug\": \"make-design-md\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1776864083008\n}\n\nFile v1.0.0:references/design-template.md\n\n# DESIGN.md 模板\n\n此模板遵循 [Google design.md 规范](https://github.com/google-labs-code/design.md)，定义了设计规范文档的标准结构。\n\n## YAML Front Matter 结构\n\n每个 DESIGN.md 必须以 YAML front matter 开头，包含机器可读的设计令牌：\n\n```yaml\n---\nversion: \"alpha\"                    # 可选，当前版本为 \"alpha\"\nname: \"设计系统名称\"\ndescription: \"简短描述\"             # 可选\ncolors:\n  primary: \"#533afd\"                # 必须：主品牌色\n  secondary: \"#00d4ff\"\n  background: \"#ffffff\"\n  background-subtle: \"#f5f5f7\"\n  surface: \"#ffffff\"\n  surface-elevated: \"#ffffff\"\n  text-main: \"#1a1a1a\"\n  text-muted: \"#6b6b6b\"\n  text-subtle: \"#999999\"\n  border: \"#e5e5e5\"\n  border-subtle: \"#f0f0f0\"\n  success: \"#22c55e\"\n  warning: \"#f59e0b\"\n  error: \"#ef4444\"\n  info: \"#3b82f6\"\ntypography:\n  display:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"64px\"\n    fontWeight: \"700\"\n    lineHeight: \"1.0\"\n    letterSpacing: \"-0.04em\"\n  heading1:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"48px\"\n    fontWeight: \"700\"\n    lineHeight: \"1.1\"\n    letterSpacing: \"-0.02em\"\n  heading2:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"36px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.2\"\n    letterSpacing: \"-0.01em\"\n  heading3:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"24px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.3\"\n  heading4:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"18px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.4\"\n  body:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"16px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.5\"\n  body-small:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"14px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.5\"\n  caption:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"12px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.4\"\n  code:\n    fontFamily: \"JetBrains Mono, Consolas, monospace\"\n    fontSize: \"14px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.6\"\nspacing:\n  0: \"0\"\n  0.5: \"2px\"\n  1: \"4px\"\n  1.5: \"6px\"\n  2: \"8px\"\n  3: \"12px\"\n  4: \"16px\"\n  5: \"20px\"\n  6: \"24px\"\n  8: \"32px\"\n  10: \"40px\"\n  12: \"48px\"\n  16: \"64px\"\n  20: \"80px\"\nrounded:\n  none: \"0\"\n  sm: \"4px\"\n  md: \"8px\"\n  lg: \"12px\"\n  xl: \"16px\"\n  2xl: \"24px\"\n  3xl: \"32px\"\n  full: \"9999px\"\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"#ffffff\"\n    typography: \"{typography.body}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.2} {spacing.4}\"\n    height: \"40px\"\n  button-secondary:\n    backgroundColor: \"transparent\"\n    textColor: \"{colors.primary}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.2} {spacing.4}\"\n  card:\n    backgroundColor: \"{colors.surface}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded.lg}\"\n    padding: \"{spacing.4}\"\n  input:\n    backgroundColor: \"{colors.background}\"\n    textColor: \"{colors.text-main}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.2} {spacing.3}\"\n    height: \"40px\"\n---\n```\n\n## Markdown Body 章节顺序\n\n章节必须按以下顺序排列（Google design.md 规范强制要求）：\n\n### 1. Overview（别名：Brand & Style）\n\n设计系统概述，描述整体设计哲学和视觉印象：\n\n```markdown\n## Overview\n\n[设计系统名称] 是一个 [风格定位] 的设计系统。\n\n**视觉哲学**\n- 设计风格定位（极简、奢华、技术感、温暖等）\n- 整体视觉印象（深色/浅色优先、色彩策略等）\n- 关键视觉特征列表\n\n**设计原则**\n1. 原则一：说明\n2. 原则二：说明\n```\n\n### 2. Colors\n\n详细记录颜色系统：\n\n```markdown\n## Colors\n\n### 品牌色\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Primary | `#533afd` | 主要品牌色、CTA 按钮 |\n| Secondary | `#00d4ff` | 次级强调、链接 |\n\n### 背景与表面\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Background | `#ffffff` | 页面主背景 |\n| Background Subtle | `#f5f5f7` | 次级背景区域 |\n| Surface | `#ffffff` | 卡片、面板背景 |\n\n### 文字颜色\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Text Main | `#1a1a1a` | 主要文字、标题 |\n| Text Muted | `#6b6b6b` | 次要文字、描述 |\n| Text Subtle | `#999999` | 占位符、禁用状态 |\n\n### 状态色\n\n| 名称 | 值 | 用途 |\n|------|-----|------|\n| Success | `#22c55e` | 成功状态 |\n| Warning | `#f59e0b` | 警告状态 |\n| Error | `#ef4444` | 错误状态 |\n```\n\n### 3. Typography\n\n字体排版规则：\n\n```markdown\n## Typography\n\n### 字体族\n\n**主字体**：Inter（无衬线，现代几何风格）\n**等宽字体**：JetBrains Mono（代码展示）\n\n### 排版层级\n\n| 角色 | 字号 | 字重 | 行高 | 字间距 | 用途 |\n|------|------|------|------|--------|------|\n| Display | 64px | 700 | 1.0 | -0.04em | 首屏大标题 |\n| H1 | 48px | 700 | 1.1 | -0.02em | 页面主标题 |\n| H2 | 36px | 600 | 1.2 | -0.01em | 章节标题 |\n| H3 | 24px | 600 | 1.3 | - | 卡片标题 |\n| H4 | 18px | 600 | 1.4 | - | 小节标题 |\n| Body | 16px | 400 | 1.5 | - | 正文内容 |\n| Small | 14px | 400 | 1.5 | - | 辅助信息 |\n| Caption | 12px | 400 | 1.4 | - | 标签、时间戳 |\n\n### 排版原则\n\n- 标题使用紧密的字间距（负值）增强冲击力\n- 正文保持舒适行高（1.5）提升可读性\n- 字重仅使用 400、600、700 三个档位\n```\n\n### 4. Layout（别名：Layout & Spacing）\n\n布局与间距系统：\n\n```markdown\n## Layout\n\n### 间距刻度\n\n基于 4px 基础单位的间距系统：\n\n| 级别 | 值 | 用途 |\n|------|-----|------|\n| 1 | 4px | 紧凑元素间距 |\n| 2 | 8px | 相关元素间距 |\n| 3 | 12px | 组件内间距 |\n| 4 | 16px | 标准内边距 |\n| 6 | 24px | 区块间距 |\n| 8 | 32px | 大区块间距 |\n\n### 网格系统\n\n- 最大内容宽度：1200px\n- 列数：12 列\n- 列间距：24px\n- 边距：16px（移动端）/ 24px（桌面端）\n\n### 断点\n\n| 名称 | 宽度 | 用途 |\n|------|------|------|\n| Mobile | < 640px | 手机竖屏 |\n| Tablet | 640-1024px | 平板/小屏笔记本 |\n| Desktop | > 1024px | 桌面端 |\n```\n\n### 5. Elevation & Depth（别名：Elevation）\n\n阴影与层级系统：\n\n```markdown\n## Elevation & Depth\n\n### 阴影层级\n\n| 级别 | 阴影值 | 用途 |\n|------|--------|------|\n| Subtle | `0 1px 2px rgba(0,0,0,0.05)` | 卡片默认状态 |\n| Medium | `0 4px 12px rgba(0,0,0,0.1)` | 悬停状态、下拉菜单 |\n| High | `0 8px 24px rgba(0,0,0,0.15)` | 模态框、弹窗 |\n\n### 层级原则\n\n- 扁平优先：尽量减少阴影使用\n- 语义层级：通过背景色差异表达层级\n- 交互反馈：悬停时增加阴影深度\n```\n\n### 6. Shapes\n\n圆角与形状系统：\n\n```markdown\n## Shapes\n\n### 圆角刻度\n\n| 级别 | 值 | 用途 |\n|------|-----|------|\n| none | 0 | 无圆角 |\n| sm | 4px | 小按钮、标签 |\n| md | 8px | 输入框、按钮 |\n| lg | 12px | 卡片 |\n| xl | 16px | 大卡片、模态框 |\n| 2xl | 24px | 特殊容器 |\n| full | 9999px | 胶囊形状、头像 |\n\n### 形状原则\n\n- 按钮和输入框使用统一圆角（8px）\n- 卡片使用较大圆角（12px）增强柔和感\n- 头像和徽章使用完全圆形\n```\n\n### 7. Components\n\n组件样式详细说明：\n\n```markdown\n## Components\n\n### 按钮\n\n**主要按钮**\n- 背景：`{colors.primary}`\n- 文字：`#ffffff`\n- 圆角：`{rounded.md}`\n- 高度：40px\n- 内边距：8px 16px\n\n**次要按钮**\n- 背景：透明\n- 文字：`{colors.primary}`\n- 边框：`{colors.border}`\n- 圆角：`{rounded.md}`\n\n**幽灵按钮**\n- 背景：透明\n- 文字：`{colors.text-main}`\n- 无边框\n- 悬停时背景：`{colors.background-subtle}`\n\n### 卡片\n\n- 背景：`{colors.surface}`\n- 边框：`{colors.border}`（可选）\n- 圆角：`{rounded.lg}`\n- 内边距：`{spacing.4}`\n- 阴影：Subtle（默认）→ Medium（悬停）\n\n### 输入框\n\n- 背景：`{colors.background}`\n- 边框：`{colors.border}`\n- 圆角：`{rounded.md}`\n- 高度：40px\n- 聚焦边框：`{colors.primary}`\n\n### 徽章\n\n- 背景：`{colors.primary}`（透明度 10%）\n- 文字：`{colors.primary}`\n- 圆角：`{rounded.full}`\n- 内边距：4px 12px\n```\n\n### 8. Do's and Don'ts\n\n设计宜忌：\n\n```markdown\n## Do's and Don'ts\n\n### ✅ Do\n\n- 使用一致的间距刻度（4px 倍数）\n- 标题使用负字间距增强可读性\n- 保持按钮最小点击区域 44px\n- 卡片悬停时提供视觉反馈\n- 使用语义化的颜色名称\n\n### ❌ Don't\n\n- 不要混用多种主品牌色\n- 不要在正文使用负字间距\n- 不要使用纯黑（#000）作为文字颜色\n- 不要过度使用阴影效果\n- 不要忽略对比度要求（WCAG AA）\n```\n\n## 完整示例\n\n```markdown\n---\nversion: \"alpha\"\nname: \"Atmospheric Glass\"\ndescription: \"A glassmorphism weather app with frosted crystalline UI\"\ncolors:\n  primary: \"#60A5FA\"\n  secondary: \"#818CF8\"\n  background: \"#0F172A\"\n  background-glass: \"rgba(255, 255, 255, 0.1)\"\n  text-main: \"#F8FAFC\"\n  text-muted: \"#94A3B8\"\ntypography:\n  display:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: \"72px\"\n    fontWeight: \"200\"\n    lineHeight: \"1.0\"\n  body:\n    fontFamily: \"Inter, sans-serif\"\n    fontSize: \"16px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.5\"\nspacing:\n  1: \"4px\"\n  2: \"8px\"\n  4: \"16px\"\n  6: \"24px\"\nrounded:\n  md: \"8px\"\n  lg: \"16px\"\n  xl: \"24px\"\ncomponents:\n  glass-card:\n    backgroundColor: \"rgba(255, 255, 255, 0.1)\"\n    backdropFilter: \"blur(20px)\"\n    rounded: \"{rounded.xl}\"\n    border: \"1px solid rgba(255, 255, 255, 0.2)\"\n---\n\n## Overview\n\nAtmospheric Glass captures the ethereal beauty of weather through a glassmorphism aesthetic...\n\n## Colors\n\n[颜色说明...]\n\n## Typography\n\n[排版说明...]\n\n[...其余章节...]\n```\n\n## 验证\n\n使用 Google CLI 工具验证生成的 DESIGN.md：\n\n```bash\nnpx @google/design.md lint DESIGN.md\n```\n\n常见 lint 错误：\n- `broken-ref` - 令牌引用无法解析\n- `missing-primary` - 缺少 primary 颜色定义\n- `contrast-ratio` - 颜色对比度不符合 WCAG AA\n- `orphaned-tokens` - 存在未使用的颜色令牌\n- `section-order` - 章节顺序不符合规范","readmeExcerpt":"Skill: make-design-md Owner: zhouchang1988 Summary: 网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求\"分析设计风格\"、\"提取设计规范\"、\"生成设计文档\"、\"从XX网站提取风格\"、\"分析这个页面的设计\"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。 Tags: latest:1.2.0 Version history: v1.2.0 | 2026-07-27T06:43:43.107Z | user Release v1.2.0 from GitHub v1.1.0 | 2026-04-29T07:24:47.253Z | user Release v1.1.0 from GitHub v1.0.0 | 2026-04-22T13:2","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"npx @google/design.md lint DESIGN.md                     # 验证格式（JSON 输出）\nnpx @google/design.md export --format css-tailwind DESIGN.md  # 导出 Tailwind v4 主题"},{"language":"yaml","snippet":"typography:\n     display:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"64px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.0\"\n       letterSpacing: \"-0.04em\"\n     heading1:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"48px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.1\"\n     body:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"16px\"\n       fontWeight: \"400\"\n       lineHeight: \"1.5\""},{"language":"yaml","snippet":"spacing:\n     0: \"0\"\n     1: \"4px\"\n     2: \"8px\"\n     3: \"12px\"\n     4: \"16px\"\n     5: \"24px\"\n     6: \"32px\"\n     8: \"48px\"\n     10: \"64px\""},{"language":"yaml","snippet":"rounded:\n     none: \"0px\"\n     sm: \"4px\"\n     md: \"8px\"\n     lg: \"12px\"\n     xl: \"16px\"\n     2xl: \"24px\"\n     full: \"9999px\""},{"language":"yaml","snippet":"components:\n     button-primary:\n       backgroundColor: \"{colors.primary}\"\n       textColor: \"#ffffff\"\n       typography: \"{typography.body}\"\n       rounded: \"{rounded.md}\"\n       padding: \"{spacing.2} {spacing.4}\"\n     button-primary-hover:\n       backgroundColor: \"{colors.primary-hover}\"\n     card:\n       backgroundColor: \"{colors.surface}\"\n       borderColor: \"{colors.border}\"\n       rounded: \"{rounded.lg}\""},{"language":"markdown","snippet":"---\n   version: \"alpha\"\n   name: \"设计系统名称\"\n   description: \"简短描述\"\n   colors:\n     primary: \"#533afd\"\n     background: \"#ffffff\"\n     text-main: \"#1a1a1a\"\n     # ...\n   typography:\n     display:\n       fontFamily: \"Inter, sans-serif\"\n       fontSize: \"64px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.0\"\n     # ...\n   spacing:\n     1: \"4px\"\n     2: \"8px\"\n     # ...\n   rounded:\n     sm: \"4px\"\n     md: \"8px\"\n     # ...\n   components:\n     button-primary:\n       backgroundColor: \"{colors.primary}\"\n       textColor: \"#ffffff\"\n   ---\n\n   ## Overview\n\n   设计系统概述和视觉哲学...\n\n   ## Colors\n\n   颜色系统详细说明...\n\n   ## Typography\n\n   字体排版说明...\n\n   ## Layout\n\n   布局与间距说明...\n\n   ## Elevation & Depth\n\n   阴影与层级说明...\n\n   ## Shapes\n\n   圆角与形状说明...\n\n   ## Components\n\n   组件样式说明...\n\n   ## Do's and Don'ts\n\n   设计宜忌..."}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: make-design-md\ndescription: 网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求\"分析设计风格\"、\"提取设计规范\"、\"生成设计文档\"、\"从XX网站提取风格\"、\"分析这个页面的设计\"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。\nlicense: MIT\n---\n\n# Make Design MD\n\n从网站、HTML文件或截图分析设计风格，生成符合 [Google design.md 规范](https://github.com/google-labs-code/design.md) 的结构化 DESIGN.md 设计规范文档。\n\n## 规范说明\n\n本技能遵循 Google 开源的 design.md 规范，生成的文档包含：\n\n1. **YAML Front Matter** - 机器可读的设计令牌（colors, typography, spacing, rounded, components）\n2. **Markdown Body** - 人类可读的设计原理说明\n\n生成的 DESIGN.md 可通过官方 CLI 工具（当前版本 0.3.x）验证和导出：\n```bash\nnpx @google/design.md lint DESIGN.md                     # 验证格式（JSON 输出）\nnpx @google/design.md export --format css-tailwind DESIGN.md  # 导出 Tailwind v4 主题\n```\n\n## 工作流程\n\n### 输入类型判断\n\n根据用户提供的输入类型选择相应的分析路径：\n\n| 输入类型 | 识别方式 | 处理方法 |\n|---------|---------|---------|\n| 网站URL | 以 http:// 或 https:// 开头 | 使用 WebFetch 抓取页面内容 |\n| HTML文件 | 以 .html 或 .htm 结尾的文件路径 | 使用 Read 工具读取文件 |\n| 截图文件 | 以 .png、.jpg、.jpeg、.webp 结尾 | 使用 Read 工具查看图片 |\n\n### 分析流程\n\n1. **获取内容**\n   - URL：使用 WebFetch 抓取页面 HTML\n   - HTML文件：使用 Read 工具读取\n   - 截图：使用 Read 工具查看并分析视觉元素\n\n2. **提取设计令牌**\n\n   从内容中提取以下设计令牌：\n\n   **colors** - 颜色系统\n   - `primary` - 主品牌色（必须）\n   - `primary-hover` - 主色悬停态（配合组件变体使用）\n   - `secondary` - 次级强调色\n   - `background` - 背景色（可包含多个层级如 `background-subtle`）\n   - `surface` - 表面色（卡片、面板）\n   - `text` - 文字色（main, muted, subtle）\n   - `border` - 边框色\n   - `success`, `warning`, `error`, `info` - 状态色\n\n   **typography** - 字体排版对象\n   每个排版角色包含：`fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`\n   ```yaml\n   typography:\n     display:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"64px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.0\"\n       letterSpacing: \"-0.04em\"\n     heading1:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"48px\"\n       fontWeight: \"700\"\n       lineHeight: \"1.1\"\n     body:\n       fontFamily: \"Inter, system-ui, sans-serif\"\n       fontSize: \"16px\"\n       fontWeight: \"400\"\n       lineHeight: \"1.5\"\n   ```\n\n   **spacing** - 间距刻度\n   ```yaml\n   spacing:\n     0: \"0\"\n     1: \"4px\"\n     2: \"8px\"\n     3: \"12px\"\n     4: \"16px\"\n     5: \"24px\"\n     6: \"32px\"\n     8: \"48px\"\n     10: \"64px\"\n   ```\n\n   **rounded** - 圆角刻度\n   ```yaml\n   rounded:\n     none: \"0px\"\n     sm: \"4px\"\n     md: \"8px\"\n     lg: \"12px\"\n     xl: \"16px\"\n     2xl: \"24px\"\n     full: \"9999px\"\n   ```\n\n   **components** - 组件样式（使用令牌引用）\n   ```yaml\n   components:\n     button-primary:\n       backgroundColor: \"{colors.primary}\"\n       textColor: \"#ffffff\"\n       typography: \"{typography.body}\"\n       rounded: \"{rounded.md}\"\n       padding: \"{spacing.2} {spacing.4}\"\n     button-primary-hover:\n       backgroundColor: \"{colors.primary-hover}\"\n     card:\n       backgroundColor: \"{colors.surface}\"\n       borderColor: \"{colors.border}\"\n       rounded: \"{rounded.lg}\"\n   ```\n\n   组件属性的规范清单：`backgroundColor`, `textColor`, `typography`, `rounded`, `padding`, `size`, `height`, `width`。其他属性（如 `borderColor`, `back"},{"path":"README.md","content":"# make-design-md\n\n网站设计风格分析器 — 从网站 URL、HTML 文件或截图提取设计规范，生成符合 [Google design.md 规范](https://github.com/google-labs-code/design.md) 的结构化 DESIGN.md 文档。\n\n## 功能\n\n- **URL 分析** — 输入网站地址，自动抓取并提取设计令牌\n- **HTML 文件分析** — 读取本地 HTML，解析 CSS 样式与结构\n- **截图分析** — 从视觉截图中推断颜色、字体、间距等设计元素\n- **规范输出** — 生成包含 YAML front matter 和 Markdown 正文的 DESIGN.md\n- **预览生成** — 同时输出浅色/深色模式的 HTML 预览文件\n- **验证导出** — 支持 Google 官方 CLI 验证格式、导出 Tailwind/DTCG 配置\n\n## 快速开始\n\n### 作为 Claude Code Skill 使用\n\n在 Claude Code 中直接对话即可触发：\n\n```\n分析 https://linear.app 的设计风格，生成 DESIGN.md\n```\n\n```\n分析 ./dist/index.html 的设计风格\n```\n\n```\n分析 ./screenshots/homepage.png 的设计风格\n```\n\n### 使用 Google CLI 验证与导出\n\n```bash\n# 验证文档格式（JSON 输出）\nnpx @google/design.md lint DESIGN.md\n\n# 导出为 Tailwind v3 配置（theme.extend JSON，--format tailwind 为其别名）\nnpx @google/design.md export --format json-tailwind DESIGN.md\n\n# 导出为 Tailwind v4 主题（CSS @theme 块）\nnpx @google/design.md export --format css-tailwind DESIGN.md\n\n# 导出为 DTCG 格式（W3C Design Tokens Format）\nnpx @google/design.md export --format dtcg DESIGN.md\n```\n\n> Windows/PowerShell 下若 `npx @google/design.md` 无输出，改用无点的别名：`npx -p @google/design.md designmd lint DESIGN.md`。\n\n## 输出结构\n\n生成的 DESIGN.md 包含：\n\n| 部分 | 说明 |\n|------|------|\n| YAML Front Matter | 机器可读的设计令牌（colors, typography, spacing, rounded, components） |\n| Markdown Body | 人类可读的设计原理说明 |\n\n章节按规范顺序排列：Overview → Colors → Typography → Layout → Elevation & Depth → Shapes → Components → Do's and Don'ts\n\n## 字体 CDN 规则\n\n生成网页/预览文件时，Google Fonts 必须使用国内镜像：\n\n| 原始地址 | 替换为 |\n|---------|--------|\n| `fonts.googleapis.com` | `fonts.loli.net` |\n| `fonts.gstatic.com` | `gstatic.loli.net` |\n\n## 项目结构\n\n```\n├── SKILL.md                  # Skill 定义文件\n├── references/\n│   └── design-template.md    # DESIGN.md 文档模板\n└── LICENSE                   # MIT 许可证\n```\n\n## 参考\n\n- [Google design.md 规范](https://github.com/google-labs-code/design.md) — 官方规范仓库\n\n## License\n\n[MIT](LICENSE)"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7a799d479xj5aftb4bqm6ea984cv4m\",\n  \"slug\": \"make-design-md\",\n  \"version\": \"1.2.0\",\n  \"publishedAt\": 1785134623107\n}"},{"path":"references/design-template.md","content":"# DESIGN.md 模板\n\n此模板遵循 [Google design.md 规范](https://github.com/google-labs-code/design.md)，定义了设计规范文档的标准结构。\n\n## YAML Front Matter 结构\n\n每个 DESIGN.md 必须以 YAML front matter 开头，包含机器可读的设计令牌：\n\n```yaml\n---\nversion: \"alpha\"                    # 可选，当前版本为 \"alpha\"\nname: \"设计系统名称\"\ndescription: \"简短描述\"             # 可选\ncolors:\n  primary: \"#533afd\"                # 必须：主品牌色\n  primary-hover: \"#4330e0\"          # 主色悬停态\n  secondary: \"#00d4ff\"\n  background: \"#ffffff\"\n  background-subtle: \"#f5f5f7\"\n  surface: \"#ffffff\"\n  surface-elevated: \"#ffffff\"\n  text-main: \"#1a1a1a\"\n  text-muted: \"#6b6b6b\"\n  text-subtle: \"#999999\"\n  border: \"#e5e5e5\"\n  border-subtle: \"#f0f0f0\"\n  success: \"#22c55e\"\n  warning: \"#f59e0b\"\n  error: \"#ef4444\"\n  info: \"#3b82f6\"\ntypography:\n  display:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"64px\"\n    fontWeight: \"700\"\n    lineHeight: \"1.0\"\n    letterSpacing: \"-0.04em\"\n  heading1:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"48px\"\n    fontWeight: \"700\"\n    lineHeight: \"1.1\"\n    letterSpacing: \"-0.02em\"\n  heading2:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"36px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.2\"\n    letterSpacing: \"-0.01em\"\n  heading3:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"24px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.3\"\n  heading4:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"18px\"\n    fontWeight: \"600\"\n    lineHeight: \"1.4\"\n  body:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"16px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.5\"\n  body-small:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"14px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.5\"\n  caption:\n    fontFamily: \"Inter, system-ui, sans-serif\"\n    fontSize: \"12px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.4\"\n  code:\n    fontFamily: \"JetBrains Mono, Consolas, monospace\"\n    fontSize: \"14px\"\n    fontWeight: \"400\"\n    lineHeight: \"1.6\"\nspacing:\n  0: \"0\"\n  0.5: \"2px\"\n  1: \"4px\"\n  1.5: \"6px\"\n  2: \"8px\"\n  3: \"12px\"\n  4: \"16px\"\n  5: \"20px\"\n  6: \"24px\"\n  8: \"32px\"\n  10: \"40px\"\n  12: \"48px\"\n  16: \"64px\"\n  20: \"80px\"\nrounded:\n  none: \"0px\"\n  sm: \"4px\"\n  md: \"8px\"\n  lg: \"12px\"\n  xl: \"16px\"\n  2xl: \"24px\"\n  3xl: \"32px\"\n  full: \"9999px\"\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"#ffffff\"\n    typography: \"{typography.body}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.2} {spacing.4}\"\n    height: \"40px\"\n  button-primary-hover:\n    backgroundColor: \"{colors.primary-hover}\"\n  button-secondary:\n    backgroundColor: \"transparent\"\n    textColor: \"{colors.primary}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.2} {spacing.4}\"\n  card:\n    backgroundColor: \"{colors.surface}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded.lg}\"\n    padding: \"{spacing.4}\"\n  input:\n    backgroundColor: \"{colors.background}\"\n    textColor: \"{colors.text-main}\"\n    borderColor: \"{colors.border}\"\n    rounded: \"{rounded"},{"path":"skill-card.md","content":"## Description:\n\nmake-design-md analyzes a website URL, HTML file, or screenshot to extract design tokens and produce a Google design.md-compatible DESIGN.md document.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[zhouchang1988](https://clawhub.ai/user/zhouchang1988)\n\n### License/Terms of Use:\n\nMIT\n\n## Use Case:\n\nDevelopers and designers use this skill to turn a website, local HTML file, or screenshot into a structured DESIGN.md design specification, preview files, and validation or export commands.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Running an unpinned @google/design.md CLI through npx can fetch an unexpected package version.\n\nMitigation: Pin @google/design.md to an exact reviewed version or run it from a lockfile-managed dependency, and avoid running npx with production credentials available.\n\nRisk: Fetched websites are untrusted inputs and may influence generated design guidance.\n\nMitigation: Review generated DESIGN.md and previews before use, and keep sensitive credentials out of the agent environment while fetching pages.\n\nRisk: The skill mandates a third-party font mirror for generated previews.\n\nMitigation: Replace the font mirror with local fonts or a user-approved CDN before using generated previews in controlled environments.\n\n## Reference(s):\n\n- [Google design.md specification](https://github.com/google-labs-code/design.md)\n- [DESIGN.md template](references/design-template.md)\n\n## Skill Output:\n\n**Output Type(s):** [markdown, text, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown DESIGN.md with YAML front matter, optional HTML preview files, and inline validation or export shell commands]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include design-token references, preview HTML, and guidance for validating or exporting with the Google design.md CLI.]\n\n## Skill Version(s):\n\n1.2.0 (source: server release metadata)\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."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求\"分析设计风格\"、\"提取设计规范\"、\"生成设计文档\"、\"从XX网站提取风格\"、\"分析这个页面的设计\"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。 Skill: make-design-md Owner: zhouchang1988 Summary: 网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求\"分析设计风格\"、\"提取设计规范\"、\"生成设计文档\"、\"从XX网站提取风格\"、\"分析这个页面的设计\"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。 Tags: latest:1.2.0 Version history: v1.2.0 | 2026-07-27T06:43:43.107Z | user Release v1.2.0 from GitHub v1.1.0 | 2026-04-29T07:24:47.253Z | user Release v1.1.0 from GitHub v1.0.0 | 2026-04-22T13:2","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1150,"uniquenessScore":48,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T08:15:15.823Z","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-11T08:15:15.823Z","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-11T10:52:15.964Z","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"}]}}}