1. 项目缘起：从“能画”到“能用”的鸿沟

最近半年，我几乎把所有主流的AI生成工具都试了个遍，从Midjourney画概念图，到GPT写前端代码，再到各种专门的前端生成AI。一个强烈的感受是：它们确实“会写页面”了。你给个描述，比如“一个电商首页，有轮播图、商品列表和导航栏”，它真能给你吐出一堆看起来像模像样的HTML、CSS和JavaScript。但当我兴冲冲地把这些代码扔给团队的设计师和产品经理看时，得到的反馈往往是：“这……能用吗？”

问题就出在这里。AI生成的，往往是一个孤立的、静态的、风格随机的“页面画片”。它没有设计规范（比如我们团队用的Ant Design），没有组件库的约束，没有响应式断点的统一处理，更没有考虑实际业务中那些琐碎但至关重要的状态——加载中、数据为空、操作成功或失败的提示。它离一个能直接进入开发流程的“高保真原型”，中间还隔着十万八千里。我们需要的不是一张好看的“图”，而是一个结构清晰、符合规范、能真实模拟交互、甚至能导出为设计稿或前端框架代码的“原型”。这个从“会写页面”到“按规范交付原型”的跨越，就是我这个项目要解决的核心问题。

我决定自己动手，基于现有的AI能力，封装一个“原型页面生成Skill”。这个Skill不是一个全新的AI模型，而是一个“工作流引擎”和“规范注入器”。它的目标是： 接收自然语言或草图描述，输出一个完全遵循团队既定设计规范、包含完整交互状态、可直接用于评审和开发的、高保真、可交互的原型页面 。这不仅仅是前端代码生成，更是设计到开发的“桥梁工程”。

2. 核心设计思路：将规范“编译”进提示词

要让AI按规范输出，最直接的想法就是“把规范告诉它”。但简单地罗列规范文档是没用的。AI（特别是大语言模型）需要的是结构化、场景化、可执行的指令。我的设计思路，是将设计规范“编译”成AI能理解的“上下文”和“约束条件”，并将其嵌入到生成工作流的每一个环节。

2.1 规范的结构化拆解

首先，我对团队的设计规范（以Ant Design为例）进行了原子级的拆解，将其转化为几个AI可操作的维度：

1. 设计令牌（Design Tokens） ：这是规范的基石。包括色彩体系（主色、成功色、警告色等）、字体阶梯（H1-H5、正文、辅助文本的尺寸、行高、字重）、间距系统（基础间距单位，如8px）、圆角、阴影深度等。我不再让AI“自由发挥颜色”，而是提供Token映射表，例如： --primary-color: #1890ff 。
2. 组件库图谱 ：列出所有可用的基础组件（Button, Input, Table, Card等）和业务组件。为每个组件定义其“变体”（如按钮有primary、default、dashed、link等类型）和“状态”（default, hover, active, disabled, loading）。
3. 布局模板 ：将常见的页面布局模式化。例如，“管理后台-列表页”通常包含“筛选区+表格+分页”，“详情页”包含“标题区+表单或卡片详情+操作按钮栏”。这为AI提供了页面结构的“骨架”。
4. 交互逻辑描述 ：用自然语言定义常见的交互。例如：“点击查询按钮，表格应显示加载状态，并向后端发起请求”；“表单提交成功后，应显示全局成功提示，并清空表单”。

2.2 分层递进的生成工作流

单一的生成步骤无法兼顾创意和规范。我设计了一个三层工作流：

1. 蓝图规划层 ：AI根据用户描述，结合“布局模板”，生成一个页面的结构化蓝图（JSON格式）。这个蓝图定义了页面有哪些区域（Header, Sidebar, Content等），每个区域包含哪些组件，以及组件之间的粗略数据流关系。这一步不涉及具体样式，只关注信息架构和功能模块。

   注意 ：这一步的提示词重点是“功能分解”和“布局选择”。我会要求AI：“忽略视觉细节，仅作为产品经理，将需求分解为功能模块，并为每个模块推荐最合适的Ant Design组件。”

2. 高保真原型生成层 ：这是核心环节。根据上一步的蓝图，结合“设计令牌”和“组件库图谱”，生成具体的、可交互的UI。这里我采用了“混合生成”策略：

   • 基础框架与样式 ：使用代码生成（如GPT-4, Claude-3）。提示词会携带完整的Design Tokens和组件约束，例如：“请使用以下CSS变量定义样式，并严格使用Ant Design的Button、Input、Table组件实现上述蓝图。按钮主色使用 --primary-color 。”
   • 复杂视觉元素 ：对于难以用代码精确描述的插图、图标或特定风格的图片，调用文生图模型（如DALL-E 3, Stable Diffusion）。但关键是要给图生模型也加上“规范约束”，比如：“生成一个简洁的、扁平的、科技感的仪表盘背景图，主色调为 #1890ff 和 #f0f0f0 。”

3. 交互与状态注入层 ：静态页面没有生命力。这一步，专门处理交互逻辑。利用AI的代码生成能力，为蓝图里定义的交互添加真实的JavaScript逻辑。例如，为表格的“查询”按钮绑定一个模拟数据请求的函数，并实现加载状态（Spin组件）的切换。同时，确保所有组件的不同状态（禁用、只读、校验错误）都能被触发和展示。

2.3 上下文管理与迭代优化

生成很难一次完美。因此，这个Skill必须支持“对话式迭代”。用户可以说：“把主色调改成科技蓝”，“把这个卡片换成列表形式”，“在提交按钮旁边加一个重置按钮”。为了实现这一点，我需要让AI始终“记住”当前页面的完整上下文（包括蓝图、已应用的规范、已生成的代码）。

我的做法是，在每次用户提出修改请求时，将整个页面的当前表示（简化后的蓝图+关键样式代码片段）作为上下文，与新的用户指令一起发送给AI。并明确指示AI：“基于以下现有页面结构进行修改，仅变更与指令相关的部分，保持其他部分不变。” 这避免了AI在迭代时“推倒重来”，实现了真正的渐进式优化。

3. 关键技术实现与工具链选型

思路清晰后，就需要选择合适的技术栈来搭建这个Skill。我的核心原则是： 利用成熟工具，专注流程编排 。

3.1 AI服务层选型

• 大语言模型（LLM） ：我选择了 Claude-3 Opus 和 GPT-4 Turbo 双引擎。Claude在长上下文、复杂指令理解和生成结构化内容（如JSON蓝图）上表现更稳定；GPT-4在代码生成和创意发散上略有优势。通过一个简单的路由逻辑，规划层和逻辑生成层多用Claude，代码生成层视情况选用。

  实操心得 ：不要只依赖一个模型。不同模型在不同任务上有专长。建立一个简单的“模型路由”机制，根据任务类型（分析、规划、创意、代码）分派，能显著提升生成质量。

• 文生图模型（AIGC） ： DALL-E 3 是首选，因为它对自然语言描述的理解能力最强，能较好地遵循“科技感”、“扁平化”这类风格指令。对于需要更精细控制风格的情况，会备用 Stable Diffusion ，通过精心设计的LoRA模型来匹配公司品牌视觉。
• 向量数据库 ：用于管理“设计规范知识库”。我将拆解后的规范文档、组件API说明、优秀页面案例截图（处理后）转换成向量，存入 Pinecone 。当用户描述需求时，先进行向量检索，找到最相关的规范条款和案例，作为“增强上下文”插入给LLM的提示词中，确保生成的页面不偏离规范。

3.2 提示词工程：规范注入的核心

这是项目的灵魂。我的提示词是一个多层模板：

# 角色定义
你是一位资深前端工程师，精通React和Ant Design，并且严格遵守公司的设计系统规范。

# 设计系统上下文（从向量库动态注入）
## 色彩系统
主色：{primaryColor}
成功色：{successColor}
...
## 组件使用规范
1. 按钮：主要操作用Primary Button，次要操作用Default Button。
2. 表单：必须包含校验，错误信息在字段下方显示。
...
## 当前任务上下文
用户原始需求：{userInput}
已生成的页面蓝图：{currentBlueprint} (如果是迭代)

# 任务指令
请根据以上设计规范和当前上下文，执行以下任务：
1. [具体任务，如：生成该蓝图中‘筛选区域’的React+Antd代码]
2. 代码中必须使用提供的CSS变量。
3. 为所有交互元素添加必要的状态逻辑（如加载、禁用）。
4. 输出格式：仅返回完整的代码块。

# 输出示例（可选，对于复杂任务提供）

踩坑记录 ：初期我把所有规范都塞进提示词，导致上下文过长、成本剧增且效果下降。后来改为“动态上下文注入”，即根据当前生成任务（如“生成表格”），只从向量库检索与“表格”、“分页”、“数据展示”相关的规范片段，极大提升了效率和精准度。

3.3 工程化与集成

Skill本身是一个Node.js后端服务，架构如下：

1. API网关 ：接收用户请求（文本或草图图片），调用不同的AI服务。
2. 工作流引擎 ：控制蓝图规划、原型生成、交互注入三步流程的顺序执行和上下文传递。
3. 代码解析与缝合模块 ：将AI生成的各个部分的代码（可能来自多次调用）进行解析，合并成一个完整的React组件文件，并处理可能存在的样式冲突或重复导入。
4. 预览服务器 ：动态生成一个可访问的URL，将最终代码渲染成一个真实的、可交互的网页，供用户实时预览。这里我用的是Express + 一个内嵌的浏览器渲染引擎（如Puppeteer）。
5. 输出模块 ：除了在线预览，还提供一键导出功能，导出物包括：
   • index.jsx ：完整的React组件代码。
   • style.module.css ：模块化CSS文件。
   • design_spec.json ：页面设计标注（基于CSS变量和组件布局自动生成）。
   • assets/ ：生成的图片资源。

4. 从描述到原型的完整实操流程

下面，我以一个真实需求为例，展示这个Skill的完整工作流程。需求是：“为一个内部数据监控平台设计一个仪表盘首页，需要展示实时流量折线图、服务器状态列表和最近告警信息。”

4.1 第一步：需求分析与蓝图生成

我将需求输入Skill。后端工作流启动：

1. 向量检索 ：系统检索与“仪表盘”、“数据监控”、“折线图”、“状态列表”相关的设计规范片段和案例。
2. 蓝图规划调用 ：将检索到的规范片段和用户需求，组合成提示词发送给Claude-3。指令是：“作为产品架构师，请将需求分解为功能模块，并使用JSON格式输出一个页面蓝图，需指定每个区域使用的Ant Design组件类型。”
3. 生成结果 ：Claude返回了一个结构清晰的JSON：

   {
     "pageTitle": "数据监控仪表盘",
     "layout": "dashboard",
     "sections": [
       {
         "key": "header",
         "component": "PageHeader",
         "props": { "title": "数据监控仪表盘", "subTitle": "实时监控系统运行状态" }
       },
       {
         "key": "metrics_row",
         "component": "Row",
         "children": [
           { "key": "metric_card_1", "component": "Card", "title": "今日总流量", "content": "Chart" },
           { "key": "metric_card_2", "component": "Card", "title": "平均响应时间", "content": "Statistic" }
         ]
       },
       {
         "key": "chart_section",
         "component": "Card",
         "title": "实时流量趋势",
         "content": "LineChart",
         "props": { "span": 16 } // 占据栅格16列
       },
       {
         "key": "status_section",
         "component": "Card",
         "title": "服务器状态",
         "content": "Table",
         "props": { "span": 8 } // 占据栅格8列
       },
       {
         "key": "alert_section",
         "component": "Card",
         "title": "最近告警",
         "content": "List"
       }
     ]
   }
   

4.2 第二步：高保真UI生成与代码缝合

系统拿到蓝图后，开始并行生成各部分的UI。

1. 生成主视觉区域 ：针对“metrics_row”和“chart_section”，调用GPT-4生成React代码。提示词包含了蓝图对应部分、色彩Token，以及一个特殊指令：“使用Ant Design的Card、Statistic组件和ECharts库生成折线图。”
2. 生成图表占位图 ：同时，为了在预览时更直观，调用DALL-E 3生成一个“科技感蓝色调折线图”的占位图片，用于在代码完全加载前显示。
3. 代码缝合 ：所有代码片段返回后，代码解析模块开始工作。它会：
   • 统一合并所有的 import 语句。
   • 检查组件 props 的一致性。
   • 将各部分的JSX结构按照蓝图的层级进行组装。
   • 生成一个统一的CSS模块文件，包含所有样式。

4.3 第三步：交互逻辑与状态注入

接下来，处理交互。系统识别出蓝图中有“Table”（服务器状态）和需要动态更新的“Chart”（流量趋势）。

1. 为表格添加模拟数据与交互 ：向LLM发送请求：“为上述蓝图中的服务器状态Table组件编写模拟数据，并实现以下交互：点击‘刷新’按钮，表格数据更新，按钮变为加载状态2秒。”
2. 为图表绑定动态数据 ：请求：“为ECharts折线图编写一个模拟实时数据生成的函数，并实现每5秒自动更新图表数据的功能。”
3. 全局状态管理 ：对于这种简单的仪表盘，我让AI使用React的 useState 和 useEffect 钩子来管理状态，而不是引入复杂的Redux或MobX，以保持生成物的简洁性。

4.4 第四步：预览、迭代与导出

1. 实时预览 ：所有代码整合后，预览服务器启动一个临时服务，生成一个唯一URL。我打开这个链接，一个完整的、风格统一的Ant Design仪表盘页面呈现在眼前。图表是动态的，刷新按钮有加载效果，完全可交互。
2. 对话式迭代 ：我觉得“最近告警”用列表不够醒目，于是输入新指令：“将‘最近告警’部分从List组件改为一个红色的Alert警告框列表，并添加‘标记为已读’的按钮。” Skill将当前页面的上下文和新指令发送给AI。AI理解了这是迭代请求，只修改了 alert_section 对应的代码块，重新缝合后，页面实时更新。
3. 一键导出 ：满意后，点击导出。我得到了一个包含所有源代码、样式和资源的ZIP包。设计同事可以打开 design_spec.json 查看标注，开发同事可以直接将 index.jsx 放入项目。

5. 实战中的挑战与优化策略

这个过程并非一帆风顺，遇到了不少典型问题，也总结出一些优化策略。

5.1 常见问题与排查技巧

问题现象	可能原因	排查与解决思路
生成的页面布局错乱	AI未能正确理解栅格系统或Flexbox布局。	1. 在蓝图生成阶段，强化对“Row/Col”或“Flex”布局的指令。 2. 在代码生成提示词中，明确指定组件的 span 或 style 属性。 3. 在后端代码缝合后，运行一个简单的CSS网格校验脚本。
组件样式不符合规范	AI忽略了注入的Design Tokens，或使用了内联样式覆盖。	1. 检查提示词中CSS变量定义是否清晰、前置。 2. 在代码生成指令中强调：“ 禁止 使用内联style属性，所有样式必须通过CSS类名和设计令牌变量控制。” 3. 在输出代码后，使用正则表达式扫描是否存在 style= 。
交互逻辑缺失或错误	AI对状态管理的理解停留在表面。	1. 将常见的交互模式（数据获取、表单提交、状态切换）封装成“代码片段模板”，在提示词中以示例形式提供。 2. 要求AI分步输出逻辑：先定义状态，再定义效果，最后定义事件处理函数。 3. 对于复杂交互，采用“分治”策略，一次只让AI生成一个完整的小功能。
迭代时“推倒重来”	AI丢失了之前的上下文，或指令不够明确。	1. 确保迭代请求的提示词中，包含了“基于以下现有代码”的明确指令和当前核心代码片段。 2. 要求AI以“diff”或“修改说明”的形式输出变更，而不是完整的新代码，便于人工复核和合并。
生成速度慢，成本高	提示词过长，或调用链路过复杂。	1. 实施“动态上下文”策略，只注入必要规范。 2. 对生成结果进行缓存，对于相似的蓝图或组件，直接复用缓存代码。 3. 将非实时的、耗时的任务（如图片高清生成）异步化。

5.2 效果优化的关键技巧

1. 提供“反面教材” ：在提示词中，不仅告诉AI“应该怎么做”，也告诉它“不应该怎么做”。例如：“避免使用 <br> 标签进行布局，避免使用固定像素宽度，请使用响应式栅格。”
2. 分步骤确认 ：对于复杂页面，不要追求一步到位。先让AI生成静态蓝图（线框图），人工确认布局合理性后，再进入高保真生成阶段。这比生成后再大改要高效得多。
3. 建立“组件池” ：将AI生成过的、且经过人工验证的优秀组件代码（如一个功能完整的筛选栏、一个带排序和分页的表格）存入“组件池”。当后续生成遇到类似需求时，直接从池中检索并复用，只需微调，大幅提升质量和速度。
4. 人工审核环节必不可少 ：目前AI还无法100%保证交付质量。我的流程中，在最终导出前，设置了一个“人工审核快照”环节。系统会自动对预览页面进行截图，并高亮出可能有问题的地方（如颜色对比度不足、文字超出容器等），供设计或开发同学快速确认。

这个“原型页面生成Skill”项目，本质上是在当前AI能力之上，构建了一层“规范化”和“工程化”的封装。它没有取代设计师和工程师，而是将他们从重复、机械的“画界面”劳动中解放出来，让他们能更专注于更核心的业务逻辑、用户体验和创新设计。从“会写页面”到“按规范交付原型”，这一步跨过去了，AI才真正从一个有趣的玩具，变成了一个得力的生产工具。