这次分享的是我做一个 Chrome 插件+FIgma 插件：
Web to Figma Paste + Web to Ai Prompt Assistant
功能很简单：
Web to Figma Paste
-
把网页内容复制下来
-
直接在 Figma 里 Cmd / Ctrl + V 粘贴使用
Web to Ai Prompt Assistant
-
把复制进来的网页去除品牌和调性，模块化处理，变成框架图
-
根据框架图生成变体框架，可一键提取网页框架提示词
重要的不是插件本身，而是：
我第一次完整走通了一个从想法 → 开发 → 打磨 → 可发布的全过程。
很多设计师开始都会停在想的阶段：
AI现在能做成什么样？真实项目能不能做？
我该做什么？
其实我建议大家一定要去玩，去动手，当你开始后，你会在使用的过程中有很多想法，而且我之前也建议过，你把自己完全当一个什么都不会的人，每一个步骤都去找对应的AI来做，让自己体验全流程AI在工作流里面到底能发挥到什么程度。下面可以看下我的 “无脑” 过程。
当时 Figma MCP + Codex 可以互通的消息刚出来，我第一时间去试了一下。Figma 着急了！Codex 和 Figma 双向构建前端 UI
很快我发现了一个非常有意思的点：
Codex 生成的 Figma 文件，是网页版的，然后点击后传送到客户端
可以直接选中元素、进行编辑
这和之前很多“生成设计稿”的方式不一样。于是我就去问Codex，为什么现在要这样处理，这是通过什么方案实现的，这个能力我能不能复用？因为我平时自己也有个需求：很多模块类似的，可以直接复用过来，自己再去填充内容和修改，效率会很高，而且它们模块化、图层、约束处理的都很规范，可以极大的提升效率。
学会提问：截图+链接+问题
Codex 这点比GPT强，它会去帮你扒你提供的底层逻辑和代码，比GPT更容易获得准确答案。
下一步就是直接问它，这个能力怎么用，让它给你出方案。
很多人会在这里卡住，或者收不住，觉得它做的东西跟我想的和描述的差很多，一开始你得把边界想清楚，它负责发散，你负责掌控，比如：
我让它发散完后，提供了明确的边界：
-
这是一个 Chrome 扩展 -
主流程：网页 → 扩展 → 复制 → Figma 粘贴 -
次流程：Figma 插件 → 转模块化AI提示词 -
不依赖本地 bridge -
输出必须是“可编辑结构”，不是截图 -
方案必须合规可通过审核
这一步对用 Codex 非常重要。如果你不说清楚，它一定会“帮你多做”：
-
你想做插件，它可能帮你扩成平台 -
你只要复制，它可能建议你做同步系统 -
你要结构化，它可能退化成截图
所以第一原则是：先让 AI 知道“不该做什么”。如图所示，如果你不把边界写清楚，它会无限帮你扩大，做大做强。但是换个角度，它自身的产品能力也是非常强的，很多功能和细节，说实话我自己都没想，它会帮你考虑的非常全面。
这就是你为什么要做一次，因为它真的越来越比你 “专业” 。
真正的工作，发生在 MVP 之后
很多人做到这一步就停了：因为能用了
实际真正的工作，才开始：初版出来后，我也遇到很多问题，几乎全部来自真实使用：
-
用户不知道复制是否成功 -
切到 Figma 粘贴有延迟 -
工具卡片挡住网页内容 -
选择模式不好退出 -
深浅色主题不统一 -
报错信息太技术化 -
插件样式影响网页 -
动态网页内容抓取不全
这一阶段，Codex 的角色发生了变化：
不再只是写功能，而是开始参与你的产品打磨，用的越多，你会发现它比你专业，给出的解决方案很全面，为什么这么说，例如：
很多网站图片都是分页加载的，这就导致一开始插件抓不到部分图片，我肯定是不懂这个技术该如何处理的。所以最好的办法就是
直接问它！它可以解决你遇到的 95% 的问题。
如下右图，它提供了方案，先模拟人从上到下浏览一次，分批抓取，最后再合成一个整体。具体咋实现的，我还真不懂，你也不用懂，你只需要关注，结果是不是你想要的。
当你发现流程基本没问题，再去解决视觉和交互问题：
你只需要给它输入：
-
“这个 hover 太重了” -
“这个提示太长了” -
“这个模式没法退出” -
“这个 UI 会挡住用户头像”
就这么简单，唯一的要求就是，你得和它聊得到一块，简单说就是，你说的按钮是它理解的按钮，如果你记不住，你就自己定义，比如你可以把告诉它，“状态显示区域”，后面我们就叫“状态区” ，然后具体怎么改，直接说，基本都能解决。
用 AI 做项目最容易失控的一点是：一直加东西，如果一个对话你一直回复好的，你会发现它能给你造个天大的项目出来。
所以一定要在项目里专门加了一份稳定性文档，明确规定：
-
主流程不能被改散 -
不引入新路径 -
不做 bridge -
样式必须在 shadow DOM -
不影响网页 -
不允许退化为截图
千万不要小看这个，我经常看到新手用户给我反馈，越修改，本来好好的功能就变了，或者改错了，然后说是模型降智了，要不就是AI生成的还是不够智能......
一定记住：
每一次修改，都可能破坏核心价值，AI 不是靠记忆变稳定，而是靠规则。
可以参考我的步骤，没做一个小版本或者新功能，就让它更新一下规则。
一个项目做到能用，和做到能发布，是两回事。
你想要完整的发布，还有很多杂事要做，但是现在我都扔给Codex 。
这个阶段，Codex 的价值反而更明显：
它可以帮你：
-
整理版本说明 -
写商店文案 -
检查版本号 -
补齐文档 -
做发布 checklist
AI 不只是帮你写代码，而是在帮你“ 把产品做完整 ”。
如果只看结果，这个插件其实不难，体量小，没啥可做的，但如果看完整过程，说明了一件更重要的事：
现在的 AI 是可以参与完整产品流程的，它会全流程协助你推进。
你要自己去玩，不要听人云亦云现在还不行，还不成熟，还是那句话，你要把它加入到你的队伍，而不是等它让你加入。
插件放在我们的收录网站，感兴趣的小伙伴可以去这里体验：radesign.cn
近期我发现类似的插件多了十几个，只要有想法，现在大家都可以一个人做到了！
最后一句话总结
不要把 Codex 当成写代码的工具。把它当成一个可以陪你把产品从 0 做到可发布的搭档吧，快去动起手来。
最最后，下期分享一下0-1 搭建一个完整的具备前后端网站的实操过程，全程没动手设计～
就是这个网站，里面收录各位设计师 Coding 的项目： radesign.cn
欢迎大家多尝试，把自己成熟/不成熟的 Vibe 产品分享出来，一起交流进步～
评论区 (0)
最新评论登录后发布评论并参与互动。
暂无评论，欢迎抢沙发。