【外滩大会2026】网站复刻：Code Designer AI — AI 驱动的网页逆向工程平台 #158

参赛项目名称

Code Designer AI — AI 驱动的网页逆向工程平台

团队 / 作者

吴Wxx（GitHub: [@wx73306-create](https://github.com/wx73306-create)）

我做了什么

Code Designer AI 是一个 AI 驱动的网页逆向工程平台，旨在解决传统网页复刻过程中"分析难、周期长、还原度低"的问题。用户输入任意网站 URL 后，系统通过 多智能体协作 自动完成：

URL → 网页抓取 → 视觉分析 → Design Token 提取 → 组件架构规划 → React 代码生成 → 质量检测 → 项目导出

平台自动解析目标网站的 HTML / CSS / 布局 / 字体 / 颜色 / 尺寸 / 动画等设计信息，并生成可直接 npm install && npm run dev 跑起来的 React + TypeScript + TailwindCSS Next.js 工程。

核心亮点：模型可插拔 —— 6 个 Agent 阶段中每个阶段的 AI 模型都可在管理后台独立指定，支持阿里云百炼、MiMo、OpenAI、Anthropic、Gemini、DeepSeek 等多家厂商混合编排，用户可以根据成本/效果自由切换。

使用的工具

• OpenWork / 百炼 CLI

• 百炼能力 / 模型：

  模型按 6 个 Agent 阶段分工（每个阶段模型独立可配）：

  阶段	用途	模型角色
  ① 网页抓取	渲染 / DOM / 截图 / 字体资源	无 LLM（Playwright）
  ② 视觉分析	布局 / 字体 / 配色 / 组件识别	VL 模型
  ③ Design Token 提取	结构化输出设计令牌（颜色/字号/间距/圆角/阴影）	LLM
  ④ 组件架构规划	组件树 / Props / 状态设计	LLM
  ⑤ React 代码生成	生成 React + TypeScript + TailwindCSS	Coder LLM
  ⑥ 质量检测	视觉对比 / Lint / 还原度评分	LLM + VL

  • 默认接入：阿里云百炼（DashScope 兼容 API / bl 命令），默认模型 qwen-3.7plus
  • 支持的模型（用户在管理后台自由切换）：
    • 阿里云百炼：qwen-3.7plus / qwen-3.7max / qwen-3.8max / qwen-3.6flash 等
    • MiMo：mimo-v2.5-pro-ultraspeed
    • OpenAI：gpt-4o
    • Anthropic：claude-3.5-sonnet
    • Google Gemini：gemini-2.0-flash
    • DeepSeek 等

• Skill 名称：QoderWorkCN —— 多智能体调度与百炼调用链封装，统一管理 Agent 调度、Token 计量、失败重试

• 其他：

  • 前端框架：Next.js 15（App Router）+ React 19
  • 语言：TypeScript 5
  • 样式：TailwindCSS + shadcn/ui
  • 数据库：PostgreSQL（Supabase）+ Prisma ORM
  • 任务队列：Redis + BullMQ（异步 Agent 执行）
  • 认证：Auth.js（NextAuth v5）
  • 浏览器自动化：Playwright
  • 部署：Docker + Nginx + 阿里云 ECS

效果展示

网站预览

🔗 GitHub Pages 直接预览 5 个真实复刻样例（点击即可查看完整还原效果）：

• Apple Education：https://wx73306-create.github.io/code-designer-AI/showcase/apple-edu.html
• Mercedes-Benz：https://wx73306-create.github.io/code-designer-AI/showcase/mercedes-benz.html
• MSN：https://wx73306-create.github.io/code-designer-AI/showcase/msn.html
• NexusMind：https://wx73306-create.github.io/code-designer-AI/showcase/nexusmind.html
• Vacheron Constantin：https://wx73306-create.github.io/code-designer-AI/showcase/vacheron.html

（截图位：①首页 ②URL 输入 → AI 分析流程 ③生成代码与质检报告 ④项目导出 ZIP）

项目链接

• 体验网站：http://codedesignerai.online/
• GitHub 仓库（公开）：https://github.com/wx73306-create/code-designer-AI

踩坑记录

1. Demo 地址使用 IP + 端口（http://150.158.27.120:3000/）
   评审指出公开展示页面不会放这种地址（IP 易变、易被扫描，不是长期可访问链接）。
   解决：将项目完整代码推送到 GitHub 公开仓库作为长期可访问的项目链接；同时启用 GitHub Pages 服务 docs/showcase/，让 5 个内置复刻样例可以直接在线预览。
2. 早期想用固定的"百炼模型调用链"表格写死每个 Agent 调用的模型
   评审要求写全模型版本号、并说明每个环节的具体模型。深入设计后发现系统的真实架构是模型可插拔的：每个 Agent 的模型都由用户在管理后台独立选择，支持多家厂商混部，硬写一个固定调用链会误导读者。
   解决：README 与提交文案都改为"VL 模型 / LLM / Coder LLM"通用描述，并在「使用的工具」中明确说明模型阶段分工 + 支持的模型清单 + 默认配置（百炼 qwen-plus），既诚实又满足"写全模型版本号 + 哪个环节用哪个模型"的要求。
3. 多智能体长链路执行的同步超时问题
   6 个 Agent 顺序串联、每一步输出都要作为下一步输入（视觉分析 → Token 提取 → 架构规划 → 代码生成 → 质检），单次完整复刻耗时较长，最初的同步串联方案在 HTTP 长连接下容易超时。
   解决：采用 Redis + BullMQ 异步任务队列 + 事件回调（编排见 src/lib/agents/pipeline.ts，队列见 src/lib/redis.ts），每个 Agent 完成后写回状态与产物，工作台通过轮询/事件实时拉取每个 Agent 的进度，单次完整复刻可异步跑 30 秒 ~ 3 分钟不等。