Codex 如何生成网页演示和漂亮文章？garden-skills 使用方法

Codex 如何生成网页演示和漂亮文章？garden-skills 使用方法

刚把 garden-skills 装到 Codex 里的时候，不少人都会犯懵：明明都是输出 HTML，网页演示、普通网页、精美文章这三个模式到底有啥区别？我一般先看最终用途——要是需要按节拍点击、全屏播放再录成视频，就选 web-video-presentation；要做能浏览、能交互的页面，选 web-design-engineer；要是想把手头的材料整成一篇读着舒服的完整文章，就选 beautiful-article。

口播稿想变成“像视频”的网页，怎么开口？

我一般会这么提需求：把原始文章或者口播稿丢给 Codex，直接说「用 web-video-presentation，做成适合 16:9 录屏的点击式演示，先产出口播稿和视觉 outline，等我确认后再开发」。这个 Skill 会把每一个口播节拍对应到一个全屏 step，页面用 Vite、React 和 TypeScript 构建，进度控制平时都是藏起来的，录出来的画面特别干净。

1. 先把 script.md、outline.md、主题、素材还有开发模式都确认清楚。
2. 先把第一章做成完整的锚点页，确认好画面密度和节奏之后，再接着做其他章节。
3. 等页面全部做完后再决定要不要合成音频；语音可不是默认偷偷生成的附属品哦。

等你看到工作区里出现 presentation 目录、章节代码和 narrations.ts，才算走对了工作流。要是 Codex 只给了一页普通长网页，说明需求触发偏了，得把「口播节拍、点击推进、录屏」这些关键词写得更明白。

想做落地页或者交互原型，要换哪一种说法？

我一般会这么说：「用 web-design-engineer，把这份产品说明做成响应式开发者落地页；先读取现有代码和品牌素材，出设计系统与 v0，再完成交互」。它会先判断是延展现有设计、保留原貌还是整体重做，再从构图变化、动效、信息密度、素材和品牌保真度这几个方面做设计校准。

这里可得给真实素材才行。做数字产品的话，最好提供现有的 UI、Logo 和代码；要是你只说一句「做得高级」，Codex 就只能先搭个临时的设计方向。这个 Skill 适合做页面、仪表盘、原型、幻灯片和可视化内容，不适合把 PDF 内容重编成长文章，也替代不了口播驱动的演示 Skill。

材料都备齐了，只想变成一篇漂亮文章呢？

我一般会这么提需求：「用 beautiful-article，把这份 Markdown 编辑成可离线打开的单文件 HTML，信息尽量保留；先给我编辑计划，别直接套主题」。它支持网页、PDF、DOCX、Markdown、纯文本、截图甚至直接粘贴的内容，会先把来源转成可审阅的文本，再跟你确认文章类型、内容保留比例、主题、版式、配图和封面。

走对流程的信号是，工作区里会出现 source、plan、article 和 review 这类阶段性文件，等你确认首屏效果之后才会扩展做完全文。它提供长文、教程、解释文、对话、评测、briefing 等多种文章类型和好几套主题，但主题不会抢了文章内容本身的风头。要是需要做 Dashboard、表单或者产品原型，就得换回 web-design-engineer。

三个 Skill 能串起来吗？

当然可以，但别让它们同时抢同一个交付物，容易乱套。比较稳妥的顺序是：先用 beautiful-article 把杂乱的材料编辑成完整文章；再用 web-video-presentation 把确认后的文章改成口播节拍的全屏演示；要是还需要单独做活动落地页，再让 web-design-engineer 读取已经确认好的品牌和内容来做。每一步都要留好前一阶段的输入文件，也得分别确认每一步的视觉方向。

判断流程有没有跑对，就看三个结果：文章能独立读，演示能按节拍播，网页能围绕产品任务做交互。让一个 Skill 同时扛三种角色，反而最容易得到「什么都有一点、哪一种都不够像样」的页面。