Transcript
00:00:00Kimi K3 刚刚发布，这是一个非常强大的模型，水平与 Claude 的 Fable 5 和 GPT 5.6 相当。
00:00:06它最大的亮点在于极其擅长前端开发，
00:00:09效果好到人们甚至称它的 UI 设计能力超越了目前市面上的任何其他模型。
00:00:14它的表现确实惊艳，但其中有个坑，而且这并不只是 Kimi 独有的问题。
00:00:17每个 AI 模型都有自己固有的设计风格，用久了你就会察觉到。
00:00:22每当有新模型发布时，大家都会夸它是最强前端，刚做前几个网站时也确实感觉不错。
00:00:28但事实是，它们在每个设计里都会重复套用各自固定的套路。
00:00:32无论是 Sonnet 4.5 还是 GPT 5.6，这些模板化的痕迹都会不断出现在设计中。
00:00:38因此，无论你使用哪个模型，都需要某种手段打破这种默认预设，而这恰恰也是优秀设计师的作用。
00:00:43打破这种同质化的最佳技巧之一，就是名为 Hallmark 的 Skill。
00:00:46如果你是第一次来到这里，我们是一家软件公司，这里是我们的频道 AI Labs，
00:00:50在这里我们会展示如何用 AI 优化你的业务；如果你还没有自己的业务，
00:00:54也可以利用这些技能帮助他人做优化来赚取报酬。
00:00:58在这支视频中，我们将深入探讨 Kimi 模型、它的前端设计能力，以及去除这些模式化设计的技巧。
00:01:05你可能已经了解 Kimi K3 是 Moonshot 最顶尖的模型之一，但对于不太熟悉的朋友，这里做个快速回顾。
00:01:11Moonshot AI 将其作为旗舰模型发布，它迅速掀起了热潮。
00:01:15最重磅的一点是，它现在也加入了具备百万级 Token 上下文窗口的模型行列。
00:01:20在性能方面，它在多个领域均可媲美 Fable 5 和 GPT 5.6，而这两者是目前最顶级的模型。
00:01:26为了进行对比，我们参考了 Artificial Analysis 的基准测试，它对模型在不同维度的表现进行了评估。
00:01:32在智力方面，它大幅领先 Opus 4.8 和全新的 Gemini 3.6，仅略微落后于 Fable 5 和 GPT 5.6。
00:01:40而且数据上的差距非常微小，基本处于同一梯队。
00:01:44而在前端设计方面，根据 LM Arena 的测试结果，它甚至超越了那两个顶级模型。
00:01:48LM Arena 让不同模型在相同提示词下竞争，并根据真实用户的评价进行排名。
00:01:54Kimi 在这方面表现出色的原因之一，是其依托强大视觉能力所构建的内置“Vision in the Loop”机制。
00:02:00简单来说，这个模型不仅写代码，还会实时检查自己构建出的画面。
00:02:04大多数模型仅仅通过阅读代码来预测网站的效果，
00:02:07但 Kimi 会对生成的界面截图，评估实际视觉效果，并在此基础上进行调整。
00:02:11这也是为什么大家都觉得它的前端能力更胜一筹的关键原因。
00:02:15与其它模型相比，它生成的间距和布局显得更加均衡且富有目的感。
00:02:19接下来是成本问题。
00:02:20这也是 Kimi 展现出真正优势的地方。
00:02:22它的定价为输入每百万 Token 3 美元，输出每百万 Token 15 美元。
00:02:27GPT 5.6 稍微贵一点，输入 5 美元，输出 30 美元。
00:02:32而 Fable 是目前最贵的，输入 10 美元，输出 50 美元。
00:02:36因此 Kimi 在三者中价格最低，却能提供同等梯队的顶尖性能。
00:02:41此外，Kimi 还附带了自己的专属 Harness 客户端 Kimi Code，它是随 K2.5 模型一同推出的。
00:02:47这是一款基于终端的编程 Agent，能让你无需直接调用 API 即可使用 Kimi。
00:02:52但在实际体验 Kimi Code 时，我们发现它的运行速度非常慢。
00:02:55一个在 Claude Code 或 Codex 上大约耗时 3 分钟的任务，在 Kimi Code 上需要近 10 分钟。
00:03:00这主要是由两个因素导致的。
00:03:01首先是 Kimi 的权重尚未开源，这意味着该模型仅由 Kimi 官方托管，没有其他服务器提供支持。
00:03:08因此，每一个请求都必须发送回 Kimi 自己的服务器。
00:03:12当这些服务器过载时，你的所有提问都需要等待更长时间才能得到响应。
00:03:16第二个因素是 Harness 客户端本身。
00:03:17即使是在旧模型上，我们也觉得它不够好用，Kimi 官方在文档中也承认该工具并非为了发挥 K3 的全部潜力而设计。
00:03:25除了速度慢之外，还有另外两个问题。
00:03:27一个是上下文管理。
00:03:28在使用 Codex 和 Claude Code 时，我们会根据接下来的任务频繁切换模型，而它们都能很好地保留上下文。
00:03:36但在 Kimi Code 中你很难做到这一点，因为当切换模型时，该工具保持对话上下文的方式会失效。
00:03:43另一个是 Sub-agents 子代理的问题。
00:03:44在运行时，它看起来像是启动了海量的子代理。
00:03:47但事后询问时，它却表示仅启动了 5 个来处理任务。
00:03:51因此为了准确测试该模型，我们改在 Claude Code 内部运行它，效果出奇的好。
00:03:57而 Kimi 也恰好提供了实现这种配置的途径。
00:03:59在 Claude Code 中运行 Kimi 的一种方式是直接通过其 API。
00:04:03但这样账单开销会很大，因为模型读写的每个字词都会被计费，高频使用下费用会迅速累积。
00:04:10因此更好的选择是直接利用你已订阅的 Kimi 套餐来运行。
00:04:14这样你就不必担心额外的 API 账单，只需支付固定的月费即可。
00:04:18为此，可以使用一个名为 CLI Proxy API 的工具。
00:04:21它能将你已登录的编程工具转化为本地运行的专属 API。
00:04:28实质上就是将已有的付费订阅转化为可以调用的本地服务器。
00:04:33你可以使用 brew install 命令来安装它。
00:04:35完成之后，运行 Kimi login 命令登录 Kimi，这会打开 Kimi 的登录页面以便你进行身份验证。
00:04:41获取到你的凭据后，即表示登录成功。
00:04:43随后启动服务器，保持 Kimi 连接处于活跃状态。
00:04:47接下来还需要为本地配置生成一个 API Key，因为这个 Key 需要提供给 Claude Code 以获取访问权限。
00:04:54不过你无需手动操作，直接让 Claude Code 或你使用的任何 Agent 配合该工具帮你配置 API Key 即可。
00:05:02配置完成后，复制出密钥即可使用。
00:05:04然后启动 Claude Code。
00:05:06在此之前，你需要修改 Claude 发送请求的目标 URL。
00:05:09默认情况下它指向 Claude 官方 URL，现在需要将其改指向你的 localhost 本地地址。
00:05:16将生成的 Key 粘贴为 Anthropic 认证 Token，并将模型设置为 Kimi K3。
00:05:22之后运行 claude 命令，Claude Code 就会调用你的 Kimi 订阅来运行 K3 模型。
00:05:28值得一提的是，这些设置仅在当前的终端会话中生效。
00:05:32因此所有改动都不是永久性的。
00:05:33关闭当前会话并在新终端中运行 Claude 时，你依然可以像往常一样使用原有的 Claude Code 订阅。
00:05:39在深入了解 Skill 的细节之前，如果你能订阅本频道并点个赞，我们将不胜感激。
00:05:44这小小的一点支持对我们意义重大。
00:05:47落地页（Landing page）是公司的门面。
00:05:49如果落地页看起来像粗制滥造的垃圾内容（Slop），就会失去公信力，客户也不会光顾。
00:05:54因此，要打造高品质的页面，必须让模型摆脱其习惯性依赖的保守套路。
00:06:00市面上有许多专门为此设计的 Skill。
00:06:02其中最受欢迎的之一是 Hallmark，这是一款针对 Agent 的“去 AI 垃圾感”设计 Skill。
00:06:07你可以通过四个指令动词来使用它。
00:06:08第一个是默认指令，只需告知 Agent 你想构建的内容，它就会按照指令中的工作流构建新的 UI。
00:06:15第二个是 audit（审计），用于对照已知的反模式检查代码，确保网站没有低质痕迹。
00:06:21第三个是 redesign（重构），它会废弃现有设计，尝试一个全新方向的改版。
00:06:27最后一个是 study（学习），你可以提供一个喜爱的网站，它会提取该站点的风格并朝该方向创作。
00:06:33重点来了。
00:06:34如果不使用 Hallmark，直接让 Agent 学习某个网站，它只会生搬硬套地克隆风格。
00:06:40但 Hallmark 明确禁止了这种像素级抄袭，而是将目标网站仅作为设计参考。
00:06:45因此最终生成的结果依然具备原创性。
00:06:47它还配备了丰富的设计风格库，供你在自己的项目中随时调用。
00:06:51如果你想直观感受这些风格，他们的官网上展示了基于每种风格构建的落地页。
00:06:56方便你进行视觉上的预览和挑选。
00:06:57在其文档中，recipe.md 文件详细列出了提示词的最佳实践。
00:07:02要使用 Hallmark，首先需要进行安装。
00:07:04为此，从 GitHub 仓库复制安装命令，粘贴到终端中，即可开始安装流程。
00:07:11系统会询问你要为哪个 Agent 进行安装。
00:07:13如果你使用的是 Kimi code 或运行 Codex，按默认设置继续即可。
00:07:17它会安装到 .agents 文件夹中，许多 Agent（包括上述两者）都使用该目录存放配置。
00:07:23但由于你是在 Claude Code 中运行 Kimi，因此还需要从 Agent 列表中选中 Claude Code。
00:07:28这样它就会安装到 .claude 文件夹中，即 Claude 存放配置的位置。
00:07:32安装完成后，进入项目目录，就可以看到 .agents 和 .claude 文件夹中均已就位的 Skill。
00:07:38 skill.md 文件包含了使用说明、调用方式以及运行所需的所有信息。
00:07:44这也是它优于其他替代方案的原因。
00:07:46因为它涵盖了一百多个不同维度的参考标准，其中包括 AI 同质化垃圾感（Slop）模式。
00:07:52在交付输出之前，它会执行 58 关卡测试，通过 58 项检查确保网站毫无同质化塑料感。
00:07:58它还包含组件参考以及前面提到的指令动词参考。
00:08:02在查看这个 Skill 生成的设计之前，先插入一段赞助商广告。
00:08:05你的 AI 编程助手在协作时表现惊艳，但只要关闭或切换工具，它就会把一切忘得干干净净。
00:08:12每次都要从头开始，不清楚昨天构建了什么或别的 Agent 解决了什么，白白浪费时间和资金重复解释。
00:08:19介绍 Jolly Memory：一款免费开源的 IDE 插件，赋予你的 AI 助手持久记忆。
00:08:24它能自动从工单、链接或对话中提取项目背后的推理过程并保存到本地，转化为附加在每次 Commit 上的结构化文档，自动捕捉架构与工程决策背后的逻辑。
00:08:39它不受单一工具或模型的绑定，无论在 Claude、Gemini 还是 Qwen 之间无缝无痕切换，记忆随身携带，无需维护 state.md 文件或同步笔记。
00:08:48完美支持 VS Code、IntelliJ、Cursor、Claude 和 Windsurf，一次安装，全平台记忆。
00:08:56当出现问题时，你可以追溯每次变更背后的决策逻辑，它会将一切如清晰的项目地图般呈现。
00:09:03点击置顶评论中的链接即可体验 Jolly Memory。
00:09:06言归正传，尽管 Kimi 确实擅长前端，但它也积累了自己的固定套路，这些套路构成了它的固有设计风格。
00:09:13由于它问世不久，这些套路目前还不太明显，但随着时间推移会越来越突出。
00:09:18此外，众所周知许多国产模型是通过对 Claude 模型进行蒸馏训练的（即用一个模型的输出去训练另一个模型），因此 Opus 4.8 的风格在 Kimi 生成的内容中非常常见。
00:09:29比如在 Hero 区域后放置背景图、将超大标题文本偏向一侧，以及无论深色浅色主题都偏爱暖橙色和棕色调，这些 Opus 的特征也频频出现在 Kimi 的设计中。
00:09:40不过我们很喜欢 Kimi 的一点是，它的文案不会塞满 Opus 偏爱的那些营销炒作词汇。
00:09:46所有元素都显得克制且有针对性，读起来比其他模型输出的内容更有意图感。
00:09:51为了测试这个 Skill，我们在 Claude Code 中搭配 Kimi 运行，并给出了一个简单的落地页提示词。
00:09:56运行后，它会首先启动一个名为 pre-flight 的预检步骤。
00:09:59pre-flight 会检查包含设计风格信息的现有文件，梳理出哪些可以保留，哪些需要修改。
00:10:06因为我们刚初始化了一个 Next.js 模板，它确认锁定了 Next.js 框架，并清除了无用文件。
00:10:11在继续之前，它会询问三个问题：目标受众是谁、网站用途是什么，以及整体基调是什么。
00:10:18在提示词中直接注明这些是最佳实践；但即使漏掉了，它也会主动发问，所以不必过于死板。
00:10:25回答完毕后，它就会从参考库中提取主题及相关要素并构建网站。
00:10:30构建完成后，它会确保通过全部 58 项去同质化检测。
00:10:34由于 Hallmark 依赖那些指令动词运行，要求它进行全新重构（redesign）会让整体焕然一新。
00:10:39它能识别该动词，加载重构协议，重新提问，启动相同的工作流，并以完全不同于初版的全新方向重构整个项目。
00:10:49此外还有 audit（审计）模式，用于针对 AI 同质化塑料感（Slop）模式检查设计。
00:10:53运行 Hallmark audit 时，它会重新加载 Skill，根据这些模式生成报告并标记出所有发现的问题。
00:11:00然后你可以根据这份报告决定执行哪些修复。
00:11:02不过在 Claude Code 中使用 Kimi 时，必须注意上下文管理，因为自动压缩（Auto-compaction）不会触发。
00:11:09因此，即使上下文窗口填满了，它也不会停止工作。
00:11:12但在上下文满载的情况下，你会发现回答开始偏离指令，或者变得奇怪且同质化。
00:11:18在审计之后，Kimi 针对标记出的问题进行了修改，数量还不少。
00:11:22它替换掉了自带廉价 AI 感的字体。
00:11:25把图片来源从 Unsplash 换到了 Pixum 站点，因为 Unsplash 几乎是所有模型首选的素材库。
00:11:32并且修复了移动端的响应式适配，整体提升了网站的质感。
00:11:36在此基础上，你可以不断要求生成新版本，直到满意为止。
00:11:39这里给在 Kimi 和 Claude Code 中使用 Skill 的朋友提个小建议。
00:11:42自动调用（Automatic invocation）并不总是可靠，因为 Kimi 并不是 Claude Code 的默认模型，
00:11:47而自动触发逻辑是围绕 Claude 自家模型调优的。
00:11:51因此更好的做法是用斜杠命令（/）手动调用 Skill，以确保在开始构建前成功加载。
00:11:57我们也在 Claude Code 中搭配 Opus 4.8 模型进行了对比测试，分别测试了使用 Skill 和不使用 Skill 的情况。
00:12:03首先是不使用 Skill，它以常规方式构建了应用。
00:12:06耗时约 6 分钟，生成的网站带有浓厚的 AI 廉价感（Slop）。
00:12:10从配色方案、背景渐变，到过度使用的圆角边框，无一不暴露着典型的 Opus 模板痕迹。
00:12:16大家可能还记得，我们的设计系统中包含 AI 垃圾感检测 Skill，
00:12:20它经过专门训练，能捕获所有已知套路，包括来自 Opus 的套路。
00:12:24于是我们在项目上运行了检测，它标记出大量问题，报告了多项高置信度与低置信度的同质化套路，
00:12:30特别是指出了渐变文字的问题。
00:12:32接着我们运行了 Hallmark。
00:12:33它加载了 Skill，执行预检，记录套路模式，询问了相同的问题，并重新运行了整个工作流。
00:12:39虽然耗时比不加 Skill 长得多，但结果非常值得，
00:12:43因为最终的设计呈现出强得多的创意度和意图感。
00:12:46按钮具有更好的交互反馈，这一切都源于模型对产品产生了更深刻的理解。
00:12:51默认情况下，它不会随意塞入占位图，因为滥用 Unsplash 图库已被列为其规则中的同质化套路。
00:12:58它是为产品开发者设计的，所以它会让你使用自己的图片，而不是依赖 AI 生成图或图库素材。
00:13:04总体而言，它产出了比 Kimi 明显更出色的设计，所以我们认为该 Skill 目前与 Claude 的契合度更高。
00:13:10它目前对 Kimi 的设计习惯还没有形成深刻认知，只是在根据其他模型的已知模式进行审查。
00:13:15但在我们的各项测试中，这个 Skill 的表现都非常出色。
00:13:18前面提到的这个设计系统，以及我们在所有视频中构建和展示的内容，
00:13:23都可以在我们的专属社区 AI Labs Pro 中找到。
00:13:26如果你觉得我们的内容有价值并希望支持本频道，这是最好的方式。
00:13:31链接就在下方简介栏中。
00:13:33如果你使用过 Codex 或了解其工作原理，就会知道它的默认配色是绿白相间，
00:13:38就像 Opus 默认偏好橙色、乳白色和棕色一样。
00:13:42这些都是它在默认风格下习惯选择的色彩。
00:13:45它的设计还大量依赖 SVG 矢量图，并且倾向于选择相对于屏幕偏小的字号。
00:13:51与其他模型相比，它的设计成果算是不错，但那些默认套路无论如何都会浮现出来。
00:13:56于是我们在 .agents 文件夹中安装了该 Skill 来测试 Codex，给出的提示词仅简单说明了构想。
00:14:03我们使用了 Codex 客户端，因为它配备了浏览器操作工具及其他增强特性的功能。
00:14:09它完成了预检，并向我们询问了受众、使用场景和基调风格。
00:14:14做出选择后，它运行了完整工作流，修改了多个文件，完成了常规测试及交互式浏览器测试。
00:14:21由于手头具备浏览器操控能力，而且极其擅长此类任务，它充分发挥了这些优势。
00:14:26完成后，它交付的网站视觉效果有了大幅提升。
00:14:29唯一美中不足的是蓝白配色仍略带一点 AI 生成痕迹，但在这里它显得高级自然而非粗制滥造，因为这种配色契合技术类网站。
00:14:39所有的 UI 元素都打破了 Codex 默认的设计习惯。
00:14:43虽然 Hero 区域展示的图片存在一些缺陷，比如选中的 Tab 视觉呈现不太正确，但这些都是可以在后续微调修复的小问题。
00:14:52随后我们运行了 Hallmark audit，它生成了一份报告。
00:14:54报告显示整体结构扎实，仅遗留少数问题（包括初版容易忽略的移动端响应式问题）。
00:15:02本期视频到这里就接近尾声了。
00:15:03如果你想支持本频道并帮助我们继续制作这样的视频，可以通过下方的超级感谢（Super Thanks）按钮进行赞赏。
00:15:10一如既往，感谢观看，我们下期视频再见！