AI UI/UX 与网页设计工具
一、六大真实类别（按「要解决的活」分）
| 类别 | 解决什么 | 代表工具 | 价格（2026 参考） |
|---|---|---|---|
| 1. 自动化（重复劳动） | 改尺寸、去背景、命名图层、调色板 | Figma AI / Make、Khroma | Figma 从 $12/席/月 |
| 2. 构思与原型 | 文字→UI、草图→可编辑稿 | Galileo AI、Uizard、Framer AI、Visily、Relume、v0 | $10–49/月 |
| 3. 用户研究/测试 | 会话回放、热力图、注意力预测 | Maze、Hotjar、VisualEyes、Attention Insight | $19–399/月 |
| 4. 个性化 | 动态布局、A/B、自适应视觉 | Adobe Target、Optimizely、Kameleoon、Firefly | 企业报价为主 |
| 5. 无障碍 | WCAG 对比度、色盲模拟、读屏审计 | Stark、Attention Insight、axe DevTools | 免费+Pro |
| 6. 设计→开发交付 | 设计稿→生产代码 | Figma MCP、Anima、Locofy、v0、Blackbox AI | $8–42/月 |
---
二、主力工具卡片
- Figma AI / Make：原生 Figma 对象，遵守你的组件/变量/Token，交接最干净。强项在「自动化+构思」，高级功能在付费档。
- Galileo AI：文字→高保真 UI，多屏流程，质量同档最佳；输出需手动贴回 Figma。
- Uizard：草图→可编辑线框，PM/非设计师最易上手，偏 wireframe。
- v0（Vercel）：文字→React + shadcn/ui + Tailwind 生产级代码，前端团队 ROI 最高。
- Locofy：Figma → React/Vue/HTML 高保真，弥合设计-开发交付鸿沟。
- Framer AI：文字→响应式网站，可直接绑域名上线，适合作品集/Landing。
- Attention Insight：AI 预测视觉注意力/热力图，上线前做层级校验。
- Khroma：AI 个性化配色生成。
---
三、推荐工作流（一天跑通 发现→生产 UI+代码）
``1) 发现：ChatGPT/Claude 提炼用户故事与信息架构2) 线框：Galileo/Visily 出 5 套方案（30 秒）3) 精修：Figma AI Make Designs 对齐设计系统4) 主视觉：Midjourney 出图 → Magnific 放大5) 代码：Locofy 或 v0 出 React/Tailwind 交付工程6) 校验：Figma AI 无障碍检查 + 人工 a11y 复核``
过去 3–5 天，现在 5–10 倍提速。
---
四、选购铁律
- 先定类别，再选工具：自动化、构思、研究、个性化、无障碍、交付——缺哪类补哪类，别为 hype 买单。
- 设计系统成熟度决定上限：Figma AI 在没有良好组件库时输出会退化；先沉淀 Token/组件。
- AI 出图 ≠ 终稿：预计每屏仍要 2–4 小时人工精修。把生成物当「第一稿」。
- 版权与一致性：AI 生图做核心产品 UI 要谨慎；内部探索/营销素材更合适。
---
五、与桌面 AI 工作台的配合
- ui-design 定视觉方向、层级、栅格、组件规范；web-development + 发布为应用 直接落地网站。
- Visualizer 画信息架构图、用户旅程图、线框示意，边聊边看。
- tencent-pptx 输出设计方案汇报；agent-browser 自动抓竞品页面做设计比对。