技能介绍

很多操作类教程最后会变成「长文 + 一堆截图」，读者很难对齐当前步骤、该做什么和怎样算做完。若还要统一视觉风格，从参考图手写 CSS 又费时，且容易堆出「卡片套卡片」的嵌套布局，反而干扰阅读。

本技能面向两类连贯工作流：把参考图的视觉语言沉淀成可复用的风格提示词，再据此生成单文件、分页的 HTML 教程页——首屏直接进入教程内容，而不是营销落地页。

工作流 A：从图片提取风格

按 references/style-extraction-schema.md 分析布局、字体、配色、组件、间距与响应式倾向，填成可复用的风格系统（不是复述图片）。
以视觉语言命名（小写连字符英文文件名），保存到 references/styles/*.md。
含受保护 Logo、角色或版权素材时，只抽取通用视觉系统，不要求复刻专有元素。

工作流 B：生成教程 HTML

在 references/default-ui-system.md 与 references/styles/ 中选风格；未指定时会简短询问（含默认项）。
结合 references/production-guide.md 与用户提供的步骤文案、images/、videos/、外链，按真实执行顺序分页：每页聚焦一个动作，写清目标、操作与可观察的成功条件；媒体放在说明之后作校验。
输出单 HTML：顶部唯一导航（当前页 + 上/下页）、data-step 与 totalSteps、全局连续图号（图 1、图 2…）、可点击放大图片、移动端单列。

三条底层规则始终优先于具体风格：禁止卡片嵌套卡片；装饰图形必须有明确用途否则省略；教程可读性优先（步骤、动作、原因、校验媒体、成功标准必须易找）。

提取风格时，除非用户同时要求，不会自动生成教程 HTML。
生成前可简短确认是否覆盖风格默认值；用户未改则按选定风格继续，避免反复追问。
素材路径默认指向 images/、videos/；本地打开 HTML 即可用，交付前会做导航禁用、图号、链接 target="_blank" 与移动端横向滚动等质量检查。