AI 不会做设计？先给它一份 DESIGN.md
AI 不会做设计？先给它一份 DESIGN.md
AI 不会做设计？先给它一份 DESIGN.md AI 不会做设计？先给它一份 DESIGN.md Modified May 7 它的优势不是“最完整”，而是“启动成本低”： • 粘 URL • 生成 DESIGN.md • 放进项目根目录 • 让 AI 按它重构页面 对个人开发者来说，这个速度很重要。因为很多时候你不是在做严肃的设计系统建设，而是在判断一个方向能不能成立。先有一个可跑的视觉底稿，比花三天整理规范更有价值。 推荐 4：Neuform Neuform 更偏完整的 prompt to production design workflow。官方描述是把 prompt 转成 AI HTML landing pages、remix templates 和可复用的 DESIGN.md 文件。 图 5：Neuform 视觉工作台 RicoUI 在原帖里提到：Neuform 给他的视觉体验更好。这个判断我认同。 它不只是“提取规范”，而更像是一个设计生成空间。界面本身就带有更强的视觉人格：暗色画布、工作台分区、prompt 到页面的生成感，都更像给创作者用的产品。 我会把 Neuform 推荐给这类人： • 想从一句 prompt 直接得到可展示页面的人。 • 想做 landing page 快速概念验证的人。 • 想把页面、模板、DESIGN.md 串成一个设计生成工作流的人。 但如果你的目标是严肃地给现有项目补设计规范，我不会把它放在第一位。它更适合“从概念到页面”，而 refero / designmd.supply 更适合“从真实案例到规范”。 推荐 5：getdesign.md getdesign.md 更像一个品牌 DESIGN.md 灵感集合。页面上能看到它收录了 Vercel、Stripe、Figma、Notion、Supabase、Linear、Airbnb、Spotify、Apple、Uber、Cursor、Framer、Claude 等设计系统灵感。 图 6：getdesign.md 品牌灵感集合 它适合做“选型对照表”： • 想做部署工具？看 Vercel、Netlify、Railway 一类风格。 • 想做 AI 编程工具？看 Cursor、Claude、Raycast、Warp。 • 想做效率工具？看 Notion、Linear、Superhuman。 • 想做消费品牌？看 Airbnb、Apple、Nike、Spotify。 它的优势是品牌名字非常直观，适合快速建立方向感。 但我会提醒一句：不要把这些品牌风格当成换皮模板。真正有用的是拆出背后的设计决策，比如“Linear 的精确感来自低噪声、微弱紫色强调、极少装饰和高一致性的 spacing”，而不是把所有产品都做成黑底紫光。 推荐 6：design md chrome design md chrome 是一个 Chrome 扩展，能从任意网页提取样式和信息，并生成 DESIGN.md 或 SKILL.md，可用于 Google Stitch、Claude Code、Codex 等工具。 图 7：design md chrome GitHub 仓库 这是最适合日常使用的工具。 你看到一个页面，觉得它的按钮、间距、字体、色彩体系不错，不想切到另一个网站复制 URL 生成，就可以直接用扩展在当前页面提取。 它还有一个很有意思的点：不仅生成 DESIGN.md，也能生成 SKILL.md。这意味着它不只是抓视觉 token，还在尝试把设计规范变成 agent 可执行的工作流。某种意义上，它把“视觉设定集”和“执行手册”连在了一起。 适合： • 设计师日常采样。 • 独立开发者临时抓一个参考。 • 给 Codex / Claude Code 快速补设计上下文。 • 把网页视觉转成项目里的长期规范。 一个真实工作流：从“模板味”到“有风格” 假设你要做一个 AI 研究工具的官网，不想再让 AI 生成那种默认 SaaS 模板。 我会这样做： 1. 在 Refero 里搜 AI、developer tools、editorial，选出 3 个参考。 2. 用 designmd.supply 或 DesignMD.me 抓一个你特别喜欢的网站，例如 linear.app 或 stripe.com。 3. 把生成的 DESIGN.md 放到项目根目录。 4. 让 Codex 执行： Code block Plain Text 请读取 @DESIGN.md，基于它重构首页视觉。 保留当前信息架构，但重新处理色彩、字体层级、按钮、卡片、spacing 和移动端布局。 不要新增营销废话，只做视觉系统化。 1. 做完后截图，让 AI 自审： Code block Plain Text 对照 @DESIGN.md 检查页面： 1. 是否使用了规定的主色、字体、圆角和 spacing？ 2. 是否出现了 DESIGN.md 明确禁止的模式？ 3. 哪些组件偏离了品牌气质？ 4. 给出需要回写到 DESIGN.md 的新组件规则。 1. 把验证通过的组件规则写回自己的 DESIGN.md。 这个闭环很重要。DESIGN.md 不应该只是下载回来的一次性文件，它应该像产品的视觉记忆一样，随着项目迭代不断变厚。 为什么 DESIGN.md 工具值得关注 我不太喜欢把 DESIGN.md 只讲成“AI 设计规范文件”。那样太工具了。 真正值得在意的是：它让一个产品的视觉选择有了来处。 一个有“人感”的界面，不是因为它多拟人、多热闹、多会说话，而是因为它的每个细节都像是有人认真决定过： • 为什么这个按钮不能太圆？ • 为什么主色只用在一个关键动作上？ • 为什么列表密度要高一点？ • 为什么标题要克制，不能每屏都写成海报？ • 为什么这里要留白，而那里要压紧？ 这些问题如果只停在设计师脑子里，AI 永远学不到。写进 DESIGN.md 之后，它就变成了 agent 能持续遵守的产品人格。 这也是我觉得 Refero 这类工具有价值的地方。它不是替你审美，而是帮你把审美拆成能被讨论、被复用、被修正的材料。 我的推荐排序 第一梯队：Refero Styles 先用它找方向。它最适合帮 AI 建立“见过好设计”的前置经验。 第二梯队：designmd.supply / DesignMD.me 当你已经有目标网站时，用它们快速生成可执行规范。 第三梯队：design md chrome 日常采样最好用。看到好页面就抓，不打断工作流。 第四梯队：Neuform / getdesign.md Neuform 更适合 prompt to production 的创作型流程；getdesign.md 更适合按品牌找灵感和做对照。 避坑 1. 不要直接复制大品牌外观。借的是规则，不是皮肤。 2. 不要把 DESIGN.md 当万能药。它提高起点，但最终仍需要截图验收和人工判断。 3. 不要只写 token。没有设计理由，AI 还是会乱用。 4. 不要一次塞太多风格。一个主方向，两个辅助参考就够了。 5. 不要忘记移动端。DESIGN.md 里应该写明断点、触控尺寸、信息密度变化。 6. 不要让它长期不更新。每次沉淀出新组件，都应该回写。 资料来源 • Google Labs design.md 仓库：说明 DESIGN.md 是给 coding agents 描述 visual identity 的格式，由 YAML tokens 和 Markdown rationale 组成，并提供 lint / diff / export CLI。GitHub • DESIGNmd 官方说明：介绍 DESIGN.md 是可移植的 markdown based design system format，并说明可下载后放到项目根目录给 AI coding tool 使用。designmd.ai/about • DESIGNmd CLI：说明 CLI 可搜索、下载、上传 design systems，并支持 JSON 输出。designmd.ai/cli • Refero Styles：按品牌、mood、颜色、字体或 URL 搜索设计参考，并提供 agent 可用的 DESIGN.md。styles.refero.design • DesignMD.me：输入 URL 生成包含 tokens、typography、component patterns 的 DESIGN.md。designmd.me • Neuform：从 prompts 生成 AI HTML landing pages、remix templates 和 reusable DESIGN.md。neuform.ai • getdesign.md：提供热门网站的 design system inspirations，展示 71 个 DESIGN.md 文件及多个品牌案例。getdesign.md • design md chrome：Chrome 扩展，可从任意网页提取样式并生成 DESIGN.md / SKILL.md。GitHub • designmd.supply：以 Stripe 等网站为例生成 DESIGN.md、截图、Logo、Palette、Backdrop 和 Components。designmd.supply Stripe 案例 Neuform getdesign.md design md chrome stripe.com GitHub designmd.ai/about designmd.ai/cli styles.refero.design designmd.me neuform.ai getdesign.md GitHub designmd.supply Stripe 案例 它的优势不是“最完整”，而是“启动成本低”： • 粘 URL • 生成 DESIGN.md • 放进项目根目录 • 让 AI 按它重构页面 对个人开发者来说，这个速度很重要。因为很多时候你不是在做严肃的设计系统建设，而是在判断一个方向能不能成立。先有一个可跑的视觉底稿，比花三天整理规范更有价值。 推荐 4：Neuform Neuform 更偏完整的 prompt to production design workflow。官方描述是把 prompt 转成 AI HTML landing pages、remix templates 和可复用的 DESIGN.md 文件。 Neuform RicoUI 在原帖里提到：Neuform 给他的视觉体验更好。这个判断我认同。 它不只是“提取规范”，而更像是一个设计生成空间。界面本身就带有更强的视觉人格：暗色画布、工作台分区、prompt 到页面的生成感，都更像给创作者用的产品。 我会把 Neuform 推荐给这类人： • 想从一句 prompt 直接得到可展示页面的人。 • 想做 landing page 快速概念验证的人。 • 想把页面、模板、DESIGN.md 串成一个设计生成工作流的人。 但如果你的目标是严肃地给现有项目补设计规范，我不会把它放在第一位。它更适合“从概念到页面”，而 refero / designmd.supply 更适合“从真实案例到规范”。 推荐 5：getdesign.md getdesign.md 更像一个品牌 DESIGN.md 灵感集合。页面上能看到它收录了 Vercel、Stripe、Figma、Notion、Supabase、Linear、Airbnb、Spotify、Apple、Uber、Cursor、Framer、Claude 等设计系统灵感。 getdesign.md 它适合做“选型对照表”： • 想做部署工具？看 Vercel、Netlify、Railway 一类风格。 • 想做 AI 编程工具？看 Cursor、Claude、Raycast、Warp。 • 想做效率工具？看 Notion、Linear、Superhuman。 • 想做消费品牌？看 Airbnb、Apple、Nike、Spotify。 它的优势是品牌名字非常直观，适合快速建立方向感。 但我会提醒一句：不要把这些品牌风格当成换皮模板。真正有用的是拆出背后的设计决策，比如“Linear 的精确感来自低噪声、微弱紫色强调、极少装饰和高一致性的 spacing”，而不是把所有产品都做成黑底紫光。 推荐 6：design md chrome design md chrome 是一个 Chrome 扩展，能从任意网页提取样式和信息，并生成 DESIGN.md 或 SKILL.md，可用于 Google Stitch、Claude Code、Codex 等工具。 design md chrome 这是最适合日常使用的工具。 你看到一个页面，觉得它的按钮、间距、字体、色彩体系不错，不想切到另一个网站复制 URL 生成，就可以直接用扩展在当前页面提取。 它还有一个很有意思的点：不仅生成 DESIGN.md，也能生成 SKILL.md。这意味着它不只是抓视觉 token，还在尝试把设计规范变成 agent 可执行的工作流。某种意义上，它把“视觉设定集”和“执行手册”连在了一起。 适合： • 设计师日常采样。 • 独立开发者临时抓一个参考。 • 给 Codex / Claude Code 快速补设计上下文。 • 把网页视觉转成项目里的长期规范。 一个真实工作流：从“模板味”到“有风格” 假设你要做一个 AI 研究工具的官网，不想再让 AI 生成那种默认 SaaS 模板。 我会这样做： 1. 在 Refero 里搜 AI、developer tools、editorial，选出 3 个参考。 2. 用 designmd.supply 或 DesignMD.me 抓一个你特别喜欢的网站，例如 linear.app 或 stripe.com。 stripe.com 3. 把生成的 DESIGN.md 放到项目根目录。 4. 让 Codex 执行： 1. 做完后截图，让 AI 自审： 1. 把验证通过的组件规则写回自己的 DESIGN.md。 这个闭环很重要。DESIGN.md 不应该只是下载回来的一次性文件，它应该像产品的视觉记忆一样，随着项目迭代不断变厚。 为什么 DESIGN.md 工具值得关注 我不太喜欢把 DESIGN.md 只讲成“AI 设计规范文件”。那样太工具了。 真正值得在意的是：它让一个产品的视觉选择有了来处。 一个有“人感”的界面，不是因为它多拟人、多热闹、多会说话，而是因为它的每个细节都像是有人认真决定过： • 为什么这个按钮不能太圆？ • 为什么主色只用在一个关键动作上？ • 为什么列表密度要高一点？ • 为什么标题要克制，不能每屏都写成海报？ • 为什么这里要留白，而那里要压紧？ 这些问题如果只停在设计师脑子里，AI 永远学不到。写进 DESIGN.md 之后，它就变成了 agent 能持续遵守的产品人格。 这也是我觉得 Refero 这类工具有价值的地方。它不是替你审美，而是帮你把审美拆成能被讨论、被复用、被修正的材料。 我的推荐排序 第一梯队：Refero Styles 先用它找方向。它最适合帮 AI 建立“见过好设计”的前置经验。 第二梯队：designmd.supply / DesignMD.me 当你已经有目标网站时，用它们快速生成可执行规范。 第三梯队：design md chrome 日常采样最好用。看到好页面就抓，不打断工作流。 第四梯队：Neuform / getdesign.md Neuform 更适合 prompt to production 的创作型流程；getdesign.md 更适合按品牌找灵感和做对照。 避坑 1. 不要直接复制大品牌外观。借的是规则，不是皮肤。 2. 不要把 DESIGN.md 当万能药。它提高起点，但最终仍需要截图验收和人工判断。 3. 不要只写 token。没有设计理由，AI 还是会乱用。 4. 不要一次塞太多风格。一个主方向，两个辅助参考就够了。 5. 不要忘记移动端。DESIGN.md 里应该写明断点、触控尺寸、信息密度变化。 6. 不要让它长期不更新。每次沉淀出新组件，都应该回写。 资料来源 • Google Labs design.md 仓库：说明 DESIGN.md 是给 coding agents 描述 visual identity 的格式，由 YAML tokens 和 Markdown rationale 组成，并提供 lint / diff / export CLI。GitHub GitHub • DESIGNmd 官方说明：介绍 DESIGN.md 是可移植的 markdown based design system format，并说明可下载后放到项目根目录给 AI coding tool 使用。designmd.ai/about designmd.ai/about • DESIGNmd CLI：说明 CLI 可搜索、下载、上传 design systems，并支持 JSON 输出。designmd.ai/cli designmd.ai/cli • Refero Styles：按品牌、mood、颜色、字体或 URL 搜索设计参考，并提供 agent 可用的 DESIGN.md。styles.refero.design styles.refero.design • DesignMD.me：输入 URL 生成包含 tokens、typography、component patterns 的 DESIGN.md。designmd.me designmd.me • Neuform：从 prompts 生成 AI HTML landing pages、remix templates 和 reusable DESIGN.md。neuform.ai neuform.ai • getdesign.md：提供热门网站的 design system inspirations，展示 71 个 DESIGN.md 文件及多个品牌案例。getdesign.md getdesign.md • design md chrome：Chrome 扩展，可从任意网页提取样式并生成 DESIGN.md / SKILL.md。GitHub GitHub • designmd.supply：以 Stripe 等网站为例生成 DESIGN.md、截图、Logo、Palette、Backdrop 和 Components。designmd.supply Stripe 案例 designmd.supply Stripe 案例 让 AI 写出像样界面：6 个 DESIGN.md 工具实测与推荐 从 Refero Styles 到 Chrome 插件，按不同场景选择你的设计规范工具。 AI 写代码越来越稳，但 AI 做界面时经常还是一股“默认模板味”：紫蓝渐变、圆角大卡片、按钮随手一放、字体和间距都像从空气里摸出来的。 问题不一定是模型不会设计，而是它没有稳定的设计上下文。你让它“做高级一点”“参考 Stripe”“像 Linear 一样干净”，这些话对人类设计师可能够用，因为人脑里已经存着一堆品牌、组件、界面节奏和视觉经验；但对 coding agent 来说，这些描述太软了。它需要的是一份能读、能复用、能放进项目根目录的设计设定集。 这就是 DESIGN.md 这类工具突然变得重要的原因。 它不是又一个灵感网站，也不是单纯的设计 token 文件。更准确地说，它像是给 AI 的“视觉角色卡”：颜色、字体、间距、圆角、组件模式是骨架；品牌气质、不要做什么、为什么这么设计，是性格。 先说结论 如果你只想选一个，我推荐先用 Refero Styles。 原因很简单：它最像一个给 AI 用的真实产品设计样本库。你可以按品牌、情绪、颜色、字体、URL 搜索，打开一个风格之后，直接拿到 colors、type、spacing、components，以及 agent 可用的 DESIGN.md。RicoUI 原帖里也把 refero 放在个人推荐位，理由是它提供了 2,000+ DESIGN.md，并且支持 DESIGN.md、Tailwind v4、CSS Variables 和 Design Tokens 等更完整的配置输出。 这里我先收集了50个 全球优质网站设计规范 全球优质网站设计规范 但不同工具解决的问题不一样。我会这样分： 场景 推荐工具 为什么 找真实产品的设计风格参考 Refero Styles 像“AI 可读的设计灵感库”，适合先建立审美方向 从一个现成网站生成 DESIGN.md DesignMD.me / designmd.supply 输入 URL 后快速提取设计规范 想要更强视觉体验和 prompt to production 流程 Neuform 更偏设计生成工作台，视觉表达更完整 想浏览热门品牌的 DESIGN.md 灵感 getdesign.md 品牌覆盖清晰，适合找 Vercel、Stripe、Notion、Linear 等风格 想在任意网页上一键提取 design md chrome Chrome 扩展，适合即看即抓、轻量工作流 Refero Styles DesignMD.me designmd.supply Neuform getdesign.md design md chrome 场景 场景 推荐工具 推荐工具 为什么 为什么 找真实产品的设计风格参考 找真实产品的设计风格参考 Refero Styles Refero Styles Refero Styles Refero Styles 像“AI 可读的设计灵感库”，适合先建立审美方向 像“AI 可读的设计灵感库”，适合先建立审美方向 从一个现成网站生成 DESIGN.md 从一个现成网站生成 DESIGN.md DesignMD.me / designmd.supply DesignMD.me designmd.supply DesignMD.me / designmd.supply DesignMD.me designmd.supply 输入 URL 后快速提取设计规范 输入 URL 后快速提取设计规范 想要更强视觉体验和 prompt to production 流程 想要更强视觉体验和 prompt to production 流程 Neuform Neuform Neuform Neuform 更偏设计生成工作台，视觉表达更完整 更偏设计生成工作台，视觉表达更完整 想浏览热门品牌的 DESIGN.md 灵感 想浏览热门品牌的 DESIGN.md 灵感 getdesign.md getdesign.md getdesign.md getdesign.md 品牌覆盖清晰，适合找 Vercel、Stripe、Notion、Linear 等风格 品牌覆盖清晰，适合找 Vercel、Stripe、Notion、Linear 等风格 想在任意网页上一键提取 想在任意网页上一键提取 design md chrome design md chrome design md chrome design md chrome Chrome 扩展，适合即看即抓、轻量工作流 Chrome 扩展，适合即看即抓、轻量工作流 DESIGN.md 到底解决什么 Google Labs 的 design.md 仓库把它定义为一种给 coding agents 描述 visual identity 的格式。一个 DESIGN.md 文件由两层组成： 1. YAML front matter：机器可读的 design tokens，比如颜色、字体、间距、圆角、组件属性。 2. Markdown body：人类可读的设计理由，比如品牌气质、颜色怎么用、组件不要怎么做。 这点很关键。传统 token 只告诉 AI “有什么值”，但不会告诉它“为什么”和“什么时候用”。而 DESIGN.md 把值和语境放在一起，AI 才不至于每次重开一个会话就重新发明一套界面。 我更喜欢把它理解成三层协作： • AGENTS.md 管工程协作方式：怎么跑项目，怎么改代码，怎么测试。 • SKILL.md 管专业工作流：遇到某类任务该怎么做。 • DESIGN.md 管视觉人格：这个产品长什么样，哪些东西永远不能乱来。 当一个项目同时有这三层，AI 才更像一个稳定的团队成员，而不是每次进来都要重新培训的临时工。 推荐 1：Refero Styles Refero Styles 的定位很准：它不是让你凭空写设计规范，而是让你从真实产品里抽取设计 taste。 Refero Styles 它首页写得很直白：可以按 brand、mood、color、typography 或 URL 搜索设计参考，打开任意 style 后，就能看到 colors、type、spacing、components，以及 agent 可用的 DESIGN.md。 我会把它放在首推，是因为它最适合解决“AI 没见过好设计”的问题。 很多人做 AI UI 的方式是直接说：“帮我做一个现代、极简、高级的 SaaS 页面。”这句话太空了。现代是什么？极简到什么程度？高级是金融级的克制，还是奢侈品牌的留白，还是 devtool 的高密度冷静？如果没有参考，AI 只能用训练数据里最常见的平均值回答你。 Refero 的价值在于，它让你先选一个“有来处”的参照： • 想做开发者工具，可以看 Linear、Vercel、Raycast、Warp。 • 想做支付/金融，可以看 Stripe、Revolut、Wise。 • 想做内容工具，可以看 Notion、Medium、The Verge。 • 想做高端品牌页，可以看 Apple、BMW、Bugatti、Nike。 推荐用法： Refero Styles 的正确打开方式 以这个 Apple 案例页为例，Refero 真正有用的地方不是“像苹果”，而是把一个抽象风格拆成五层可执行资产：Preview、DESIGN.md、Tailwind v4、CSS Variables 和 Design Tokens。也就是说，它既能给人看，也能直接给 agent 用。 页面信息 具体怎么用 Preview 先判断整体气质：画布、主视觉、标题尺度、图片比例、页面节奏。不要一上来复制 token，先确认这个风格是否适合你的产品。 DESIGN.md 复制给 coding agent，当成“风格说明书”。它里面包含颜色、字体、间距、组件、布局、图片、动效和正反规则，比一句“做成 Apple 风格”准确得多。 CSS Variables / Tailwind v4 把变量放进项目的全局样式或 Tailwind theme 里。这样 agent 写组件时不会每次临时发明颜色、字号和圆角。 Components 优先拿组件规则生成具体模块，比如 hero、sticky sub nav、feature card grid、product color swatch，而不是只抽象地参考页面氛围。 页面信息 页面信息 具体怎么用 具体怎么用 Preview Preview 先判断整体气质：画布、主视觉、标题尺度、图片比例、页面节奏。不要一上来复制 token，先确认这个风格是否适合你的产品。 先判断整体气质：画布、主视觉、标题尺度、图片比例、页面节奏。不要一上来复制 token，先确认这个风格是否适合你的产品。 DESIGN.md DESIGN.md 复制给 coding agent，当成“风格说明书”。它里面包含颜色、字体、间距、组件、布局、图片、动效和正反规则，比一句“做成 Apple 风格”准确得多。 复制给 coding agent，当成“风格说明书”。它里面包含颜色、字体、间距、组件、布局、图片、动效和正反规则，比一句“做成 Apple 风格”准确得多。 CSS Variables / Tailwind v4 CSS Variables / Tailwind v4 把变量放进项目的全局样式或 Tailwind theme 里。这样 agent 写组件时不会每次临时发明颜色、字号和圆角。 把变量放进项目的全局样式或 Tailwind theme 里。这样 agent 写组件时不会每次临时发明颜色、字号和圆角。 Components Components 优先拿组件规则生成具体模块，比如 hero、sticky sub nav、feature card grid、product color swatch，而不是只抽象地参考页面氛围。 优先拿组件规则生成具体模块，比如 hero、sticky sub nav、feature card grid、product color swatch，而不是只抽象地参考页面氛围。 Do / Dont 当成验收清单。比如这个案例里强调 28px 卡片圆角、 0071e3 只给主 CTA、卡片不用阴影、大标题必须负字距。 更实用的工作流：先用 Refero 选 1 个主风格，再选 1 2 个辅助参考；让 agent 先总结风格原则，再写页面；最后用 Refero 的 Do / Dont 逐条检查输出。这样 Refero 不只是灵感库，而是“生成前的输入”和“生成后的验收标准”。 1. 第一步：打开一个具体 style 页，先看 Preview 和文案描述，判断这个风格的核心气质。 2. 第二步：复制 DESIGN.md 给 agent，要求它先复述设计原则，不要立刻写代码。 3. 第三步：把 CSS Variables 或 Tailwind v4 片段放入项目主题层，让 token 变成真实约束。 4. 第四步：让 agent 按组件级规则生成页面模块，不要让它自由发挥整页。 5. 第五步：用 Do / Dont 和 Agent Prompt Guide 做二次修改，尤其检查颜色滥用、阴影、字距、圆角和页面密度。 📌 可以直接给 coding agent 的提示词： 你是资深前端设计工程师。请基于这个 Refero Styles 页面（https://styles.refero.design/style/c9cabb96 32fa 4896 837a f2497ce1c856 这个链接替换成你想要的那个）里的 DESIGN.md、CSS Variables、Tailwind v4 和 Design Tokens，为我的[产品/页面]生成一版可运行页面。开始写代码前先做三件事：1. 读取 DESIGN.md 和 tokens；2. 输出 5 条不可违反的视觉原则；3. 给出页面结构草案。实现时必须把 tokens 接入主题层，组件样式优先使用 tokens；请从当前 Refero 页面提取主 CTA 颜色、卡片处理方式、圆角、字号、间距和按钮高度等规则。交付时请列出修改文件，并按颜色、字体、间距、圆角、卡片、CTA、图片使用逐项自查。 可以直接给 coding agent 的提示词： 你是资深前端设计工程师。请基于这个 Refero Styles 页面（https://styles.refero.design/style/c9cabb96 32fa 4896 837a f2497ce1c856 这个链接替换成你想要的那个）里的 DESIGN.md、CSS Variables、Tailwind v4 和 Design Tokens，为我的[产品/页面]生成一版可运行页面。开始写代码前先做三件事：1. 读取 DESIGN.md 和 tokens；2. 输出 5 条不可违反的视觉原则；3. 给出页面结构草案。实现时必须把 tokens 接入主题层，组件样式优先使用 tokens；请从当前 Refero 页面提取主 CTA 颜色、卡片处理方式、圆角、字号、间距和按钮高度等规则。交付时请列出修改文件，并按颜色、字体、间距、圆角、卡片、CTA、图片使用逐项自查。 https://styles.refero.design/style/c9cabb96 32fa 4896 837a f2497ce1c856 Apple — Refero Styles 案例页 这个流程会比“参考某某网站”更稳，因为你给 AI 的不是一句审美暗号，而是一份可以执行的视觉规则。 推荐 2：designmd.supply designmd.supply 更像一个“品牌拆解器”。它会把一个域名拆成 DESIGN.md、截图、Logo、Palette、Backdrop、Components 等材料。 designmd.supply 下面这个截图是 stripe.com 的案例：左侧是生成出的 DESIGN.md，右侧是它抓取的 live screenshot、品牌标识、色彩和背景材料。 stripe.com 这个工具适合用在两类场景： 第一类，是你已经知道自己要参考谁。 比如你要做一个支付基础设施页面，心里明确知道“我想要 Stripe 那种白底、细字体、彩色渐变、理性但不无聊的感觉”。这时用 designmd.supply 把 stripe.com 生成一份设计规范，比让 AI 猜“Stripe 风”可靠得多。 stripe.com 第二类，是你要做竞品拆解。 过去竞品视觉分析很依赖设计师肉眼：看配色、看按钮、看字号、看页面节奏。现在可以先让工具抽取一份 DESIGN.md，再让 AI 做结构化对比： • 它的主色和强调色各是什么？ • CTA 在视觉层级里承担什么角色？ • 字体是偏产品说明，还是偏品牌叙事？ • 卡片、按钮、表单的组件语言是否一致？ • 哪些规则值得借，哪些不适合我们的产品？ 这就从“我觉得它挺好看”变成了“它为什么好看”。 推荐 3：DesignMD.me DesignMD.me 的定位更轻：输入任意网站 URL，生成 production ready DESIGN.md，包括 tokens、typography 和 component patterns。 DesignMD.me 它适合当作快速入口。 如果你只是想把某个网站的风格先抓下来，让 agent 在项目里试一版 UI，不想研究太多格式和配置，可以先从 DesignMD.me 开始。