AI 做的 UI 太丑、风格不稳定?
这是完整的设计到开发路径。
从 UI Kit + MCP 快速生成,到 design.md 建立长期设计规范。
在大型项目中保持风格一致性。将参考图或设计系统网址发给 AI,自动生成设计规范文件,未来可迭代更新。
Clean — 简洁清爽
Minimal — 少即是多
Modern — 层次与渐变
Elegant — 精致细节
Premium — 品质感
Luxury — 高级氛围
Professional — 商务级
Dashboard — 数据密度
Bento — 模块化分块
Corporate — 稳重统一
Sleek — 动感过渡
Refined — 追求完美
Spacious — 呼吸感
Contemporary — 平衡美学
Simple — 简单直接
两种路线,从 AI 生成到亲手设计。
让 AI 生成效果图 → AI 根据效果图开发 → 完成后整理为 design.md。
通过 MCP 连接 AI,只设计首页首屏,其余页面让 AI 扩展写进 design.md。长图片分模块发布,每次完成后更新 design.md。
💡 小技巧:将设计好的图片发给 AI,让它自动提取设计 Token,输出为 design.md。下方 Prompt 可直接复制使用:
设计定稿后,选择合适的技术栈。
字体、图标、UI Kit、模板、Prompt、Skill。
在 Google Fonts 上找到想要的字体,让 AI 引用嵌入即可使用。
中文网页使用系统默认字体即可,无需额外嵌入。如需指定风格,可参考小米或苹果中国网站的字体搭配让 AI 提取。
⚠️ 英文字体体积小,可以直接嵌入引用。中文字体文件较大(通常 5MB+),一般使用系统自带字体或兼容回退字体,不需要也不推荐嵌入。
推荐不同角色使用不同工具,选对路更快落地。
根据身份选择合适工具。
多模型 + 图片生成 + 自定义设计系统 + 代码生成,完整专业工作流。