大家好我是卡卡罗特。前两天我刷 X看到有人在推awesome-design-md这个 GitHub 项目。我今天再去看已经32kStar 了这么高的点赞肯定有点东西其实一开始我没太在意。因为类似的东西太多了提示词合集、设计资源库、灵感站收藏的时候很兴奋过两天就忘了。不知道大家有没有像我一样的收藏了大量的文章视频github项目收藏怪但今天上班刚好有空我拿它试了一下发现这项目还真有点东西而且有点多相信大家经常让 Claude Code、Codex、Cursor 这类 agent 写前端应该很容易懂我在说什么。现在让 AI 搭一个页面已经不难了。结构能出来组件能出来按钮和卡片也都能堆出来。问题不是做不做得出而是做出来总有一股熟悉的 AI 味。渐变紫、emoji、发光卡片、差不多的排版第一眼还行多看两眼就腻了。说真的不是模型不会写页面是它缺一套明确的审美约束。你给了它需求给了它代码上下文甚至给了它AGENTS.md但你没告诉它这个页面到底该长什么样。于是它用它训练最多的数据给出一个平均值。设计这件事一旦落到平均值基本就危险了。awesome-design-md聪明就聪明在这它把很多知名产品的视觉语言整理成 AI 能直接读的DESIGN.md。它不是组件库也不是灵感站更像一份写给 agent 的设计说明书。你把它扔进项目根目录AI 再去生成页面时就不是瞎猜了。它知道颜色该往哪边收留白该多大圆角、阴影、字体、排版分别该守什么边界。这事我是真的觉得挺重要。因为页面高级不高级很多时候就差这一层。2套Design风格光聊概念没意思所以我自己做了个小实验。同一个页面需求同一个 agent同一套任务描述我尽量把变量压到最少唯一换掉的就是font stylebackground-color:#FBDE28;DESIGN.md/font。模型我用的是 Kimi 官方的kimi2.5工具用的是Claude Code使用同一套提示词。文章后面有一套选Claude风格。一套选Vercel风格。为什么选这两个因为设计差得很明显。Claude这套更温和页面更松一点更像内容产品读起来会有一点陪伴感。Vercel就完全是另一边。更冷更克制更工程师黑白灰更狠留白更大秩序感也更强。最终效果先看Claude这一版。再看Vercel这一版。两版我都是直接一把出没再手修。你别说味道真不一样。如果让我自己选我会更偏Vercel这套干净利落商业感更强。当然Claude那版也不错更软一点更像在做内容产品。你更喜欢哪一版欢迎评论区讨论讨论DESIGN.md怎么用呢仓库在这里https://github.com/VoltAgent/awesome-design-md第一步进去先找一个你想对标的网站风格。第二步点进详情页看它给你的设计说明和预览图。明亮模式、暗色模式基本都会给。第三步把对应的 icon 和**DESIGN.md**下载下来。第四步把DESIGN.md放进项目根目录。文件名不一定非得叫这个但你的提示词里得和它对上。第五步把上面的提示词喂给 Claude Code、Codex、Cursor 之类的 agent直接开跑就行。提示词如下你现在是一个资深前端架构师 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新增 - LogoKkltCodePilot - 导航Features / Pricing / Docs / GitHub - CTAStart Free --- ### 2. Hero - 标题Ship code 10x faster with AI - 副标题Generate, fix and optimize code instantly - 按钮 - PrimaryStart Free - SecondaryView Demo - 可增强 - 右侧代码生成动画 UImock - 渐变背景 or glow 效果 --- ### 3. Features 必须包含 - AI 自动生成代码 - 一键修复 Bug - 多语言支持 - GitHub 集成 优化 - 使用卡片布局grid - 每个 feature 包含 - icon - title - description - 可增加 hover 动效 --- ### 4. Social Proof - 文案10,000 developers using CodePilot - 可增强 - 用户头像墙 - LogoGitHub / 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编程干货加个关注再走呗~
