【交作业】周天晚上跑的Qwen3.8-Max，一句话复刻腾讯UI设计工具Ardot页面
基于五次操作截图和 AI 对话日志整理的 Ardot 原生 HTML/CSS/JavaScript 复刻。当前实现不是五张独立页面，而是同一设计工作区在需求输入、AI 响应、生成、成稿和编辑模式下的连续状态。
Next.js 全栈版本
新的全栈应用位于 app/，使用 Next.js App Router、React、Route Handlers 和 JSON 持久化数据层。开发入口、API 和目录职责见 app/README.md。
cd app
pnpm install
pnpm dev
应用采用全屏桌面工具布局：页面外壳锁定在浏览器视口内，不产生整体滚动；左侧图层树、右侧对话与属性区域按需独立滚动。中部为四角圆润、隐藏溢出的无限画布面板。
运行
直接打开根目录的 index.html 即可。也可以使用任意静态文件服务器：
python -m http.server 8000
然后访问 http://localhost:8000/。
主要交互
-
点击“生成 UI”示例或发送提示词，进入 AI 响应。
-
点击“继续完善并开始生成”，显示三个动态生成画板。
-
三个画板完成后自动显示生成成稿。
-
右上编辑按钮是模式开关：打开进入编辑检查模式，关闭返回成稿状态。
-
编辑模式可选择不同画板，并实时调整圆角、透明度、旋转、描边和阴影。
开发工具
重新从原始截图裁剪素材：
python tools/extract_assets.py
运行端到端交互验证（需要 Node.js 22+ 与 Chrome/Edge）：
node tools/qa-ui.cjs
若浏览器未安装在默认位置，可先设置 CHROME_PATH。
目录职责见 docs/PROJECT_STRUCTURE.md，提交拆分建议见 docs/COMMIT_PLAN.md。
