00:00:00为什么从设计到代码的交付，依然是 AI 开发中最令人头疼的环节？
00:00:04按理说现在应该有一种顺畅的方式，让人在设计完某个东西后，
00:00:06只要修改设计，代码就能随之更新。
00:00:08但我们团队尝试过的所有工具，要么只管设计，要么只管代码，从未两者兼顾。
00:00:13Stitch 和 Bolt 属于“提示词转代码”，没有可以返回并修改的设计画布。
00:00:17Figma 的 MCP 是只读的，AI 可以从中提取设计，但无法在上面进行设计。
00:00:22如果你直接使用编程智能体，每次设计改动都意味着要从头开始重新输入提示词。
00:00:26所以当 Pencil.dev 开始走红，并声称它是设计与代码之间的双向桥梁时，
00:00:31引起了我们的关注。但当我们真正开始用它构建项目时，
00:00:35这座桥梁并没有预想中那么无缝。最初只是想测试一个工具，
00:00:40结果我们团队研究得比计划深得多，才真正让这个工作流运转起来。
00:00:44所以你可能已经听说过 Pencil.dev 了，
00:00:47这款新型 AI 设计工具最近在设计师圈子里非常流行。
00:00:51它基本上是连接专业设计工具
00:00:56与专门用于实现这些设计模式的 AI 开发工具之间的桥梁。
00:01:00它连接了所有主流的智能体 IDE，并包含许多功能，
00:01:04能让设计到代码的工作流更顺畅，比如组件生成、
00:01:08UI 库支持以及自动生成 CSS 类。
00:01:11对于一直使用 Figma 的人来说，它的界面可能感觉最接近 Figma。
00:01:15它目前是免费的，我们团队下载了它来测试。
00:01:18我们下载了桌面客户端，随后就有了连接所有已安装 AI 平台的选项。
00:01:23我们把它连接到了 Claude Code，因为那是我们主要使用的工具，
00:01:27Pencil.dev 基本上是在底层调用 Claude Code 和 Codex 等 AI 编程平台来工作的。
00:01:32桌面客户端安装完成后，
00:01:36MCP 自动为 Pencil.dev 配置好了，所有工具立刻出现在了 Claude Code 中。
00:01:41设置好后，聊天界面里可以使用所有的 OpenAI 和 Anthropic 模型。
00:01:46在所有模型中，我们选择了 Opus 4.6。这个工具有着强大的设计能力。
00:01:51它将设计文件以 .pen 文件的形式保存在项目文件夹中，
00:01:56这基本上是一种基于 JSON 的格式，你也可以用 Git 进行版本追踪。但真正
00:02:01让它脱颖而出的是它在编程智能体与应用设计之间充当双向桥梁的能力。
00:02:06但当我们考虑到这种双向同步该如何运作时，它并不完全符合我们的预期。
00:02:10我们原以为 Claude 或任何 AI 智能体会自动同步设计到代码，反之亦然，
00:02:16但实际并非如此。我们必须手动提示它进行同步，
00:02:21因为它不会自动将设计同步到代码。同步时，它会逐部分分析设计，
00:02:26然后在 HTML 文件中实现。它确实精准还原了画布上的设计，
00:02:32但我们觉得每次修改设计后都要重复这一步，开销太大了。
00:02:37我们团队当时正在为一个创意导演工作室制作着陆页，
00:02:41我们已经用连接了 Claude Code 的 Pencil.dev 设计好了。从效果来看，
00:02:46这是一个很棒的网站，创意方向表达得非常清晰，正如我们所愿。
00:02:51我们用 Claude 实现了一次设计，并将其同步到了正在开发的 Next.js 项目中，
00:02:56但页面上有很多我们不喜欢的元素，需要修改。我们需要
00:03:01在项目中反复更改许多东西，但我们不能一直跑去跟 Claude 说，“再跟已实现的项目同步一次”，
00:03:06因为这纯粹是重复劳动。于是，
00:03:10我们写了一个脚本来解决这个问题。这个脚本使用了多个专门用于监控文件变化的 JavaScript 库。
00:03:15它还设置了冷却时间，以防止 Claude 被频繁触发，
00:03:20从而浪费 Token 并导致会话达到限制。这个脚本
00:03:25的全部目的就是持续监控包含设计的 .pen 文件，每当
00:03:29文件发生变化时，它就会启动 Claude CLI，并带上如何同步到项目的提示词。
00:03:34但我们加入了冷却时间，在每次保存之间产生间隙，这样它就不会直接同步所有细微的变化。
00:03:39现在要使用它，我们只需运行 `npm run sync` 命令，
00:03:44工作进程会立即启动并开始监控带有我们设计的 .pen 文件。如果我们
00:03:49在运行脚本时修改了任何内容，每当我们按下保存快捷键时，它都会
00:03:54自动触发 Claude CLI，并开始将该更改同步到项目中，无需我们显式告知。
00:03:59但在使用此脚本之前，你必须完成一个预备步骤。你必须预先配置好
00:04:04编辑所需的所有权限，例如读写权限和 MCP 工具调用权限，
00:04:10具体方法是将其添加到 .claude 文件夹内的 settings.json 中。因为如果不加，Claude 就会
00:04:15无限期地卡在权限提示上。没有这个，Claude 就无法修改项目，
00:04:20也就无法正常完成实现。有了这个脚本，一切都变得简单了，
00:04:24因为我们不再需要手动提示同步到项目。每一次迭代
00:04:29都会被脚本监控，并自动发送给 Claude 进行实现。现在，这个脚本
00:04:34连同该应用的源代码，都可以在 AI Labs Pro 中找到。对于那些还不知道的人，
00:04:39这是我们最近推出的社区，你可以在那里获得即插即用的模板，
00:04:43用于你自己的项目，包含本视频及之前所有视频的内容。如果你觉得我们的工作有价值并想
00:04:48支持这个频道，这是最好的方式。链接在描述栏里。Claude Code
00:04:52的功能之一是使用多智能体系统，这可以并行化并加速许多任务。
00:04:57我们想，为什么不尝试将多智能体设置与 Pencil.dev 结合使用呢？由于它本来就是作为 MCP 连接的，
00:05:02我们尝试使用多个智能体进行 Next 实现，让每个智能体同时处理
00:05:07应用的不同方面。配合 Claude Code 使用让一切变得更容易，因为它能访问
00:05:12我们存储的所有文档文件作为上下文，比如我们在动工前通常会创建的 PRD 和 UI 指南。
00:05:18我们需要实现网站的其他页面，而不仅仅是一个着陆页。
00:05:23我们明确要求它处理这个任务，让每个智能体负责
00:05:28我们想要构建的应用的不同部分。于是我们从探索阶段开始，调用了多个
00:05:33MCP 工具。既然我们有五个页面，Claude 就生成了五个智能体，让每个智能体专门负责
00:05:39一个页面。过了一会儿，应用程序设计的初始版本就创建好了。它生成了
00:05:44应用所需的所有页面，并确保设计与着陆页匹配，在整个过程中使用了
00:05:48相同的字体和样式。设计完成后，我们按下 Command + S 保存文件，
00:05:54脚本便自动运行，将设计实现在应用中，从而加速了
00:05:58原本的手动过程。虽然此时网站看起来很扎实，但总觉得少了点什么。
00:06:03页面上没有动效，它需要一些滚动动画来引导视线，
00:06:08否则布局就太死板了。为此，我们选择了 GSAP，这是我们的首选库，因为它
00:06:14拥有强大的 JavaScript 动画功能，且易于实现复杂的动画。针对这一点，我们
00:06:19实际上编写了一个非常详细的 XML 格式提示词。我们使用 XML 是因为 Claude 模型经过专门优化，
00:06:26能更好地处理 XML 结构的提示词，这能让它们更容易解析指令。该提示词
00:06:31包含了任务详情、所有必需的依赖项以及所有重要的注意事项，
00:06:36针对每一个特定元素，并在各自的标签中精确指定了每个部分的表现方式。
00:06:41当我们把这个提示词交给 Claude Code 时，它进行了大量补充，添加了
00:06:46带有 GSAP 动效的组件，并安装了 GSAP 本身。当这部分实现
00:06:51完成后，我们查看了网站。加入动画后，网站变得更加生动、
00:06:56更具交互性。整个网站的体验感觉与之前的版本完全不同，
00:07:00之前的版本只是静态的，完全没有动效。现在，这个提示词也可以在我们的
00:07:04AI Labs Pro 社区中找到，你可以下载并用于你自己的项目。另外，如果你
00:07:09喜欢我们的内容，请考虑按下 Hype 按钮，因为这能帮助我们创作更多
00:07:14类似的内容并触达更多观众。虽然我们已经使用 GSAP 添加了滚动视觉效果，
00:07:19但我们在初始的 GSAP 滚动之上又添加了一层 Lenis。Lenis 是一个
00:07:25开源的平滑滚动库，是创建更具沉浸感网页布局的最流行工具之一。
00:07:30你可能会问，既然已经配置了 GSAP 滚动动画，为什么还要用另一个库？
00:07:35原因在于：Lenis 和 GSAP 实际上是相辅相成的。GSAP 控制
00:07:39滚动时发生的事情，而 Lenis 则控制滚动本身的外观和感觉。
00:07:44没有 Lenis，滚动会在位置间跳跃；有了它，页面流动会很平滑，
00:07:49GSAP 动画触发时也会感觉更自然。针对这项任务，我们准备了另一个详细的提示词。
00:07:54我们采用了与 GSAP 相同的 XML 提示方法。Lenis 提示词
00:07:59侧重于增强上一步中添加的现有滚动动画。该提示词
00:08:04列出了依赖项，设定了所有指令，并详细描述了
00:08:09元素、如何放置动画以及行为功能，最后以规则结尾。我们
00:08:13把这个提示词给了 Claude Code，让它在整个代码仓库中进行了大量修改。一旦
00:08:18它实现了一切，我们查看网站，发现有了显著提升。最主要的改动
00:08:23是加入了更平滑的滚动，使网站导航变成了一种更具沉浸感的体验。
00:08:28网站构建完成并具备所有功能后，最后剩下的一件事就是
00:08:32在完工前确保它符合 UX 标准。为此，我们使用
00:08:38Skill Creator 创建了一个名为“UX Audit”的技能。这个技能旨在检查 UI 元素的质量，
00:08:44审核网站的不同方面，并确保一切都符合 UX 标准。
00:08:49它包含多个阶段，如收集上下文、分析九点清单以及
00:08:54根据一套标准进行评分的报告阶段。它还包含了 UX 清单参考，
00:08:59其中有九个要点的详细细节，以及旨在通过编程方式
00:09:04捕捉各种 UX 问题的 Python 脚本——那些肉眼可能会遗漏的问题。
00:09:08运行审核技能后，它汇总了所有问题，并标记了两个严重问题以及多个主要和次要问题。
00:09:14严重问题在于颜色的对比度。由于发现的所有这些问题，评分指标将网站
00:09:19评为 C 级。它详细列出了所有需要的改动，
00:09:24一旦确定了改动，我们就让它去执行修复。在所有改动
00:09:29完成后，网站虽然看起来可能没有显著差异，但在可用性方面有了巨大的提升，
00:09:34使其更容易导航，并且也符合 WCAG 标准。当我们再次运行审核技能时，网站
00:09:40排名从 C 提高到了 B，这意味着所有主要问题都已修复，只剩下几个次要问题。
00:09:45本视频到此结束。如果你想支持本频道并帮助我们
00:09:50继续制作此类视频，可以通过下方的 Super Thanks 按钮进行支持。一如既往，
00:09:55感谢收看，我们下期再见。