大家好，我是刘一缘。
每个想做产品的人，都曾在深夜盯着空白的界面发愁。
代码能写，逻辑能理，但面对设计这道墙，多少技术人败下阵来。
我也是其中一个，不同的是这次 AI 成了我的设计伙伴。从笨拙的提示词到渐入佳境的界面生成，我摸索了一套零设计经验也能做出精美界面的方法。
这不单纯是篇幅冗长的教程，而是一次技能突破的经验总结。
如果你也想让自己的产品更亮眼，这些经验或许能让你少走些弯路。
1. 结构优先
是的，结构优先，不要通过 AI 去抽盲盒。
我这里定义的结构优先，就是要明确界面的布局，这点一直是我的弱项。
我在实践的过程发现，如果我在一开始没有去确定好我要的页面结构大致得长什么样。
而是单纯想着直接描述/实现功能，让AI生成出来界面，大多时候都是不如意的。
且来回沟通也会浪费时间，更让我原本清晰的思路变得混乱。
所以这里我把我认为比较重要的「结构优先」放在第一个观点讲述。
在最开始的阶段，我会采用静态先行，结构优先的策略。
我会先确定好用户的输入与输出，在UI/UX设计、产品领域里，这个阶段应该被划分为用户故事/用户流设计阶段。
因为我没太深入的去学习这个领域，只是记忆了一些我接触到，我认为能用到的理论。
在其中我觉得最能帮我厘清思路的，就是用户流。
用户流(User Flow)，就是我作为设计者，我认为或期待用户在这个页面，所需要经历的一系列动作。
例如设计一个登录的用户流，那么用户无非就是输入账号密码后点击登录，这是最基本的路径。
通过得出用户流，我就能明确在这个用户流中，我至少要提供给用户三个元素，账号输入框/密码输入框/登录按钮。
当我想继续往里去深入设计时，我就能一点一点得出来这个页面中，最重要的骨架/结构/元素...
然后我就会结合整理得到的用户流信息，让AI生成页面，往往这时候页面的可控性就强很多了。
这算是我的一个工作流程的分享，在这个策略之前，需要先设计好PRD。
由PRD引导出功能/用户流/各种数据结构的定义，再设计界面。
近期看到 @刘小排 的一个分享，我感觉也是有收获。
他让AI利用 ASCII 字符进行字符绘画，更可视化的把设计过程呈现出来，感兴趣的朋友可以定位过去看看。
这个技巧，我在使用 Qoder(一款阿里近期推出AI IDE) 设计PRD文档的时候，Qoder 也输出过这种特性。
2. 界面复刻
界面复刻，即当看到别人做好的网站效果，自己很喜欢的时候，要怎么去模仿出来一个类似的界面时。
我一开始的做法是直接贴图并跟AI说，「我需要你基于示图的界面风格，生成我所需要的...」，但这种效果始终不理想。
后来看到社媒上有博主分享的一个技巧，我觉得十分受用。
Create a JSON-formatted design system profile. This profile should extract relevant visual design information from the provided screenshots. The JSON output must specifically include:
The overarching design style (e.g., color palette, typography, spacing, visual hierarchy).
The structural elements and layout principles.
Any other attributes crucial for an AI to consistently replicate these design systems.
Crucially, do not include the specific content or data present within the images, focusing solely on design characteristics.
这个技巧就是结合上述的提示词，带上示图让AI去提取出来JSON格式的设计系统。
其实一开始我不理解，为什么明明图片的内容更能丰富的体现界面特征和风格，还要提取JSON这样多此一举的手段。
在反复实践后，我也是明白。目前多模态模型的能力有强有弱，但要说真的能把眼见转为实，特别是像根据图片这种信息密度极高的内容去1:1生成界面，还是太过勉强。
复杂的界面，有它自己的设计语言所在。从风格、节奏、层级、语义、排版，如果单单靠图片让AI去进行 Token 生成，效果往往不会太令人满意。
而JSON这种天然能表达一个事物的属性，结构，层级关系的语法格式，本质能让AI更理解我们需要的内容。
| 图像信息 | AI可见 | AI可复现 | JSON的作用 |
|---|---|---|---|
| 颜色渐变、阴影、质感 | ✅ | ❌（模糊、失真） | 提取色值、阴影参数、圆角半径 |
| 字体风格、字重、行高 | ✅ | ❌（无法直接复现） | 提取字体族、字重、行高、字距 |
| 间距、栅格、对齐方式 | ✅ | ❌（估算不准） | 提取间距 token、栅格系统 |
| 动效、交互状态 | ❌（帧率限制） | ❌ | 提取 easing、duration、state token |
| 图像内容（如图标、插画） | ✅ | ❌（版权、风格漂移） | 提取图标风格描述、插画类型标签 |
所以提取设计系统，再基于设计系统去生成界面，比单纯贴图生成界面更容易得到稳定、统一的结果。
一个经过实践的路径：提供示例图(通过各种设计网站，找到喜欢的风格)->提取设计系统->基于设计系统加自己的需求引导词，提示AI进行界面生成，多次生成，总会带来一些生产级的UI答案或灵感。
这是我的一些生成效果
这里分享一些我自己收藏的UI灵感站点
Dribbble 可以发现各种世界顶级设计的UI灵感网站
https://dribbble.com/
Mobbin 登录后可以查看各种精美的IOS/Android不同风格的UI（有收费计划）
https://mobbin.com/
CollectUI 每日精选经过分类和筛选的UI灵感截图，大多数来源于 Dribbble
https://collectui.com/
Codrops 自 2009 年以来一直致力于为网络创意提供灵感的网站
https://tympanus.net/
Uiverse 可以查阅各种组件级的精美UI
https://uiverse.io/
3. 高级UI类库
一开始，我习惯于让AI从0生成出来界面，在没有约束的情况下，它大多数情况会直接输出纯CSS/HTML的答案。
但复杂的界面，他们往往用到的CSS属性超级多，如果不引用适当的类库，AI输出的答案会因为过长而增加了出错的可能性。
包括一些复杂的图标或渐变效果，有时候输出就等半天，还不一定满足预想。
而我们进行前端开发的时候，其实大多数都是会用到第三方开源的高级 UI 类库，它们能节省我们的开发时间。
以前没有AI的时候，我们可以用这种高级 UI 类库来进行快速的开发。
现在有AI，可能更需要利用高级UI类库来避免AI生成的答案存在偏差，提高我们的开发效率，同时保持风格一致。
像目前流行的AI模型，对 TailwindCSS、Shadcn/UI 这种类库也比较熟悉。
所以我推荐无论在原型/生产过程，都可以使用跟UI有关的类库，让AI生成跟它们有关的、你所需要的内容。
这里我推荐一些常用的UI库，你可以去多了解一下他们的区别。
TailwindCSS (原子化CSS框架，AI开发必备)
Shadcn/UI （无头组件，但具备了基本的样式，可以通过各种预设风格来实现差异化）
https://ui.shadcn.com/
MUI（遵循谷歌设计原则与风格的UI库）
https://mui.com/
HeroUI（原生NEXT-UI，组件精美的同时也实现了基本的动画效果，能带来不错的用户体验）
https://www.heroui.com/
DaisyUI（类似于Shadcn/UI，基于TailwindCSS实现了更简洁的类名来引用组件样式）
https://daisyui.com/
RadixUI （提供了丰富的组件，同时提供易于修改的无头组件）
https://www.radix-ui.com/
这些UI类库，都是我在实践中常用的。当然，市面上还有许许多多不同的开源UI框架。
你完全可以在 Github 上多浏览一些流行的UI框架，加以了解并让AI去使用它(结合 Context7 MCP)。
对了，我推荐如果使用Shadcn/UI的话，可以配合 tweakcn.com/ 生成你喜欢的主题
4. 补充页面细节
通过前面的推荐，其实我们对如何配合AI开发出来一个好看的界面，基本已经有了思路。
那接下来，我还要推荐的一个策略是，你可以优先按照我第一点提到的进行静态页面的开发。
在开发静态页面的时候，可以不关心用户体验，只专注实现具备优雅美观、布局排版合理的界面。
在静态页面开发完毕后，我们就可以进入下一步的用户体验优化。
关于一个项目的用户体验优化，其实能做的事情有很多。
在这里我对项目初期，界面上的用户体验优化定义，是给我们的页面去加入一些图标、动画，还有选择一个合适的字体。
这些操作可以让我们的界面看起来更像一个商业化项目，而不是随便糊弄人的原型产品。
图标项目推荐
开源的图标集，安装依赖后可以很方便引用
图标库，风格统一，可以通过下载依赖或在线CDN网址引用（https://unpkg.com/lucide-static@latest/icons/XXX.svg），我惯用的技巧是在开发阶段让AI直接引入CDN图标，后续再安装依赖后再让它去替换。
阿里巴巴矢量图标库，以字体图标的方式引用
动画项目推荐
一个适用于 React、JavaScript 和 Vue 的生产级动画库
一个为专业人士打造的极其强大的 JavaScript 动画库（AI肯定足够专业了~）
150+免费且开源的动画组件与特效样式
为 React 提供的高度可定制的动画组件库
丰富、高级的动画组件
开源动画组件库
字体项目推荐
谷歌字体库，有丰富的字族提供选择
字体天下，有提供一些免费的商用字体，但也包含了付费项目
5. 高级模板
如果前面的内容，没办法让你去掌握如何做一个好界面的思维方式，那么我建议直接找一个高级模板 (别人开发好的现成项目)
然后先粗糙的让AI写出你要的界面原型，再去选择一些高级模板，最后用类似以下的提示词
为页面 @page.tsx 套上 @高级模板 的设计风格，交互逻辑保持不变，主要针对页面样式进行升级。
为项目 @folder 应用 @高级模板 的设计风格，确保风格和交互动画一致，其余逻辑不变。
这时候，效果往往是不错的。因为AI有了足够的上下文，去引导它输出符合你需求的页面。
高级模板项目一般都是付费的，你可以从网上用关键词去搜索各种各样的销售站去看看，看到合适的风格就可以实践下这个思路。
结尾
到此，基本所有这段时间的实践经验就整理完毕~
干货已被掏空，如果你有什么新思路或建议，欢迎留言一起讨论下！！
