当前位置：首页>java>pencil.dev在代码中进行设计

pencil.dev在代码中进行设计

  • 2026-08-27 13:00:30
pencil.dev在代码中进行设计
不得不说官宣视频做的真的高大上，给产品加分不少
你有没有这种时刻：在 Figma 里画完设计稿，想让 AI 帮你还原，结果发现跟 AI 怎么也说不明白，光是改前端就废了很大的力气。这种协作的痛苦。今天聊聊 pencil.dev，它想解决的就是这个问题。

PART 01

它是什么？
一句话：IDE的设计模式。
Pencil 是个 AI 设计工具，但它不是又一个 Figma。它的定位很明确：把设计画布直接塞进 IDE 里，让设计文件和代码放在同一个 Git 仓库。
听起来有点抽象，简单说就是：你在 Pencil 里画的每个框、每个颜色，都是代码仓库的一部分。
这个思路挺野的。

PART 02

为什么要把设计放进 Git？
传统工作流是这样的：设计师在 Figma 画，开发在 IDE 写代码，两边各管各的。设计改了，开发不一定知道。代码改了，设计稿也不会自动更新。
Pencil 的逻辑是：既然设计和代码最终要合在一起，为什么不从一开始就放在同一个地方？
具体来说，它做了这几件事：
设计文件存在代码仓库里。不是导出成图片或者 JSON，而是直接作为仓库的一部分。你 commit 代码的时候，设计也一起 commit 了。
设计也有了“版本记录”和“平行时空”。想找回上周的设计？翻一下历史记录就能找回。想尝试不同的方案？开个“分支”随便画，不影响主稿。觉得两个方案都不错？直接把它们合二为一。
设计和代码永远同步。这个是最实在的。代码回滚到某个版本，设计也自动回到那个版本。不会出现"代码是新的，设计稿还是三周前的"这种情况。
我第一次看到这个思路的时候，觉得有点过度设计。但仔细想想，确实解决了一个真实痛点：设计和代码的版本对不上。

PART 03

Figma 怎么办？
Pencil 没打算替代 Figma。它的定位是：Figma 做探索，Pencil 做生产。
具体工作流是这样的：你还是在 Figma 里头脑风暴、画草图、试各种方案。等确定了方向，直接从 Figma 复制，粘贴到 Pencil。不是导出导入，就是 Ctrl+C、Ctrl+V。
官方说法是"无缝迁移，没有损坏的 SVG 或丢失的字体"。我没实测过，但如果真能做到这个程度，确实省事。
粘贴过来之后，Pencil 就接管了。你在画布上改文案、调颜色，AI 帮你生成对应的代码。改完直接 commit，设计和代码一起进仓库。
这个分工挺合理的。Figma 擅长的是快速试错，Pencil 擅长的是版本管理和代码集成。

PART 04

适合谁用？
Pencil 的目标用户很明确：会编码的设计师，或者会设计的开发者。
如果你是纯设计师，不碰代码，Figma 就够了。如果你是纯开发，不管设计，也用不上。但如果你两边都沾一点，或者你们团队设计和开发经常对不上版本，Pencil 可能有用。
还有一类人：玩 AI 编程的。现在很多人用 Cursor 写代码，让 AI 生成大框架，自己调细节。Pencil 就是把这个思路搬到设计上：你在画布上画大概，AI 帮你生成代码，你再调。
官方管这个叫"vibe coding"（氛围编码）。听起来挺玄，但意思就是：你负责方向，AI 负责细节。

PART 05

我的疑问
听起来挺好，但我有几个疑问。
学习成本。Pencil 要求你既懂设计，又要理解程序员那一套“版本管理”逻辑。对很多设计师来说，这套流程挺绕的。虽然它说“像管代码一样管设计”，但很多设计师只想安安静静画稿子，不想折腾这些复杂的技术操作。
团队协作。如果设计师搞不定这套流程，是开发帮着同步文件，还是设计师硬着头皮去学？这个配合的边界在哪，我还没想明白。
真的需要版本控制吗？对大项目来说，设计和代码版本对不上确实是个问题。但对小项目或者个人项目，这个痛点可能没那么强。
说实话，我觉得 Pencil 的思路很有意思，但它解决的是一个"高级问题"。如果你的团队已经被设计和代码版本不同步搞得很头疼，Pencil 可能是个解法。但如果你还没遇到这个问题，可能也不需要它。
工具再好，还是要看你的实际需求。
想了解更多关于 Pencil 的信息，可以去 [pencil.dev](https://pencil.dev) 看看。
也别忘了收藏、转发，点个"在看"。

END

看完记得关注我@元气菌

你的关注对我很重要哟

▼

本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：596563534@qq.com 。

苏州家长必看!少儿编程兴趣班精选指南,选对不踩坑

幼儿编程考试时间怎么安排?适合6-12岁孩子的考期参考

最新文章

随机文章