# Tom Krcha 发布 AI 智能体画布 pen.dev，支持导入网页编辑后回写代码

- 来源：AYi (@AYi_AInotes)
- 发布时间：2026-09-19 11:42
- AIHOT 分数：63
- AIHOT 链接：https://aihot.news/items/cmu7vc92l0s0grogr8dw0q7lh
- 原文链接：https://x.com/AYi_AInotes/status/2101155021450576341

## AI 摘要

前 Adobe XD 联合缔造者 Tom Krcha 发布 agentic canvas 产品 pen.dev，主打 Never start from scratch，可将任意网站或 Web App 导入画布迭代后推回代码。

## 正文

卧槽真的有点太燃了兄弟们！设计师盆友们必须看过来！！！
前 Adobe XD 联合缔造者、连卖了两家公司的硅谷设计老炮 Tom Krcha，
刚刚正式发布了新一代的 AI 智能体画布：http://pen.dev！
这一拳下去把过去十年设计师和程序员互相甩锅的桌子给当场砸得粉碎哈哈哈！

如果你平时做独立开发、写前端页面，你一定被这套反人类的流程折磨得想摔键盘：
在网上看中了一个极其惊艳的竞品页面，
你要么像个小偷一样开着 F12 一行行扒 CSS 和图片，
要么逼着自己当“网络小说家”，在聊天框里给大模型写几千字去描述“这里要留白、那里要圆角”；
改出来的代码对不上设计，设计的稿子落不进代码。

而 http://pen.dev 最炸裂的底牌就一句话：Never start from scratch（绝不从零开工）！
它直接把全网所有的网页，变成了你可以随意蹂躏的画布底料：

1️⃣ 降维打击的“一键逆向进画布”：
内置专用浏览器和 Chrome 插件，看中任何网页或者 Web App，
不需要切图、不需要逆向工程，点一下，
整个页面的排版、字体、高清图片、矢量层级，被完整扒下来、原汁原味地拍在你的画布上！
2️⃣ 在代码库里直接像改 Figma 一样改设计：
传统的画板是死的，而这是一个 Agentic Canvas（智能体画布）！
底层是用工业级 WebGL 管道写的，几万个图层放大缩小如丝般顺滑；
你可以用熟悉的快捷键手动拉贝塞尔曲线，
更可以通过 MCP 直接把你的 Claude Code、Cursor、甚至 ChatGPT 挂上去——
用鼠标圈住那一块区域，敲一句提示词，大模型像你的专属美工一样在画布上现场改样式、换布局、生成矢量图标；
3️⃣ 真正的绝杀：改完一键直接“回写代码（Push back to code）”：
这是它跟市面上所有设计软件拉开代差的一点！
它不是导出一堆不可维护的垃圾 HTML，
而是把画布上的视觉修改，直接转化成规范的前端组件，毫秒级推送回你的本地真实代码库！
设计稿就是代码，代码就是设计稿，中间的人工翻译损耗直接归零！

做产品最爽的境界，从来不是在空白画布前抓耳挠腮憋灵感；
而是把全世界最优秀的设计直接拉进你的工作台，
站在巨人的肩膀上，带着 Agent 舰队几十分钟完成二创重构，
然后一键打包上线。

个人单兵开发者的黄金时代，在今天又被这帮硅谷极客往前狠狠踹了一脚。
官方已全面开放下载，
经常为前端 UI 掉头发的朋友，今晚务必把它装上，自己去体验一把把别人网页直接拖进画布的极致快感！ https://x.com/tomkrcha/status/2100570466692071493/video/1

### 引用推文

> Tom Krcha：Introducing the new https://pen.dev, an agentic canvas for building bold ideas. Never start from scratch. Import any website or webapp to the canvas, iterate, a...