AI 设计工具清单

IT, Tech | AI AI时代老码农 | 作者： | | 发表评论

较完整的 AI 设计工具清单（按用途分组）如下：

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

  • Google Stitch（Google Labs）：文本/参考图 → UI，多版本试验；可导出前端代码并粘到 Figma。developers.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

选型小贴士（一句话抓重点）

相关文章：

  1. 面向ChatGPT编程
  2. >Happy 1024 Day_, 程序员节快乐
  3. 曾几何时，软件吞噬世界。现在，AI正在吞噬软件
  4. Python成为GitHub最受欢迎的编程语言
  5. Google在软件工程中AI应用的进展和未来方向
  6. AI辅助编程，需求尽量定义清楚
  7. 电路设计工具软件KiCad对接AI的MCP Server
  8. 关于AI辅助编程
  9. AI时代老码农日常-20250911
  10. AI时代老码农日常-20250912

发表评论

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