Title: A Complete Workflow for Using AI in Design: From Material...

URL Source: https://www.bestblogs.dev/status/2073394398973595965?amp%3Butm_medium=feed&%3Butm_campaign=resources&%3Bentry=rss_article_item

Published Time: 2026-07-04 21:12:01

Markdown Content: Skip to main contentAudio 2 

Search Ctrl+K

Change language Switch ThemeSign In

Curated Daily BriefWeekly PicksTopicsWorld Cup Special SettingsHelp CenterCollapse

Narrow Mode

A Complete Workflow for Using AI in Design: From Material Collection to Animation Addition

A Complete Workflow for Using AI in Design: From Material Collection to Animation Addition

@vikingmute

最近让 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 做设计》，系统的去总结一下。Show More

Jul 4, 2026, 1:12 PM View on X

16 Replies

35 Retweets

191 Likes

9,495 Views  Viking @vikingmute

Follow

One Sentence Summary

The author summarizes a systematic method for using AI in design, including six steps: material collection, image generation, page conversion, interactive animations, etc., with resource links provided.

Summary

The author wrote a longer thread detailing their complete workflow for using AI to design app landing pages: 1) Collect design styles on Refero and getdesign.md to get design.md; 2) Based on product characteristics and screenshots, have AI refine the content structure; 3) Use ChatGPT images2 to generate design images; 4) Convert images to pages; 5) Use Gasp/Motion to add refined animations, and recommends emil-design-eng skill and transitions.dev; 6) Cultivate an eye for beauty. Finally, the author announces they will summarize this into an article titled "How to Use AI for Design".

AI Screening

89

Influence Score 108

Published Yesterday

Language

Chinese

Tags

AI Design

Design Workflow

ChatGPT

Animation Design

Resource Recommendations

Make your daily reading actually fit you.A daily brief built from the sources you follow. Get started free HomeDiscoverWorld CupSettings