零基础设计师分享 Cursor 实操经验，借助工具将 Figma 设计稿转化为可运行网页。作者指出单纯用自然语言提需求容易出现修改偏差，并总结四步协作流程，实现高效迭代、节省 Token，达成界面高度还原。

在上个月我还是一个一行前端代码都不会写的设计师。

但是，就在这个月，我用 Cursor 把自己的产品界面从 Figma 稿变成了真正能跑的网页——还原度基本 100% 是我想要的样子。

你是不是也经常会这样：明明Figma 预设规划的好好的，想让它变成能点、能跳转的真网页，却总是卡在”我不会写代码”这五个字上？

或者，你已经试过让 AI 帮助你改页面——但是沟通了半天，它改的却根本不是你想要的地方，自己越改越气，还费了很多Token。

其实，这两个坑我全都踩过。

所以，这篇我想用大白话讲清楚两件事：Cursor 到底是什么；以及我这一个月，怎么从”盲说被改错”走到”完全可控”的。

至于工具怎么选择，我之前就分享过一篇《产品设计的三种流派》，大家可以仔细阅读后，按照自己的偏好进行选择就好。

这里我就只拿Cursor来分享我的经验——毕竟我喜欢它的“多模态”理解能力。而且，只要把这套基本功学会了，以后在WorkBuddy、CodeBuddy、Vs code + opencode、Claude code里交叉使用也不会太费劲。

1. Cursor 是什么？——一个看得懂人话的”代码搭子”

先用大白话来定义：Cursor 不仅是让你学习编程的软件，也是一个能听得懂人话、能替你写代码的”搭子”。

举个例子：

我把 Figma 原型概念图接进去，跟它说”照着这个生成页面”，然后我给了它部分我想要的风格设计要求，它就能吭哧吭哧把网页需要的结构、样式全写好。

当我点开浏览器一看——我的产品界面，真的能点、能滚动、能交互了。

而且给它喂图的方式也不止一种：你可以用MCP方式接入figma让它实现自动读取，也可以手动给一个截图让它自己理解截图中的设计风格。

Cursor在做产品界面（UI）设计时，最大的优势就是提供了一条从“视觉想法”到“可用代码”的最短路径——可视化、精准、高效，极速完成“设计-代码-预览”的反馈闭环。

只要你想得越清楚，它就能做起来越快！

不过，在这里还是要给你泼一盆冷水：光会”说”，你大概率会摔跟头。

我就摔过，摔得还挺疼。

刚才我在上面给的成果图，并不是一稿就能完成的。里面还有很多后续的不断微调的设计工作，这就是我今天想分享的“精修大法”。

2. 为什么光靠嘴说，它总给你改错？

刚上手使用的那阵子，我基本都是纯靠自然语言跟它聊，属于典型的”用嘴来设计”，也就是所谓的“意图设计”。

意图设计在刚开始用AI工具进行实现的时候，我觉得效率是非常快的，比过往的人工快的不止百倍。

但是到了对粗成品进行后续“精修”和“微调”的阶段，我会发现“用嘴来设计”总是差那么点意思。

所以，结果就是下面我要详细分享的两幕翻车现场，翻到我现在都记忆犹新。

第一幕：改导航，改错了。

当我说”把顶部导航改一下”。但是一个页面里既有一级导航、又有二级导航，侧边还有个导航栏——AI它就分不清楚我说的是哪个，随便挑了一个就动手改动。等它改完我一看：不是我想要的那个啊！

当在使用过程中遇到很多这种类似“多导航“问题的时候，我发现AI其实容易产生聚焦的问题。如果你设计的系统简单的话，那还好，如果像我们这样比较深度，又常年做的多系统，那么大概率AI会在定位的时候又慢，又容易犯迷糊。

第二幕：找模块，找不到。

当我说”把服务入口的第二个方块内容调整一下文字…”。

可是，代码里那个模块的名字，它压根没跟”服务入口”三个字绑定。而且，我的网站中出现了很多个“服务入口”的字眼——我眼里的”第二个模块”，在AI眼里根本不存在，它只能满页面乱猜。

后来我在反复使用中发现一个规律：越小的修改点，它越难定位。 如果恰巧一个页面里相同的词出现了好几处，AI它就更蒙了——不知道到底要改哪个？

在那段时间，往往是一个小按钮我都要跟AI它来回拉扯十几轮：我描述、它猜、改错、不是我想要的、我再描述……时间全耗在和AI它”猜”修改对象上了，很多时候改完还不一定是我要的。

然后，还有很多修改对象是我根本就无从下“嘴”的，最后，我反复思考为什么会有这样的事情反复出现，并且终于想通了。

问题的本质是什么？

其实很简单，就是你说的是”人话坐标”，AI它需要的是”代码坐标”。光用意图和语言来做代码定位，其实还是效率极低的。

再举个例子，你仔细想想看是不是这个道理：你跟快递员说”送到我家楼下那个红色门的店”，可整条街有三家红色门的店，快递员他只能一家一家去问。但是，你如果直接给他精确的门牌号，快递员就能快速的一次送达。

在我们“盲说”的时候，Cursor 这类AI工具就是那个没有精确门牌号的快递员：只能从上到下通读你的页面，有时候还能同时找出好几个”疑似目标”。

所以，问题不在 于Cursor 不聪明，而是在于我们不会”报坐标”。

那么，要如何学会精确的“报坐标”呢？

看看下面这样的真实代码文件，大多数人跟我一样第一眼就感觉脑袋都懵圈了，“我又不会写代码，再说古法代码的时代都过去了。”

不用学”写”代码，但要学会”读”。

当时，我意识到这个问题之后，在我面前有两条路：第一，继续用嘴磨，磨到AI它撞对为止；或者，暂时停下来，学习磨刀。

在权衡之后，我选择了磨刀——我花了 2 周时间，从零开始学习了一些 HTML+CSS 的基础。

好了，如果你想一次性彻底解决类似问题，那就请你继续再来听我说说，这两周我是怎么学的？

说出来一点都不高深：不报班、不啃大部头，就是每天抽点时间看基础内容，每认识一个标签，就往自己的表格里记一行——它是干嘛的、长什么样、用一句大白话怎么讲。

两周下来，这张表越记越厚，成了我的”查字典表”。这个过程中我的原则只有一条：只学”阅读”需要的，不碰”写作”需要的。强烈推荐你一定要亲手试试！

到今天我也写不出一个完整的页面，可是我学会了怎么看懂大部分静态页面的写法——哪块是导航、哪个是按钮、它的名字叫什么，一眼能找到。

这对于有AI工具的我们就基本够了。就好比说你不用知道灯泡是怎么发光的，但你得知道哪个开关控制哪个灯泡。

学会”读”之后，我对cursor的工作方式彻底变了。

以前是”把那个按钮改一下”（它猜半天）；现在是我先自己打开代码，找到那个按钮的”门牌号”（它的 id），然后直接告诉 Cursor：”把 id 是 xxx 的那个按钮，背景色换成蓝色。”

在改页面的时候，我就会把那张”查字典表”摆在手边，随用随查——不用背，当字典用。一次到位，夯爆了！Token也省爆了！

其实这背后是一个更重要的观念：AI 的超能力是有边界的，理解边界，才是人机高效协作的前提。你用它喜欢的语言跟它说话，它就还你事半功倍。

4. Cursor 的正确使用姿势：就这四步

道理讲完了，落到操作上，我的完整用法就四步。

Step1：开启对话。

打开 Cursor 右侧的 Chat 聊天框，像跟朋友聊需求一样，说清楚你想要什么。

Step2：等它出活。

它会自动给出解决方案和初稿，模型、配置这些你都不用操心。

Step3：精准调教（最关键的一步）。

像批改作业一样对待初稿：别笼统地说”不好看””再改改”。

指着具体位置说——”id 是 xx 的按钮换成蓝色””这个卡片的上下间距加大”。你会不会”看代码报坐标”，决定了这一步的功力，也决定了它能不能稳定输出你要的东西。

但是，问题来了，怎么用刚才我说的字典表找到这个id 编号呢？下面我给你几个操作步骤，你看看就能秒懂！

（1）打开你的文件后，在顶部菜单选择【Run】 ，然后选择【启动调试】

（2） 在浏览器的页面鼠标右键，选择【检查】

（3）在浏览器的界面就可以看到左边和右边两个区域，左边是你的产品UI样式前端效果，右侧是你的代码内容。

（4）找到这个小鼠标按钮选中一下，一定是激活的选中状态。

（5）这时候，你的图标在挪到左边页面的就会出现下面的鼠标样式悬浮效果。你可以看到你的这个模块的简要信息了。

（6）最重要的来了！绿色的方块圈住的“.wb-service-block ” 就是你这个选中的代码块的样式了，这时候，你就把它复制下来，给到Cursor。

比如：“.wb-service-block ”文字修改为“业务观测平台”有两种方式。A. 直接意图让Cursor帮你修改，精准定位，秒出结果。

B. 自己进行检索手动修改，零Token。

Step4：100%还原度。

好的效果从来不是一步到位，需要你从Step1到Step4循环来回调整，直到结果 100% 是你想要的。

特别是在某些明确命令中，比如”让 B 模块和 A 模块做成一模一样”这种指令，效果就非常好——因为”一模一样”对它来说是个清晰无歧义的坐标。

就这四步，来回循环。”可控”不是天赋，是流程——每循环一轮，你和它的默契就厚一层。

TIPS：从开始我需要2周修改一个网页，到现在1小时就能改好，足以证明表达越准确，输出越精准，还越省 token。

🎁 写在最后

一个月前，我还在跟 AI”大眼瞪小眼”：它改不对，我说不清，互相折磨。一个月后，静态页面的细节我基本都能精准拿捏了。

从”完全不可控”到”完全可控”，中间隔的不是代码功底，是”会不会跟 AI 说话”。

软件有多强大，很大程度上取决于你怎么用它。 工具会变——今天是 Cursor，明天可能是 Claude Code、VS Code——但是”理解 AI 的边界、用它喜欢的语言对话”这个能力，一旦装进你脑子里，就永远是你的。

此刻不妨对照一下：你现在跟 AI 协作，是还在”盲说”，还是已经会”报坐标”了？