7.2
深览指数
产品人人都是产品经理·设绘闲人··AI 生成
Cursor零代码做页面，设计入门：从盲说改错到100%还原
一位零代码基础的设计师，分享使用 Cursor 将 Figma 设计稿转化为可运行网页的实操经验。文章核心指出，单纯用自然语言向 AI 提修改需求，会导致定位偏差和反复拉扯，本质是「人话坐标」与「代码坐标」的错位。作者通过自学两周 HTML+CSS 基础（只学阅读，不学写作），掌握了「读代码报坐标」的能力，并总结出一套「开启对话-等待初稿-精准调教（报ID/类名）-循环迭代」的四步协作流程，最终实现高效迭代、节省 Token，达到界面 100% 还原。适合设计、产品等非技术背景，想提升 AI 编程工具（如 Cursor）协作效率的读者。原文 ↗
核心观点
- ▍与AI编程工具（如Cursor）高效协作的关键，不是掌握编程能力，而是学会用「代码坐标」（如ID、类名）替代模糊的「人话坐标」进行精准定位，从而避免反复试错和浪费Token。
- 01作者使用「盲说」方式与Cursor沟通，如「把顶部导航改一下」，但页面同时存在一级、二级和侧边导航，AI无法准确识别具体目标，导致改错。
- 02作者尝试用自然语言描述「把服务入口的第二个方块内容调整一下文字」，但代码中模块名称与「服务入口」无绑定，且页面出现多处相同字眼，AI无法定位。
- 03作者总结规律：越小的修改点，AI越难定位；若页面中同一词出现多次，AI会混淆。一个小按钮的修改需要来回拉扯十几轮。
- 04作者花两周时间从零学习HTML+CSS基础，原则是「只学阅读，不学写作」，通过制作「查字典表」记录标签的大白话含义，最终能看懂静态页面的结构，如找到导航、按钮的ID或类名。
- 05学会「读代码」后，作者能将指令从「把那个按钮改一下」升级为「把id是xxx的那个按钮，背景色换成蓝色」，实现一次到位。
- 06作者提供了具体的「找坐标」操作步骤：通过浏览器开发者工具（F12或右键检查）选中页面元素，即可在右侧代码区看到该元素的类名（如 .wb-service-block），将其复制给Cursor即可精准定位。
- 07作者通过这套流程，将修改一个网页的时间从2周缩短到1小时。
反方 / 局限
- — 文章的核心方法（学读代码、报坐标）对完全零基础且不愿接触任何代码的设计师来说，学习门槛依然存在，作者本人也花了2周时间学习。
- — 该方法主要适用于静态页面或UI组件级别的细节调整，对于复杂的业务逻辑、状态管理或跨文件的重构场景，仅靠「报坐标」可能不够，需要更深入的代码理解。
12 分钟 · 3 卡片 · 8 资料
读原文 →