Deepseek 看不到网页设计效果，那就让 Pencil 当眼睛
最近做个项目，需要设计前端页面。中间踩了几个坑，也摸索出一条顺手的协作流程，记下来。
第一阶段：Codex
一开始用 Codex ChatGPT 直接写前端。写完跑起来一看，效果不对，得改。
Codex 内置浏览器支持批注——可以在页面上圈出问题、写注释，AI 直接看到。这个体验很好，改起来也快。
但额度很快就用完了，还有不少地方没改完。
第二阶段：Deepseek
于是切到 Deepseek 接力。Deepseek 目前没有多模态能力，截图发过去它认不出来，我只能靠文字说清要改什么。
沟通就成了问题。前端界面的很多调整——布局、间距、对齐——用文字说很费劲，而且双方对”往左移一点”的理解不一定一致。改了几轮之后，效率明显下降。
第三阶段：引入 Pencil
我换了一种思路：既然 Deepseek 看不懂截图，那就反过来，让它先在原型工具里把界面画出来。我看了原型、确认了效果，再让它照着原型改代码。
这里用到了 Pencil。它是一个基于代码的原型设计工具，AI 可以通过 skills 和 CLI 直接控制它，不需要手动操作界面。正好匹配当前场景：Deepseek 擅长写代码逻辑，Pencil 接受代码指令来生成界面。
流程是这样的：
- 先让 Deepseek 获取当前前端代码，生成对应的 Pencil 原型。
- 在 Pencil 里查看原型效果。需要调整的地方，让 Deepseek 修改原型；简单的调整自己手动改。
- 原型确定后，让 Deepseek 根据原型来修改前端代码。
实际跑下来，这个流程比纯文字沟通快很多。有了可视化的原型，双方对”要改成什么样”心里都有数，代码修改也就更准了。
小结
这次经历让我体会到一件事：不同 AI 工具各有擅长和不擅长的维度。Codex 多模态体验好但额度有限，Deepseek 上下文长、写代码强但看不到图，Pencil 接受代码驱动的原型编辑。把它们串起来，刚好覆盖了从设计沟通到代码实现的完整链路。
如果一开始就直接走这个流程——先在原型里确定设计，再写代码——应该能省不少时间。