用自然语言生成 React 网页并实时预览，支持迭代优化与一键导出，零配置替代传统 UI 设计+前端开发流程。
说明：
## 核心用法
UI Designer 是一个基于大模型的**全自动化网页设计生成器**，用户只需用自然语言描述需求（如“设计一个 SaaS 落地页，深色主题，带定价卡片”），即可在本地启动实时预览服务，生成 CDN 引入的 React 页面，无需构建步骤。整个流程涵盖：项目创建 → 偏好设置 → 页面生成 → 截图审查（桌面+移动端）→ 迭代修改 → 图片压缩优化 → 最终导出 ZIP。
## 显著优点
1. **零配置启动**：使用 Tailwind CSS + React 18 CDN，无需 npm install，开箱即用。
2. **视觉闭环**：自动生成截图并用多模态能力审查，确保响应式、对比度、排版等设计原则达标。
3. **持续迭代**：支持“描述-生成-预览-反馈”循环，降低沟通成本。
4. **性能优化内置**：自动将用户图片转为 WebP，报告压缩率（如 1.2MB → 340KB）。
5. **可迁移交付**：最终产物为纯静态 HTML，可部署到任何静态服务器。
## 潜在局限
– **依赖外部 CDN**：生产环境若断网则无法加载 React/Tailwind，需本地化构建才能完全离线。
– **无状态持久化**：页面状态仅保存在内存和文件系统，无数据库支持，不适合复杂动态应用。
– **浏览器兼容性**：CDN UMD 模式对旧版浏览器支持有限，未明确提及 polyfill 策略。
– **安全边界**：截图脚本和 setup 脚本在本地执行，若配置不当可能存在路径遍历或命令注入风险（需依赖 TOOLS.md 的权限管控）。
## 适合人群
– 产品经理、设计师快速产出可点击原型；
– 独立开发者验证落地页 MVP；
– 前端新手学习 React + Tailwind 的最佳实践（自带设计规范）。
## 常规风险
– **供应链风险**：React、Tailwind、Babel 均来自 unpkg/jsDelivr，若 CDN 被投毒则影响渲染安全。
– **本地服务暴露**：默认监听 5174 端口，若部署在共享环境需配置防火墙。
– **图片处理依赖**：convert-image.sh 依赖 ImageMagick 或类似工具，若缺失会导致流程中断。
– **截图稳定性**：无头浏览器（Puppeteer/Playwright）在容器化环境中可能出现字体渲染差异。
会员专属
