获课：shanxueit.com/7918/ 

从"画得出"到"做得出来"：一个设计小白的MasterGo+Cursor协作笔记

前言：为什么我花了这么久才搞懂这件事

我大概算是一个"半吊子"产品爱好者——能用Figma画个原型，看得懂一点点前端代码，但真要让我把设计稿变成能点能用的网页，那就完全超纲了。以前总觉得"设计"和"开发"之间隔着一堵墙：设计师把图交出去，剩下的就是开发的事，两者之间几乎没有交集。

直到我开始尝试把MasterGo（设计工具）和Cursor（AI编程工具）放在一起用，才发现这堵墙其实是可以拆掉的——它需要的不是学会写代码，而是理解一套"翻译逻辑"：设计稿里的每一个元素，在代码里对应什么；开发出来的页面，在视觉上应该长什么样。 下面是我从零开始摸索这套协作流程的一点心得。

一、先搞懂这两个工具各自在干什么

在把它们凑到一起之前，我觉得有必要先搞清楚：MasterGo和Cursor在"产品落地的流水线"上分别扮演什么角色。

MasterGo——它是"画蓝图"的地方。你在上面画的矩形、圆形、文字、图片，本质上是一份"视觉说明书"：按钮离左边距多少、字体多大、颜色是什么色值、圆角是多少。它不产生任何可以运行的代码，但它精准地定义了"最终长什么样"。

Cursor——它是"盖房子"的地方。你输入自然语言描述，它能帮你生成HTML、CSS、JavaScript代码，然后在浏览器里渲染出实际的页面。它不懂设计规范，但它能把"设计语言"翻译成"浏览器能听懂的语言"。

我以前的问题是：我只会用MasterGo画图，但画完就卡住了，不知道怎么走到下一步。现在我明白了，关键是找到一种方式，让"设计稿里的数字"变成"代码里的参数"。

二、视觉还原：把设计稿的"语言"翻译给AI听

我第一次尝试用Cursor还原一个用MasterGo画好的登录页面，效果可以用"惨不忍睹"来形容：颜色对不上、间距不对、字体大小偏差很大。后来我才意识到，问题不在于Cursor不行，而是我给的指令太模糊了。

现在的做法是：在MasterGo里把设计稿的数据"量化"出来，然后把这些数据以最清晰的方式喂给Cursor。

具体来说：

• 颜色：MasterGo的取色器里能直接复制色值（比如#3B82F6），这个值我直接告诉Cursor"主色调用这个色值"。

• 间距：MasterGo里每个元素的"距上边距""距左边距"都能看到。我把这些数值整理成"左侧留白20px、两个按钮间距16px"这样的描述。

• 字体：字号、行高、字重都有明确的数据，我也一并整理在指令里。

当我学会"把设计稿里的每一个视觉数值，都变成对Cursor的自然语言指令"之后，第一次生成的结果就从"完全不相关"变成了"八分像"。剩下的两分，靠调整指令再迭代一两轮就能到位。

这件事给我的启发是：设计工具和AI工具之间的桥梁，不是某种神秘的技术，而是"数据"本身。 你给AI的数据越精确，它给你的结果就越接近设计稿。

三、理解"布局逻辑"：不要只告诉我"长什么样"，告诉我"怎么排的"

这个坑我踩了特别久。一开始我给Cursor的指令是"左边一个头像，右边上面是名字、下面是简介"，结果生成的页面确实"长这样"，但当我试着把浏览器窗口拉大拉小的时候，布局全乱了：头像跑到了右边，文字叠在了一起。

后来我才明白：设计稿里画的"静态效果"，背后隐含着一套"布局逻辑"——哪些元素是水平排列的、哪些是垂直堆叠的、哪些是固定宽度的、哪些是自动撑满的。 这些逻辑在设计软件里是隐形的（因为画布是固定的），但在代码里必须显式声明。

我的学习方法是：对照设计稿，用"拆盒子"的方式描述布局。 比如一个卡片组件，我会说："这是一个宽度自适应的卡片，里面分左右两栏。左栏固定80px放头像，右栏自适应剩余宽度，里面垂直排列两行文字。"这种"分栏+嵌套"的描述方式，Cursor就能很准确地翻译成弹性盒布局（Flexbox），做到响应式自适应。

四、学会"迭代式提问"：一次不行就两次

用Cursor最大的误区，是希望它"一次生成完美成品"。我之前也这么干过，结果就是不停地在"重新生成"里碰运气。

后来我换了一种方式：先让Cursor生成一个"骨架"，然后在这个基础上逐步精修。

第一轮：只提结构和布局的诉求。"生成一个登录页，顶部是Logo，中间是账号密码输入框，底部是登录按钮。"

第二轮：调整样式细节。"把按钮的颜色改成#3B82F6，圆角改成8px，输入框加淡灰色边框。"

第三轮：优化交互体验。"鼠标悬停在登录按钮上时，背景色变深一点，加个过渡动画。"

每轮只改一件事，改完确认满意了再提下一个需求。 这样迭代三到五轮之后，生成的质量远高于一次生成的版本。核心原因在于，人和AI的协作就像两个人搭档改稿——你负责指明方向，它负责执行，但方向要一步一步给，不能一口气全甩过去。

五、一个真实案例：我花两天做完了一个小型活动页

最近公司要做一个内部活动的报名页面，设计稿已经用MasterGo画好了。按照以前的做法，我需要等开发排期，至少一周。这次我决定自己用Cursor试试。

第一天上午：把设计稿里的颜色、间距、字体数据整理成文档。
第一天下午：用Cursor生成页面骨架，确认布局结构基本正确。
第二天上午：迭代两轮样式细节，让页面和设计稿"看起来一样"。
第二天下午：调整响应式适配，顺便让Cursor帮我加了个报名表单的简单校验。

两天，一个从设计稿到可访问页面的完整流程，中间没有写过一行代码。这个经历让我意识到：MasterGo+Cursor的组合，本质上是在降低"将想法变成现实"的门槛。

六、一点个人总结

如果你也是"会画但不会做"的产品或设计师，我觉得MasterGo+Cursor这个组合值得花点时间了解一下。它不要求你成为程序员，但它要求你具备两种能力：

第一，精确描述设计的能力。 知道设计稿里每个元素的具体数值是什么，并能有条理地告诉AI。
第二，拆解布局逻辑的能力。 能看懂一个静态设计背后"元素的排列规则"，并用自然语言表达清楚。

掌握了这两点，你会发现，从设计到实现的鸿沟并没有想象中那么宽。大多数时候，限制我们的不是技术能力，而是我们不知道"原来可以这样"。

希望这篇分享能给你一些启发。