今天发点适合做网页设计的东西。

平时我们让 Cursor、Claude Code、Codex、这些Agent 做页面，经常会遇到一个问题：跟 AI 说了想要复刻什么风格的页面，但是复刻出来总是只有一点点相似，根本不符合我们的预想。

今天就给大家推荐一个GitHub上的项目叫：Awesome-design-md，专门用来复刻知名产品的网页风格。

01. 项目简介

Awesome-design-md 本质上是一份 AI 可读的设计规范集合。

项目地址：https://github.com/VoltAgent/awesome-design-md

Awesome-design-md收录了73 个知名产品网页的 design languages，如：Claude、xAI、Ollama、Cursor、Notion、Figma、Apple。

每个品牌 DESIGN.md 通常会覆盖：

品牌气质和视觉原则
主色、辅助色、背景色、语义色
字体、字号、字重、行高
间距、圆角、阴影、布局规则
按钮、卡片、输入框、侧边栏等组件写法
动效、交互反馈、内容语气
给前端实现的 CSS / Tailwind 参考

02. 项目实测

用法很简单，仓库下载下来之后打开 design-md 目录，选一个你想复刻的目标产品的 DESIGN.md，粘到 Cursor、Claude Code 等工具的规则文件里就行。

如果你下载到了你的项目文件夹中，你也可以直接在提示词里说你想用谁的 DESIGN.md。

case 1 Claude 风格复刻

提示词：请读取Awesome-design-md项目中的Claude DESIGN.md，按 Claude 的设计语言做一个 AI 写作工具首页。产品名：文稿伙伴。页面需要包含：1. 首屏：产品名、短标语、文本输入框、主 CTA、次 CTA。2. 产品预览：改写结果、语气设置、标题候选、版本状态。3. 功能模块：文章改写、标题生成、语气调整、批量处理。4. 使用流程：粘贴草稿、选择目标、生成版本、人工确认。5. 适用对象：公众号作者、产品经理、运营团队、独立开发者。6. 开始使用区：输入示例、提交 CTA。

Claude 的暖米色、珊瑚色 CTA、安静排版和深色产品预览都比较像，但是产品预览还不如 Claude 有吸引力。

case 2 Notion 风格复刻

提示词：请读取Awesome-design-md项目中的Notion DESIGN.md，按 Notion 的设计语言做一个团队知识库首页。产品名：NoteRoom。页面需要包含： 1. 左侧导航：工作区、团队空间、项目文档、收藏夹。 2. 顶部区域：搜索框、新建文档入口、成员入口。 3. 最近编辑文档：文档标题、作者、更新时间。 4. 团队空间：产品、研发、运营、市场。 5. 收藏文档：常用模板、会议记录、发布计划。 6. 空状态：还没有文档时的提示和新建入口。

做的真的很像一个成熟的工具首页了。左侧导航、顶部搜索、最近文档、团队空间、收藏文档和空状态都像真实知识库首页。Notion 的灰白界面、轻边框、低对比、彩色空间块处理得自然。

case 3 Apple 风格复刻

提示词：请读取Awesome-design-md项目中的Apple DESIGN.md，按 Apple 的设计语言做一个高端 AI 硬件产品首页。产品名：Auralink。页面需要包含： 1. 首屏：产品名、短标语、主 CTA、次 CTA、产品展示区。 2. 产品亮点：展示 3 到 4 个核心卖点。 3. 性能参数：芯片、续航、连接方式、重量。 4. 使用场景：办公、通勤、创作、会议。 5. 系统生态：手机、电脑、耳机、云端同步。 6. 购买区：价格、颜色选择、购买 CTA。

这是我觉得最像的一个，我都以为苹果出新产品了。Apple 的双层导航、超大留白、产品摄影优先和购买配置区都做出来了。

case 4 Nike 风格复刻

提示词：请读取Awesome-design-md项目中的Nike DESIGN.md，按 Nike 的设计语言做一个运动鞋产品详情页。产品名：AeroRun 01。页面需要包含： 1. 首屏：产品名、短标语、产品大图、价格、主 CTA、次 CTA。 2. 商品选择：颜色选择、尺码选择、数量选择。 3. 产品特点：缓震、透气、抓地、轻量。 4. 运动场景：跑步、训练、日常穿搭。 5. 推荐搭配：上衣、短裤、袜子、背包。 6. 购买区：库存状态、配送说明、加入购物车 CTA。

商品大图、缩略图轨、右侧购买面板、黑色 pill CTA、Soft Cloud 背景、尺码颜色数量选择都很到位。如果想更 Nike，可以再加一张运动场景摄影，强化“商品详情 + 运动大片”的对比。

case 5 法拉利风格复刻

提示词：请读取Awesome-design-md项目中的Ferrari DESIGN.md，按 Ferrari 的设计语言做一个高性能 AI Agent 产品发布页。产品名：Rosso Agent。页面需要包含： 1. 首屏：产品名、短副标题、主 CTA、次 CTA、产品视觉区。 2. 速度能力：展示任务响应、并发处理、自动执行。 3. 自动化任务：邮件、表格、网页操作、代码任务。 4. 精密控制：权限设置、任务回放、人工确认。 5. 安全机制：日志、审批、数据隔离。 6. 发布 CTA：申请试用、查看演示。

这是五个里品牌转译最有冲击力的。近黑画布、Rosso Corsa、锐角 CTA、电影感首屏、红色执行线和控制台视觉都很贴 Ferrari，首屏视觉非常强。

03. 挖一挖

Stack Overflow 2025 开发者调查里，84% 的受访者已经在用或计划用 AI 工具做开发，但同一份调查也提到，66% 的开发者遇到过「AI 生成结果差一点才对」的问题。

这个数据很贴合我以前的使用体验：页面能生成，但经常只像了三分。

Awesome-design-md 的价值就体现在这里了。Awesome-design-md 把知名产品网页的颜色、字体、间距、组件、布局、交互规则这些设计判断，整理成 Agent 能读懂的 DESIGN.md。让你直接能复刻出，相识度爆表的页面。

Awesome-design-md解决了 AI 前端生成里最费时间的部分：反复描述风格、反复改视觉、反复告诉 Agent「不像」。能更快做出像样的 MVP，减少初稿返工，往一个真实产品推进一大步。

原文链接：GitHub 狂揽 93K stars，一键复刻知名产品的网页风格