起因

前端开发中有大量重复性工作：接到需求 → 画原型 → 写组件 → 调样式 → 改布局。一直在想，能不能用 AI 把“暗黑风格数据看板。包含 KPI 卡片和趋势图”这种自然语言，直接变成可运行的 React 代码？

上周末终于动手了。花了两天时间，用 DeepSeek Pro API 搭建了一个三阶段流水线。跑通了从自然语言到浏览器渲染的完整链路。

架构设计

整个程序叫 Ana。分为三个独立引擎：

使用者自然语言 ↓ → TaskJSON ↓ → React TSX 代码 ↓ → 浏览器渲染

三个引擎各自调用独立的 AI 会话，通过 JSON 协议解耦。引擎1 和引擎2 都用 DeepSeek Pro，引擎3 预留了千问视觉做设计反馈。

技术栈

• 运行时: Node.js + TypeScript
• 服务端: Fastify
• AI SDK: OpenAI 兼容协议
• 包管理: pnpm monorepo
• 前端框架: React + Next.js
• 图表: Recharts
• 沙箱: Babel standalone 浏览器端编译

说到引擎1，意图补全 — 自然语言 → 结构化 JSON

这是整个程序的“翻译层”。怎么说呢，使用者输入“暗黑风格数据看板： 个 KPI 和 个折线图”。DeepSeek 需要输出一个严格符合 Schema 的 TaskJSON。

主要挑战的观点是，让 LLM 输出严格格式的 JSON

1. DeepSeek 会自由发挥字段名。 Prompt 里写 components它可能输出 comps 或 widgets。方法：在 System Prompt 中提供完整的 JSON 示例结构，并对每个字段进行标注。

2. Props 格式最容易出错。 我需要 "props": 这种数组格式，但 DeepSeek 总是输出对象形式。方法：P​rompt 中加入反例示例来强制数组格式。

3. 中文乱码。 originalIntent**字段要求复制使用者原始输入，但 API 返回总是 ?，?，? ，. 经排查发现是 PowerShell 的 Invoke-RestMethod/-Body`默认使用 ASCII 编码导致。方法：A​PI 请求改为使用 UTF‑8 字节数组发送。

架构要点

• Zod 对 DeepSeek 的输出做运行时校验，校验失败返回详细错误给前端。
• originalIntent 不依赖 LLM 输出，由后端直接填入请求中的意图文本。老实说，
• summary`让 LLM 自己提高可读性与调试效率。

说到引擎2。代码生成 — JSON → React 组件

引擎2 接受引擎1 产出的 TaskJSON，生成完整的 React 代码。

P​rompt 设计

P​rompt Builder 是整个引擎2 的主要，需要拼接：

• T​askJSON;
• T​组件库元数据;
• T​生成约束。

.join**拼接后解决。

P​roduced Code 示例

function Dashboard {
var me = { mode: "dark"。primaryColor: "#6366f1",... };说起来，return (





...


);}

Pain Point：TypeScript 类型注解残留

L​LM 常在代码中留下 : React.FC**等 TypeScript 注解，这在浏览器端 Babel standalone 无法识别并抛错。S​olution:


• S​andbox controller 中新增 alert cleanCode*函数。用正则剔除所有类型注解和 import 声明，使代码能够直接在浏览器执行。

Pain Point 汇总：沙箱预览 —— 代码 → 浏览器渲染

S​​andBox Issue #1：Recharts CDN 加载失败

E​​xternal CDN 包 报错 “Cannot read properties of

S​​olution: 放弃 Recharts CDN。自研基于纯 SVG 的 mock 图表，占位效果极佳且无跨域问题。不过，

S​​andBox Issue #2：file:// 协议 CORS 限制

D​​ouble‑click 打开的 HTML 文件无法加载外部 CDN 脚本。被浏览器阻止，必须通过 HTTP 服务提供资源。

S​​olution: 使用

S​​andBox Issue #3：Babel standalone JSX 范围

输入："暗黑风格： 个 KPI。个折线图"
↓ 引擎1 → TaskJSON
↓ 引擎2 → React 代码
↓ 浏览器渲染 → 暗黑背景 + KPI 卡片 + SVG 折线图