AI 编码圈新卷王 Magic Path 来了，Claude Engineer 团队出品，号称UI设计的 Cursor 时刻。

Hi，这里是Aitrainee，欢迎阅读本期新文章。

之前谷歌出来了一个 Stitch，感觉挺牛。但最近又发现个新工具，也挺猛。

这玩意儿叫 Magic Path，是 Claude Engineer (就是那个专门给 Claude 用的 Aider 类工具，效果很不错) 团队搞出来的新活。

可惜不是开源的，但有免费额度，而且挺好用。

Claude Engineer团队

▲ Pietro Schirano | 搞出 Claude Engineer、DesignerGPT 的那个大佬（以前在 Brex、Uber、Facebook 带过 AI 团队) 发布了 MagicPath。

号称是"设计的 Cursor 时刻"，要用 AI 在无限画布上搞创作、优化、探索。

Magic Path 到底是啥？

简单说，就是个 AI 驱动的 UI 设计工具，用起来跟 Figma 有点像。有个大画布，能拖来拖去。

，时长01:44

但它跟 Figma 不一样，不是让你从头搭组件。它是 AI 先行，你给个简单的提示词，它就直接给你生成组件，产出的是 React 代码。

生成的组件，你可以直接拿去用，嵌入到任何地方。组件或者网页搞定后，还能改文字、字体、颜色、大小、样式这些。各种 UI 都能生成，手机端、Web 端都行。

MagicPath 亮点速览：

每个组件都是一场对话：不管是手动编辑还是让 AI 改，都能不断优化。好的设计就是不断做好决定，MagicPath 让你在画布上随便复制粘贴互动组件，尽情探索和完善你的想法。

所见即所得，直接能跑：你在画布上创造的一切，都是一个功能齐全的网站。可以直接在画布里跟你的产品互动。调整下大小，看看设计怎么自适应。满意了，不光能分享整个项目链接，单个画板也能单独分享。

一键生成多种方案 (Variants)：用这个功能，能快速生成不同的设计方案，探索各种可能性，方便跟团队分享和测试。

首个同类设计工具：让创作者不用写一行代码，就能在无限画布上做出漂亮应用。天天有人说写代码要消失了，但没人真正把代码抽象掉，MagicPath 就要干这个。

设计开发无缝衔接：它提供生产级别的代码，你或者你队友可以直接拿去用。MagicPath 相信设计仍然是创作过程的核心，它要打造设计师和开发者之间的终极交接体验。

设计开发衔接

图片转设计/代码能力超强：Pietro Schirano 对这个功能特别自信，觉得是市面上最好的，很期待大家去玩玩。

找回 AI 的乐趣：他说，刚接触 AI 领域时，能感受到那种无限可能的力量。但现在 AI 变得太功利了，大家好像忘了 AI 本身还有很多魔法等着被探索和解锁。MagicPath 想把这种乐趣带回来。

想试试？直接去https://magicpath.ai创造魔法吧。

上手体验

左边是侧边栏，显示你创建的项目。每个项目都有自己的画布和组件，方便管理。免费版每天有 5 次生成机会（5个组件，每个组件可迭代提问）。

界面预览

画布本身没啥特别的，跟普通画布一样能滚动操作。顶部有个分享按钮，可以把画布分享给别人。

怎么生成 UI？

点底部那个"添加"按钮，画布上会出现一个 800x600 的框，右边弹出 AI 助手面板。

添加组件

生成之前，可以点个小图标，选要生成的分辨率：平板、手机、浏览器。选好后，框框会自动调整大小。当然，你也可以手动拖拽调整。

分辨率选择

它生成的设计通常是响应式的，框框变小，内容也会跟着调整，这点挺好。然后，就可以在 AI 助手面板里输入提示词了，也能上传图片当灵感。

AI助手面板

比如，让它搞个音乐播放器 App。

生成音乐播放器

生成速度挺快，比 Stitch 甚至 Bolt 都强。UI 交互也不错，会显示规划步骤，然后开始生成组件。一会儿工夫，组件就出来了。看着还行，设计不算惊艳，但也挺好了。

生成结果

牛逼之处：生成的 UI 是能用的

跟 Stitch 那种只能看不能用的设计不一样，Magic Path 生成的 UI 是完全可用的。

不满意？点聊天图标，可以继续跟 AI 对话，让它修改。

AI对话修改

还能可视化编辑，直接在生成的 UI 上选 DOM 元素，改内外边距、宽高、文字、对齐这些，不用再跟 AI 扯皮，挺方便。

可视化编辑

"流程 (Flows)" 功能：页面串联

这个功能也挺酷，能帮你生成跟当前页面相关联的新页面。比如，你做好了主页面，想加个登录页。点"流程"选项，主页面上会出现四个点。

流程功能

想在主页面前加页面，点左边的点；想在后面加，点右边的点。点了之后，它会问你想要啥样的页面。比如，让它搞个简单的登录页。

登录页生成

一会儿，登录页就生成好了，还会自动连条线，表示它俩关联上了。而且，新页面的设计风格会跟原来的保持一致。

代码导出和分享

有代码视图，能直接拿到 React 代码，下载到本地用。也能在新标签页里打开设计，或者分享给别人。

代码导出

缺点和展望

提出的功能太系统复杂了的话，他可能生成不出来。跟提示词有关。所以提示词可以简洁一些。

复杂功能限制

比如下面这个提示词，Magic Path中没生成出来：

图片

好吧，我想你也看到了本文的排版有些不一样了，其实我正在写这样的排版工具。

这个提示词在Bolt、V0中的效果：

图片

图片

总的来说，Magic Path 作为一款免费的 AI UI 设计工具，功能和体验都可圈可点。虽然还有进步空间，但潜力不小。