如何教 AI 智能体无模板设计并组装视频演示文稿

任何曾让 Claude 或 Cursor 构建着陆页的人都知道这个结果。生成的代码在技术上可以运行，但在视觉上看起来像典型的 2018 年页面，带有蓝色按钮和圆角卡片。模型了解 CSS 和 React 语法，但它们缺乏内置的设计品味和对项目结构的理解。

中国开发者 ConardLi 的 garden-skills 仓库通过 Agent Skills 格式解决了这个问题。这是一组遵循规范 SKILL.md 的模块，可将 Claude Code、Cursor、Codex 和其他终端智能体转变为专业工程师。

什么是 Agent Skills 及其工作原理

Anthropic 最近提出了一个扩展智能体能力的开放标准。从本质上讲，一个 skill 是项目或主目录中的一个独立文件夹，包含带有 YAML 头部的清单 SKILL.md、文本指令、现成脚本和参考指南。

智能体会扫描清单中的 description 字段。当用户的任务与描述匹配时，模型会在对话期间直接加载相关上下文。这消除了将冗长的系统提示复制到每个聊天中的需要。

garden-skills 仓库包含五个用于实际工作任务的现成模块。

仓库中的现成 Skills

每个 skill 都针对特定场景量身定制，并包含严格的交互规则，以防止智能体产生幻觉或跳过阶段审批。

1. web-design-engineer

该模块专注于页面布局、仪表板、原型设计和交互式组件。与通用模板不同，它使用包含 25 种现成视觉风格的数据库。其中包括 Linear 的美学、Bloomberg 的终端风格、瑞士风格、新拟态风格、复古未来主义以及受日本设计师原研哉（Muji 无印良品）启发的极简主义。

该 skill 强制模型在五个参数上工作：元素密度、动画动态、资源依赖、品牌一致性和可变性。智能体首先在 oklch() 中验证概念和调色板，然后构建早期 v0 原型，并在获得批准后才编写最终的 React 代码。

2. web-video-presentation

该 skill 接收源文本、技术文章或课程笔记，并使用 Vite、React 和 TypeScript 技术栈以固定的 1920×1080 分辨率组装交互式网页演示文稿。

演示文稿通过步骤和键盘点击控制，因此每个语义强调都与屏幕上的视觉步骤同步。UI 元素在悬停时隐藏，允许你录制干净的屏幕视频。

该模块支持 23 种内置主题，并集成了通过 MiniMax CLI、OpenAI TTS、ElevenLabs 或 macOS 系统工具 say 进行语音生成的功能。

3. beautiful-article

该工具将原始数据（链接、PDF、DOCX、笔记或聊天记录）转换为可阅读的文章布局。该 skill 依赖 Reacticle 组件库和 11 种设计师配置文件（Tufte、Bodoni、Vignelli、Knuth）。

该模块提供 10 种发布格式，从保留 90% 原文的详细教程到深度重构内容的交互式解释器。在组装过程中，智能体 обязательно делает паузы для подтверждения темы, структуры и стратегии иллюстраций.

4. gpt-image-2 和 kb-retriever

另外两个 skill 涵盖更狭窄的任务：

• gpt-image-2 包含 79 个结构化提示模板，用于通过 OpenAI 兼容 API 生成图表、架构图、横幅和 UI 模型。它可以在代码生成模式下工作，也可以简单地作为编写提示的顾问。
• kb-retriever 在包含文档、PDF 和 Excel 表格的结构化文件夹中组织本地搜索。该 skill 不是将大型文件整个提供给智能体而堵塞上下文窗口，而是读取树索引 data_structure.md，使用 grep 或 pdftotext 等工具，最多在 5 次迭代中找到精确摘录。

在项目中安装的方式

将 skills 添加到工作环境的最快方式是使用包管理器 npx skills。该工具会自动检测目录中运行的是哪个 AI 助手，并将文件放置在正确的文件夹中。

一次性安装所有模块：

npx skills add ConardLi/garden-skills

将特定 skill 安装到全局配置：

npx skills add ConardLi/garden-skills -s web-design-engineer --global

如果你使用 Claude Code，可以通过内置市场直接连接插件：

/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills

对于 CI/CD 中的固定版本或发布中有严格依赖要求的项目，仓库提供了带 SHA-256 校验和的签名 .zip 压缩包。只需将压缩包解压到 .claude/skills/ 或 .agents/skills/ 即可。

与智能体的兼容性

该格式是开放的，因此 skills 不仅适用于 Anthropic 生态系统。该项目已在以下工具中进行了测试：

• Claude Code 和 Claude.ai 网页界面（通过 Capabilities 部分）
• Cursor（文件夹 .agents/skills/<name>/）
• Codex CLI
• Gemini CLI
• OpenCode

谁会发现这个项目有用

ConardLi 的集合为那些在终端或代码编辑器中每天使用 AI 智能体的人节省了时间。你不再需要手动设置上下文和修复幼稚的布局错误，而是获得了一个带有检查点和高质量设计标记的可预测流程。

最简单的入门方式是使用 web-design-engineer 或 beautiful-article。它们在第一次请求时就能给出可见的结果，并展示如何正确地为规范 SKILL.md 编写自己的指令。