AI 设计工具清单

较完整的 AI 设计工具清单(按用途分组)如下:

A) 文本/草图 → UI,并可直接产出代码(“设计到代码”链路)

  • Google Stitch(Google Labs):文本/参考图 → UI,多版本试验;可导出前端代码并粘到 Figmadevelopers.googleblog.com+1
  • Vercel v0.app:自然语言生成 React + Tailwind(含 shadcn/ui) 代码;现已升级为 v0.app。v0.app+1
  • Builder.io Visual Copilot:Figma → 实时生成 React/Vue/Svelte/Angular/HTML 代码的 AI 工具链与插件。Builder.io+2 Builder.io+2
  • Anima:从 Figma、文本或图片,直接转 HTML/CSS、React、Vue、Tailwind、shadcn 等;支持在线预览与导出。animaapp.com+1
  • Locofy.ai:Figma/Penpot → React、Next.js、Flutter、Vue、Angular、React Native;提供详细插件与导出文档。locofy.ai+3 locofy.ai+3 locofy.ai+3
  • TeleportHQ:可视化搭建 + AI 设计到代码(多框架),支持代码实时导出与协作。teleporthq.io+1
  • Quest AI:Figma/Adobe XD → React 组件与页面,支持 MUI/Chakra 映射。quest.ai+2 ai-productreviews.com+2

B) 原型/灵感生成(高保真原型、线框与多屏稿)

  • GemDesign(GemCoder):面向中文的 高保真可交互原型,支持文本/草图/截图生成,强调团队协作与资料方法论。design.gemcoder.com+1
  • Figma Make:Figma 推出的“描述 → 原型/应用”能力,强调在 Figma 生态的一体化迭代(近期开放)。webflow.com
  • Uizard(Autodesigner):文本/手绘/截图 → 线框与多屏高保真稿,适合头脑风暴与快速验证。uizard.io+3 uizard.io+3 uizard.io+3
  • Relume:AI 生成 网站地图/线框/Style Guide,并可导出 React/Tailwind 组件 与代码。react-docs.relume.io+3 relume.io+3 relume.io+3
  • Galileo AI:文本到高保真 UI 的代表之一(面向灵感/初稿,常配合 Figma 深化)。uxpilot.ai+2 webcatalog.io+2

C) 一体化 AI 建站(从想法到上线)

D) 开源/设计-开发协作
  • Penpot(开源):面向设计与开发协作,强调 CSS/SVG/HTML 语义输出 与栅格/弹性布局。penpot.app+1

选型小贴士(一句话抓重点)

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注