我用 AI 画了个设计稿，然后让它自己写成了代码
·
最近折腾了一套让我直呼离谱的工作流——在 Cursor 里装一个叫 Pencil 的插件，用自然语言让 AI 在画布上画设计稿，画完之后再让 AI 直接把设计稿翻译成可运行的 React 代码。
整个过程下来，Figma 没开、CSS 没手写、设计参数也不用自己量。我拿 Apple Music 的界面做了个实验，效果还真挺像那么回事。
今天就把这套流程分享给大家。
简单说，Pencil 是一个运行在 Cursor / VS Code 里的 MCP 设计插件。它不是传统的拖拽式设计工具，而是通过 AI 对话来驱动设计——你用文字描述你想要的界面，AI 就在编辑器左侧的画布上帮你画出来。
关键是，它画出来的不是一张截图，而是带有完整设计参数的结构化数据：颜色值、圆角、间距、字体大小，全都有。这意味着后续写代码的时候，AI 可以直接读取这些参数，不用你再人肉对照。
汇聚全球AI编程工具，助力开发者即刻编程。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)