type
Post
status
Published
date
Oct 16, 2025
slug
vibe-coding-ui-ai-guide-kyv5ms
summary
📌 来自：faafospecialist.substack.com (Substack) | 💡 AI 没有审美，但你可以通过“流程”借用它的手实现高级感。
本文拆解了如何利用 AI 工具进行 Vibe Coding（氛围编程）并输出高水准 UI 界面的完整方法论。作者强调审美核心在于人类的引导，通过分析设计趋势、建立 Design System（设计系统）、添加微动画以及利用 Claude Code 的 Subagents（子代理）功能，开发者可以打破 AI 创作的平庸感，打造出既美观又符合用户体验的顶级产品。 | 🔑 关键词：Substack、faafospecialist.substack.com、FA&FO | 🤖 由Gemini 3 Flash (Google API)分析生成
tags
Substack
faafospecialist.substack.com
FA&FO
category
Substack文章
icon
📰
password
本文是对 faafospecialist.substack.com (Substack) 的学习笔记。所有观点归原作者所有，建议阅读原文获取完整内容。
💡 AI 没有审美，但你可以通过“流程”借用它的手实现高级感。
本文拆解了如何利用 AI 工具进行 Vibe Coding（氛围编程）并输出高水准 UI 界面的完整方法论。作者强调审美核心在于人类的引导，通过分析设计趋势、建立 Design System（设计系统）、添加微动画以及利用 Claude Code 的 Subagents（子代理）功能，开发者可以打破 AI 创作的平庸感，打造出既美观又符合用户体验的顶级产品。
这是许多开发者朋友非常关心的问题，所以今天我整理了我使用的整个流程。这看起来是个简单的问题，但对很多人来说其实相当“棘手”。我将描述我处理这个问题的过程，希望能对你有所启发，并为你提供更多处理方式。
基础知识
每个人可能都尝试过这样的 Prompt（提示词）：
“创建一个漂亮的网站首页”
“不够漂亮，再漂亮一点”
“你管这叫漂亮？AI 太蠢了”
哈哈……首先，你需要理解问题的核心：AI 没有 Aesthetic Sense（审美感）！
有些人可能会想：“那为什么它能生成漂亮的图片？”我在之前的文章中提到过——AI 的本质是“基于算法的统计概率”。它只是死记硬背了许多不同艺术作品的模式（这些作品由人类打标签和训练），然后利用算法根据用户 Prompt 中的关键词将一切混合在一起输出。
那么审美感从何而来？答案是：人类。
问题在于，即便对于人类来说，审美标准也是不同的——一个人觉得美的东西，另一个人可能觉得丑。显然，这是一个棘手的问题，因为它像个笑话一样模糊。因此，要解决这个问题，你需要创建一个不仅你觉得美，而且符合大众口味的界面设计。
理解美（必要条件）
首先，让我讲个有趣的故事：你有没有注意到，当你还小的时候（比如小学），你“喜欢”的女孩看起来非常可爱动人，但当你长大后回想（或回头看她们），你突然发现……哦，她们其实很普通（为什么我当时那么喜欢她们？）。
这仅仅是因为你的“审美标准”改变了。随着成长，你开始看到更多漂亮的人，或者听到朋友称赞更漂亮的人，或者只是看了选美比赛，所以你的大脑调整到了这个“标准”，使得旧的标准（你自己创造的）不再适用。
因此，要“创建一个拥有漂亮界面的产品”，你需要让你的“审美标准”向大众标准（市场/品味）靠拢。
你需要知道：
如何区分什么是真正的“美”
见识过各种不同风格的美物
掌握美的原则
1. 第一件事是亲自去看美好的事物
去 Dribbble、Mobbin、Behance、Muzli 等网站，按点赞数排序，然后复制这些图片，粘贴到 ChatGPT、Gemini 或 Claude 中，让它分析：
这是什么 Design Style（设计风格）？（你会学到像 Memphis、Flat Design、Glassmorphism（玻璃拟态）、Liquid Glass（液态玻璃）等关键词）
对这个设计的评价（告诉 AI “要诚实”）
创造类似设计的基本要素（Layout（布局）、Typography（排版）、Color Styles（色彩风格）等）
通过这种方式，除了了解当前的设计趋势，你还会学到更多关于大众品味的知识。
2. Layout（布局）
“它长得丑，但它的结构很美”——有人听过这种“赞美”吗？在艺术界，理解布局是先决条件。许多设计在审美上并不惊艳，但拥有和谐的布局会让观众觉得赏心悦目。
探索方法与步骤 (1) 类似，但这次要问关于布局的问题：
这个布局叫什么？
设计中还存在哪些其他类型的布局？
移动应用中的布局类型名称是什么？
网页设计中有哪些布局类型？
某种特定布局通常在什么时候使用？
不断重复步骤 (1) 和 (2)，直到你更深入地理解“美的原则”。“我们不知道我们不知道的东西”——承认如果你从未做过设计、从未画过画或创作过艺术，你就不会知道这些知识。但通过上述探索方法，你将建立起与设计相关的专业词汇和核心知识，从而为以后创作“美”的设计打下基础。
最后，选择一个你最喜欢的设计风格，并继续接下来的步骤。
漂亮还不够，还必须正确
漂亮但 UX（用户体验）差、布局不当或无法使用，那也是垃圾。所以我们需要继续学习 UX、Layout（布局）和 Design System（设计系统）。
依然使用同样的方法，在 Google 上搜索“Figma Design System + <设计风格>”等关键词，或者使用 Gemini Pro Research。浏览并了解设计系统包含什么及其名称（Typography（排版）、Calendar（日历）、Input（输入框）、Form（表单）、Button（按钮）等），注意每个组件包含什么以及布局是如何排列的。
同前一节一样，把你喜欢的设计截图发给 Gemini（或 ChatGPT、Claude）并让它分析：
“这个设计系统使用了哪些类型的布局”
“对这个设计系统的诚实评价”
“分析并对比这两个设计系统”
“评估 UX 并提出改进该设计系统的方法”
（这是在做中学——如果你把所有事情都委派给 AI，你将学不到任何东西！）
将你最喜欢的 Design Systems（设计系统）保存到电脑上！我们稍后会用到它们。
Pro Tip（专业提示）： 利用 AI 深入挖掘并学习更多关于 Brand Guidelines（品牌指南）的知识——简单来说，每个产品/品牌通常都有自己独特的特性设计风格，旨在提高辨识度，就像每个人都知道绿色头盔意味着 Grab 一样。
漂亮 + 正确，现在需要：令人愉悦 & 登峰造极
谁不喜欢“花里胡哨”的东西？
Satisfying（令人愉悦）
这取决于感觉，所以只需应用一点微妙的 Micro-animations（微动画）就足以带来那种“爽感”。
Animation & Interactions（动画与交互）
这是展现你品味的地方：
基础动画： Fade（淡入淡出）、Slide（滑动）、Scale（缩放）
Sequence animations（序列动画）： 每个元素分别动画，延迟 0.1 秒
Timing（时效）： 使用 Ease-out（缓出）获得自然感，Spring（弹簧）获得弹性效果
建议：学习更多关于动画中的 [Easing types]（缓动类型），如 EaseIn、EaseOut、EaseInOut、Elastic、Circ、Quart、Back 等。
示例 Prompt：
“添加淡入、缩放和滑动动画，采用序列计时，持续时间 0.6 秒，缓出效果，交错延迟 0.1 秒。”
此外，你可以访问 21st.dev 来参考组件、动画或微妙而美观的效果。
Pro Tip: PEAK（登峰造极）
一个“漂亮 + 正确 + 令人愉悦”的界面看起来已经完整了，但要达到 PEAK（巅峰）水平，你需要懂得如何讲故事——Story Telling（故事讲述）——为设计和体验注入灵魂。一个巅峰设计会让你的产品在其他产品中脱颖而出。
你可以通过关键词 Parallax（视差滚动）进行探索，并结合你的产品描述与 AI 进行头脑风暴，然后让 AI 创建一个讲述产品故事的布局。
将此文件以 Markdown 格式保存，并放在项目的 `./docs` 文件夹中（例如 `design-story.md`）！
想更高级一点？学习这些关键词：ThreeJS 和 Particle Effects（粒子效果）。但要适度——任何东西过度了都不好。
实验！（永不停止实验）
方法 1：使用流行的 AI 工具，如 ChatGPT、Gemini、Claude...
我使用 Gemini Pro 网页版，利用 Canvas（画布）功能快速创建设计模板。你也可以使用 Claude 或 ChatGPT，但根据我的经验，Gemini 似乎拥有最好的 Sense of Art（艺术感）。
不要让 AI 生成整个设计系统，而是从你应用中想要的小组件开始。这里的目的是快速预览设计的实际效果，并创建不同的变体，以便快速方便地进行视觉对比。
在你的 Prompt 中，提到你从上述过程中学到的所有元素，例如：
任务： TODO App 界面
设计风格： Neobrutalism（新野兽主义）
主色调： 黄、蓝、绿
字体： Variable（等宽字体）
设计故事： 专注于 Wibu 爱好者
布局： 侧边栏，左侧菜单用于项目，主容器显示任务列表
应用微动画和悬停、点击效果
完成任务时显示 Confetti（五彩纸屑）效果
Pro Tip 01： 如果可能的话，如果你脑子里已经有了想要 AI 创建的想法，可以在纸上勾勒出界面，直接在草图上做笔记，然后拍张照片直接扔给 AI 工具——它会理解一切！
Pro Tip 02： 使用 Lovable 或 V0！这种方法与上述完全相同，我就不重复了。如果你想尝试，尽管去试。然后，根据 AI 创建的结果，让它创建许多不同的变体，这样你就有了一个更全面的视角，并可以选择你最喜欢的风格。
继续实验，让 AI 从你想要的组件中创建一个完整的 Design System（设计系统），主要是看看其他组件长什么样。当你找到了最喜欢的设计风格，最后的任务是让 AI 以 Markdown 格式详细描述你选择的整个风格和该设计系统的标准，这样你就可以轻松地将其下载作为你产品中所有设计的 Guideline（指南）。
方法 2：杠杆化 Claude Code 的 Subagents（子代理）能力
这个方法非常棒。正如之前文章介绍的，Claude Code (CC) 有一个相当出色的 Subagents（子代理）功能，它允许你召唤子代理并行运行。
想象一下：创建 3 个对应不同设计风格的代理。
给 CC 的 Prompt：“启动 3 个并行代理来实现待办事项应用 UI 的变体。”
结果：3 个代理将并行工作：
代理 1： Minimalist（极简风）待办 UI
代理 2： Modern（现代风）待办 UI
代理 3： Liquid Glass（液态玻璃风）UI
太棒了！！！
Pro Tip（技术向）： 学习更多关于 Git Worktrees（工作树）的知识——允许在不同的目录中同时检出多个分支——每个工作树将是一种不同的设计风格（例如：极客风、儿童风、游戏风）。
但是等等，现在利用命令：
提取设计系统命令：
```markdown
Extract Design System
分析提供的 UI 图像并提取：
颜色模式
排版
布局原则
组件风格
保存为 prd 文件夹中的 design-system.json
```
用法：
如果在终端外部调用：`claude ui/extract-design-system [image_path]`（附上一张从 Dribbble/Mobbin 截取的图片）
如果在 Claude Code 内部调用：`/ui:extract-design-system @[image_path]`
迭代设计命令：
```markdown
Iterate Design
启动 3-5 个子代理以不同风格实现相同的 UI：
从 prd 文件夹读取 design-system.json
在 ui-iterations/ui1, ui2, ui3... 中创建变体
每个都应该是带有内联 CSS 的单个 HTML 文件
```
用法：这是为了创建许多设计变体 -> 例如：`claude ui/iterate-design "使用提取的设计风格制作现代手机待办应用"`
MCP - MCP - MCP
噢天哪……我们怎么能错过这个！你有没有注意到所有 AI 生成的界面看起来都……很像？这些界面的一个共同点是：没有图片！
幸运的是，我们有合适的 MCP（模型上下文协议）服务器来解决这个问题：
**Chrome MCP: ** 直接让 AI 代理在互联网上研究设计风格。
**Figma MCP: ** 这不是为了设计，而是为了根据现有的 Figma 设计进行编码。Figma 社区有很多公开分享的精美设计，拿来微调是个不错的主意。
Freepik MCP / ChatGPT-Image MCP: 获取素材。
**下载图片的 Bash 命令: ** 或者你也可以安装 `gallery-dl` 并让 CC 调用这个 bash 命令在需要时下载相关图片。
最后：打包与实际部署
从上面的实验版本中，让 Gemini 创建一个 Markdown 文件详细描述这种设计风格，或者如果使用 Claude Code，直接让它通过 HTML/CSS 进行分析，从排版到颜色、设计标准、设计亮点……然后将这个 Markdown 文件放入源代码的 `./docs` 文件夹中。
例如：`./docs/design-guideline.md`
然后在 `CLAUDE.md` 中添加 Development Rules（开发规则），提醒 CC 在实现与设计和界面相关的部分时阅读这些指南文件。
或者你也可以创建一个专门处理 UI 任务的命令，比如 `/ui`：
因为命令是 User Prompts（用户提示词），它们的“权重”比 `CLAUDE.md`（系统提示词）更高，所以 CC 将无法忽略这些约束：
```markdown
ui.md
description: 根据指南创建一个组件
阅读 `./docs/design-guideline.md` 和 `./docs/design-story.md`，然后执行以下任务：
$ARGUMENTS
```
记住要不断实验并定制以适应你自己的工作方式。如果你在这个过程中发现了任何更好的技巧，请与我分享！
就是这样——这就是我在大多数项目中实施的，创建标准化且美观的界面设计的完整过程。祝你成功！
📌 关键收获
对 Grace 的启示
**建立自己的“审美资产库”： ** 跨境电商最忌讳“廉价感”。不要指望 AI 直接给你高级感，你应该在 Dribbble 收集竞品或大牌的截图，让 Claude 分析其设计语言（如字体间距、色彩方案），然后固化为自己的 `design-guideline.md`。
**用微动画提升转化率： ** 在独立站的 Add to Cart（加入购物车）或 Checkout（结账）环节，利用文中的 Prompt 技巧加入微动画（Micro-animations），这种“爽感”能显著提升用户的交互体验和品牌信任度。
**利用子代理快速 A/B Test： ** 针对同一个落地页，利用 Claude Code 同时生成极简风、多色彩风、科技风三种版本，快速对比哪种更符合你的目标市场（如北美 vs 东南亚）的审美。
AI 本身没有审美，它只是基于算法的统计概率，真正的审美标准永远掌握在人类手中。
想了解更多细节？ 查看原文 →
上一篇
Claude Code 进阶实战：从“氛围编程”到生产级项目的避坑指南 (2026最新)
下一篇
玩转 Claude Code 的 Commands 和 Hooks：让 AI 自动执行你的进阶工作流
- Author:EcomGrace
- URL:http://ecomgrace.com/article/vibe-coding-ui-ai-guide-kyv5ms
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
