00:00:00这是 Pencil，一款氛围感设计工具，它能将任何 AI 助手的提示词
00:00:05瞬间转化为极具视觉吸引力的设计，而且你可以像在 Figma 中一样直接对其进行编辑。
00:00:10它支持组件、UI 工具包、CSS 变量，而且完全免费。
00:00:15但在 Sketch 以及 Figma 新推出的 MCP 工具似乎都在做类似事情的情况下，
00:00:19Pencil 还会是设计师们愿意使用的工具吗？
00:00:22请点击订阅，让我们深入探讨一下。
00:00:24众所周知，AI 在设计方面的表现并不总是那么惊艳。
00:00:28我是说，看看这个就知道了。
00:00:30尽管使用尖端模型来提升技能确实有所帮助，
00:00:33但有时你还是想在进入编码阶段之前，微调一下设计或获得客户的确认。
00:00:38而这正是 Pencil 的用武之地。
00:00:40它是一款由智能体驱动的设计工具，可以在 IDE 中本地运行，也可以作为独立应用使用。
00:00:46对于像我一样喜欢使用 Claude Code 的人来说，它简直是完美的设计工具。
00:00:51那么，让我们来看一下快速演示。
00:00:52现在展现在眼前的就是 Pencil 的全貌。
00:00:54如果你用过 Figma，会感到非常亲切：左侧是各种选项，
00:00:59右侧则是针对画布或框架的一些特定设置。
00:01:03这是你完成 Pencil 设置后看到的第一个文件。
00:01:07我打算跳过第一步和第二步，
00:01:09直接进入第三步，让大家看看它到底是怎么运作的。
00:01:12这里有一个提示词，
00:01:14你可以点击运行，直接在旁边的聊天窗口中执行这个提示词。
00:01:18但我打算在终端里使用我的 Claude Code，
00:01:22因为那里有我的技能库、MCP 服务器以及我习惯的一切，
00:01:26这样 Pencil 就能充分利用这些资源。
00:01:29我先复制这段提示词。顺便祝 Claude Code 一周岁生日快乐，
00:01:33然后粘贴提示词，并告诉它使用 Pencil MCP 服务器，
00:01:37以防万一。
00:01:39基本上，这里的提示词是让 Pencil 为一个火星车管理平台设计仪表盘，
00:01:44并要求使用特定的组件。
00:01:45也就是下面这个 Lunaris UI 工具包里的组件。
00:01:50切回到框架，你可以看到它正在实时为我创建仪表盘。
00:01:56回到 Claude Code，我们可以具体看看它在做什么。
00:01:59它正在调用 Pencil MCP 的批量设计工具来填充导航栏。
00:02:05它已经完成了第一步，搭建好了主布局结构。
00:02:08回到 Pencil，你可以看到设计正在实时添加和更改。
00:02:13既然 Claude 已经运行完毕，我们现在就可以实时修改设计了。
00:02:17说实话，它能做到的程度让我印象非常深刻，
00:02:20从选择正确的图标，到匹配合适的配色，还有这里漂亮的胶囊形元素，
00:02:25甚至是这些很棒的按钮。
00:02:27我注意到“显示 10 条记录”离边框太近了。
00:02:31我只需点击它，然后稍微调整一下内边距即可。
00:02:34这就是 Pencil 的魅力所在。
00:02:36设计中任何你想改的地方，都可以像在 Figma 里那样操作，
00:02:40而且你并不受限于某一个 UI 工具包。
00:02:42事实上，这里有很多选择：从 Shadcn 到 Lunaris、Halo、Nitro 等等，
00:02:48甚至还有更多。
00:02:49如果我点击 Shadcn，在主题区域就能看到更多选项，
00:02:54比如切换到深色模式，更改主题色（比如把按钮设为黄色），
00:02:58甚至更改整体背景色。
00:03:01此外，还有很多 UI 工具包可以引导我进行设计。
00:03:05例如，让我们从头开始尝试一些全新的东西。
00:03:08点击这里，默认使用的是内置聊天，
00:03:11但我可以复制提示词并带入聊天窗口。
00:03:13在此之前，我先点“文件 - 新建”，开一个空白画布。
00:03:17然后我把宽度设为 800 以上，比如 1024，高度也调长一点。
00:03:24接着选中框架，让 Claude 使用样式指南。
00:03:28准备就绪后，我给它一个提示词：“为一个波西米亚风格的
00:03:32法式面包店创建一个网站，图片从 Unsplash 获取”等等。
00:03:36按下回车，看看它会生成什么。
00:03:39我完全不知道会发生什么，拭目以待。
00:03:42因为我正在使用“超级技能”，
00:03:45它会向我询问一些关于网站的后续问题。
00:03:47现在它开始工作了。
00:03:49它其实建议了一个比我最初设置更宽的框架。
00:03:52我快进一下视频，让进度走得快一点。
00:03:55现在看起来 Claude 已经完成了它承诺的三个页面。
00:03:59看看这些设计，说实话真的让人惊艳。
00:04:02虽然确实有一些我想改动的地方，
00:04:06但如果我在网上看到这个网站，我绝对想不到它是 AI 生成的，
00:04:10无论是 Logo、配图还是整个布局。
00:04:14这看起来太不可思议了。
00:04:16而且我并不担心那些小瑕疵，
00:04:17因为我只需要双击想要修改的部分。
00:04:20我可以像这样拖动文本，稍微修改一下内容。
00:04:24搞定，这就算修复好了。
00:04:26接着我让 Claude 把这个设计编码成一个可以运行的网站。
00:04:30这就是生成的站点。
00:04:32我没预料到它会加这个面包图案的背景，
00:04:35因为设计稿里没有，但也没关系。
00:04:38我们往下看。
00:04:39它几乎是一对一地还原了所有内容，非常厉害。
00:04:44去“我们的故事”页面看看，完美。
00:04:47和设计稿一模一样，有漂亮的排版，三个步骤说明，
00:04:52以及他们只使用自己也吃的原材料这一卖点，非常酷。
00:04:56所有图片都在正确的位置，连菜单看起来都很专业。
00:05:00我喜欢它在每一项最后添加的水平分割线。
00:05:04这种设计的精妙之处在于，既然它是 AI 创建的，
00:05:07我就可以把它连接到我的任何数据库，从而使用真实数据。
00:05:10我还可以使用任何其他 MCP 工具或技能来提升网站质量。
00:05:15更不用说，如果我已经在 Figma 中有了设计，
00:05:18我可以通过“文件 - 从 Figma 导入”功能，在 Pencil 中继续使用它们。
00:05:22我已经在简介里放了这个网站的链接，你们可以亲自去体验一下。
00:05:25通过提示词让各种设计凭空出现，这种体验真的非常有趣，
00:05:29看着它们在眼前一步步构建，事后还能自由编辑，这种感觉很神奇。
00:05:35另外，Pencil 文件是纯 JSON 格式，
00:05:38这使得 AI 智能体非常容易理解并将其转化为代码。
00:05:42尽管 Pencil 如此强大，但它并不完美。
00:05:46我在使用内置聊天时遇到过问题，不知为何它有时没有响应。
00:05:50新建文件时的生成状态层有时不会消失，除非我保存或重启 Pencil，
00:05:56而且在执行某些操作时，确实感觉有点慢。
00:05:59但坦白说，我认为这些都是团队目前正在努力解决的小问题，
00:06:04包括创建或导入像 Tailwind Plus 那样的自定义 UI 工具包的能力。
00:06:11顺便提醒一下，这个工具目前是完全免费使用的。
00:06:15所以快去尽情使用吧，因为它有风险投资背景，免费期可能不会永远持续。
00:06:19顺便说一下，我并不是设计师。没错，意不意外？
00:06:22虽然我还没试过 Figma 的 MCP 工具或者 Sketch 的那个，但根据网上的评价，
00:06:28Pencil 似乎要容易上手得多，因为它与许多工具的集成非常无缝。
00:06:34说到无缝，如果你想让 Claude Code 自动设计终端界面，而不是
00:06:39手动编写代码，那么请看看这个关于 Claude Canvas 的视频，
00:06:42它会准确地向你展示如何实现这一点。