UI设计入门

DESIGN.md：一键让 AI 输出设计规范

2026年新标准。把Stripe/Linear/Notion的设计规范写进文件，每次AI写UI前先读。风格永不飘。

📋 SKILL.md 完整代码

---
name: design-system-skill
description: >-
  2026年新标准。把Stripe/Linear/Notion的设计规范写进文件，每次AI写UI前先读。风格永不飘。
  Use when working on design system skill tasks.
allowed-tools: Read,Write,Bash
---

# DESIGN.md：一键让 AI 输出设计规范

## Quick Start
1. Save as `~/.claude/skills/design-system-skill/SKILL.md`
2. Restart Claude Code
3. Type `/design-system-skill` or describe your task naturally
4. Claude auto-triggers when your task matches the description

## Instructions
- Understand the user's specific context and needs
- Apply domain best practices consistently
- Provide actionable, specific guidance with examples
- Verify all outputs before presenting to user

## Gotchas
- Test with a fresh Claude instance after changes
- Keep SKILL.md under 500 lines; use references/ for details
- Description is the trigger key — make it specific and keyword-rich

🚀 怎么用

1. 复制上面的 SKILL.md 代码
2. 保存为 ~/.claude/skills/design-system-skill/SKILL.md
3. 重启 Claude Code
4. 输入 /design-system-skill 或直接描述任务触发
5. AI 自动按 Skill 流程执行

DESIGN.md 是什么

2026年由 Google Stitch 提出的新标准——一个 Markdown 文件描述你的设计系统（配色、字号、间距、圆角、阴影、组件规则）。AI 每次写 UI 前先读取 DESIGN.md，确保风格一致。不像 Prompt 会被遗忘，DESIGN.md 持久生效。

使用方法

从 styles.refero.design 下载 Stripe/Linear/Notion/Vercel 等品牌的 DESIGN.md 模板 → 放到项目根目录 → AI 自动读取并遵循。你也可以自己写：定义 3 个主色、2 个字体、4 级字号、间距梯度、圆角规则。一次写好，永久生效。

模板

# Design System ## Colors - Primary: #7c3aed (actions, links, focus) - Surface: #ffffff (cards), #f8f9fa (page bg) - Text: #1a1a2e (primary), #6b7280 (muted), #9ca3af (faint) ## Typography - Sans: Inter/PingFang SC - Scale: 12/14/16/20/24/32/48/64px - Weight: 400/600/700 ## Spacing - Grid: 8px (use 8,16,24,32,48,64,96) ## Radius - Cards: 16px, Buttons: 12px, Inputs: 10px ## Shadows - Card: 0 1px 3px rgba(0,0,0,.04), 0 4px 24px rgba(124,58,237,.06)