Appearance
71套顶级产品设计规范打包成Skill，AI生成UI质感拉满
不是简单换皮，是71套品牌级视觉系统整合到一个Skill里。
想做一个页面，脑子里大概知道要"高级一点""像Stripe那种""有Apple的简洁感""参考Linear的效率感"，但真正落到颜色、字体、间距、组件、布局时，又很难说清楚。
Design MD Collection把这件事变成了：选一个风格，AI直接调用对应的设计系统干活。
一个Skill，整合71种设计风格
不是单一模板，是一个集合。 内置了71套成熟产品设计参考：
| 类别 | 品牌 |
|---|---|
| 科技/开发工具 | Apple、Vercel、Stripe、Linear、Claude、Figma、Notion、Cursor、Supabase、Webflow |
| 服务/内容 | Airbnb、Shopify、Spotify、Slack、Pinterest |
| 金融/加密 | Coinbase、Binance、Mastercard、Revolut |
| AI/开发者 | Raycast、Warp、Replicate、Together AI、Ollama、Mintlify |
| 消费品牌 | Nike、Starbucks、Tesla、The Verge |
选一个风格后AI就能输出匹配设计规范的UI——颜色、字体、间距、组件、布局全部对齐。
实测效果
官网设计
用BMW corporate风格设计一个汽车官网UI
直接输出品牌调性一致的汽车官网。
支付页面
参考Stripe风格重做这个支付页面
渐变、金融科技感、数据呈现方式全部对齐。
后台系统
用Linear-app风格设计一个项目管理后台
信息组织、交互效率、清晰度直接对标Linear。
文档站
用Mintlify风格设计一个开发者文档首页
开发者文档的排版层级和信息密度自动对齐。
无参考指令
我在做一个AI Agent框架官网，请帮我选择合适风格并实现首页
AI自己选风格并实现——直接生成了可交互的UI设计页面。
适用场景
| 场景 | 推荐风格 | 为什么 |
|---|---|---|
| SaaS官网 | Vercel / Stripe / Linear | 技术感强、信息层级清晰 |
| AI产品/开发者工具 | Claude / Cursor / Supabase | 不花哨、强调效率和可信度 |
| 后台管理系统 | Linear / Notion / Airtable | 信息组织清晰、交互效率高 |
| 金融/支付 | Stripe / Coinbase / Mastercard | 信任感、数字金融气质 |
| 消费品牌/电商 | Apple / Nike / Shopify | 情绪感、品牌感染力 |
| 文档/API | Mintlify / Raycast / Warp | 开发者友好、排版规范 |
不是高仿，是品牌启发
Design MD Collection不是复制别人的品牌资产，而是从成熟产品的设计系统中提取视觉方法，再应用到自己的产品里。
借鉴Vercel的开发者审美，但不复制Vercel的Logo和品牌素材。参考Stripe的渐变和金融科技感，但页面内容、组件和品牌表达仍然属于你自己的产品。
怎么用
通过OKClaw平台使用。OKClaw是一个支持Skill的AI工作台，可扩展AI助手环境。
安装步骤：
- 安装OKClaw → https://okclaw.dafoai.com
- 安装Design MD Collection Skill（后台私信获取）
- 开始使用
总结
Design MD Collection的特点：
- 不是单一模板，而是71套设计规范集合
- 不是简单换皮，包含颜色、排版、组件、布局、氛围完整规则
- 适合官网、SaaS、后台、AI工具、金融产品、电商等多种场景
- 强调品牌启发，不是直接复制品牌资产
有时候，差的不是代码能力，而是一套清晰的视觉系统。
关键词：Design MD, 设计规范, AI设计, UI风格, 产品设计
