What makes DESIGN.md — AI时代设计规范技能 notable?

2.5K downloads. Trust evidence available

How should DESIGN.md — AI时代设计规范技能 be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

Claim this agent

agentCLAWHUBUnverified

DESIGN.md — AI时代设计规范技能

DESIGN.md 设计与品牌规范技能。当用户需要创建项目设计规范文档、为AI编写品牌规范、让AI生成符合品牌风格的页面时激活。触发词：DESIGN.md、设计规范、品牌规范、设计系统、生成设计文档、写DESIGN.md、设计语言。用于：创建新项目的 DESIGN.md、更新已有设计规范、让AI按规范生成UI。 Skill: DESIGN.md — AI时代设计规范技能 Owner: zmy1006-sudo Summary: DESIGN.md 设计与品牌规范技能。当用户需要创建项目设计规范文档、为AI编写品牌规范、让AI生成符合品牌风格的页面时激活。触发词：DESIGN.md、设计规范、品牌规范、设计系统、生成设计文档、写DESIGN.md、设计语言。用于：创建新项目的 DESIGN.md、更新已有设计规范、让AI按规范生成UI。 Tags: brand:1.0.0, design:1.0.0, design-system:1.0.0, latest:1.0.0, tailwind:1.0.0, ui:1.0.0 Version history: v1.0.0 | 2026-04-07T12:34:53.905Z | user Initial: Google Stitch DESIGN.md格式，9模块完整规范，让AI生成的每个

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

2.5k

Updated

Oct 9, 2026

Version

1.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 2.5K downloads reported by the source. Last updated 10/9/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 9, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 9, 2026
Adoption signal: 2.5K downloadsadoption · observed Oct 9, 2026
Latest release: 1.0.0release · observed Apr 7, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s178943e0sqbs17b9qd9x38x7583wvdq:design-md

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: missing

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

Documentation

CLAWHUB

10,392 characters of source documentation, loaded on request.

Extracted files

4 files captured from the source.

SKILL.md

---
name: design-md
description: >
  DESIGN.md 设计与品牌规范技能。当用户需要创建项目设计规范文档、为AI编写品牌规范、让AI生成符合品牌风格的页面时激活。
  触发词：DESIGN.md、设计规范、品牌规范、设计系统、生成设计文档、写DESIGN.md、设计语言。
  用于：创建新项目的 DESIGN.md、更新已有设计规范、让AI按规范生成UI。
version: 1.0.0
---

# DESIGN.md — AI 时代的设计规范技能

> 让 AI 生成的每个页面，都符合你的品牌规范。

---

## 核心概念

**DESIGN.md** 是 Google Stitch 提出的设计规范格式——用纯文本 Markdown 描述完整设计系统，AI 能直接理解和执行。

**为什么是 Markdown？**
- AI 最擅长处理 Markdown
- 比 Figma 文件更好解析
- 比 JSON Design Token 更好读
- 放在项目根目录，AI coding agent 启动即加载

---

## 触发场景

- "帮我写一个 DESIGN.md"
- "为这个项目创建设计规范"
- "按这个规范生成一个页面"
- "更新项目的 DESIGN.md"
- "让我生成的页面风格一致"

---

## DESIGN.md 标准结构（9个模块）

每个 DESIGN.md 必须包含以下内容：

### M1 — Visual Theme & Atmosphere
用自然语言描述产品的"气质"，AI 需要理解整体感觉才能生成风格一致的内容。

```markdown
## M1 — Visual Theme & Atmosphere

DeepFMT 的视觉气质：
- **核心关键词**：专业 / 温暖 / 可信赖 / 轻量
- **情绪版**：医院的专业感，但不像传统医院那么冷；像一位值得信赖的家庭医生
- **设计哲学**：功能清晰，视觉减负；患者不需要在UI里感到压力
- **密度**：中等偏低，内容之间留有充分呼吸空间
- **明暗**：整体偏亮，避免大面积深色带来的压抑感
```

### M2 — Color Palette & Roles
完整颜色系统，每个颜色必须标注：语义名称 / HEX / RGBA / 使用场景。

```markdown
## M2 — Color Palette & Roles

| 角色 | 色值 | 使用场景 |
|------|------|---------|
| Primary | #2D7A4F | 主按钮、导航激活态、关键数据 |
| Primary Light | #3A9460 | Hover态、次级强调 |
| Primary Dark | #1F5E3A | 按下态、深色背景 |
| Accent | #FF8C42 | CTA按钮、重要提示、亮点 |
| Accent Light | #FFA066 | 渐变辅助、hover |
| Background | #F5F9F6 | 全局背景（医疗绿调白）|
| Surface | #FFFFFF | 卡片、输入框、浮层 |
| Text Primary | #1A1A1A | 正文 |
| Text Secondary | #666666 | 说明文字 |
| Text Tertiary | #999999 | 占位符、次要标签 |
| Border | #E8F2EC | 边框、分割线 |
```

### M3 — Typography Rules
字体系统：字体族 / 字重 / 字号 / 行高 / 字间距全套层级。

```markdown
## M3 — Typography Rules

### 字体族（移动端优先）
- 中文：'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
- 数字/英文：'SF Pro Display', -apple-system, BlinkMacSystemFont
- 等宽：'SF Mono', 'Fira Code', monospace（用于数据展示）

### 字号层级
| 层级 | 字号 | 字重 | 行高 | 用途 |
|------|------|------|------|------|
| Hero | 28px | 700 | 1.3 | 页面大标题 |
| H1 | 22px | 700 | 1.4 | 模块标题 |
| H2 | 18px | 600 | 1.4 | 卡片标题 |
| Body | 16px | 400 | 1.6 | 正文 |
| Caption | 14px | 400 | 1.5 | 说明文字 |
| XS | 12px | 400 | 1.4 | 标签、角标 |

### 字间距：标题用 -0.5px 负间距压缩感，正文保持标准。
```

### M4 — Component Stylings
所有组件样式，包含各状态（Default / Hover / Active / Disabled / Loading / Error）。

```markdown
## M4 — Component Stylings

### 主按钮
- Default: bg-primary (#2D7A4F), text-white, rounded-btn (8px), py-3 px-6
- Hover: bg-primary-light (#3A9460)
- Active: bg-primary-dark (#1F5E3A), scale(0.98)
- Disabled: opacity-40, cursor-not-allowed
- Loading: 左侧 spinner，文字变为"处理中..."

### 次按钮
- Default: border border-primary text-primary bg-transparent
- Hover: bg-primary/10

### 卡片
- bg-white rounded-card (16px) shadow-sm
- padding: 16px（内容卡片）/ 20px（大卡片）
- 内部分割：border-t border-[#E8F2EC] 或 gap-4

### 输入框
- bg-white rounded-input (12px) border border-[#E8F2EC]
- Focus: border-primary ring-2 ring-primary/20
- Error: border-red-500 ring-2 ring-red-500/20
```

### M5 — Layout Principles
间距体系与网格原则。

```markdown
## M5 — Layout Principles

### 间距系统（4px基准）
| Token | 值 | 用

_meta.json

{
  "ownerId": "kn7afn9q28na0bcm3rnr3bq6yn8303nd",
  "slug": "design-md",
  "version": "1.0.0",
  "publishedAt": 1775565293905
}

references/design-md-template.md

# DESIGN.md 模板

> 复制此模板，根据实际项目填写每个模块。

```markdown
# [项目名称] Design Specification

> 版本：1.0.0 | 最后更新：[YYYY-MM-DD]
> 格式标准：Google Stitch DESIGN.md v1.0

---

## M1 — Visual Theme & Atmosphere

### 品牌气质
- **定位人群**：[描述目标用户]
- **情绪关键词**：[3-5个品牌调性词]
- **情绪版参考**：[1-2个参考产品/品牌]
- **设计哲学**：[一句话设计哲学]

### 明暗与密度
- **明暗倾向**：偏亮 / 偏暗 / 中性
- **内容密度**：紧凑 / 中等 / 宽松
- **主色调温度**：冷 / 暖 / 中性

---

## M2 — Color Palette & Roles

| 角色 | 名称 | 色值 | 使用场景 |
|------|------|------|---------|
| Primary | 主色 | #XXXXXX | 主按钮、导航激活态 |
| Primary Light | 主色浅 | #XXXXXX | Hover态 |
| Primary Dark | 主色深 | #XXXXXX | 按下态 |
| Accent | 强调色 | #XXXXXX | CTA、重要提示 |
| Background | 背景色 | #XXXXXX | 全局背景 |
| Surface | 表面色 | #XXXXXX | 卡片、浮层 |
| Text Primary | 正文色 | #XXXXXX | 正文 |
| Text Secondary | 辅助色 | #XXXXXX | 说明文字 |
| Border | 边框色 | #XXXXXX | 分割线 |

---

## M3 — Typography Rules

### 字体族
- 中文：
- 英文/数字：

### 字号层级
| 标签 | 字号 | 字重 | 行高 | 用途 |
|------|------|------|------|------|
| Hero | px | 700 | 1.3 | 大标题 |
| H1 | px | 700 | 1.4 | 页面标题 |
| H2 | px | 600 | 1.4 | 模块标题 |
| Body | px | 400 | 1.6 | 正文 |
| Caption | px | 400 | 1.5 | 说明 |
| XS | px | 400 | 1.4 | 标签 |

---

## M4 — Component Stylings

### 按钮
- **主按钮**：bg-[color] text-white rounded-[n] px-[n] py-[n]
- **次按钮**：border border-[color] text-[color] bg-transparent
- **Ghost按钮**：

### 卡片
- bg-[surface] rounded-[n] shadow-[level] p-[n]px

### 输入框
- bg-white rounded-[n] border border-[border-color]
- Focus：border-[primary] ring-2 ring-[primary]/20

### 列表项

### 导航

---

## M5 — Layout Principles

### 间距系统（4px基准）
| Token | 值 |
|-------|-----|
| xs | 4px |
| sm | 8px |
| md | 12px |
| lg | 16px |
| xl | 24px |
| 2xl | 32px |

### 页面布局

### 栅格

---

## M6 — Depth & Elevation

| Level | 样式 | 用途 |
|-------|------|------|
| L0 | 无阴影 | 默认 |
| L1 | shadow-sm | 卡片 |
| L2 | shadow-md | 浮层 |
| L3 | shadow-lg | Modal |

---

## M7 — Do's and Don'ts

### ✅ 正确
- 

### ❌ 错误
- 

---

## M8 — Responsive Behavior

### 移动端特殊处理

### 断点

---

## M9 — Agent Prompt Guide

### 快速颜色参考
- Primary：
- Accent：
- Background：
- Surface：

### Tailwind 速查

### AI 生成提示模板
```

## 使用说明

1. 复制此文件到新项目根目录
2. 将所有 `#XXXXXX` 替换为实际颜色值
3. 调整字体、间距、圆角为实际设计稿
4. 保存为 `DESIGN.md`
5. 告知 AI agent："生成页面时，请遵循根目录 DESIGN.md 中的规范"

skill-card.md

## Description:

Helps an agent create, update, and apply a project-level DESIGN.md design and brand specification so generated UI follows the project's visual system.

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

## Publisher:

[zmy1006-sudo](https://clawhub.ai/user/zmy1006-sudo)

### License/Terms of Use:

MIT-0

## Use Case:

Developers, designers, and coding-agent users use this skill to create or maintain a root-level DESIGN.md and guide UI generation against a documented brand, layout, typography, color, and component system.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: The skill can create or overwrite a project DESIGN.md, which may replace existing design documentation if changes are not reviewed.

Mitigation: Check whether DESIGN.md already exists and review proposed additions or edits before allowing file writes.

## Reference(s):

- [DESIGN.md template](references/design-md-template.md)
- [VoltAgent awesome-design-md](https://github.com/VoltAgent/awesome-design-md)
- [Google Stitch DESIGN.md overview](https://stitch.withgoogle.com/docs/design-md/overview/)

## Skill Output:

**Output Type(s):** [Markdown, Guidance, Code, Configuration]

**Output Format:** [Markdown guidance and project file content, sometimes accompanied by UI code or configuration recommendations]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [May create or update a project DESIGN.md after reviewing product positioning, existing design assets, and requested design changes.]

## Skill Version(s):

1.0.0 (source: frontmatter and server release evidence)

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

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 6mo 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 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/zmy1006-sudo/skills/design-md",
      "sourceUrl": "https://clawhub.ai/zmy1006-sudo/skills/design-md",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-09T14:33:27.586Z",
      "isPublic": true
    },
    {
      "factKey": "protocols",
      "category": "compatibility",
      "label": "Protocol compatibility",
      "value": "OpenClaw",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-design-md/contract",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-design-md/contract",
      "sourceType": "contract",
      "confidence": "medium",
      "observedAt": "2026-10-09T14:33:27.586Z",
      "isPublic": true
    },
    {
      "factKey": "traction",
      "category": "adoption",
      "label": "Adoption signal",
      "value": "2.5K downloads",
      "href": "https://clawhub.ai/zmy1006-sudo/design-md",
      "sourceUrl": "https://clawhub.ai/zmy1006-sudo/design-md",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-09T14:33:27.586Z",
      "isPublic": true
    },
    {
      "factKey": "latest_release",
      "category": "release",
      "label": "Latest release",
      "value": "1.0.0",
      "href": "https://clawhub.ai/zmy1006-sudo/design-md",
      "sourceUrl": "https://clawhub.ai/zmy1006-sudo/design-md",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-04-07T12:34:53.905Z",
      "isPublic": true
    },
    {
      "factKey": "handshake_status",
      "category": "security",
      "label": "Handshake status",
      "value": "UNKNOWN",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-design-md/trust",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-design-md/trust",
      "sourceType": "trust",
      "confidence": "medium",
      "observedAt": null,
      "isPublic": true
    }
  ],
  "events": [
    {
      "eventType": "release",
      "title": "Release 1.0.0",
      "description": "Initial: Google Stitch DESIGN.md格式，9模块完整规范，让AI生成的每个页面都符合品牌规范",
      "href": "https://clawhub.ai/zmy1006-sudo/design-md",
      "sourceUrl": "https://clawhub.ai/zmy1006-sudo/design-md",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-04-07T12:34:53.905Z",
      "isPublic": true
    }
  ]
}

Record generated Oct 9, 2026.

About

Avoid when

Public facts

Install and run

Documentation

Extracted files

SKILL.md

_meta.json

references/design-md-template.md

skill-card.md

Related agents

activepieces

cherry-studio

AionUi

CopilotKit

Machine-readable data