用嘴做视频、用嘴做网页、用嘴做图——字节跳动把 AI 创作技能全开源了

用嘴做视频、用嘴做网页、用嘴做图——字节跳动把 AI 创作技能全开源了

你有没有这种感觉？

AI 模型越来越强，但每次让它干点”真正的活”，要么输出一股 AI 味的卡片网页，要么生成一张看起来像技术图但根本没法用的图片。问题不在模型，在于没有好的 Skill 来引导 AI。

字节跳动的工程师 ConardLi 最近在 GitHub 上开源了一套叫做 Garden Skills 的工具包，目前已经斩获 7.7k+ Stars。它把视频演示、网页设计、图像生成、知识库检索四个高频创作场景，封装成了可以一键安装的标准化 Skills——装上之后，你的 Claude Code、Cursor、Codex 马上多出一套专业创作能力。

它到底能做什么？

· web-video-presentation：将文章或产品演示，转化成一整套可以录屏的电影感演示项目。支持 23 套内置主题，配合 MiniMax/OpenAI 的 TTS 系统，直接输出专业视频。

· web-design-engineer：这个是项目最受欢迎的一个。它把 AI 生成网页从”随机抽卡”变成”工程输出”——六步工作流，内置 25 套风格锚定配方（Linear、Aesop、Mid-Century Modern 等），每一套都有具体调色板、排版规则和反模式清单，告别千篇一律的 AI 味。

· gpt-image-2：结构化图像生成 Skill，18 大类、79 个提示词模板，覆盖海报、UI 样机、技术图、品牌板等各种场景。生成过程自动保存 prompt 和图片，方便迭代。

· kb-retriever：本地知识库检索。它不会一上来把整个文件塞进上下文，而是分层索引逐步缩小范围，处理 Markdown、PDF、Excel 都能带来源输出，避免上下文溢出和幻觉。

安装超简单，一条命令搞定：

# 一次装全部 4 个 Skill
npx skills add ConardLi/garden-skills

# 指定装某一个 Skill
npx skills add ConardLi/garden-skills -s web-design-engineer

# 装到全局
npx skills add ConardLi/garden-skills -s gpt-image-2 --global

# 指定目标 Agent
npx skills add ConardLi/garden-skills -s kb-retriever -a claude-code

在 Claude Code 里也可以直接装插件：

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

用起来是什么体验？

比如说，你想做一个林黛玉介绍网页，直接跟 AI 说”参考 mailchimp-freddie 风格出一套网页”，它就能自动匹配设计系统、调用模板、生成完整响应式页面。整个过程不需要你懂设计，AI 会替你完成所有专业判断。

视频演示同理。你扔给它一篇公众号文章，它会自动构建 1920×1080 的舞台，配合 TTS 输出电影感演示——而不是你自己在那儿一帧帧剪。

为什么值得安装？

这套 Skills 的核心价值在于：把高手的经验变成了可复用的工具。

以前只有资深设计师才知道的配色方案、排版节奏、信息层级，现在全部封装成配方，装上就能用。对于创作者来说，这大幅缩短了从想法到成品的距离。对于开发者，它是一套可直接复用的 Agent 工作规范。对于团队，它是一种轻量但高效的能力沉淀机制——把设计规范、检索方法、内容流程转化成 AI 可以随时调用的标准化模块。

GitHub 上已经 7.7k Stars，这个数字说明很多问题。字节跳动这个工程师，确实把 AI 创作工具链补齐了关键的一环。

GitHub 链接：

https://github.com/ConardLi/garden-skills

GitHub: https://github.com/ConardLi/garden-skills