兄弟，这个工作流很实用，从找参考到出图到加动画都讲清楚了，特别适合自己动手做UI的人，ChatGPT image2出设计确实好用。
作者分享了用AI设计应用首页的完整流程：先在styles.refero.design或getdesign.md收集设计参考，获取design.md；再结合PRD让AI提炼页面结构和内容，无需出图先写多个版本；然后使用ChatGPT image2出图，可一次性生成3种风格；最后将图片转为页面代码并微调，动画方面推荐gasp或motion添加精致动效，并参考emil的skill和transitions.dev。
最近让 AI 设计两个应用的首页有感，设计现在还是应用最大的护城河，微调设计比写代码要难多了，要描述设计风格非常难。 我现在的大体做法是这样的： 1 搜集和发现好看的设计，我一般都是在 https:...
最近让 AI 设计两个应用的首页有感，设计现在还是应用最大的护城河，微调设计比写代码要难多了，要描述设计风格非常难。 我现在的大体做法是这样的： 1 搜集和发现好看的设计，我一般都是在 styles.refero.design 或者 getdesign.md 去看，它们会搜集非常多网站的风格，并且可以快速获取 design.md 2 结合你要做的产品找到设计风格，最后再提供网站的截图，同时把 PRD 提供给 AI，让它精炼处你产品中的最有特色的部分，先把要展示什么内容和页面的大体结构写出来，不需要出图，可以多些几个版本，找到你想要的。 3 出图，把 design.md 参考网站截图 你要展示的结构 一起提供给 AI，让 ChatGPT images2 帮你出图，这是我用过觉得设计最好的模型，你可以让它帮你直接出 3 种风格的，你可以选择你喜欢的，假如有一些静态素材，也可以让它帮你扣出来。 4 图片转换成页面，这个一般比较强的大模型都可以，没什么可说的，出来以后，在根据图片的细微之处微调就好。 5 交互和动画，交互我觉得是非常重要的，我喜欢在页面中添加一些简单的动画，尤其是使用 gasp 或者 motion 去添加一些小范围 精致 的动画，让页面可以出彩，你也可以问 AI 怎样添加动画，可以使用emil 的 emil-design-eng 的 skill 去做动画的指导思想： skills.sh/emilkowalski/s… 然后可以参考 transitions.dev 去添加更多微妙的动画。 6 最后就是发现美的眼睛了，要自己去多看多搜集多观察，这就是一种天赋了。 这篇帖子之后我会总结成一篇《怎样用 AI 做设计》，系统的去总结一下。 💬 0 🔄 0 ❤️ 1 👀 106 📊 1 ⚡