大家好，我是卡卡罗特。
前两天我刷 X，看到有人在推 awesome-design-md 这个 GitHub 项目。
我今天再去看，已经 32k+ Star 了，这么高的点赞，肯定有点东西🤔
其实，一开始我没太在意。
因为类似的东西太多了，提示词合集、设计资源库、灵感站，收藏的时候很兴奋，过两天就忘了。（不知道大家有没有像我一样的，收藏了大量的文章，视频，github项目，收藏怪😄）
但今天上班刚好有空，我拿它试了一下，发现这项目，还真有点东西，而且有点多！
相信大家经常让 Claude Code、Codex、Cursor 这类 agent 写前端，应该很容易懂我在说什么。
现在让 AI 搭一个页面，已经不难了。
结构能出来，组件能出来，按钮和卡片也都能堆出来。
问题不是做不做得出，而是做出来总有一股熟悉的 AI 味。渐变紫、emoji、发光卡片、差不多的排版，第一眼还行，多看两眼就腻了。
说真的，不是模型不会写页面，是它缺一套明确的审美约束。
你给了它需求，给了它代码上下文，甚至给了它 AGENTS.md，但你没告诉它这个页面到底该长什么样。于是它用它训练最多的数据，给出一个平均值。
设计这件事一旦落到平均值，基本就危险了。
awesome-design-md 聪明就聪明在这，它把很多知名产品的视觉语言，整理成 AI 能直接读的 DESIGN.md。
它不是组件库，也不是灵感站，更像一份写给 agent 的设计说明书。
你把它扔进项目根目录，AI 再去生成页面时，就不是瞎猜了。它知道颜色该往哪边收，留白该多大，圆角、阴影、字体、排版分别该守什么边界。
这事我是真的觉得挺重要。因为页面高级不高级，很多时候就差这一层。
2套Design风格
光聊概念没意思，所以我自己做了个小实验。
同一个页面需求，同一个 agent，同一套任务描述，我尽量把变量压到最少，唯一换掉的，就是 <font style="background-color:#FBDE28;">DESIGN.md</font>。
模型我用的是 Kimi 官方的 kimi2.5，工具用的是 Claude Code，使用同一套提示词。（文章后面有）
- 一套选
Claude风格。 - 一套选
Vercel风格。
为什么选这两个？因为设计差得很明显。
Claude 这套更温和，页面更松一点，更像内容产品，读起来会有一点陪伴感。
Vercel 就完全是另一边。更冷，更克制，更工程师，黑白灰更狠，留白更大，秩序感也更强。
最终效果
先看 Claude 这一版。
再看 Vercel 这一版。
两版我都是直接一把出，没再手修。
你别说，味道真不一样。
如果让我自己选，我会更偏 Vercel 这套，干净，利落，商业感更强。当然 Claude 那版也不错，更软一点，更像在做内容产品。
你更喜欢哪一版，欢迎评论区讨论讨论🤔
DESIGN.md怎么用呢？
仓库在这里：github.com/VoltAgent/a...
第一步，进去先找一个你想对标的网站风格。
第二步，点进详情页，看它给你的设计说明和预览图。明亮模式、暗色模式，基本都会给。
第三步，把对应的 icon 和 **DESIGN.md** 下载下来。
第四步，把 DESIGN.md 放进项目根目录。文件名不一定非得叫这个，但你的提示词里得和它对上。
第五步，把上面的提示词喂给 Claude Code、Codex、Cursor 之类的 agent，直接开跑就行。
提示词如下：
properties
你现在是一个资深前端架构师 + SaaS 产品设计师。
请基于项目根目录的 DESIGN.md 设计规范，生成一个完整的 SaaS 官网首页。
产品名称：KkltCodePilot
定位：AI 编程助手（类似 Copilot，但更轻量、更智能）
---
## 🎯 目标
构建一个"可用于演示 + 接近真实商业 SaaS 官网"的高质量页面，而不仅是简单静态页面。
---
## 🧱 技术要求
- 使用 React（函数组件 + Hooks）
- 使用 TailwindCSS（严格遵守 DESIGN.md 的设计系统）
- 组件化拆分（Header / Hero / Features / Pricing 等）
- 响应式设计（移动端优先）
- 代码结构清晰，便于扩展
- 不使用多余依赖（保持轻量）
---
## 🎨 设计风格
- 极简（Minimal）
- 现代（Modern SaaS）
- 科技感（Tech / AI 风格）
- 类似：Vercel / Linear / Stripe 风格
- 使用 DESIGN.md 中的：
- 色板（color tokens）
- 字体规范
- 间距系统
- 圆角 & 阴影规范
---
## 📄 页面结构（必须包含 + 可增强）
### 1. Header（新增）
- Logo（KkltCodePilot）
- 导航：Features / Pricing / Docs / GitHub
- CTA：Start Free
---
### 2. Hero
- 标题：Ship code 10x faster with AI
- 副标题：Generate, fix and optimize code instantly
- 按钮：
- Primary：Start Free
- Secondary：View Demo
- 可增强：
- 右侧代码生成动画 UI（mock）
- 渐变背景 or glow 效果
---
### 3. Features
必须包含：
- AI 自动生成代码
- 一键修复 Bug
- 多语言支持
- GitHub 集成
优化：
- 使用卡片布局（grid）
- 每个 feature 包含：
- icon
- title
- description
- 可增加 hover 动效
---
### 4. Social Proof
- 文案：10,000+ developers using CodePilot
- 可增强：
- 用户头像墙
- Logo（GitHub / Vercel 风格）
- 评分（⭐️⭐️⭐️⭐️⭐️）
---
### 5. Demo Section（新增，提升 SaaS 感）
- 模拟 AI 编程输入输出界面
- 示例：
- 输入："写一个快速排序"
- 输出代码块（带高亮）
- 让页面更"产品化"
---
### 6. Pricing
套餐：
- Free
- Pro（推荐）
- Team
每个包含：
- 价格
- 功能列表
- CTA 按钮
增强：
- 高亮 Pro
- Toggle（月付 / 年付）
---
### 7. FAQ
- 4~6 个常见问题
- 使用 Accordion（可展开）
---
### 8. Footer
- 产品信息
- GitHub 链接
- Docs
- 联系方式
- Copyright
---
## ⚡ 交互增强（重要）
适当增加这些能力，让 Demo 更像真实 SaaS：
- Hover 动效（卡片 / 按钮）
- 平滑滚动
- 按钮点击反馈
- Pricing toggle（状态切换）
- FAQ 折叠动画
---
## 🧩 组件结构建议
请按以下结构拆分：
- components/
- Header.tsx
- Hero.tsx
- Features.tsx
- Demo.tsx
- SocialProof.tsx
- Pricing.tsx
- FAQ.tsx
- Footer.tsx
- pages/
- Home.tsx
---
## 🧪 代码要求
- 使用语义化命名
- Tailwind class 简洁清晰
- 不要写死颜色（优先使用 DESIGN.md token）
- 代码可直接运行
---
## 🎁 输出要求
- 输出完整 React 页面代码（可运行）
- 包含所有组件
- 不要解释，只输出代码一点小建议
不过我也得泼一盆冷水😓。
像这种**样式约束,**特别适合新项目，尤其是 Landing Page、产品官网、活动页、Side Project，或者你想快速试几种视觉方向的时候。
但它不太适合硬塞进一个已经有成熟样式体系的老项目**🤔****。**
我拿现有项目试过一次，结果页面直接开始打架。字重一套，圆角一套，阴影一套，图标和图片还容易溢出。agent 一旦认真执行新的 DESIGN.md，原来的样式逻辑就很容易被带偏。
想想就头大。。。
所以如果你要在老项目里用，我的建议很简单。
先开一个 git 分支，局部试，慢慢改，别一把梭。
整体看下来，我会觉得这东西真正有价值的地方，不是替你设计，而是先帮 AI 建一条护栏。
以前我们给 AI 喂需求、喂文案、喂代码。
现在你连审美约束也一起喂进去，它写页面这件事，确实会往前走一大步。
至少，不会再那么像 AI 了。
我是卡卡罗特，持续分享AI编程干货，加个关注再走呗~
