用 Claude Code 抄作业?62 家大厂的设计规范一键搬进 Prompt

赵一凡 内容创作者 2026-08-22 12 阅读

为什么你用 Claude 写的页面,一看就是”AI 做的”

随手打开朋友圈,十个 AI 写的落地页,八个长一个样:渐变紫、圆角 16、Inter 字体、悬空卡片……审美通胀到让人脸盲。

不是 prompt 没写好,而是参考系丢了。你告诉 AI”做高级一点”,它只能往脑子里那套系统默认风格去靠——而那套默认风格,正是被全网吐槽的”AI slop”。

真正的解法不是更好的 prompt,是给 AI 一份精确的设计规范。

Apple 的极致留白、Notion 的暖色衬线、Stripe 的紫调轻盈、Linear 的手术刀式精准——这些大厂的视觉系统从来不是”简约”二字能概括的。它们是一堆精确到像素的数值:letter-spacing: -2.125px、font-weight: 300、rgba(50,50,93,0.25) 0px 30px 45px -30px。

把这个清单交给 Claude,它就能写出能以假乱真的品牌页面。

brand-design-md:把 62 家大厂审美塞进 Claude Code

GitHub 上的 zephyrwang6/brand-design-md 这个 Skill,干的就是这件事——

内置 Apple、Claude、Cursor、Notion、Linear、Stripe、Vercel、Shopify、Tesla、Ferrari、Nike 等 62 个顶级品牌的设计规范,覆盖科技、AI、DevTools、Fintech、消费、汽车六大品类。你只要在 Claude Code 里说一句:

“用 Stripe 风格帮我做一个登录页”

它就自动:

  1. 识别品牌名(中英文都行)
  2. 运行时调用 npx getdesign@latest add,拉取最新的 DESIGN.md
  3. 提取颜色 token、字体规则、间距体系、阴影公式
  4. 严格按规范生成 UI 代码,不是”像”,是精确还原

最香的是多品牌混搭——”Notion 的暖色调 + Linear 的极简排版,做个 Feature 区”也完全 OK。等于给 Agent 装了一套可拆卸的审美乐高,58 个品牌 × N 种组合,你的产品风格识别度一下就有了。

实测效果

作者用同一个虚构产品 “Lumina”(AI 写作工具),分别按 Apple / Notion / Claude 三套规范生成了完整落地页。内容一模一样,产品名一样,功能描述一样——只是设计风格不同。

  • Apple 风格:80px 巨号标题、电影感全屏图、#0071e3 蓝色 pill 按钮,扑面而来的高级感
  • Notion 风格:#fffdf9 暖白底、Georgia 衬线标题、编号 feature 列表,工具感拉满
  • Stripe 风格:sohne-var 字体、#533afd 标志紫、层叠蓝阴影,极简又克制

跟前端设计 Skill 比,它的核心优势是什么

市面上同类 Skill 不少,但大多走两条路:
– “负面清单”型(比如 taste-skill):告诉 AI 别这么做,适合改稿
– “审美描述”型(比如 frontend-design):讲一套设计哲学,生成结果有方向但还是会漂

brand-design-md 是第三条路——直接给一份精确到像素的 DESIGN.md 当参考物。AI 不再瞎猜,而是按图施工。

加上它运行时拉取的设计(每次调用都 fetch 最新版),品牌官网更新了,你也能立刻用上新规范,不会过时。

怎么装

git clone https://github.com/zephyrwang6/brand-design-md.git
mkdir -p ~/.claude/skills/brand-design-md
cp brand-design-md/SKILL.md ~/.claude/skills/brand-design-md/SKILL.md

重启 Claude Code,跟它说”用 Claude 风格做个 Hero 区块”就行。需要 React/Vue/Tailwind 也支持,默认输出是单文件 HTML。

写在最后

审美这件事,在 AI 时代反而变得更值钱了。

写给 AI 看的文档(claude.md、.cursorrules、DESIGN.md)正在成为新基建。这个 Skill 帮我们把”大厂花了十年打磨的视觉系统”,压缩成一个 Claude 能秒懂的几千字 Markdown——然后用它来批量生成符合品牌审美的 UI。

对独立开发者和小团队来说,这可能是 2026 年性价比最高的一次”设计外包”。

🔗 GitHub:https://github.com/zephyrwang6/brand-design-md

GitHub: https://github.com/zephyrwang6/brand-design-md

评论区

0 条评论

登录后可评论。

赵一凡 12 阅读