AI 已经在多个领域接近人类能力，但设计长期以来一直是 AI 难以突破的领域之一。不过，我认为很多人对“用 AI 设计”这件事存在一些误解。
本文基于 Leon Lin（@LexnLin）的帖子《How To Actually Design With AI》，整理并详细介绍了用 AI 进行设计的实用方法。
文末我会分享一个用于在 Claude 中创建高质量设计的设计系统工具包。
你可以在文章底部领取。
需要牢记的前提条件
“用 AI 设计”并不意味着把所有事情都交给 AI。想法、方向、直觉和创造力归根结底来自你自己。把 AI 理解为“将这些想法具象化（执行）”的工具，会更容易理解。
整体流程分为以下 3 个步骤：
- 自己构思想法
- 收集灵感
- 将你的想法转化为提示词，让 AI 来创作
你可以使用任何工具或环境（如 Cursor、Codex 或 Claude）。关键在于“将你的想法转化为指令”。
AI 非常擅长执行，但它还不具备真正的创造力。它理解“设计规则”，比如留白、排版、色彩理论和层次结构。但它无法理解什么是“真正好”、“原创”或“有意义”——换句话说，就是品味。
这是最大的差距。目前你无法赋予 AI 真正的品味，但你可以通过假设它存在来绕过这个限制。
方法一：使用设计技能
这是最快的方法。当你没时间或只是做小东西时，依靠预先准备好的“设计技能”会很有效。
例如：
- Impeccable（impeccable.style）
- Emil Kowalski 的 UI 技能（GitHub: emilkowalski/skills）
- Skills.sh
- TasteSkill（tasteskill.dev）
流程非常简单：
- 添加设计技能
- 给 AI 提供上下文
- 发送几个提示词，让它创建网站、应用或海报
- 修复明显的问题
- 发布
结果通常“还算不错”。它们可能看起来和其他 AI 生成的设计相似，但使用高质量技能可以避免最糟糕的失败和“AI 感”。这是很多人实际使用的方法。
方法二：自己用 AI 设计
如果你想创造“真正突出”的东西，就需要更进一步。你希望用户在使用你的产品时感受到“精心设计”——为此，需要一个更有意识的流程。
无论是移动应用、桌面应用、网站、落地页、仪表盘还是海报，你首先都需要一个明确的方向。如果你不知道自己想做什么，AI 也无法替你找到。
从“意义”开始
首先，定义基础。尝试回答这些问题：
- 这是为谁做的？
- 它解决了什么问题？
- 它应该给人什么感觉？
- 它体现了什么？
UI 反映了产品的“意义”。把这些写下来。你也可以在这里用 AI，但诀窍是让它向你提问，而不是直接用于设计。
例如，让 AI 问你：
- 这个产品是关于什么的？
- 目标用户是谁？
- 你想传达什么情感？
- 品牌氛围应该是什么样？
- 什么颜色和字体合适？
- 极简 / 趣味 / 高端 / 技术 / 实验性——往哪个方向走？
收集灵感
方向确定后，开始收集参考资料。一个强大的来源是 Mobbin，它包含各种类别的实际产品截图。
这里的关键不只是看，然后觉得“这个好看”。要问自己为什么好看。
- 是布局吗？
- 是留白吗？
- 是排版吗？
- 是结构吗？
- 是交互吗？
把你喜欢的保存下来，并按文件夹分类，比如：
- 导航
- 主视觉
- 定价
- 卡片
- 移动端屏幕
- 仪表盘
- 动画
- 排版
花时间建立自己的参考库，这就是培养“品味”的方法。
其他有用的来源包括 Pinterest、Cosmos、Awwwards、Webflow Templates、Craftwork、Rebrand Gallery、Component Gallery、Savee 和 Lummi。
注意：避免完全复制设计。重要的是将多个想法结合起来，提升到适合你产品的水平。
规划结构
接下来，定义你实际需要构建的内容。对于网站，可能是导航、主视觉、功能、定价、用户评价、行动号召和页脚。
对于应用，可能是引导页、首页、搜索、个人资料、设置、核心流程和空状态。
每个部分都需要清晰的内容。对于主视觉区，你需要标题、描述、行动号召和视觉元素。AI 可以帮你撰写文案，但“清晰度”最终取决于你。
按组件构建
最后，开始制作。把你参考的单个想法拿出来，重新构建以适合你的产品。
不要只说“做一个完整的网站”，关键是说“基于这个风格，为我的品牌做一个主视觉区”。
逐步进行：导航 → 主视觉 → 卡片 → 按钮 → 排版 → 细节。AI 更擅长小任务，这样你也能保持控制。
生成自定义素材
根据需要生成图像。图像生成工具现在很强大。诀窍是清晰地传达颜色、风格、构图和用途等上下文。
避免使用通用的库存图片。使用自定义视觉素材可以增强整体统一感。
整体工作流程
总结一下，流程如下：
- 定义想法
- 明确目的和用户
- 确定品牌方向
- 收集参考
- 整理参考
- 规划结构
- 创建组件
- 生成素材
- 添加交互
- 打磨整体
这样得到的结果比单次提示词好得多。
方法三：使用灵感板
还有一种更快的“折中方法”。你不必逐一组装所有内容，而是给 AI 提供一组精选的参考。
从 Mobbin、Awwwards、Webflow 等平台收集截图，然后问：
请结合这些参考的风格和方向，为我的产品设计一个方案。但不要完全照搬。
当然，这需要你提供足够的上下文，并让 AI 先提问。这比手动操作快，但比通用的单次提示词效果好得多。
三种方法总结
- 方法一：设计技能 — 快速，结果尚可
- 方法二：基于组件 — 较慢，但质量最高
- 方法三：灵感板 — 平衡
其他有用工具
- SVG 生成：像 Quiver 这样的工具可以创建 SVG。由于元素分离，更容易添加动画。
- 视频：像 Google Flow 这样的工具。可以增强主视觉、背景和产品演示。
- 图片库：像 Lummi 这样的平台。但选择适合品牌的图片。
- 分层：通过去除背景和分层，增加深度、动感和交互。细节的积累会带来很大不同。
结论
AI 不能替代你的思考。
- 做什么
- 为什么重要
- 为谁做
- 应该给人什么感觉
这些始终由你决定。AI 只是更快地执行。最好的结果不是来自更好的提示词，而是来自更好的品味。
*本文基于 Leon Lin（@LexnLin）的 X 帖子《How To Actually Design With AI》重新编译为中文。
我正在 LINE 上免费分享“Claude 设计系统工具包”。
▼ 在 LINE 上注册即可领取“Claude 设计系统工具包”
https://t.co/90omRA4UQ7
请加入 Open Chat（LINE OpenChat），然后在笔记中提到的官方 LINE 发送：
设计系统
即可领取福利。
※ 请勿在 Open Chat 内发送关键词。
建议将模板直接放入 Claude Design 中，尝试制作一个文档。仅此一步就能让你感受到使用设计系统的体验。
▼ 在 LINE 上注册即可领取“Claude 设计系统工具包”
