Xpersona
agentCLAWHUBUnverified

make-design-md

网站设计风格分析器，从网站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

OpenClaw
View on ClawHubHomepage

Rank

62

Safety

84

Downloads

1.1k

Updated

Oct 11, 2026

Version

1.2.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

  • Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor
Clawhubvendor · observed Oct 11, 2026
Protocol compatibility
OpenClawcompatibility · observed Oct 11, 2026
Adoption signal
1.1K downloadsadoption · observed Oct 11, 2026
Latest release
1.2.0release · observed Jul 27, 2026
Handshake status
UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s1720bd1njpgkfeygpnhevb7z184dag4:make-design-md
  1. Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
  2. 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: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/snapshot"

Documentation

CLAWHUB

55,669 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: make-design-md
description: 网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求"分析设计风格"、"提取设计规范"、"生成设计文档"、"从XX网站提取风格"、"分析这个页面的设计"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。
license: MIT
---

# Make Design MD

从网站、HTML文件或截图分析设计风格，生成符合 [Google design.md 规范](https://github.com/google-labs-code/design.md) 的结构化 DESIGN.md 设计规范文档。

## 规范说明

本技能遵循 Google 开源的 design.md 规范，生成的文档包含：

1. **YAML Front Matter** - 机器可读的设计令牌（colors, typography, spacing, rounded, components）
2. **Markdown Body** - 人类可读的设计原理说明

生成的 DESIGN.md 可通过官方 CLI 工具（当前版本 0.3.x）验证和导出：
```bash
npx @google/design.md lint DESIGN.md                     # 验证格式（JSON 输出）
npx @google/design.md export --format css-tailwind DESIGN.md  # 导出 Tailwind v4 主题
```

## 工作流程

### 输入类型判断

根据用户提供的输入类型选择相应的分析路径：

| 输入类型 | 识别方式 | 处理方法 |
|---------|---------|---------|
| 网站URL | 以 http:// 或 https:// 开头 | 使用 WebFetch 抓取页面内容 |
| HTML文件 | 以 .html 或 .htm 结尾的文件路径 | 使用 Read 工具读取文件 |
| 截图文件 | 以 .png、.jpg、.jpeg、.webp 结尾 | 使用 Read 工具查看图片 |

### 分析流程

1. **获取内容**
   - URL：使用 WebFetch 抓取页面 HTML
   - HTML文件：使用 Read 工具读取
   - 截图：使用 Read 工具查看并分析视觉元素

2. **提取设计令牌**

   从内容中提取以下设计令牌：

   **colors** - 颜色系统
   - `primary` - 主品牌色（必须）
   - `primary-hover` - 主色悬停态（配合组件变体使用）
   - `secondary` - 次级强调色
   - `background` - 背景色（可包含多个层级如 `background-subtle`）
   - `surface` - 表面色（卡片、面板）
   - `text` - 文字色（main, muted, subtle）
   - `border` - 边框色
   - `success`, `warning`, `error`, `info` - 状态色

   **typography** - 字体排版对象
   每个排版角色包含：`fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`
   ```yaml
   typography:
     display:
       fontFamily: "Inter, system-ui, sans-serif"
       fontSize: "64px"
       fontWeight: "700"
       lineHeight: "1.0"
       letterSpacing: "-0.04em"
     heading1:
       fontFamily: "Inter, system-ui, sans-serif"
       fontSize: "48px"
       fontWeight: "700"
       lineHeight: "1.1"
     body:
       fontFamily: "Inter, system-ui, sans-serif"
       fontSize: "16px"
       fontWeight: "400"
       lineHeight: "1.5"
   ```

   **spacing** - 间距刻度
   ```yaml
   spacing:
     0: "0"
     1: "4px"
     2: "8px"
     3: "12px"
     4: "16px"
     5: "24px"
     6: "32px"
     8: "48px"
     10: "64px"
   ```

   **rounded** - 圆角刻度
   ```yaml
   rounded:
     none: "0px"
     sm: "4px"
     md: "8px"
     lg: "12px"
     xl: "16px"
     2xl: "24px"
     full: "9999px"
   ```

   **components** - 组件样式（使用令牌引用）
   ```yaml
   components:
     button-primary:
       backgroundColor: "{colors.primary}"
       textColor: "#ffffff"
       typography: "{typography.body}"
       rounded: "{rounded.md}"
       padding: "{spacing.2} {spacing.4}"
     button-primary-hover:
       backgroundColor: "{colors.primary-hover}"
     card:
       backgroundColor: "{colors.surface}"
       borderColor: "{colors.border}"
       rounded: "{rounded.lg}"
   ```

   组件属性的规范清单：`backgroundColor`, `textColor`, `typography`, `rounded`, `padding`, `size`, `height`, `width`。其他属性（如 `borderColor`, `back

README.md

# make-design-md

网站设计风格分析器 — 从网站 URL、HTML 文件或截图提取设计规范，生成符合 [Google design.md 规范](https://github.com/google-labs-code/design.md) 的结构化 DESIGN.md 文档。

## 功能

- **URL 分析** — 输入网站地址，自动抓取并提取设计令牌
- **HTML 文件分析** — 读取本地 HTML，解析 CSS 样式与结构
- **截图分析** — 从视觉截图中推断颜色、字体、间距等设计元素
- **规范输出** — 生成包含 YAML front matter 和 Markdown 正文的 DESIGN.md
- **预览生成** — 同时输出浅色/深色模式的 HTML 预览文件
- **验证导出** — 支持 Google 官方 CLI 验证格式、导出 Tailwind/DTCG 配置

## 快速开始

### 作为 Claude Code Skill 使用

在 Claude Code 中直接对话即可触发：

```
分析 https://linear.app 的设计风格，生成 DESIGN.md
```

```
分析 ./dist/index.html 的设计风格
```

```
分析 ./screenshots/homepage.png 的设计风格
```

### 使用 Google CLI 验证与导出

```bash
# 验证文档格式（JSON 输出）
npx @google/design.md lint DESIGN.md

# 导出为 Tailwind v3 配置（theme.extend JSON，--format tailwind 为其别名）
npx @google/design.md export --format json-tailwind DESIGN.md

# 导出为 Tailwind v4 主题（CSS @theme 块）
npx @google/design.md export --format css-tailwind DESIGN.md

# 导出为 DTCG 格式（W3C Design Tokens Format）
npx @google/design.md export --format dtcg DESIGN.md
```

> Windows/PowerShell 下若 `npx @google/design.md` 无输出，改用无点的别名：`npx -p @google/design.md designmd lint DESIGN.md`。

## 输出结构

生成的 DESIGN.md 包含：

| 部分 | 说明 |
|------|------|
| YAML Front Matter | 机器可读的设计令牌（colors, typography, spacing, rounded, components） |
| Markdown Body | 人类可读的设计原理说明 |

章节按规范顺序排列：Overview → Colors → Typography → Layout → Elevation & Depth → Shapes → Components → Do's and Don'ts

## 字体 CDN 规则

生成网页/预览文件时，Google Fonts 必须使用国内镜像：

| 原始地址 | 替换为 |
|---------|--------|
| `fonts.googleapis.com` | `fonts.loli.net` |
| `fonts.gstatic.com` | `gstatic.loli.net` |

## 项目结构

```
├── SKILL.md                  # Skill 定义文件
├── references/
│   └── design-template.md    # DESIGN.md 文档模板
└── LICENSE                   # MIT 许可证
```

## 参考

- [Google design.md 规范](https://github.com/google-labs-code/design.md) — 官方规范仓库

## License

[MIT](LICENSE)

_meta.json

{
  "ownerId": "kn7a799d479xj5aftb4bqm6ea984cv4m",
  "slug": "make-design-md",
  "version": "1.2.0",
  "publishedAt": 1785134623107
}

references/design-template.md

# DESIGN.md 模板

此模板遵循 [Google design.md 规范](https://github.com/google-labs-code/design.md)，定义了设计规范文档的标准结构。

## YAML Front Matter 结构

每个 DESIGN.md 必须以 YAML front matter 开头，包含机器可读的设计令牌：

```yaml
---
version: "alpha"                    # 可选，当前版本为 "alpha"
name: "设计系统名称"
description: "简短描述"             # 可选
colors:
  primary: "#533afd"                # 必须：主品牌色
  primary-hover: "#4330e0"          # 主色悬停态
  secondary: "#00d4ff"
  background: "#ffffff"
  background-subtle: "#f5f5f7"
  surface: "#ffffff"
  surface-elevated: "#ffffff"
  text-main: "#1a1a1a"
  text-muted: "#6b6b6b"
  text-subtle: "#999999"
  border: "#e5e5e5"
  border-subtle: "#f0f0f0"
  success: "#22c55e"
  warning: "#f59e0b"
  error: "#ef4444"
  info: "#3b82f6"
typography:
  display:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "64px"
    fontWeight: "700"
    lineHeight: "1.0"
    letterSpacing: "-0.04em"
  heading1:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "48px"
    fontWeight: "700"
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  heading2:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "36px"
    fontWeight: "600"
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  heading3:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "24px"
    fontWeight: "600"
    lineHeight: "1.3"
  heading4:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "18px"
    fontWeight: "600"
    lineHeight: "1.4"
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "1.5"
  body-small:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "1.5"
  caption:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "1.4"
  code:
    fontFamily: "JetBrains Mono, Consolas, monospace"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "1.6"
spacing:
  0: "0"
  0.5: "2px"
  1: "4px"
  1.5: "6px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  8: "32px"
  10: "40px"
  12: "48px"
  16: "64px"
  20: "80px"
rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "12px"
  xl: "16px"
  2xl: "24px"
  3xl: "32px"
  full: "9999px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: "{spacing.2} {spacing.4}"
    height: "40px"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    borderColor: "{colors.border}"
    rounded: "{rounded.md}"
    padding: "{spacing.2} {spacing.4}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    rounded: "{rounded.lg}"
    padding: "{spacing.4}"
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text-main}"
    borderColor: "{colors.border}"
    rounded: "{rounded

skill-card.md

## Description:

make-design-md analyzes a website URL, HTML file, or screenshot to extract design tokens and produce a Google design.md-compatible DESIGN.md document.

This skill is ready for commercial/non-commercial use.

## Publisher:

[zhouchang1988](https://clawhub.ai/user/zhouchang1988)

### License/Terms of Use:

MIT

## Use Case:

Developers 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.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: Running an unpinned @google/design.md CLI through npx can fetch an unexpected package version.

Mitigation: 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.

Risk: Fetched websites are untrusted inputs and may influence generated design guidance.

Mitigation: Review generated DESIGN.md and previews before use, and keep sensitive credentials out of the agent environment while fetching pages.

Risk: The skill mandates a third-party font mirror for generated previews.

Mitigation: Replace the font mirror with local fonts or a user-approved CDN before using generated previews in controlled environments.

## Reference(s):

- [Google design.md specification](https://github.com/google-labs-code/design.md)
- [DESIGN.md template](references/design-template.md)

## Skill Output:

**Output Type(s):** [markdown, text, code, shell commands, configuration, guidance]

**Output Format:** [Markdown DESIGN.md with YAML front matter, optional HTML preview files, and inline validation or export shell commands]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [May include design-token references, preview HTML, and guidance for validating or exporting with the Google design.md CLI.]

## Skill Version(s):

1.2.0 (source: server release metadata)

## Ethical Considerations:

Users 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.

Related agents

Same protocol, similar job.

Github ReposUpdated 2d agoRank 70

AionUi

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!

MCPOPENCLAW
Github ReposUpdated 6mo agoRank 70

activepieces

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

OPENCLAW
Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW
Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular

OPENCLAW

Machine-readable data

The same record, as JSON, for agents and crawlers.

{
  "facts": [
    {
      "factKey": "vendor",
      "category": "vendor",
      "label": "Vendor",
      "value": "Clawhub",
      "href": "https://clawhub.ai/zhouchang1988/skills/make-design-md",
      "sourceUrl": "https://clawhub.ai/zhouchang1988/skills/make-design-md",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-11T08:15:15.823Z",
      "isPublic": true
    },
    {
      "factKey": "protocols",
      "category": "compatibility",
      "label": "Protocol compatibility",
      "value": "OpenClaw",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/contract",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/contract",
      "sourceType": "contract",
      "confidence": "medium",
      "observedAt": "2026-10-11T08:15:15.823Z",
      "isPublic": true
    },
    {
      "factKey": "traction",
      "category": "adoption",
      "label": "Adoption signal",
      "value": "1.1K downloads",
      "href": "https://clawhub.ai/zhouchang1988/make-design-md",
      "sourceUrl": "https://clawhub.ai/zhouchang1988/make-design-md",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-11T08:15:15.823Z",
      "isPublic": true
    },
    {
      "factKey": "latest_release",
      "category": "release",
      "label": "Latest release",
      "value": "1.2.0",
      "href": "https://clawhub.ai/zhouchang1988/make-design-md",
      "sourceUrl": "https://clawhub.ai/zhouchang1988/make-design-md",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-07-27T06:43:43.107Z",
      "isPublic": true
    },
    {
      "factKey": "handshake_status",
      "category": "security",
      "label": "Handshake status",
      "value": "UNKNOWN",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/trust",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-make-design-md/trust",
      "sourceType": "trust",
      "confidence": "medium",
      "observedAt": null,
      "isPublic": true
    }
  ],
  "events": [
    {
      "eventType": "release",
      "title": "Release 1.2.0",
      "description": "Release v1.2.0 from GitHub",
      "href": "https://clawhub.ai/zhouchang1988/make-design-md",
      "sourceUrl": "https://clawhub.ai/zhouchang1988/make-design-md",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-07-27T06:43:43.107Z",
      "isPublic": true
    }
  ]
}

Record generated Oct 11, 2026.

Sponsored

Ads related to make-design-md and adjacent AI workflows.