开场白

大家好，我是卡卡罗特。

前两天刷 X，看到有人在推 awesome-design-md 这个 GitHub 项目。

今天再去看。它已经拥有 32k+ Star，这么高的点赞，肯定有点东西🤔。

从使用者痛点来看。设计资源的“收藏怪”困境

一开始我并没有太在意，因为差不多资源太多了：提示词合集、设计资源库、灵感站…，收藏的时候很兴奋，过两天就忘了。

是不是很多人和我一样。收藏了很多文章、视频、GitHub 项目，却总是找不到合适的那一个？ 这就是典型的收藏怪症状 😄。

更糟的是当我们让 Claude Code、Codex、Cursor 等 AI Agent 写前端时结构和组件可以轻松生成，但页面总带有一股熟悉的AI 味——渐变紫、emoji发光卡片、千篇一律的排版。第一眼还行，多看几眼就腻了。

根本原因：模型缺少明确的审美约束。只能给出平均值，而平均值往往就是“危险”的设计。

再看方法，awesome-design-md 的 DESIGN.md

awesome-design-md 的主要价值在于把多个知名产品的视觉语言整理成 AI 能直接读取的 DESIGN.md。它不是组件库，也不是灵感站，更像是一份写给 Agent 的设计说明书。

把它放进项目根目录后AI 再生成页面时就不再盲目猜测，而是知道：

• 颜色该往哪边收？
• 留白该多大？
• 圆角、阴影、字体、排版分别该守哪些边界？

这层审美护栏往往决定页面是否高级——很多时候只差这一层。

两套 Design 风格实验对比

# 实验目标：

• DESIGN.md
• Kimi2.
• Claude Code
• Claude 与 Vercel

# 为什么选 Claude 与 Vercel？

• Claude: 颜色柔和。页面松散，适合内容产品，有陪伴感。
• Dercel : 黑白灰配色更狠。留白更大，秩序感强，极简商业感。

最终效果展示

# Claude 风格版：

# Vercel 风格版：

Vercel 套装——干净利落、商业感强；但 Claude) 版也不错，更软、更适合内容型产品。欢迎在评论区讨论你更喜欢哪一版 🤔。

DESIGN.md 怎么用？按理说，一步步教你上手 🚀

1. 挑选目标风格：P 先找到你想对标的网站风格。
2. P 点进仓库对应条目，阅读设计说明与预览图。
3. P 下载对应的图标与 DESIGN.md.
4. P 将 DESIGN.md 放入项目根目录。文件名可以自定义，但提示词中必须引用相同名称。
5. P 把下面提供的提示词复制给 Claude Code、Codex、Cursor 等前端生成 Agent，即可直接开跑。

完整提示词🔧

你现在是一个资深前端架构师 + SaaS 产品设计师。话说回来，请基于项目根目录的 DESIGN.md 设计规范。生成一个完整的 SaaS 官网首页。说起来，从产品名称来看，KkltCodePilot 定位：AI 编程助手
## 🎯 目标
建立一个“可用于演示 + 接近真实商业 SaaS 官网”的高质量页面而不仅是简单静态页面。## 🧱 技术要求
- 使用 React
- 使用 TailwindCSS
- 组件化拆分
- 响应式设计
- 代码结构清晰，便于
- 不使用多余依赖
## 🎨 设计风格
- 极简
- 现代
- 科技感
- 类似：Vercel / Linear / Stripe 风格
- 使用 DESIGN.md 中的：
- 色板
- 字体规范
- 间距程序
- 圆角 & 阴影规范
## 📄 页面结构
### . Header
- Logo
- 导航：Features / Pricing / Docs / GitHub
- CTA：Start Free
### . Hero
- Ship code 10x faster with AI
- 副Generate。fix and optimize code instantly
- 按钮：
- Primary：Start Free
- Secondary：View Demo
- 可提高：
- 右侧代码生成动画 UI
- 渐变背景 or glow 效果
### . Features 必须包含：
- AI 自动生成代码
- 一键修复 Bug
- 多语言支持
- GitHub 集成调整
布局采用卡片网格，每个 feature 包含 icon、title、description，可增加 hover 动效。### . Social Proof
至于文案，“+ developers using CodePilot”
从可提高来看。- 使用者头像墙
- Logo
- 评分
### . Demo Section
模拟 AI 编程输入输出界面例如输入：“写一个快速排序”，输出代码块。### . Pricing 套餐：
Free / Pro/ Team，每个套餐包含价格、功能列表、CTA 按钮；Pro 高亮并提供月付/年付切换。### . FAQ
若干常见问题，用 Accordion 可展开。### . Footer
产品信息、GitHub 链接、Docs、联系方式、Copyright。## ⚡ 交互提高
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 页面代码，可运行；包含所有组件，怎么说呢，不要解释，只输出代码。

一点小建议 📌

# 场景适配度：

• SaaS Landing Page / 产品官网 / 活动页 / Side Project — 新项目非常适合直接使用 DESIGN.md 来统一审美护栏。
• S老项目已有成熟样式程序 — 强行塞进会导致样式冲突。如字重不统一、圆角不同等问题，使页面“打架”。

# 老项目使用技巧：

• P 新建 ，局部试验新的 DESIGN.md。
• P 渐进式迁移，不要一次性全改。
• P 如冲突频繁，可考虑通过 CSS Module 或 Tailwind @layer 覆盖策略进行隔离。

& 行动号召

A I 已经能够自动搭建页面但没有审美约束仍会产出千篇一律且带有 “AI 味” 的界面。怎么说呢，

I 是卡卡罗特持续分享 AI 编程干货。加个关注再走呗~ 🌟