# How To Actually Design With AI
**作者**: Leon Lin
**日期**: 2026-07-12T21:44:50.000Z
**来源**: [https://x.com/LexnLin/status/2076422557180608888](https://x.com/LexnLin/status/2076422557180608888)
---

Design has always been one of the areas where AI struggles to match human ability. But most people still misunderstand what designing with AI actually means. Designing with AI does not mean asking it to do everything for you. The idea, direction, feeling, and creativity should still come from you.
AI is there to help you execute.
Here is the process in simple terms:
1. You develop the idea.
2. You gather inspiration.
3. You translate your thinking into prompts and use AI to build it.
You can use tools like Cursor, Codex, Claude, or any harness. Basically at its core, you are turning your thoughts into instructions. AI can execute extremely well, but it still lacks true creativity. It understands design rules like spacing, typography, color theory, and hierarchy.
But it does not understand taste. It does not know what feels original, meaningful, or genuinely good.
That is the gap.
You cannot give AI real taste yet, but you can work around that limitation.
## Method 1: Use a Design Skill
This is the fastest approach. If you are short on time or working on something small, you can rely on prebuilt design skills.
Some examples:
- Impeccable
- Emil Kowalski’s UI skills
- Skills.sh
- TasteSkill
TasteSkill Version 2 is also coming soon with a dedicated GPT 5.6 one first. :)
The process is simple:
1. Add a design skill.
2. Give the AI context.
3. Prompt it a few times to create your site/app/poster
4. Fix obvious issues.
5. Ship it.
The result will usually be decent. It may still feel similar to other AI-generated designs, but good skills help avoid the worst mistakes/slop. This is what most people use.
## Method 2: Design It Yourself With AI
If you want something that actually stands out, you need to go deeper. You want people to land on your product and feel that real thought went into it. That requires a more intentional process.
You might be building:
- A mobile app
- A desktop app
- A website
- A landing page
- A dashboard
- A poster
Whatever it is, you need a clear direction first. If you do not know what you are building, AI will not figure it out for you.
## Start With Meaning
Before anything else, define the foundation.
Ask yourself:
- Who is this for?
- What problem does it solve?
- What should it feel like?
- What should it represent?
The UI should reflect the meaning of the product. Write this down. You can also use AI here, but not for design. Let it ask you questions instead.
For example:
- What is the product about?
- Who is the audience?
- What feeling should it communicate?
- What should the branding feel like?
- What colors and fonts fit?
- Should it feel minimal, playful, premium, technical, or experimental?
## Collect Inspiration
Once you have direction, start collecting references. A strong source is Mobbin.
It has real product screens across many categories. Do not just look at designs and think “this looks good.”
Ask yourself why.
- Is it the layout?
- The spacing?
- The typography?
- The structure?
- The interaction?
Save anything useful.
Organize it into folders like:
- Navigation
- Heroes
- Pricing
- Cards
- Mobile screens
- Dashboards
- Animations
- Typography
Build your own reference library over time. That is also hw you develop "taste".
(The Mobbin link is an affiliate link. You can get 10% off your first three months, and I may receive a commission at no extra cost.)
Other useful sources:
- Pinterest
- Cosmos
- Awwwards
- Webflow Templates
- Craftwork
- Rebrand Gallery
- Component Gallery
- Savee
- Lummi
also:
Do not copy entire designs. Combine ideas into something that fits your product.
## Map the Structure
Now define what you actually need to build.
For a website:
- Navigation
- Hero
- Features
- Pricing
- Testimonials
- CTA
- Footer
For apps:
- Onboarding
- Home
- Search
- Profile
- Settings
- Core flows
- Empty states
Each section needs clear content.
For example, a hero needs:
- Headline
- Description
- CTA
- Visual
AI can help with copy, but clarity still comes from you.
## Build Component by Component
Now you start building. Take individual ideas from your references and adapt them.
Instead of saying: “Build me a full website”
Say: “Create a hero section based on this style, adapted to my branding.”
Work step by step:
- Navigation
- Hero
- Cards
- Buttons
- Typography
- Details
AI performs much better with smaller tasks. You also keep control.
## Generate Custom Assets
Use image generation when needed. Tools like GPT Images 2.0 or Seedream 5.0 are strong enough now.
Give clear context:
- Colors
- Style
- Composition
- Use case
Avoid generic stock images. Custom visuals make everything feel more cohesive.
## The Workflow
The full process:
1. Define the idea
2. Clarify purpose and audience
3. Set branding direction
4. Collect references
5. Organize them
6. Map structure
7. Build components
8. Generate assets
9. Add interactions
10. Refine everything
This produces far better results than one prompt.
## Method 3: Use an Inspiration Board
There is a faster middle ground. Instead of building everything piece by piece, you can give AI a curated set of references.
Collect screenshots from:
- Mobbin
- Awwwards
- Webflow
- Craftwork
- Rebrand Gallery
- Component Gallery
- Savee
- Cosmos
- Pinterest
Then tell the AI:
“Combine the style and direction of these references into a design for my product. Do not copy directly.”
Still give full context first. Let the AI ask questions. Then generate.
This is faster than building everything manually, but still much better than a generic prompt.
## The Three Approaches
1. Design Skills
Fast, decent results.
2. Component-by-Component
Slow, highest quality.
3. Inspiration Board
Balanced approach.
## Additional Tools
SVG Generation
Use Quiver to create SVGs.
SVGs allow for better animations because elements are separate.
Video
Use tools like Google Flow.
Video can enhance:
- Hero sections
- Backgrounds
- Product demos
Image Libraries
Use platforms like Lummi when needed.
Just make sure images match your brand.
Layering
Use background removal and layering to add:
- Depth
- Motion
- Interaction
Small details do make a big difference.
## Final Thoughts
AI should not replace your thinking.
You still decide:
- What to build
- Why it matters
- Who it is for
- What it should feel like
AI just helps you execute faster. The best results will not come from better prompts. They will come from better taste.
I will share more about design, development, and building + tuts on making your first money online with AI soon. :)
If you have questions, leave a reply! Hope this helped. :)
## 相关链接
- [Leon Lin](https://x.com/LexnLin)
- [@LexnLin](https://x.com/LexnLin)
- [13K](https://x.com/LexnLin/status/2076422557180608888/analytics)
- [Impeccable](https://impeccable.style/)
- [Emil Kowalski’s UI skills](https://github.com/emilkowalski/skills)
- [Skills.sh](https://www.skills.sh/)
- [TasteSkill](https://www.tasteskill.dev/)
- [Mobbin](https://mobbin.com/?referrer_workspace_id=02ebbc50-20f0-42fb-8222-a66cb42b26b0)
- [Cosmos](https://www.cosmos.so/)
- [Awwwards](https://www.awwwards.com/websites/sites_of_the_day/)
- [Webflow Templates](https://webflow.com/templates/featured)
- [Craftwork](https://craftwork.design/curated/websites)
- [Rebrand Gallery](https://www.rebrand.gallery/)
- [Component Gallery](https://component.gallery/)
- [Savee](https://savee.com/)
- [Lummi](https://www.lummi.ai/)
- [Mobbin](https://mobbin.com/?referrer_workspace_id=02ebbc50-20f0-42fb-8222-a66cb42b26b0)
- [Awwwards](https://www.awwwards.com/websites/sites_of_the_day/)
- [Webflow](https://webflow.com/templates/featured)
- [Craftwork](https://craftwork.design/curated/websites)
- [Rebrand Gallery](https://www.rebrand.gallery/)
- [Component Gallery](https://component.gallery/)
- [Savee](https://savee.com/)
- [Cosmos](https://www.cosmos.so/)
- [Quiver](https://app.quiver.ai/explore)
- [Google Flow](https://labs.google/fx/tools/flow)
- [Lummi](https://www.lummi.ai/)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [5:44 AM · Jul 13, 2026](https://x.com/LexnLin/status/2076422557180608888)
- [13.5K Views](https://x.com/LexnLin/status/2076422557180608888/analytics)
- [View quotes](https://x.com/LexnLin/status/2076422557180608888/quotes)
---
*导出时间: 2026/7/13 13:50:04*
---
## 中文翻译
# 如何真正利用 AI 进行设计
**作者**: Leon Lin
**日期**: 2026-07-12T21:44:50.000Z
**来源**: [https://x.com/LexnLin/status/2076422557180608888](https://x.com/LexnLin/status/2076422557180608888)
---

设计一直是 AI 难以匹敌人类能力的领域之一。但大多数人仍然误解了“利用 AI 进行设计”的真正含义。利用 AI 进行设计并不意味着让它为你包办一切。想法、方向、感觉和创造力仍然应该源于你。
AI 的存在是为了帮助你执行。
简单来说,流程如下:
1. 你构思想法。
2. 你收集灵感。
3. 你将思维转化为提示词,并使用 AI 来构建它。
你可以使用 Cursor、Codex、Claude 或任何工具。本质上,你是在将你的思想转化为指令。AI 执行得非常好,但它仍然缺乏真正的创造力。它理解设计规则,如间距、排版、色彩理论和层级。
但它不懂品味。它不知道什么是原创的、有意义的或真正好的感觉。
这就是差距所在。
你还不能赋予 AI 真正的品味,但你可以绕过这个限制。
## 方法 1:使用设计技能
这是最快的方法。如果你时间紧迫或正在处理一个小项目,你可以依赖预构建的设计技能。
一些例子:
- Impeccable
- Emil Kowalski 的 UI 技能
- Skills.sh
- TasteSkill
TasteSkill Version 2 也即将推出,首发将搭载专门的 GPT 5.6。:)
流程很简单:
1. 添加一个设计技能。
2. 给 AI 上下文。
3. 提示几次以创建你的网站/应用/海报。
4. 修复明显的问题。
5. 发布。
结果通常还不错。它可能仍然感觉类似于其他 AI 生成的设计,但好的技能有助于避免最严重的错误/糟糕之作。这是大多数人使用的方法。
## 方法 2:利用 AI 亲自设计
如果你想要真正脱颖而出的东西,你需要更深入。你希望人们看到你的产品时,感觉到其中投入了真正的思考。这需要更有意的流程。
你可能在构建:
- 移动应用
- 桌面应用
- 网站
- 落地页
- 仪表板
- 海报
无论是什么,你首先需要明确的方向。如果你不知道你在构建什么,AI 也不会为你弄清楚。
## 从意义开始
在做任何其他事情之前,先定义基础。
问问自己:
- 这是给谁用的?
- 它解决了什么问题?
- 它应该给人什么感觉?
- 它代表什么?
UI 应该反映产品的意义。把它写下来。你也可以在这里使用 AI,但不是为了设计。让它向你提问。
例如:
- 产品是关于什么的?
- 受众是谁?
- 它应该传达什么感觉?
- 品牌应该感觉像什么?
- 什么颜色和字体合适?
- 它应该感觉极简、俏皮、高端、技术感还是实验性?
## 收集灵感
一旦有了方向,就开始收集参考资料。一个强大的来源是 Mobbin。
它有许多类别的真实产品界面。不要只是看设计并想“这看起来不错”。
问自己为什么。
- 是布局吗?
- 间距?
- 排版?
- 结构?
- 交互?
保存任何有用的东西。
将其组织到文件夹中,例如:
- 导航
- 英雄区
- 定价
- 卡片
- 移动端界面
- 仪表板
- 动画
- 排版
随着时间推移建立你自己的参考库。这也是你培养“品味”的方式。
(Mobbin 链接是联盟链接。你可以在前三个月获得 10% 的折扣,我可能会在不产生额外费用的情况下获得佣金。)
其他有用的来源:
- Pinterest
- Cosmos
- Awwwards
- Webflow Templates
- Craftwork
- Rebrand Gallery
- Component Gallery
- Savee
- Lummi
另外:
不要复制整个设计。将想法结合成适合你产品的样子。
## 映射结构
现在定义你实际需要构建什么。
对于网站:
- 导航
- 英雄区
- 功能
- 定价
- 评价
- CTA (行动号召)
- 页脚
对于应用:
- 引导
- 首页
- 搜索
- 个人资料
- 设置
- 核心流程
- 空状态
每个部分都需要清晰的内容。
例如,一个英雄区需要:
- 标题
- 描述
- 行动号召 (CTA)
- 视觉元素
AI 可以帮助撰写文案,但清晰度仍然源于你。
## 逐个组件构建
现在开始构建。从你的参考资料中提取单独的想法并进行调整。
不要说:“为我构建一个完整的网站”
要说:“根据这种风格创建一个英雄区,并适应我的品牌形象。”
一步步工作:
- 导航
- 英雄区
- 卡片
- 按钮
- 排版
- 细节
AI 在处理较小的任务时表现好得多。你也保持控制。
## 生成定制资产
在需要时使用图像生成。像 GPT Images 2.0 或 Seedream 5.0 这样的工具现在已经足够强大。
提供清晰的上下文:
- 颜色
- 风格
- 构图
- 用例
避免通用的库存图片。定制视觉效果让一切感觉更连贯。
## 工作流程
完整流程:
1. 定义想法
2. 阐明目的和受众
3. 设定品牌方向
4. 收集参考
5. 整理它们
6. 映射结构
7. 构建组件
8. 生成资产
9. 添加交互
10. 完善一切
这比单次提示产生的结果要好得多。
## 方法 3:使用灵感板
有一个更快的中间立场。你不是逐个构建所有东西,而是给 AI 一组精选的参考资料。
收集来自以下地方的截图:
- Mobbin
- Awwwards
- Webflow
- Craftwork
- Rebrand Gallery
- Component Gallery
- Savee
- Cosmos
- Pinterest
然后告诉 AI:
“将这些参考资料的样式和方向结合成我的产品设计。不要直接复制。”
仍然要先提供完整的上下文。让 AI 提问。然后生成。
这比手动构建所有东西更快,但比通用的提示好得多。
## 三种方法
1. 设计技能
快,结果不错。
2. 逐个组件
慢,质量最高。
3. 灵感板
平衡的方法。
## 附加工具
SVG 生成
使用 Quiver 创建 SVG。
SVG 允许更好的动画,因为元素是分开的。
视频
使用像 Google Flow 这样的工具。
视频可以增强:
- 英雄区
- 背景
- 产品演示
图库
需要时使用像 Lummi 这样的平台。
只需确保图片与你的品牌匹配。
分层
使用去背景和分层来增加:
- 深度
- 动态
- 交互
小细节确实会产生很大的不同。
## 最后的想法
AI 不应该取代你的思考。
你仍然决定:
- 构建什么
- 为什么重要
- 给谁用
- 应该是什么感觉
AI 只是帮助你更快地执行。最好的结果不会来自更好的提示。它们将来自更好的品味。
我很快会分享更多关于设计、开发和构建的内容 + 关于如何利用 AI 在线赚取第一笔资金的教程。:)
如果有问题,请留言!希望这对你有帮助。:)
## 相关链接
- [Leon Lin](https://x.com/LexnLin)
- [@LexnLin](https://x.com/LexnLin)
- [13K](https://x.com/LexnLin/status/2076422557180608888/analytics)
- [Impeccable](https://impeccable.style/)
- [Emil Kowalski’s UI skills](https://github.com/emilkowalski/skills)
- [Skills.sh](https://www.skills.sh/)
- [TasteSkill](https://www.tasteskill.dev/)
- [Mobbin](https://mobbin.com/?referrer_workspace_id=02ebbc50-20f0-42fb-8222-a66cb42b26b0)
- [Cosmos](https://www.cosmos.so/)
- [Awwwards](https://www.awwwards.com/websites/sites_of_the_day/)
- [Webflow Templates](https://webflow.com/templates/featured)
- [Craftwork](https://craftwork.design/curated/websites)
- [Rebrand Gallery](https://www.rebrand.gallery/)
- [Component Gallery](https://component.gallery/)
- [Savee](https://savee.com/)
- [Lummi](https://www.lummi.ai/)
- [Mobbin](https://mobbin.com/?referrer_workspace_id=02ebbc50-20f0-42fb-8222-a66cb42b26b0)
- [Awwwards](https://www.awwwards.com/websites/sites_of_the_day/)
- [Webflow](https://webflow.com/templates/featured)
- [Craftwork](https://craftwork.design/curated/websites)
- [Rebrand Gallery](https://www.rebrand.gallery/)
- [Component Gallery](https://component.gallery/)
- [Savee](https://savee.com/)
- [Cosmos](https://www.cosmos.so/)
- [Quiver](https://app.quiver.ai/explore)
- [Google Flow](https://labs.google/fx/tools/flow)
- [Lummi](https://www.lummi.ai/)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [5:44 AM · Jul 13, 2026](https://x.com/LexnLin/status/2076422557180608888)
- [13.5K Views](https://x.com/LexnLin/status/2076422557180608888/analytics)
- [View quotes](https://x.com/LexnLin/status/2076422557180608888/quotes)
---
*导出时间: 2026/7/13 13:50:04*