如果你不给 Agent 提出任何关于 Vibe 产品的样式要求，你大概率会得到一个长这样的交付：
使用 lucide 的最丑的那套 icons，满满“ 科技感 ”的蓝色作为主色调，配一些绿色、黄色作为标注，12px 圆角 + 银色描边 + 一点点淡淡的阴影……
如果你用稍微差一点的模型，甚至可能写出 AI 味儿更浓的这样的作品：
核心特征是不由分说的大面积蓝紫色渐变，有时候还会伴有怎么说都不改的 border-left 样式。
今天分享一个 Vibe 出符合各位产品经理品味作品的方法。
01使用 DESIGN
给 AI 截图参考，不如直接把被“借鉴”对象的设计规范告诉 Agent，可以覆盖更多页面和交互。
下面这个客户端应用，是我让 Codex 按照 Firecrawl 的 DESIGN.md 写的
下面这个是基于 Ventriloc 的视觉规范写的网页原型：
你要做的只是：把 DESIGN.md 放在项目路径下，让 Agent 在开发时按照其中的样式规范开发产品。
所以，去哪里搞 DESIGN.md ？
VoltAgent 团队使用 Google 的 Design.md 规范，把 550+ 个网站的设计规范都“扒”下来了：
其中有 73 个在 GitHub 上是开源的，需要的可以去下载：
如果你无法打开 GitHub，可在 AI 学习行动圈知识星球搜索 design-md 下载我打包好的。
如果想要获取指定网站的设计规范，下面这几个方式可以试一试。
designmd.cc 这个项目，每天提供免费“采集” 5 个指定站点样式设计的服务。在网站输入网站 url，大约 20s 就可以得到网站的 DESIGN.md。
可能因为使用服务的人太多，他们应该是对提取样式的模型做了减配，提取的设计规范不如开始好使了。
你可以使用senlindesign/taste-skill、JCodesMore/ai-website-cloner-template或者ykadosh/mock-pilot等开源项目使用自己的模型或 Agent 来获取指定站点的样式。
02最佳实践
有时候选了一个看起来不错的 DESIGN.md，但是写完以后发现不是那么回事。
所以我会在开发前，让 Agent 从待开发的产品里选出1-2 个典型页面，使用不同的 DESIGN.md 先生成一组 Demo 预览。
我把这套流程做成了一个 Agent Skill，你可以在知识星球搜索 design-spec-showcase，搭配你找到 DESIGN.md 一起使用。
03AI产品经理转型线下课
我从 6 月底开始，每周末都会在北京·深圳·上海轮回组织线下课程学习，用两天的时间带你从“会用 AI 的产品经理”跃迁到“能把 AI 应用到业务中”、“能把 AI 产品化”的产品经理。
两天课程，包括：
大模型的基本原理、缺陷和使用边界（通过 AI 做市场调研、写 PRD、画高保真原型三个实战项目掌握）
Workflow、RAG 和上下文工程（掌握 AI 赋能&Agent 赋能的关键能力原子化拆解）
API 调用、Tool Use 和 Agent 循环（上手开发一个真能干活的 Agent 程序）
MCP、Skill、CLI，以及怎样让产品对 Agent 更友好
Vibe-Coding 实战，从想法到可运行应用（三个 AI 赋能场景，交付完整作品）
前 6 期已经在过去的 2 个月完成交付，200+学员全都在现场完成了至少一个 AI 产品的开发落地。
课程仍然在进行，接下来的安排如下：
城市
时间
状态
9月5-6日
招募中
深圳
10月17-18日
招募中
10月24-25日
招募中
课程原价 3999 元，限时早鸟价 2999 元即将结束。
扫码可以查看课程详细内容、上课方式与详细安排。
热门跟贴