我之前写过这篇文章

告别UI漂移：前端AI生成UI的稳定与一致性方案

内容是AI写代码时UI错乱的问题

现在有个skill可以解决

有人把 58 个大厂的设计系统做成了一个 DESIGN.md 文件 苹果、Airbnb、Spotify、Anthropic、Cursor……每个品牌一句话描述风格特征 用法很暴力：把这个文件丢进你的项目，Claude Code 或 Cursor 就能按这个风格写 UI 相当于你的 AI 编程助手突然有了审美 之前觉得 AI 写前端最大的问题是能跑但丑 这个思路解决了：不是教 AI 什么是好看，是直接告诉它照着谁的风格来 6 个分类 58 个品牌，从 AI 产品到金融科技都有

🎨 核心理念：为什么需要它？

AI 写代码最大的痛点不是“逻辑”，而是“品味”。

这个 Skill 的本质是“审美外挂”。它通过将 58 个顶级大厂（如 Vercel, Apple, Stripe）的 UI 规范浓缩成一个 DESIGN.md 文件，强行将 AI 的生成范围约束在“高级感”的范畴内。

---

🛠️ 结构与安装速览

虽然这个仓库本身是一个风格索引，但通过你安装的 Skill 封装，它已经变成了 Codex 里的自动化指令。

• 本地组件：

  • SKILL.md: Skill 定义文件。

  • add-design.sh: 核心脚本，负责拉取指定品牌的样式定义。

  • list-brands.sh: 品牌清单查看脚本。

• 依赖： 底层通过 getdesign CLI 获取具体的样式数据。

---

🚀 使用方法：从“能用”到“好看”

你可以通过自然语言或手动脚本两种方式来调用它。

1. 自然语言指令（最推荐）

直接在 Codex/Cursor 的对话框里输入 $awesome-design-md 触发：

• 指定风格安装：

  "Use $awesome-design-md to install a vercel-style DESIGN.md and redesign the landing page."

  (AI 会自动下载 Vercel 规范并按此重构页面)

• 寻求风格建议：

  "Use $awesome-design-md. 给我 3 个适合 B2B 前端产品 的风格候选，然后安装最合适的一个。"

2. 命令行手动操作

如果你更习惯手感，可以直接在终端运行脚本：

Bash

# 查看支持的所有品牌列表
~/.codex/skills/awesome-design-md/scripts/list-brands.sh

# 为当前项目生成 Vercel 风格的规范文件
~/.codex/skills/awesome-design-md/scripts/add-design.sh vercel

# 另存为特定路径（不覆盖现有文件）
~/.codex/skills/awesome-design-md/scripts/add-design.sh vercel ./docs/VERCEL-STYLE.md

---

💡 前端场景：风格推荐指南

作为资深开发者，你可以根据项目类型快速盲选：

推荐风格	适用场景	特点
Vercel / Linear	开发者工具、SaaS、AI 产品	极简、暗黑模式友好、高对比度。
Apple / Airbnb	消费级应用、展示型官网	磨砂玻璃质感、大留白、精致圆角。
Stripe	金融科技、复杂表单、营销页	丝滑的渐变色、极强的排版逻辑感。
Notion / Linear	生产力工具、文档类	呼吸感强、图标使用克制。

---

📝 进阶工作流 (Best Practices)

1. 一键变身： 在项目根目录执行脚本生成 DESIGN.md。

2. 配置注入： 告诉你的 AI 助手（Claude Code / Cursor）：“请始终遵守根目录 DESIGN.md 中的视觉约束。”

3. 局部微调： 如果觉得 Vercel 的圆角太小，直接在生成的 DESIGN.md 里改一行字，AI 下次写组件时就会自动感知。

总结： 这个工具让你从“手写 CSS 细节”进化到了“定义视觉协议”。有了它，你的 AI 助手就从一个“刚毕业的实习生”变成了一个“自带大厂规范的高级前端”。