软件应用的世界离不开漂亮的用户界面（UI）与直观的用户体验（UX）。UI 设计关乎产品“长什么样”，以及用户在视觉层面如何与之交互。它关注布局、颜色、按钮、字体，以及所有塑造软件产品视觉体验的要素。UX 设计则关注产品带给用户“用起来是什么感觉”，以及它是否直观、高效。UX 关乎可用性、导航流程，并确保整体体验顺畅、友好。两者相辅相成，共同打造优秀的软件产品。
在过去几十年里，产出这些界面与体验一直是 UI/UX 设计师的工作。他们通常会与软件工程师配合，由工程师实现功能与后端工作流，把这些设计落地成面向全球用户的一体化体验。然而，把 UI/UX 设计转化为可运行的前端代码，是一个劳动密集型过程。传统上，设计师与工程师需要紧密协作，确保设计的视觉美感被准确地翻译为响应式、可交互的用户界面。这个过程往往需要多轮迭代、对细节的精益求精，以及对设计原则与编码规范的深刻理解。
自 2022 和 2023 年文本生成图像（text-to-image）的生成式 AI 模型出现以来，UI/UX 设计经历了巨大的变革。写作本文的 2025 年，最新的 AI 工具已经能够把自然语言描述的想法生成 UI 设计，并且能从 UI 设计生成可用的前端代码。这些工具正在通过自动化流程中的重要部分，彻底改造“设计到代码”（design-to-code）的工作流。这带来了巨大的潜力：显著减少把设计变成产品所需的时间与成本，让设计专业人员的效率大幅提升。AI 工具可以显著缩短从概念到实现之间的距离。
例如，为一个新应用做第一轮线框图（wireframing）与草图设计，可能需要一周以上——项目复杂时甚至超过一个月。而新的 AI 设计生成器可以把线框设计时间压缩到一天以内，并让每一次反馈循环都更快。这些工具把设计转化为可运行前端代码的能力，意味着一个人或一个团队可以从“用自然语言描述想法”，到“生成可运行的前端代码”，在几分钟内完成（算上迭代也不过几小时），而不是几周或几个月。
本章将考察 UI 设计与 UX 设计领域的一些领先工具，力求覆盖两者之间广泛的活动范围。
面向设计与前端开发的 AI 工具类型
在本章中，我将聚焦两类 AI 工具：一类把想法变成设计；另一类把设计变成代码。
把想法变成设计的工具
这听起来像是 UI/UX 设计师的工作，但换个角度想：如果做设计变得更容易、更快、并且对没有专业设计技能的人也更可达，那么普通的前端开发者很可能就能同时完成设计与编码——而不是像现在这样，工作范围往往只包含写代码。这对软件工程师（尤其是前端工程师）是一种巨大的赋能：他们将能够独立完成基础设计。
把设计变成代码的工具
这一类工具与第 1 章介绍的“从自然语言提示生成代码”的工具形成互补。本章的工具是从图像 mockup 或 Figma 设计文件生成代码。（如果你不熟悉 Figma：对 UI/UX 设计师而言，Figma 之于设计，就像 Visual Studio Code 之于软件开发者。）
当前大多数 UI/UX 设计生成器工具都是完全基于浏览器与云端的。它们无需复杂的软件安装，只要一个浏览器加一个 URL 就能使用。有些工具（例如 QoQo.ai）则以插件形式集成到像 Figma 这样的设计平台里。
本章涵盖的大多数产品都发布不久，仍处在产品发展的早期阶段。在未来几个月与几年里，它们将持续迭代，推出新功能并提升能力。就成熟度而言，写作本文时，这类设计工具大概比 GitHub Copilot 这样的软件开发工具落后一到两年。
我预计，在 UI/UX 领域我们也会看到更多基于浏览器的工具、更多面向主流设计平台的扩展或插件，以及更多与设计师与前端开发团队协作工具的深度集成。（对许多团队而言，类似 Git 的“协作枢纽”可能仍然是 Figma；但对另一些团队，可能会是面向 Jira 或 Notion 等协作工具的插件——我们拭目以待。）
使用 UI/UX AI 工具的利与弊
和任何工具一样，本章讨论的工具也有优势与劣势。一些优势包括：
效率与速度
AI 工具能够处理设计文件与组件，并在远短于人类开发者所需时间的情况下生成对应代码。快速交付可以加速项目周期并降低成本。
一致性
通过自动化转换过程，AI 工具有助于在整个项目中保持设计元素实现的一致性。
可达性
缺乏技术或设计专业背景的人也能上手这些工具并创建可用的界面，这种变化有助于让 UI/UX 设计更“民主化”。
原型与迭代
AI 生成的代码让原型验证更快。设计师与工程师可以更快速地测试与迭代想法，把新产品推向市场的速度比以往更快。
本章工具的缺点包括：
代码质量
AI 工具生成的代码并不总能达到人类代码的标准。它可能效率更低、也更难读难维护。因此——正如我在全书中反复强调的——开发者必须在将其发布到生产环境之前，对生成代码进行彻底审阅与修改。1
设备兼容性
AI 生成的代码可能未必对所有浏览器、操作系统与屏幕尺寸做了充分优化。这可能导致响应式与跨设备兼容问题，需要额外的排查与修复工作。
定制化与灵活性
AI 工具往往能很好处理标准设计模式，但面对更复杂、定制化的设计元素时可能力不从心。这会极大限制创意与按需定制的能力。因此，人类的创造力依然不可替代。
缺乏原创性与独特性
AI 工具生成的设计常常与既有设计相似。它们是在当前设计与流行趋势上训练出来的，这可能导致缺少原创性与辨识度：一些设计看起来通用、重复，难以脱颖而出。尽管 AI 工具可以提供一个有用的起点或灵感，但它们距离优秀人类设计师的创造力仍相去甚远。
要成功把这些工具融入设计工作流，关键在于把握好平衡：一方面利用 AI 做自动化提效，另一方面依靠人类人才保障质量与创意。
UI/UX AI 工具的使用场景
UI/UX 设计助手类工具会帮助设计流程中的不同环节。它们大致可以分为以下几类：
- 设计构思辅助工具（Design ideation assistants）
- 用户研究与分析工具（User research and analysis tools）
- 配色方案与风格生成器（Color palette and style generators）
- 布局与组件生成器（Layout and component generators）
- 无障碍检查工具（Accessibility checkers）
- 个性化引擎（Personalization engines）
- 语音用户界面（VUI）设计工具（Voice-user interface designers）
- 手势与动效设计工具（Gesture and motion design tools）
- 线框与原型工具（Wireframing and prototyping tools）
- 设计转代码转换器（Design-to-code converters）
本章聚焦最后两项，因为它们处在 UI 与前端代码的交汇处，因此对软件工程师最有意义。而其他那些针对 UX 与产品研究工作流中特定环节的工具，通常更偏向设计师，以及与软件开发者协作相对松散的其他角色，比如产品经理、产品分析师与 UX 研究员。
因此，我用以下使用场景来评估本章中的工具：
快速原型（Rapid prototyping）
AI 工具可以基于最初的输入与设计描述，快速生成线框图与原型。这是设计流程里占比很大的一块，设计师常常要在反复沟通与迭代中花费数小时。有了这些工具，原型制作会快得多，设计师也能迅速迭代出多个设计选项。这种灵活性还会让 A/B 测试等更复杂的流程更易落地。
基于模板的设计（Designing from templates）
AI 工具可以在组件、配色与风格等设计原则上进行训练，通过生成符合既有设计系统、品牌与规范的设计，来确保产品不同部分的一致性。这会带来一种连贯的用户体验：整个应用中设计元素与风格保持统一。虽然这种“工厂式”方法不太激发创意，但在你只需要做出“看起来与现有页面一致、但承载新功能”的新页面时，它价值巨大。（老实说，不管好坏，大多数软件开发其实就是这种“工厂式”工作——低代码与无代码工具越来越流行，也正说明了这一点。）
无障碍评估（Accessibility assessments）
AI 工具可以自动检查并改进 UI 设计对残障人士的可访问性，确保符合诸如《Web 内容无障碍指南》（WCAG）等标准与包容性设计实践——就像第 3 章讨论的软件代码工具那样。这类功能能识别无障碍问题并给出修复建议，从而减少大量手工工作。
用户研究与个性化（User research and personalization）
AI UI/UX 设计工具可以分析用户行为、需求与偏好等数据，从而让输出更贴合特定用户群体或个体，提升参与度、留存与满意度。通过数据驱动洞察，这些工具能更好地实现以用户为中心的设计，并能大幅扩展既有使用场景。比如，如果目标是为特定人群制作新的落地页，这些工具可以根据参数生成完整的产品变体；没有这些工具时，每一个产品变体往往都需要一次“重型”的软件开发周期。
内容生成（Content generation）
AI 工具还能辅助生成 UI 元素所需的内容，例如占位文本、图片与图标。它能快速用更贴近真实的内容填充设计，让原型在测试时更“像真的”，并确保内容与设计的风格与语气一致。这会解放设计师，让他们把精力投入到更具创造性的部分。
评估流程（Evaluation Process）
我在本章的流程如下：我向每一个入选的 UI 设计工具提交一个简短的设计提示词，在每个工具里运行同一个挑战，然后比较它们的输出。我也评估了它们把生成的设计转换为前端代码的能力——包括 HTML/CSS、Next.js 与 React。我总共评测了 20 多款市面工具。正如预期，它们呈现明显的长尾分布：少数工具确实如宣传那样可用，而另一些要么输出很差，要么存在各种问题，导致我无法完成测试。AI 领域的许多工具来自初创公司，其产品仍处在非常早期的开发阶段。
在试用这些工具之后，我在每个类别里选出了表现最好的四款——它们在上述使用场景中确实提供了实际价值。然后我按 1 到 10 打分：1 分最差（报错、完全跑不起来），10 分无可挑剔，5 分则代表设计没有完全符合要求。我会对每个类别里排名第一的产品做更深入的分析，详细说明其优缺点；对第二名（runner-up）则提供更简洁的信息。
同样需要说明的是：本章所有测试都在 2025 年春季进行。考虑到这些工具及其底层模型的迭代速度很快，你在之后的某个时间用同样的提示词，很可能会得到不同的结果。
UI 工具
我让本章涵盖的每个 AI 工具都为一款移动端外卖应用生成屏幕设计。以下是我提供的详细提示词：
创建一个用户友好的外卖应用，允许顾客浏览本地餐厅、查看菜单、下单，并实时追踪配送状态。应用应包含以下页面：登录、餐厅与菜单浏览、下单、配送追踪。
**风格：**应用应现代且极简，强调易用性与视觉吸引力。设计应采用干净的布局，并加入令人垂涎的美食图片。
看看这些工具的表现如何。
Uizard
我认为 Uizard 的一句营销标语为这个赛道里的大多数玩家定下了标准：“Forget no-code, here comes no-design.”（别再说 no-code 了，no-design 来了。）把“代码自动化”和“设计自动化”做类比非常合理。正如 no-code 承诺以更少的时间和预算实现同样的功能，no-design 也可能对设计流程产生同样级别的影响。
Uizard 的产品起源于 2017 年在丹麦哥本哈根的一个机器学习研究项目 pix2code。根据 Uizard 的营销资料，“它让开发者能够借助 AI 快速、轻松地把产品想法可视化。这有助于加速设计师与软件开发者的工作流。其使命是让设计民主化，并赋能全球的非设计人员去构建数字化、可交互的产品。”
在提示词输入界面（图 2-1）中，我让 Uizard 使用上一节的提示词生成外卖应用的页面。
图 2-1. Uizard Autodesigner 的提示词输入界面
图 2-2 展示了它生成的设计。
图 2-2. Uizard 生成的页面（共 11 个）
你可以在 Uizard 网站上以预览的方式查看它生成的全部页面以及交互效果。
Uizard 的一个独特功能是：它会为这些设计创建一个可交互的演示（interactive demo），包含真实的交互与页面之间的转场。这使它成为把想法快速变成“可演示概念”的首选网站——甚至在你写任何代码之前就能做到。另一方面，Uizard 在“生成代码”的能力上不如本领域的其他工具，例如 Bolt.new 或 Lovable：后两者会在生成设计的同时生成可运行代码，并且很容易把代码提交到 GitHub，甚至可以立刻部署一个可用的应用。
我给 Uizard 打 8/10。它的设计能力非常扎实，但在生成可运行代码方面有所不足。
Bolt.new
Bolt.new 是 StackBlitz 于 2024 年 10 月推出的一款基于浏览器、由 AI 驱动的开发工具。它让用户（包括没有技术技能的人）能够通过自然语言提示词创建前端 Web 与移动应用。通过集成 WebContainers、Supabase 与 Netlify 等技术，Bolt.new 支持在浏览器内完成代码生成、身份认证与部署。这种方式简化了开发流程，让更多人可以参与其中。
该平台增长迅猛：上线两个月内就达到了 2,000 万美元的年经常性收入（ARR），并在 2025 年 2 月达到 4,000 万美元 ARR。2 它拥有超过 300 万注册用户和 100 万月活用户，成为史上增长最快的 AI 工具之一。其成功归因于友好的界面、高效的开发工作流，以及能把想法快速变成可用应用的能力。
我把同样的提示词给了 Bolt.new，它生成了图 2-3 所示的应用设计。
它生成的页面非常扎实：页面结构、导航与层级都符合我对这类应用的预期。它还为每个页面生成了逼真的占位文本与图片，让整体观感不错。页脚处有一个明显的小故障：图标图片缺失，以及导航有“串位/爬行”的问题，但除此之外，这套设计质量很高。
Bolt.new 最强的一点在于：它不仅能从自然语言提示词生成设计，还能进一步生成底层代码。本例中，它生成了 TypeScript 的前端代码。
图 2-3. Bolt.new 生成的页面
如图 2-4 所示，Bolt.new 的工作区包含：
- 左侧的提示词区域：我可以请求新增页面、修改、修复等
- 代码编辑器：我能看到实际生成的代码，并进行实时修改
- 控制台：用于查看报错、日志以及代码执行产生的其他信息
- 预览区域：展示所有页面（例如图 2-3 的截图）
- 导出与部署应用的选项
图 2-4. Bolt.new 的工作区
Bolt.new 是一个“一站式”平台，目标不只是替代设计师，甚至还想替代 IDE 与云服务商——因为当我发布应用时，它实际上托管在 Bolt.new 的服务器上。考虑到它的功能覆盖面，我给 Bolt.new 打 10/10。
Lovable
Lovable 是瑞典同名初创公司于 2024 年 11 月推出的一款基于浏览器的 AI 开发平台。它让技术人员和非技术人员都能通过自然语言提示词构建全栈 Web 应用。通过结合 Supabase（提供后端服务）与 GitHub（版本管理），Lovable 可以自动化从数据库搭建到部署的全过程。其结果是大幅简化的开发体验：任何有想法的人都能直接在浏览器里把功能性软件上线。
在短短三个月内，Lovable 达到 1,700 万美元 ARR，并吸引了超过 30,000 名付费订阅用户。每天有超过 50,000 个新项目在平台上启动，使其成为迄今为止增长最快的 AI 开发工具之一。3 它的增长动能很大一部分来自直观的界面，以及对传统软件开发复杂性的强抽象能力——让开发（尤其是前端界面）变得前所未有地易达。
我同样用外卖应用的提示词测试 Lovable，它生成了图 2-5 所示的设计。
图 2-5. Lovable 生成的页面
与 Bolt.new 非常相似，Lovable 在屏幕左侧提供聊天机器人式 UI，用户可以用自然语言请求新增页面、改动、修复等。它在顶部提供一个开关，可在预览模式与 “Dev mode” 之间切换：预览模式展示生成的设计（如图 2-5），而 Dev mode 展示生成的代码。顶部还有按钮，允许用户轻松把代码同步到 GitHub 或直接部署应用。
我同样给 Lovable 打 10/10。我认为它与 Bolt.new 一起处在这个赛道的领先位置。两者都能满足“从自然语言提示词直接得到专业设计与可运行代码”的核心使用场景。
UX 工具
在这一小节里，我会介绍 UI/UX 设计工作流中偏 UX 的工具：用户研究、产品流程，以及可用性（usability）。
以下是我用来评测 UX 工具的提示词：
为一位 18–25 岁、正在使用我们应用从餐厅线上点餐的大学生创建一个用户画像（user persona）。
**描述：**18–25 岁，女性或男性，本科在读，来自美国加州洛杉矶，单身，无子女。希望有一个用户友好的平台，能够非常快速地下单、追踪订单，并完成支付。
QoQo.ai
QoQo.ai（读作 “cocoa”）是一款面向 UX 设计的 AI Figma 插件，主要帮助设计早期阶段的工作。设计师可以用它生成 UX 用户画像、用户旅程地图（journey maps）、站点地图（site maps）以及 UX 文案。通常会做这些工作的 UI/UX 设计师、产品经理和产品研究人员，使用它可以节省时间；它也能让这些任务对软件工程师更“可达”，帮助他们更好地与用户需求建立连接。
我把上述提示词给到 QoQo，几秒钟内 AI 就生成了一个非常详细的用户画像（如图 2-6 所示）。
图 2-6. QoQo 生成的用户画像
我给 QoQo 打 8/10。它确实把事情做成了，而且几乎没有学习成本。它确实有点像一个 GPT 的封装：生成文本并填进预定义的框架里——但如果你正处在开始设计一款软件产品 UI/UX 的阶段，这种能力就能带来巨大的价值。
Research Studio
Research Studio 是一款 AI 驱动的应用，用来自动化客户与用户研究的分析流程。它对需要把用户访谈转化为可执行洞察、分析满意度、并快速产出带品牌风格报告的研究人员与设计师尤其有用。传统上，UX 研究员要花好几个小时在海量数据里“捞”洞察；Research Studio 把这一过程简化了，让它更快、更高效。
Research Studio 平台允许你在三种开源 LLM 之间选择：Claude AI、Mistral，或 OpenAI 的 GPT-4o。你上传用户访谈内容，它会把洞察提取成报告。它也能利用从访谈与数据中获取的信息来撰写报告。平台内置了多种报告类型可供输出，包括用户流程（user flows）、功能地图（feature maps）与问题分析（question analysis）。
为了评测这款工具，我先用 Claude AI（单独使用）生成了一些原始输入。我让它用下面的提示词，生成 50 条我们这个“虚拟外卖应用”的用户问卷反馈：
生成 50 条外卖应用用户的问卷反馈，反映他们使用一段时间后的想法。反馈应同时包含正面与负面观点，包括他们遇到的问题，以及能提升应用效率与用户体验的功能建议。
这些反馈既包含正向也包含负向意见，并给出了改进建议。下面是 Claude 输出中的几个例子：
- “这个 app 又快又好用。餐厅选择很丰富！”
- “配送时间经常比预计的更长。请提升预估准确度。”
- “希望能支持提前预约下单。”
- “客服非常棒，我有问题时总能帮上忙。”
我把这些反馈输入 Research Studio，让它提取洞察（图 2-7），并要求它基于内置的报告类型生成一份全面报告（图 2-8）。
图 2-7. Research Studio 把原始用户评论转化为“洞察”地图
图 2-8. Research Studio 基于问卷反馈生成的洞察地图
我给 Research Studio 打 7/10。它确实也像一个简单的 LLM 封装，但它把工作流串得很好；对于想把海量数据“压缩”为结构化产品洞察、用来驱动下一轮软件迭代的人来说，它能提供真实价值。
工具对比
在我评测的 20+ 款工具中，Galileo AI 在“文本生成 UI”（text-to-UI）这一类里表现最好——包括本章重点介绍的四款工具。它还能把一张图片重新制作成漂亮的设计，这一点也让它格外突出。正如我前面提到的，这个领域仍处在非常早期的阶段，所以我只能想象这些工具在未来几年会进化到什么程度。
我评测的 UX 工具在底层技术复杂度上更低，但这不是批评：就它们的使用场景而言，它们已经足够好用了。
表 2-1. AI UI/UX 工具概览
| 工具 | 用途 | 测试表现 |
|---|---|---|
| Uizard | UI 生成 | 7/10 |
| Bolt.new | UI 与代码生成 | 10/10 |
| Lovable | UI 与代码生成 | 10/10 |
| QoQo.ai | UX 自动化 | 8/10 |
| Research Studio | UX 自动化 | 7/10 |
结论
我开始写这一章时带着错误的预期。考虑到这些工具都很新，我并不认为它们在当前阶段会很有用。我错了。现在我对这个领域以及未来几个月、几年里软件开发流程将出现的演进感到非常兴奋。
从设计生成前端代码——以及越来越主流的用例：从一个提示词同时生成设计与可运行代码（如 Bolt.new 与 Lovable 所展示）——无疑是对软件工程师最有吸引力的角度，尤其是对前端工程师而言。这会是一个改变游戏规则的能力，能为全球的软件工程师节省数以百万计的工时。
其他一些用例看起来对软件工程师的直接价值较小，因为它们更像是设计师的工作。但换个角度想：工具越来越强大，如果完成同样工作的时间变短了，软件工程师就能承担更大一部分设计工作流。事实上，我们的雇主与团队负责人很可能也会越来越多地要求我们这么做。
这些工具让软件工程师具备产出可用设计的能力。考虑到它们惊人的迭代速度，我可以预见：很多团队在产出大量页面这件事上，将不再需要专门的设计师。当然，涉及更专业的交互、品牌化 UI 元素、或复杂的用户体验细节，仍然最适合交给专业的人类 UI/UX 设计师。但我可以想象，大多数标准应用流程——例如注册流程、列表页、个人资料页——都会被这些 AI 工具很好地覆盖。
软件工程师从未像今天这样被赋能：我们可以收集用户反馈，把反馈结构化为可执行洞察，生成改进后的设计，把它们转换为代码，并把新版本推到生产环境。借助这些工具，产品迭代周期将显著缩短。能熟练掌握它们的从业者，其市场需求会远高于只会写代码的人。写下这些文字时（2025 年初），我也注意到近几个月 “Product Engineer” 这个岗位名称在快速增长——它正好契合我描述的机会：既能理解客户需求，把需求转成产品功能描述，又能把满足这些描述的代码交付上线的软件工程师。
1 这又一次体现了“节省写代码时间”与“投入更多调试、修复、改进时间”之间的权衡。从概念上看，这与 2000 年代初 Dreamweaver 生成 HTML 代码的权衡并没有本质区别；也类似于近年低代码工具生成模板化代码的情况——这类代码往往难以按特定需求做深度定制与适配。
2 Akshay（Startup Spells）。2025 年 3 月 22 日。《Bolt.new：史上第二快增长的产品（仅次于 ChatGPT）》。Startup Spells。
3 Stephane（Lovable）。2025 年 2 月 25 日。《宣布新增 1500 万美元融资，用于打造软件的最后一块拼图》。Lovable（博客）。
