1. 从一句话到可交互界面，这条路到底走不走得通

前阵子跟几个做产品的老伙计吃饭，席间有人抛出一个问题：现在跟 AI 说一句“帮我画一个外卖点单的 App 首页”，它真能吐出一个能点、能跳转、能填表单的界面吗？桌上瞬间分成两派，一派觉得这就是个高级线框生成器，另一派觉得 D2C 那套东西早就跑通了，差的只是最后一公里。我回家之后花了大概两周时间，把市面上主流的几条技术路线都摸了一遍，从纯文本生成原型到设计稿转代码，踩了不少坑，也摸出了一些门道。这篇文章就把我这两周折腾出来的东西完整拆开讲，从底层原理到实操步骤，再到那些文档里不会写的避坑经验，尽量一次说透。

先说结论，省得你看到一半发现方向不对。Text-to-Prototype（文本生成原型）和D2C（Design to Code，设计转代码）是两条不同的路，前者是“无中生有”，后者是“有中做优”。一句话生成可交互界面，在特定约束下是成立的，但如果你期待的是直接生成能上线的生产级代码，那目前还差得远。它更适合的场景是快速验证、早期沟通、以及把设计师从重复劳动里解放出来。适合谁看？产品经理、独立开发者、前端工程师、UI 设计师，以及所有想用 AI 提效但又不想被忽悠的人。

我这两周的核心工作流是这样的：先用文本生成工具快速出原型，确认交互逻辑没问题之后，再把设计稿导入 D2C 工具生成代码骨架，最后手工补齐业务逻辑和状态管理。整个链路跑下来，效率提升大概在 40% 到 60% 之间，具体取决于页面复杂度。下面我把每个环节拆开讲，包括我为什么这么选、参数怎么调、以及哪些地方 AI 会给你挖坑。

2. 文本生成原型的底层逻辑与方案选型

2.1 一句话生成界面的三种技术路线

目前市面上能实现“一句话生成界面”的方案，底层基本逃不出这三种路线，我分别试过，各有各的脾气。

第一种是基于模板匹配的生成。你输入一句话，系统先做意图识别和实体抽取，然后从预置的组件库里拼装页面。比如你说“外卖首页”，它识别出“外卖”这个领域，然后调出对应的模板，把轮播图、分类入口、商家列表这些组件按固定布局摆上去。这种方案的好处是稳定、可控、生成速度快，坏处是灵活性差，你说“外卖首页但要突出折扣标签”，它可能就懵了。我实测下来，这类工具适合做标准化程度高的页面，比如电商详情页、后台管理表单。

第二种是基于大语言模型直接生成代码。你给模型一段描述，它直接输出 HTML、CSS 和 JavaScript，或者输出 React、Vue 的组件代码。这种方案灵活度最高，理论上你说什么它都能画，但问题也很明显：生成结果不稳定，同样的描述跑两次可能得到完全不同的布局，而且经常出现样式错位、组件重叠、交互逻辑缺失的情况。我试过让模型生成一个带底部导航栏的页面，结果它把导航栏写成了绝对定位，内容区直接被盖住，这种坑你得自己填。

第三种是基于多模态模型的截图转代码。你先给模型一张设计稿截图或者手绘草图，它识别出里面的元素和布局，然后生成对应的代码。这条路其实更接近 D2C 的范畴，但因为它也能接受文本描述作为补充，所以有时候被归到 Text-to-Prototype 里。我实测下来，这种方案的准确率比纯文本生成高不少，因为模型有视觉参考，不会凭空想象布局。

提示：如果你追求的是“能跑起来”而不是“能上线”，优先选第一种或第三种。纯文本生成代码那条路，目前更适合做灵感发散，不适合做交付。

2.2 为什么我最终选了“文本生成 + 截图转代码”的组合拳

我一开始也想过一条路走到黑，要么全用文本生成，要么全用截图转代码。但实际跑下来发现，这两者其实是互补的。文本生成适合做从零到一的探索，你脑子里只有一个模糊的想法，用文字描述出来让 AI 给你几个方案，快速试错。截图转代码适合做从一到十的细化，你已经有了明确的设计稿，需要把它变成可维护的代码。

我的具体做法是：先用文本生成工具跑出三到五个不同风格的首页方案，截长图保存。然后挑一个最接近预期的，在 Figma 里做一轮手工调整，把布局、间距、配色定下来。最后把调整后的设计稿导入 D2C 工具，生成代码骨架。这样做的好处是，文本生成阶段帮你打开了思路，截图转代码阶段保证了代码质量，中间的手工调整环节则把 AI 的“幻觉”过滤掉了。

这里有个关键决策点：什么时候该用文本生成，什么时候该切换到截图转代码。我的经验是，当你对页面结构还没有明确想法时，用文本生成；当你已经能画出线框图时，直接上截图转代码。判断标准很简单，如果你能用语言把布局描述清楚，比如“顶部是搜索栏，下面是横向滚动的分类图标，再下面是纵向的商家列表”，那文本生成就够了。如果你发现描述起来很费劲，比如“这个卡片要稍微往上叠一点，阴影要柔和但有层次感”，那就别为难文字了，直接画出来让 AI 识别。

2.3 工具选型的几个硬指标

我前后试了七八个工具，筛选标准主要看这几个维度。生成速度方面，文本生成类工具普遍在 10 到 30 秒之间，截图转代码类工具因为要做视觉识别，通常要 30 秒到 1 分钟。代码质量方面，我主要看生成的代码有没有语义化的标签、样式是不是用 Flex 或 Grid 布局、有没有把样式和结构分离。有些工具生成的代码全是绝对定位，这种代码后期根本没法维护，直接 pass。

可编辑性是我最看重的一点。好的工具应该允许你在生成结果上继续调整，而不是每次修改都要重新生成一遍。我试过某个工具，改一个按钮颜色都要重新输入一遍描述，这种体验简直灾难。导出格式也很关键，至少要支持导出 HTML/CSS 和主流框架的组件代码，比如 React、Vue。如果你团队用的是 Flutter 或 SwiftUI，那还得看工具支不支持。

下面这张表是我对几类工具的综合对比，你可以根据自己的场景对号入座。

注意：不管选哪类工具，生成结果都必须经过人工审查。我见过太多人直接把 AI 生成的代码提交上去，结果线上出现样式错乱、点击事件失效的问题。AI 是助手，不是背锅侠。

3. 核心细节拆解：从描述到界面的关键环节

3.1 描述词怎么写，AI 才能听懂

很多人觉得“一句话生成界面”就是随便说一句话，然后等着奇迹发生。我一开始也这么想，结果生成出来的东西跟我想的完全不是一回事。后来我总结了一套描述词的写法，核心原则是：结构清晰、层次分明、约束明确。

不要写“帮我画一个好看的电商首页”，这种描述太模糊，AI 只能靠猜。你应该写成：“生成一个移动端电商首页，宽度 375px，顶部是搜索栏，高度 44px，背景色浅灰。搜索栏下方是横向滚动的分类导航，每个分类图标 48x48px，间距 16px。再下方是纵向的商品列表，每个商品卡片包含图片、标题、价格，卡片间距 12px。” 你看，这样描述之后，AI 生成的结果就靠谱多了。

我习惯把描述分成三个层次。第一层是布局结构，说清楚页面从上到下有哪些区块，每个区块的高度或者比例是多少。第二层是组件细节，说清楚每个区块里有哪些元素，元素的尺寸、间距、对齐方式。第三层是交互行为，说清楚点击、滑动、输入这些操作会触发什么效果。这三层写清楚，AI 基本能还原出七八成。

还有一个技巧是用类比。如果你想要一个“类似某主流社交软件那种卡片式布局”，可以直接这么说，AI 对常见产品的布局模式是有认知的。但注意不要提具体品牌名，说“主流社交软件”就够了。我试过用这种方式描述，生成结果的还原度比纯参数描述还要高。

3.2 布局还原的难点：Flex 还是 Grid

AI 生成界面时，布局方式的选择直接影响后期可维护性。我观察下来，大部分工具默认用 Flexbox，少数会用 CSS Grid。这两种方式各有适用场景，你得心里有数。

Flexbox 适合一维布局，比如横向排列的导航栏、纵向排列的列表。它的优势是弹性好，元素可以根据容器大小自动伸缩。但如果你用它来做二维布局，比如同时控制行和列，就会写出一堆嵌套的 flex 容器，代码又臭又长。CSS Grid 适合二维布局，比如仪表盘、图片墙这种需要同时控制行和列的场景。它的代码更简洁，但兼容性在某些老设备上稍微差一点。

我实测下来，AI 生成移动端页面时，用 Flexbox 的情况占八成以上，这其实是对的，因为移动端大部分布局都是一维的。但如果你发现 AI 用了一堆绝对定位来做布局，那就要警惕了。绝对定位的代码在响应式场景下基本没法用，屏幕宽度一变，元素就全乱了。遇到这种情况，我一般会手动把绝对定位改成 Flex 布局，虽然费点时间，但后期省心。

提示：生成代码后，先搜一下position: absolute出现的次数。如果超过三处，建议重新生成或者手动重构。绝对定位只适合做悬浮按钮、角标这种脱离文档流的元素。

3.3 交互逻辑的补全：AI 能做什么，不能做什么

文本生成原型最让人兴奋的一点是“可交互”，但这里有个巨大的坑：AI 生成的交互大部分是视觉层面的反馈，比如点击按钮变色、弹窗出现，但业务逻辑层面的交互，比如表单验证、数据请求、状态管理，它基本不管。

我举个例子。我让 AI 生成一个登录页面，它确实生成了输入框、按钮，点击按钮也有按压效果。但当我输入错误的邮箱格式时，它没有任何提示。当我点击登录按钮时，它只是把按钮文字变成了“登录中”，然后就没有然后了。真正的登录逻辑，包括调用接口、处理 token、跳转页面，这些都得我自己写。

所以我的做法是：把 AI 生成的交互分成两类来处理。一类是纯 UI 交互，比如按钮的 hover 效果、弹窗的显示隐藏、轮播图的自动播放，这些 AI 生成的基本能用，我稍微调一下就行。另一类是业务交互，比如表单提交、数据加载、页面跳转，这些我只让 AI 生成占位逻辑，比如一个空的函数体，然后自己往里填真实逻辑。这样既利用了 AI 的效率，又保证了功能的完整性。

还有一个细节是状态管理。AI 生成的代码通常用组件内部的 state 来管理状态，这在简单页面里没问题，但页面一复杂，状态多了之后就会乱。我的经验是，如果页面状态超过五个，就手动引入状态管理库，把 AI 生成的状态逻辑迁移过去。这一步虽然麻烦，但后期调试的时候你会感谢自己。

3.4 设计稿转代码的还原度控制

从设计稿转代码，还原度是核心指标。我实测下来，影响还原度的因素主要有三个：设计稿的规范程度、工具的识别能力、人工调整的精细度。

设计稿越规范，还原度越高。什么叫规范？图层命名清晰，不要有一堆“矩形 1”“编组 23”这种默认命名。组件要复用，同一个按钮在不同页面应该是同一个组件实例，而不是复制粘贴出来的。间距要用统一的栅格系统，比如 8px 的倍数。我试过用一份命名混乱的设计稿去转代码，结果生成的代码里全是无意义的类名，后期根本没法维护。

工具的识别能力方面，我主要看它能不能正确识别自动布局、组件变体、样式变量这些高级特性。有些工具只能识别静态图层，遇到自动布局就歇菜了，生成的代码全是固定宽高，响应式直接废掉。我目前用的工具对自动布局的支持还不错，能生成 Flex 布局的代码，但组件变体识别得还不够准，需要手动调整。

人工调整的精细度，这个就看你的耐心了。AI 生成的代码通常能达到 80% 到 90% 的还原度，剩下的 10% 到 20% 需要你手动调。我一般会重点检查这几个地方：间距是否一致、字体大小和行高是否匹配、颜色值是否准确、圆角和阴影是否还原。这些细节看起来不起眼，但堆在一起就会让页面显得“差点意思”。

4. 完整实操流程：从一句话到可运行的原型

4.1 环境准备与工具链搭建

在开始之前，你需要把工具链准备好。我目前的工作流涉及三个核心工具：一个文本生成原型的工具、一个设计工具、一个 D2C 工具。文本生成工具我选的是支持对话式调整的那种，因为一次生成很难满意，需要反复微调。设计工具用主流的矢量设计软件就行，关键是支持自动布局和组件系统。D2C 工具我选的是对自动布局支持比较好的，生成代码的质量明显高出一截。

除了这三个核心工具，还有几个辅助工具值得提一下。代码格式化工具，AI 生成的代码缩进和换行经常是乱的，用 Prettier 跑一遍会舒服很多。浏览器开发者工具，用来实时调试生成的页面，改样式、看布局、查报错都靠它。版本控制工具，每次生成的结果都提交一下，方便对比不同版本的效果，也方便回滚。

环境搭建这块没什么特别的坑，唯一要注意的是工具之间的兼容性。比如你从文本生成工具导出的设计稿，能不能顺利导入 D2C 工具，这个要提前试一下。我遇到过导出的文件格式不兼容的情况，折腾了半天才发现是版本问题。所以建议你在正式开工之前，先用一个简单的页面跑通整个链路，确认工具之间能顺畅衔接。

4.2 第一步：用文本描述生成初版原型

打开文本生成工具，输入你的描述。我以“外卖点单首页”为例，描述词是这样的：

生成一个移动端外卖点单首页，宽度 375px。 顶部是状态栏占位，高度 44px，背景色 #FFFFFF。 下方是搜索栏，高度 44px，左右内边距 16px，圆角 22px，背景色 #F5F5F5，占位文字“搜索商家或菜品”。 搜索栏下方是横向滚动的分类导航，高度 80px，每个分类包含图标和文字，图标 48x48px，文字 12px，间距 24px。 分类导航下方是纵向的商家列表，每个商家卡片包含店铺图片（宽度 100%，高度 120px，圆角 8px）、店铺名称（16px，加粗）、评分和月售信息（12px，灰色）、配送费和距离（12px，灰色）。 卡片间距 12px，页面左右内边距 16px。

输入之后，等大概 20 秒，工具会生成一个初版页面。我实测下来，第一次生成的结果通常只能打 60 分，布局大方向是对的，但细节上有很多问题，比如分类导航的图标大小不一致、商家卡片的图片比例不对、间距忽大忽小。这时候不要急着重写描述，先用工具自带的对话功能，针对具体问题逐个调整。

比如我会说：“分类导航的图标改成统一 48x48px，间距改成 24px。” 工具会重新生成这一部分。然后再接着说：“商家卡片的图片高度改成 120px，圆角改成 8px。” 就这样一轮一轮调，大概调个五六轮，页面就能达到 80 分左右的水平。这个过程听起来繁琐，但比你自己从头画快多了，而且你是在做“选择题”而不是“填空题”，心理负担小很多。

4.3 第二步：在设计工具里做精细调整

文本生成工具出来的结果，直接拿去转代码还是太粗糙。我一般会把它导出成图片或者设计文件，导入到设计工具里做一轮精细调整。这一步的核心目的是统一设计规范，把 AI 生成的那些不一致的间距、颜色、字体全部对齐到一套标准上。

我通常会先建一套设计变量，比如主色、辅色、文字颜色、背景色、边框色，然后建一套间距变量，比如 4px、8px、12px、16px、24px、32px。然后把 AI 生成的页面里的元素逐个应用这些变量。这个过程有点像“整理房间”，把乱七八糟的东西归位。整理完之后，页面会清爽很多，而且后期改起来也方便，改一个变量，所有引用它的地方都会跟着变。

这一步还有一个重要任务是补全交互状态。AI 生成的页面通常只有默认状态，没有 hover、active、disabled 这些状态。我会在设计工具里把这些状态补上，比如按钮的 hover 状态颜色深一点，输入框的 focus 状态边框亮一点。这些状态在转代码的时候会被识别出来，生成对应的 CSS 伪类，省得你后期手动写。

提示：设计工具里的图层命名一定要规范。我习惯用“区块-组件-状态”的格式，比如“header-search-default”“card-shop-hover”。这样转代码的时候，生成的类名也会比较语义化，后期维护轻松很多。

4.4 第三步：D2C 工具生成代码骨架

设计稿调整好之后，导入 D2C 工具。导入的时候要注意，选择正确的框架和样式方案。我一般选 React + CSS Modules，因为团队用的是这套。如果你用的是 Vue，就选 Vue + Scoped CSS。样式方案我建议选 CSS Modules 或者 Tailwind，不要选内联样式，内联样式后期没法复用，改起来很痛苦。

导入之后，工具会花大概 30 秒到 1 分钟做识别和生成。生成结果通常包含三部分：组件结构、样式代码、静态资源。组件结构方面，工具会把设计稿里的每个区块识别成独立的组件，比如 Header、SearchBar、CategoryNav、ShopList。这个粒度我觉得刚刚好，不会太粗也不会太细。样式代码方面，工具会生成对应的 CSS，包括布局、颜色、字体、间距。静态资源方面，工具会把设计稿里的图片导出成文件，并在代码里引用。

生成之后，我建议先跑一遍看看效果。把代码复制到项目里，启动开发服务器，在浏览器里打开。这时候你通常会看到页面能显示，但有一些细节跟设计稿对不上。比如某个卡片的阴影太深了，某个文字的行高不对，某个图标的尺寸偏了。这些都是正常的，接下来就是人工修正的环节。

4.5 第四步：手工补全业务逻辑与状态管理

代码骨架有了，接下来就是往里填业务逻辑。这一步是 AI 目前最不擅长的，也是你作为开发者最值钱的地方。我一般会按这个顺序来补：

先补数据层。定义好接口的数据结构，写好请求函数。比如商家列表的接口返回什么字段，每个字段是什么类型，这些都要先定下来。然后写一个 mock 数据，让页面能先跑起来，不用等后端接口。

再补状态层。用状态管理库或者组件内部的 state，管理页面的数据。比如商家列表的数据、加载状态、错误状态、分页信息。我习惯用 React Query 或者 SWR 来管理服务端状态，用 Zustand 或者 Context 来管理客户端状态。这样职责清晰，后期调试也方便。

然后补交互层。把点击、滑动、输入这些事件处理函数写好。比如点击商家卡片跳转到详情页，下拉刷新重新请求数据，搜索框输入时触发搜索建议。这些逻辑 AI 生成不了，得你自己写。

最后补边界情况。加载中的骨架屏、请求失败的提示、空数据的占位图、网络异常的兜底。这些细节决定了产品的完成度，也是区分“能用”和“好用”的关键。

4.6 第五步：响应式适配与多端预览

页面在 375px 宽度下跑通了，接下来要适配不同尺寸的屏幕。我一般会重点测这几个宽度：320px（小屏手机）、375px（主流手机）、414px（大屏手机）、768px（平板）。适配的核心原则是用相对单位代替固定单位，比如用百分比或者 vw 代替 px，用 rem 或者 em 代替 px。

AI 生成的代码里，固定像素值通常比较多，需要手动改成相对单位。我一般会把容器的宽度改成 100%，把字体大小改成 rem，把间距改成百分比或者 clamp 函数。这样页面在不同屏幕下都能自适应，不会出现内容溢出或者留白过大的情况。

多端预览方面，我建议至少在真机上跑一遍。模拟器跟真机的渲染效果还是有差异的，尤其是字体渲染和滚动行为。我遇到过在模拟器上好好的，到真机上文字被截断的情况。所以别偷懒，真机测一下，花不了几分钟。

5. 常见问题与排查技巧实录

5.1 生成结果与预期不符怎么办

这是最常见的问题，几乎每次生成都会遇到。我的排查思路是这样的：先看描述词有没有歧义，再看工具的识别能力有没有边界，最后看是不是需要换个方案。

描述词歧义是最常见的原因。比如你说“生成一个卡片列表”，AI 可能理解成横向排列的卡片，也可能理解成纵向排列的。这时候你要把描述改得更具体，比如“生成一个纵向排列的卡片列表，每个卡片占满容器宽度”。我踩过的坑是用了“稍微”“大概”“差不多”这种模糊词汇，AI 对这些词的理解跟人不一样，它可能会给你一个完全偏离的结果。

工具的识别能力边界，这个需要你慢慢摸清楚。每个工具都有自己擅长的领域和不擅长的领域。比如有的工具擅长生成移动端页面，但生成桌面端页面就一塌糊涂。有的工具对中文描述的理解比较好，对英文描述反而差一些。我的建议是，先用几个简单的页面测试一下工具的能力边界，心里有数之后再正式开工。

如果描述词没问题，工具也在能力范围内，但结果还是不对，那就考虑换个方案。比如文本生成搞不定的，试试截图转代码。截图转代码搞不定的，试试手工画。别在一个工具上死磕，时间成本划不来。

5.2 代码跑不起来或样式错乱

AI 生成的代码跑不起来，通常有几个原因。依赖缺失是最常见的，生成的代码引用了某个库，但你没有安装。这时候看控制台的报错信息，缺什么装什么就行。语法错误也比较常见，AI 偶尔会生成一些不合法的 JavaScript 或者 CSS，比如少了一个括号，或者用了一个不存在的属性。这种错误通常编辑器会标红，仔细找一下就能发现。

样式错乱的原因就比较多了。类名冲突是一个，AI 生成的类名可能跟你项目里已有的类名重复了，导致样式被覆盖。解决办法是给生成的类名加一个前缀，比如ai-或者项目缩写。样式优先级问题也是一个，AI 生成的样式可能被全局样式覆盖了，或者被更具体的选择器覆盖了。这时候用浏览器的开发者工具看一下计算后的样式，找到是哪个规则生效了，然后调整优先级。

还有一个坑是盒模型不一致。AI 生成的代码可能用了content-box，而你项目里全局设置了border-box，导致元素的实际尺寸跟预期不符。这种问题比较隐蔽，需要你在开发者工具里仔细看盒模型图。

5.3 交互失效的排查思路

交互失效通常分两种情况：事件没绑定上，或者事件绑定了但逻辑不对。

事件没绑定上，可能是选择器写错了，或者元素还没渲染出来就绑定了事件。我一般会在事件处理函数里加一个console.log，看看点击的时候有没有输出。如果没有输出，那就是事件没绑上。这时候检查一下选择器，或者改用事件委托的方式绑定。

事件绑定了但逻辑不对，这个就要看具体代码了。比如点击按钮应该跳转页面，但实际没跳，可能是跳转的 URL 写错了，或者路由配置有问题。我习惯用断点调试，在关键位置打上断点，一步一步看代码的执行流程，很快就能定位到问题。

还有一个常见问题是状态更新了但页面没重新渲染。这在 React 里通常是直接修改了 state 而没有用 setState，在 Vue 里通常是修改了对象属性但没有触发响应式。解决办法是用正确的 API 更新状态，或者用forceUpdate强制刷新（不推荐，治标不治本）。

5.4 常见问题速查表

下面这张表是我这两周踩坑的总结，你可以收藏起来，遇到问题的时候对照着排查。

注意：这张表里的问题，我几乎每个都遇到过至少一次。最耗时的不是解决问题本身，而是定位问题。所以我的建议是，每做完一个页面，都花几分钟做一次自查，把常见问题过一遍，能省下大量后期调试的时间。

5.5 几个让我印象深刻的坑

第一个坑是字体渲染差异。AI 生成的代码里用了某个字体，但你的设备上没有安装，浏览器就回退到了默认字体，导致文字宽度和行高全变了，布局也跟着乱。解决办法是用 Web Font，或者用系统字体栈。我现在的做法是，在设计阶段就用系统字体栈，避免依赖特定字体。

第二个坑是图片比例问题。AI 生成的代码里，图片容器的高度是固定的，但图片的实际比例可能跟容器不匹配，导致图片被拉伸或者裁剪。解决办法是用object-fit: cover让图片自适应容器，同时给容器设置一个合理的宽高比。

第三个坑是滚动穿透。弹窗打开的时候，背景页面还能滚动，体验很差。解决办法是在弹窗打开时给 body 加一个overflow: hidden，关闭时再恢复。这个坑我在移动端遇到过好几次，尤其是 iOS 上，滚动穿透特别明显。

第四个坑是安全区域适配。在全面屏手机上，底部导航栏可能会被 Home Indicator 挡住。解决办法是用env(safe-area-inset-bottom)给底部留出安全距离。这个细节很容易被忽略，但用户一眼就能看出来。

6. 我对这套工作流的真实体会

这两周折腾下来，我最大的感受是：AI 生成原型这件事，已经从“玩具”变成了“工具”。一年前我试过类似的工具，生成结果基本没法用，现在虽然还有各种问题，但已经能帮我省下大量重复劳动了。尤其是从零到一那个阶段，以前我要花半天时间画线框图，现在跟 AI 聊十分钟就能出三五个方案，效率提升是实打实的。

但我也要泼一盆冷水：别指望 AI 能替你思考。它不知道你的用户是谁，不知道你的业务逻辑是什么，不知道你的技术栈有什么约束。它只能根据你的描述生成一个“看起来像那么回事”的界面。真正的产品决策、交互设计、代码架构，还是得你自己来。AI 是放大器，不是替代品。你越清楚自己要什么，它就越能帮到你。

如果你也想试试这套工作流，我的建议是从一个小页面开始，比如登录页或者个人中心页。跑通整个链路之后，再逐步应用到更复杂的页面上。别一上来就搞首页，首页的复杂度太高，容易受挫。另外，多准备几套描述词模板，针对不同类型的页面用不同的模板，能省下不少调描述词的时间。

最后分享一个小技巧：把 AI 生成的结果当成“草稿”而不是“成品”。你的心态会放松很多，也不会因为生成结果不完美而焦虑。草稿嘛，本来就是用来改的。改着改着，你就发现页面成型了，而且比你自己从头画快得多。这个心态转变，是我这两周最大的收获。