Easy Claude Code
把 Claude Code、AI 编程、MCP 放在一起,团队最先想到的好处通常是同一个:开发会快很多。这点没错。用 Claude Code,页面起得更快,接口接得更顺,大量重复代码直接省掉了。
但前端有个老毛病,换成 AI 之后并没有自动消失:功能能做对,UI 却常常不像一个产品里出来的。按钮色值差一点,卡片阴影重一点,间距这页是 12px、下页又跳到 20px。单看每一处都能交差,拼在一起就开始露怯。
以前我们的办法是在提示词里反复补一句"保持品牌风格""参考现有页面"。不是没用,只是不稳,这次记得加、下次就忘了。所以最近我更倾向于把 DESIGN.md 正式放进 Claude Code 的工作流,和 AGENTS.md 一起用,而且两者分工要清楚。
Claude Code 做 AI 编程时,UI 为什么会跑偏
Claude Code 读项目、改代码、补组件都很利索,也能顺着上下文判断技术栈。AGENTS.md 配好之后,它一般能弄明白目录怎么组织、命名怎么定、测试怎么跑、提交有什么规矩。
问题恰恰出在这儿:工程规则和视觉规则本来就是两回事。AGENTS.md 更像一份开发手册,写的是框架、目录、接口、命令。它管得住代码怎么写,却管不住页面最后看起来像不像一家人做的。
DESIGN.md 要补的就是这块。它不用写成一整套庞杂的设计规范,更像一份直接给 Claude Code 看的视觉说明。对 AI 编程来说,这种 Markdown 文本比截图、Figma 链接或者几句口头描述都要靠谱,也稳定得多。
DESIGN.md:Claude Code 的另一半搭档
我一般把 DESIGN.md 看成 AGENTS.md 的另一半。一个管工程,一个管视觉,都放在项目根目录,Claude Code 读起来顺手。
| 文件 | 给谁看 | 主要作用 |
|---|---|---|
AGENTS.md |
编码 Agent | 项目结构、技术栈、代码风格、开发命令 |
DESIGN.md |
设计与前端 Agent | 品牌气质、颜色、字体、组件外观、交互细节 |
这套分工对 AI Coding 很实用。AI 不用再猜"高级感"到底指什么,也不用从一堆旧页面里硬找规律。你把那些能复用的视觉判断写下来,它生成代码时就有依据了。
MCP 很强,但 DESIGN.md 解决的不是同一层问题
现在不少项目已经接了 MCP。Claude Code 可以借它访问设计数据、内部文档、接口信息,甚至调你们自己的工具。这件事有价值,尤其适合想把 Claude Code 接进现有系统的团队。
不过在实际项目里,我会把两者分开看。MCP 解决的是能力边界,DESIGN.md 解决的是输入稳定性。前者让 AI 拿到更多资料,后者告诉它 UI 该往哪边收。
所以哪怕团队已经做过 MCP Server,我还是建议补一份 DESIGN.md。理由很朴素:便宜、好改、不依赖额外平台。对大多数中小型前端项目,这比一上来就折腾复杂的设计资产同步要实际得多。
DESIGN.md 通常写什么
一份能用的 DESIGN.md 没必要写成设计系统论文。我们在 ECC 内部更看重三点:说清楚、能执行、别绕弯。常见的内容大概是这些:
- 品牌定位:产品第一眼给人的感觉
- 色彩系统:主色、背景色、文字色、成功和错误状态
- 字体规则:字体族、字号、字重、行高
- 间距系统:常用 spacing,是否遵循 4px 或 8px 网格
- 圆角、边框、阴影:整体偏克制,还是更强调视觉存在感
- 组件说明:按钮、卡片、表单、导航、弹窗
- 动效原则:节奏快慢,要不要弹性动画,哪些地方别加动画
一个简化版可以这么写:
# DESIGN.md
## Brand
- Personality: calm, precise, warm
- Tone: minimal, editorial, developer-focused
## Colors
- Primary: #C96442
- Background: #F7F3EE
- Text: #1F1F1F
- Success: #1F8F5F
- Error: #D14343
## Typography
- Font: Inter, system-ui, sans-serif
- H1: 40px / 700 / 1.1
- Body: 16px / 400 / 1.6
## Components
- Buttons use medium radius and avoid heavy shadows
- Cards use subtle borders and soft background contrast
- Forms should feel compact, clear, and professional
这种写法的好处很直接:人看得懂,Claude Code 也看得懂。不需要复杂 schema,也不用先让设计师导出一堆结构化文件。
装好 Claude Code 之后,更该补的是项目约束
很多人搜 Claude Code 安装教程,目标很明确,先把工具跑起来。安装其实不难,真正拉开结果差距的是项目上下文。我们一般建议至少准备这三类东西:
.
├── AGENTS.md
├── DESIGN.md
├── src/
└── package.json
然后给 Claude Code 一条短指令就够了:
请基于 AGENTS.md 和 DESIGN.md,实现一个 SaaS 仪表盘首页。
使用现有组件栈,保持响应式布局,视觉风格严格对齐 DESIGN.md。
关键不在提示词写得多漂亮,而在上下文够不够稳。AGENTS.md 帮它少犯工程错误,DESIGN.md 帮它少犯审美错误。最后生成的东西更像同一套产品,而不是每次都换一种 UI 口味。
73 个网站的 DESIGN.md,怎么看
VoltAgent 团队整理过一个 awesome-design-md 仓库,收了 73 个网站的 DESIGN.md。我觉得这东西最适合拿来开头,而不是照抄。里面有几类参考挺有用:
- Claude:偏温暖,编辑感强,适合内容型产品和开发者产品
- Cohere:企业气更重,数据面板和渐变用得比较多
- ElevenLabs:暗色、音频感强,整体更偏电影化
- Mistral AI:很简,紫色调很明显
- Ollama:终端味道重,单色克制
- Replicate:白底、代码优先,信息层级清楚
- Runway:创意工具气质更强,视觉上像展览空间
我的做法通常是先挑一个和产品气质接近的底子,再去改颜色、字体、组件密度。做开发者工具,可以先看 Replicate 或 Ollama;做 AI 内容产品,Claude 的排版节奏值得参考;做数据密集型后台,Cohere 那种结构感就比较合适。别一把抓——风格这事,贪多基本都会坏。
把 DESIGN.md 写进日常流程
只把 DESIGN.md 扔进仓库其实还不够。更有效的是把它变成团队日常协作的一环。
需求进开发前就先补视觉口径。别等 Claude Code 把页面写完了再回头纠偏。"卡片别上重阴影""按钮圆角固定 8px""后台页面信息密度要高一点",这类规则一开始就该写进去。
组件库规则要说死。项目用的是 shadcn/ui、Radix、Ant Design 还是自研组件,直接写清楚:
- Prefer shadcn/ui primitives
- Keep spacing on an 8px scale
- Avoid oversized shadows
- Use existing Button, Card, Dialog, and Form components first
评审完就更新。AI 编程有个很现实的问题:上下文一直在变,文档却常常不跟着变。一次评审只要定下新的 UI 规则,就马上补进 DESIGN.md,不然下一轮 Claude Code 还是会按旧理解来。
Claude Code vs Cursor:DESIGN.md 不站队
说到 Claude Code vs Cursor,我一直不太喜欢一句话分高下的那种比较。两者工作方式不同,顺手的场景也不同。Claude Code 在命令行和工程级修改上很好用,Cursor 在编辑器里来回交互更自然。
但 DESIGN.md 这件事跟你站哪边没关系。只要工具需要读上下文、需要生成 UI,它就吃这一套。团队里有人用 Claude Code、有人用 Cursor,完全可以共用同一份 DESIGN.md,这比每个人在自己的聊天窗口里重新描述一遍品牌风格靠谱太多。要是项目还接了 MCP,就更该把规则收拢:MCP 负责给资料入口,AGENTS.md 固定工程规则,DESIGN.md 固定视觉规则,三样一起用,AI Coding 的输出才更像团队产物。
几条我自己的判断
别把 DESIGN.md 写得太虚。"现代""简洁""高级"这种词不是不能写,但不能只写这些。Claude Code 真正能执行的还是颜色、间距、组件行为,以及哪些不能做。
别一次塞进太多风格。一个产品如果同时想要 Claude 的温和、Runway 的创意、Cohere 的企业感,最后多半变成四不像。先定一个主方向,再少量借别人的细节。
文档要短,也要准。按我的经验,中小项目一两百行就很够用了。不是写得越多越好,而是要让 Claude Code 每次都愿意读,读完还真能照着做。
把失败案例也写进去。比如:
## Avoid
- Do not use glassmorphism cards
- Do not use large neon gradients
- Do not center-align dense dashboard tables
- Do not add decorative icons unless needed
负面规则特别管用。很多时候,告诉 AI 别做什么,比一直催它"做得更好看"有效得多。
为什么值得把 DESIGN.md 放进 Claude Code 工作流
DESIGN.md 不是什么新发明,但它刚好补上了 AI 编程里最容易松掉的一块:视觉一致性。Claude Code 现在已经能扛下很多工程任务,MCP 也能把上下文和工具能力补齐。可 UI 要稳定,还是得有一份说得清、能落地的设计输入,这个环节没人替得掉。
我最近用 Claude Code 做落地页、后台页面、组件重构,最直观的变化是返工少了。以前总要花时间修那些"哪里都对、看着就是不对"的细节,现在很多问题第一版就能收住。它当然替不了设计师,也不可能每次一步到位,但至少能让 AI Coding 从"能跑"往前再推一点,推到更像一个正式产品。
所以如果团队正在搭 Claude Code 工作流,我会把 DESIGN.md 算进基础配置。先写一版,能读、能改、能执行就行,别等完美。这东西的回报,往往来得比想象中快。
相关推荐
- Claude Code 命令速查表:主编整理的高频命令与快捷键
- Claude Code 命令教程:从零上手到熟练的 7 步实操指南
- Karpathy Rules:一个 CLAUDE.md 文件管住 Claude Code 的坏习惯
关于 Easy Claude Code
如果你想把 Claude Code 用进自己的工作流,可以试试我们 ECC(Easy Claude Code)的中转服务:免🪜、低成本、快速稳定,直连官方 Claude Code。企业定制化服务可详询。