00:00:00这是 Penpot，一款与 Figma 等工具竞争的开源设计工具。
00:00:05起初，它看起来确实很像 Figma，但其运行逻辑完全不同。
00:00:10因为它在底层直接使用真实的 CSS，无需后续进行任何转换。
00:00:15这极大地改变了开发交接的问题。
00:00:18让我来展示一下我的意思。
00:00:20Penpot 是一款基于浏览器的 UI 设计和原型制作工具。
00:00:29从表面上看，它确实听起来像 Figma 或 Sketch。
00:00:32但实际上，这里有主要的区别。
00:00:35Penpot 是 100% 开源的，并且构建在真正的 Web 标准之上。
00:00:40即 SVG、CSS Flexbox、Grid 和 HTML。
00:00:43所以，你不需要在后续还需要解码和重构的工具中进行设计，
00:00:49你所做的工作已经更接近 Web 的实际运行方式了。
00:00:52你可以用一条 Docker 命令进行自托管，
00:00:54这也是我在这段视频中要演示的内容，因为这就是我所专注的方向。
00:00:58即开源版本的工具以及如何对比它们。
00:01:01在 Penpot 中，设计师依然拥有组件、布局和原型功能。
00:01:06但开发人员得到了真正重要的东西，即看起来像真实代码的输出。
00:01:11没有奇怪的中间层，也不需要猜测正在发生什么。
00:01:14而且它是免费的。
00:01:15无限文件，无限协作者，这就是人们关心它的原因。
00:01:20如果你喜欢开源工具和能够加速工作流程的编程技巧，
00:01:23请务必订阅本频道。
00:01:25我们一直在推出新视频。
00:01:27现在，Penpot 是一款设计工具。
00:01:28那么你为什么要关心它呢？尤其是作为开发者的你？
00:01:31因为它解决了一个非常具体的问题。
00:01:34即项目交接或将设计转化为真实代码的痛苦。
00:01:39Penpot 让设计感觉就像是 Web 原生的。
00:01:42所以当你检查某个元素时，你不需要猜测，而是在阅读代码。
00:01:46让我展示给你看。
00:01:48好了，现在开始快速演示。
00:01:50这正运行在我自托管的 Penpot 实例上。
00:01:54我使用了刚才配置的官方 Docker Compose 文件，
00:01:58通过一条“Docker Compose up”命令就将其启动了。
00:02:00这非常棒。
00:02:02虽然启动它花了一些时间，但一旦运行起来，效果非常好。
00:02:07我们得到了一个漂亮的登录页面，外观整洁，可以在这里创建新项目。
00:02:12现在让我们来构建一些东西，就一个简单的卡片，没什么特别的。
00:02:16就一个容器，设置为 Flexbox 布局，添加一些内边距。
00:02:21我会放入一个标题、一些文字和一个按钮。
00:02:24也许再多加一点，再加一个卡片，我可以复制粘贴。
00:02:28我会做一些快速编辑。
00:02:30我们将切换到检查模式。
00:02:32这部分非常重要。
00:02:33你可以在实际 CSS 中获得清晰的结构、Flexbox 属性、间距和布局。
00:02:39这不是粗略的转换，而是你已经理解的东西。
00:02:42你可以直接复制并放入你的项目中。
00:02:46你还可以使用变体、令牌、原型流程，以及导出为 SVG。
00:02:51这就是这里的重点。
00:02:52这消除了开发团队的大量阻力，
00:02:54尤其是当你独自负责整个技术栈时。
00:02:58现在让我们谈谈大多数开发者感到怀疑的部分。
00:03:02起初，这听起来像是：酷，又一个设计工具。
00:03:06但区别不在于它看起来如何，而在于它的工作方式。
00:03:09Figma 是在模拟布局。
00:03:12它的自动布局功能受到 Flexbox 的启发，但你最终还是要在脑海中进行转换。
00:03:16（脑子里的转换）
00:03:17Penpot 的起点更接近实际的 CSS，所以
00:03:21在设计和代码之间的心理转换会少很多。
00:03:25还有锁定（Lock-in）的问题，对吧？
00:03:26Figma 使用私有文件格式。
00:03:29我们还要面对按席位收费的模式。
00:03:31而 Penpot 是开源的，所以你可以自托管它。
00:03:34你的数据保留在 SVG、CSS 和 JSON 中。
00:03:38交接过程也不同，因为在 Figma 中这感觉像是一个额外的层，对吧？
00:03:42开发模式、插件、额外的步骤。
00:03:45在 Penpot 中，它直接内置了。
00:03:47检查视图已经更接近我们实际需要的了。
00:03:50平心而论，Figma 很棒。
00:03:53我在用它，它很大，是一个完善的生态系统。
00:03:56但 Penpot 从一开始就是为开发者考虑的。
00:04:00那么开发者到底喜欢它的什么呢？
00:04:02嗯，我刚才说过最大的优点了，对吧？
00:04:04很简单，交接问题变小了。
00:04:07这对我们来说非常重要。
00:04:08你不再需要进行布局的逆向工程了。
00:04:11你读取的内容可以直接映射到 CSS。
00:04:15这也体现在设计令牌（Design Tokens）中。
00:04:18颜色、间距、排版，它们的结构方式更接近
00:04:22你已经习惯的编码思维。
00:04:24而且对于一些团队来说，自托管是一件大事。
00:04:27如果你关心隐私、内部工具、CI/CD，这些都很重要，对吧？
00:04:33但开源并不完美，没有工具是完美的，即使是 Figma，对吧？
00:04:37Penpot 在处理超大文件时可能会有些吃力。
00:04:40插件生态系统也小得多。
00:04:43而且如果你深陷 Figma 的使用习惯中，那会有一定的学习曲线，
00:04:47但老实说，它非常容易上手，因为它代表了一种不同的思维方式。
00:04:51所以，虽然在某些方面不够精致，但它大大缩小了设计和
00:04:56开发之间的差距，老实说，这正是我们许多人所追求的。
00:04:59那么，它值得使用吗？
00:05:01我认为值得。
00:05:02这很有趣。
00:05:02我喜欢这样的工具。
00:05:03所以对于你们中的许多开发者来说，是的。
00:05:06如果你正在从事副业或任何开发繁重的项目，这是有意义的，
00:05:10特别是如果你关心省钱的话，对吧？
00:05:12你正在构建 MVP，或者构建类似这样的东西，
00:05:14你试图避免技术锁定，并且
00:05:16想要获得能够干净地转换为代码的设计。
00:05:19现在，如果你在一家拥有庞大设计系统的大公司，
00:05:23你们已经围绕 Figma 构建了一切。
00:05:24所以你们可能不会切换到这个工具，至少不会一夜之间切换，但
00:05:28这并不是重点。
00:05:29Penpot 不需要取代一切就能发挥价值。
00:05:31对于许多团队，对于你们中的许多人来说，它涵盖了你所需的大部分功能，
00:05:35它让开发速度更快。
00:05:36这就是为什么越来越多的开发者开始真正尝试它。
00:05:39它减少了将设计转化为代码所需的交接时间。
00:05:45如果你想尝试一下，非常简单。
00:05:46前往 Penpot App，使用云端版本，或者像我一样操作。
00:05:50如果你想要更多控制权，就用 Docker 进行自托管。
00:05:54如果你喜欢这样的开源工具和编程技巧，
00:05:57请务必订阅 Better Stack 频道。
00:05:59我们在下一个视频再见。