前言我之前给 AI 画草稿真的烦。打开 Figma 太重截图发给 AI它又看不懂——「这按钮在哪」「那框多大」来回问三四轮。我就想能不能画完草稿直接告诉 AI 这是啥所以我写了个开源小工具Cute Design。仓库GitHub - youxianquqi/Cute-Design · GitHub它是什么五个图形方、圆、线、曲线、小人。浏览器打开就能用不装、不登录。重点不在「功能多」而在这一下画完 → 点「复制 AI 提示词」→ 粘贴给 DeepSeek / ChatGPT → 直接开写。生成出来大概是这种文字以下是我在 Cute Design 中设计的画布布局信息请据此理解页面结构坐标原点在画布左上角X 轴向右为正、Y 轴向下为正单位为像素提示图形名称如果不是系统默认的“类型序号”格式比如被我重命名为“红色圆角按钮”“蓝色虚线边框卡片”说明名称里写的是颜色、描边样式实线/虚线、圆角等具体视觉需求请按名称内容还原效果而不要只当成普通标签。画布尺寸 1440×931px。共有 5 个图形图层从下到上依次为deepseek信息1、红色边框、deepseek信息2、黄色园边框、deepseek信息3、紫色虚线边框、deepseek信息4、双边框、小人 1。图层列表从下到上共 5 个1. 「deepseek信息1、红色边框」矩形左上角坐标 (364, 46)宽 206px、高 246px中心点位于画布左上区域其包围盒与 [小人 1] 有重叠名称并非系统默认格式可能包含颜色/边框/圆角等具体样式需求请据此还原视觉效果。2. 「deepseek信息2、黄色园边框」矩形左上角坐标 (892, 141)宽 206px、高 246px中心点位于画布右上区域其包围盒与 [小人 1] 有重叠名称并非系统默认格式可能包含颜色/边框/圆角等具体样式需求请据此还原视觉效果。3. 「deepseek信息3、紫色虚线边框」矩形左上角坐标 (361, 445)宽 206px、高 246px中心点位于画布左中区域其包围盒与 [小人 1] 有重叠名称并非系统默认格式可能包含颜色/边框/圆角等具体样式需求请据此还原视觉效果。4. 「deepseek信息4、双边框」矩形左上角坐标 (890, 518)宽 206px、高 240px中心点位于画布右下区域其包围盒与 [小人 1] 有重叠名称并非系统默认格式可能包含颜色/边框/圆角等具体样式需求请据此还原视觉效果。5. 「小人 1」小人左上角坐标 (557, 220)宽 345px、高 591px中心点位于画布正中区域其包围盒与 [deepseek信息1、红色边框、deepseek信息2、黄色园边框、deepseek信息3、紫色虚线边框、deepseek信息4、双边框] 有重叠。以下图形被重命名过请重点关注其中可能包含的样式需求- 「deepseek信息1、红色边框」矩形图层第 1 层- 「deepseek信息2、黄色园边框」矩形图层第 2 层- 「deepseek信息3、紫色虚线边框」矩形图层第 3 层- 「deepseek信息4、双边框」矩形图层第 4 层【输出要求】网页须与画布一一对应铺满整个视口用百分比定位left/top/width/height 坐标÷画布宽高或把 画布宽×高 的容器非等比拉满 100vw×100vh画布四边贴齐屏幕四边禁止 contain 留白、禁止黑边/白边、禁止居中小画板。坐标、尺寸、图层顺序、旋转、重叠关系都会写上。纯文本 AI 也能读懂布局不用再嘴替翻译像素。让Grok4.5生成一张背景图插入对比一下以前现在截图 → AI 猜 → 你解释坐标 → 再解释图层 → 三四轮一键复制 → 完成我为什么做它不是要替代 Figma。专业设计工具该用还是用。只是觉得画个草稿不该这么重。Cute Design 就干两件事画得快——浏览器打开就用AI 看得懂——自动把画布翻译成文字直线吸附、贝塞尔曲线、多画布、快捷键这些都有但不是重点。重点是别再为草稿和坐标来回扯皮。另外右侧可以把图形名写成「红色圆角按钮」这种需求提示词会自动带出去AI 按名称还原样式。我怎么用接需求时客户边说我边拖三分钟画完复制提示词丢给 AI生成 Demo 发给客户。要改再拖再生成。写文档时流程图画完导出 JSON 贴进文档开发直接看结构。适合「先摆布局、再让 AI 写前端」不适合当完整视觉稿工具。怎么跑起来git clone gitgithub.com:youxianquqi/Cute-Design.gitcd Cute-Designpython -m http.server 8080浏览器打开本地地址即可。三个文件index.html、style.css、app.js无构建、无依赖。数据存在本机localStorage不出浏览器清缓存会丢重要稿建议导出 JSON 备份。结尾开源的GitHub 搜 Cute Design浏览器打开就跑。我自己烦了做出来的。你要也烦「跟 AI 一个像素一个像素地报坐标」可以试试。链接再放一次GitHub - youxianquqi/Cute-Design · GitHub