完美 Prompt 让 Claude 摆脱 AI 味，打造惊艳网站

中文Deutsch English Bahasa Indonesia 日本語 Português Русский

Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00这是 Impeccable，一个设计质量工具链，它能赋予你的开发框架深厚的设计知识

00:00:05通过识别 37 种设计反模式，帮助你打造精美的网站，防止你的 AI

00:00:12生成那些你已经见过无数次的平庸设计。它甚至能让

00:00:17人类在浏览器中进行非常精确的设计微调。但这又是另一个过度炒作的 AI 工具

00:00:22只会给你几个 Markdown 文件并耗尽你的 Token，还是它真的有用？点个订阅，让我们

00:00:28一探究竟。如果你看过我关于 Superpowers 的视频（那个帮助 Claude 写出更好代码的插件），

00:00:36那么这个工具也类似，但它专注于设计领域，而且效果不错。它提供了一个结构化的工作流，帮助 AI

00:00:42制作出精美的设计和网站，无论你使用哪种 Agent 或框架。它由 Paul Backhouse 开发，

00:00:47他是一位独立产品工程师，如果你年纪够大，可能还记得他制作的 JQUI，

00:00:53他在推特上更新 Impeccable 的进展已经很久了，我相信

00:00:58这正是它如此受欢迎的原因之一。那么让我们来试一下。我要为我的电影胶片工具

00:01:02构建一个主页，利用 Impeccable 将我脑海中的设计具象化并呈现在屏幕上。

00:01:08我们来看看效果如何。我将使用四个关键的子命令：teach、shape、

00:01:14craft 和 iterate。虽然 iterate 严格来说不算子命令，但稍后

00:01:19你会明白它的意思。开始吧。我已经通过 skill.sh 安装了 Impeccable 技能，

00:01:25并创建了一个空目录，所有的代码和设计文件都将存放在这里。现在

00:01:29打开 Claude Code，我要运行的第一条指令是 Impeccable teach 子命令，

00:01:34它会教导 AI 这个产品是为谁设计的，并生成一个 project.md 文件，其中包含

00:01:40产品用途、品牌形象和设计原则等重要内容。按下回车，

00:01:46它会提示产品目录为空，然后我们会进入第一轮问答。在

00:01:51继续之前，你需要意识到品牌（Brand）和产品（Product）之间的区别。

00:01:55产品的设计风格类似于这样，采用无衬线字体和半粗体字重

00:02:00层级，非常适合工具类或应用类；而品牌的设计风格

00:02:05则有更多衬线显示效果和斜体，非常适合社论或杂志类。在

00:02:10Impeccable 官网上有更多关于区别的信息，但针对我的具体案例，这将是一个“产品”。

00:02:15现在我已经写好了三个问题的答案，按下回车，它会

00:02:19再问几个关于个性、参考案例和受众的问题。现在我

00:02:24回答了这三个后续问题，提供了我喜欢的网站名称以及

00:02:28受众群体。回答完这些问题后，Impeccable 会生成 project.md 文件并给出一个

00:02:33摘要。在这个阶段，它会询问我们是否要运行 Impeccable document 来创建

00:02:38design.md 文件，或者触发 Impeccable shape 来帮助我们为

00:02:43主页制定设计语言。目前我想先跳转到 Impeccable shape，因为我想在

00:02:48创建设计文档之前先对设计有个概念。按下回车后，我们还有一轮问题来

00:02:53帮助生成设计简报。在某些情况下，或者使用某些框架时，Impeccable 会

00:02:59利用图像模型创建一个名为“探针（Probe）”的东西，这将被用来进一步增强

00:03:04设计，但由于 Claude Code 没有内置图像模型，我打算诱导 Impeccable

00:03:08去使用 GPT image 2。看看是否奏效。现在我已经回答了关于颜色风格、

00:03:14页面布局和所用技术栈的问题。我告诉它我的 Shell 中有 OpenAI Key，

00:03:20并且我想使用 GPT image 2 来创建探针。好的，它实际上已经完成了探针的制作，

00:03:25我们可以查看一下，并在 A、B、C 方案中做出选择。这是 A 方案，

00:03:30我非常喜欢。这是 B 方案，看起来也不错，但不如 A 方案。最后是 C 方案，

00:03:35这些 AI 生成的图像效果很好，但对我来说，胜出的绝对是 A 方案。

00:03:40所以我把详细信息传给它，过一会儿它会给我一份包含功能摘要、

00:03:45用户操作和许多其他信息的设计简报。我将回答它在

00:03:50最后提出的问题，希望它随后能完成设计。既然已经搞定，下一步本该是

00:03:55由我运行 Impeccable Craft，但它主动提出帮我完成，所以我选了“是”，

00:04:00它现在正使用 Astro 和 Tailwind 构建网站。大约五分钟后，

00:04:06它完成了设计的编码，制作了所有的 Astro 页面以及 Tailwind 配置，

00:04:11并给出了它实际完成工作的详细简报，看起来非常令人惊叹。我非常

00:04:17喜欢这里可以直接复制 URL，首先看到的是 macOS Alpha 版，测试视频虽然

00:04:23打不开，但它能加进去就很棒了，通过这个特效我们还能看到产品信息，

00:04:28我们可以拖动查看前后对比，这是一个很棒的小细节。我们甚至还有一些

00:04:33安装命令，底部还有一个可以正常工作的折叠式 FAQ。但我

00:04:37也发现了一些问题，比如这个关闭按钮非常小，这里的

00:04:43命令布局看起来也很奇怪。但在进入迭代阶段之前，我想先创建一个 Design.md 文件，以便我能

00:04:49在另一个会话中进行微调，让它了解我设计的一切。为此，我会运行 Impeccable

00:04:54Document，完成后会生成一份设计文档，包含从颜色

00:04:59到排版，甚至项目中使用的 CSS 和样式的所有内容。现在，我们要从这里

00:05:06开始迭代我们的设计，正如我之前提到的，这不仅仅是一个子命令，它可以包含

00:05:10多种操作。例如，如果我想添加动画，我可以对项目的特定部分

00:05:15添加 animate 子命令；我可以使用 bolder 让某些部分更粗，以便对比前后的

00:05:20差异；或者我可以使用 refine 部分的任何功能，或者让 Impeccable 自动

00:05:25润色设计。进行这种级别迭代的最佳方式，不是直接告诉框架

00:05:30我想更改哪个部分并给它一个子命令。相反，我可以使用 Impeccable

00:05:35Live，这是一个 Alpha 功能，通过在 Claude Code 中运行 Impeccable Live 来触发。它的作用

00:05:39是安装一系列脚本，然后通过 Astro 连接到我的网站，并在 8000 端口启动一个服务器，

00:05:46用于轮询我对实时网站所做的任何更改。所以，如果我打开浏览器查看网站，

00:05:52可以看到现在多了一个粉色的遮罩层，如果我点击某个部分，比如这个文本块，我就能

00:05:58看到之前展示过的选项，比如让内容更粗、更淡、添加润色等等，或者我可以直接

00:06:03输入我想要的精准效果。比如我可以输入“让这里的文字更大”，点击“执行”，这会

00:06:09直接发送给我的 Agent，并更新我实时网站中的代码。我们可以看到提示词已经发送

00:06:15给了 Claude Code，即“让文字更大”，并附带了需要更改的特定网站部分。

00:06:20我可以继续浏览网站的其他部分并进行类似的修改，直到我满意为止。

00:06:25例如，这部分代码文本很难阅读，我可以给它一个提示，

00:06:29选择我想要的变体数量，让 Impeccable 发挥作用，现在它看起来

00:06:34好多了，它甚至自动应用到了网站中显示代码的每一个部分。

00:06:39以上就是如何从零开始创建一个看起来非常惊艳的网站的快速演示，

00:06:44使用了 Impeccable、Claude Code 和 GPT image 2。老实说，这个工具适合那些

00:06:50想要创造美观事物，但又不想过深卷入设计细节的人。对于

00:06:55后者，我会建议使用像 Pencil 这样的工具，你可以在其中非常精确地调整位置、

00:06:59圆角以及设计的其他所有细节。如果你想了解更多关于 Pencil 的信息，

00:07:04可以去看看我之前做的视频。虽然 Impeccable 不受模型和框架限制，

00:07:10但我认为 Claude Code 可能不是配合它使用的最佳框架，纯粹是因为 Impeccable

00:07:15会消耗大量的 Token，特别是当你有一个庞大的产品和设计 MD 文件时，它们在

00:07:21每个 Impeccable 子命令中都会用到，而 Claude Code 配合 Claude 模型价格昂贵。

00:07:26如果我有机会再次进行这个实验，我很有可能会使用 Codex CLI 或 Codex GUI，

00:07:32它们允许生成图像，这样我就不需要特意指定使用 GPT image 2 模型了，

00:07:38因为 Impeccable 会自动处理，因为它能识别框架的能力，

00:07:43而且 Codex 或 GPT 模型在使用限制上要慷慨得多。现在我要尝试

00:07:47很多博主都会做的一件事，就是引导你去观看 YouTube 算法

00:07:53根据你的观看记录推荐的视频，快去看看吧。

Key Takeaway

通过 Impeccable 工具链结构化定义产品设计原则，配合 AI 自动生成并进行实时微调，能将开发流程标准化并大幅减少网站设计的 AI 味。

Highlights

Impeccable 使用 37 种设计反模式识别技术，协助开发框架生成高水准的网站 UI。
Teach 子命令通过构建 project.md 文件，将产品定位、品牌形象和设计原则系统化录入 AI。
Shape 子命令结合 GPT image 2 模型，利用视觉探针（Probe）生成三种差异化的设计视觉方案供用户筛选。
Craft 子命令自动完成 Astro 和 Tailwind 代码编写，并内置 FAQ 折叠组件等常见交互元素。
Live Alpha 功能通过 8000 端口轮询机制，支持在浏览器端对实时渲染的网站进行可视化微调。
Document 子命令能自动汇总全站样式参数至 design.md，确保后续迭代具备完整的上下文一致性。

Timeline

项目结构化与设计定义

Teach 子命令生成包含品牌属性和设计原则的 project.md。
产品设计风格区别于品牌设计风格，产品倾向于无衬线字体与明确的权重层级。

开发流程始于 teach 指令，通过问答形式定义产品目标与受众。项目将产品定义为应用类设计，注重清晰的功能呈现，而非杂志类的叙事风格。

设计方案生成与编码实现

Shape 子命令配合 GPT image 2 创建视觉探针以确定设计布局。
Craft 子命令自动构建基于 Astro 和 Tailwind 的网站代码结构。

系统利用图像模型生成三种设计方案供用户选择，确定方向后自动生成功能摘要。编码阶段产生完整的 Astro 页面及相关样式配置，包括 macOS 风格预览图和交互式 FAQ 组件。

设计文档化与实时迭代

Document 子命令将全站 CSS 和样式整合至 design.md。
Live 功能通过实时轮询机制实现浏览器端的可视化组件微调。

通过 Document 创建设计基准文档，实现跨会话的上下文记忆。Live 功能在 8000 端口启动服务器，将浏览器端的点击修改直接转化为 Agent 的代码更新，显著提升了针对特定排版细节的迭代效率。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video