我受够了做PPT，于是写了一个 Skill，让 AI 直接生成教程网页

mmgongzhu213

67人浏览 · 2026-07-07 11:30:45

mmgongzhu213 · 2026-07-07 11:30:45 发布

我受够了做 PPT，于是写了一个 Skill，让 AI 直接生成教程网页

不知道大家有没有过这种经历：明明只是想做一个软件安装教程、产品操作指南，或者给同事讲一下某个工具怎么用，结果内容没写多久，光调 PPT 就花了半天。标题往左一点，图片再大一点，这一页太空，下一页又太挤，换了一个主题以后，所有字号、颜色和间距还得重新调整。

更麻烦的是，PPT 做完以后也不一定方便分享。发源文件可能遇到字体丢失，导出 PDF 又没有交互，手机上打开还得不停放大缩小。所以我做了一个 AI Skill：Tutorial Website Builder。

它的思路很直接：不再手动折腾 PPT，而是让 AI 直接把教程内容生成一个可以翻页、可以放图片和视频、可以在浏览器中打开的 HTML 教程网页。

图 1：Tutorial Website Builder 生成的分页式教程网页效果

SkillHub 地址：

SkillHub-专为中国用户优化的Skills社区

它到底是干什么的？

简单来说，这个 Skill 主要处理两类工作：第一类是把教程内容直接生成网页，第二类是从参考图片中提取一套可以重复使用的网页风格。

第一类：把教程内容直接生成网页

使用时只需要提供教程步骤、操作说明、截图、视频、相关链接以及想要的页面风格，AI 就会按照真实操作顺序拆分内容，并生成一个单文件 HTML 教程页面。

它不是常见的产品宣传官网，也不会在第一屏放一个巨大的宣传口号，再往下面塞几个功能卡片。页面打开以后会直接进入教程内容，每一页主要回答几个问题：现在进行到哪一步、当前要做什么、为什么要做这一步、应该查看哪张截图或视频，以及出现什么结果才说明操作成功。

建议选择某一个具体步骤页面，截图中最好同时出现步骤标题、说明文字、媒体内容和成功标准，不要只截页面顶部。

相比普通长文章，这种分页结构更适合软件安装教程、工具使用指南、产品操作手册、企业培训内容、新员工入职说明、开发环境配置以及项目流程演示。

还可以从参考图片中提取网页风格

这是我觉得比较实用的一个功能。平时直接让 AI 写网页，最常见的问题不是 AI 不会写代码，而是它每次生成出来的风格都不一样。第一页像科技官网，第二页像后台管理系统，第三页突然变成渐变色营销页面，最后整个项目看起来就像是几套模板拼在一起。

Tutorial Website Builder 可以读取一张参考图片，并把图片中的视觉语言整理成一份完整、可复用的网页风格提示词。它不会只做一句“参考这张图生成类似风格”的简单描述，而是会从设计系统、组件样式、布局策略、交互规则、响应式适配和无障碍规范等多个层面进行结构化提取。

生成的风格提示词必须包含以下内容：

Design Style
设计风格名称
设计哲学
核心原则
视觉气质
情绪关键词
风格禁区
风格 DNA
与相近风格的差异

Design Token System
颜色系统
字体系统
字号系统
字重系统
字距系统
行高系统
圆角系统
边框系统
分割线系统
阴影系统
纹理系统
背景系统
间距系统
容器系统
响应式断点

Component Styling
按钮
主按钮
次按钮
幽灵按钮
导航栏
当前页指示器
翻页按钮
页面容器
报头
标题区
步骤页
步骤编号
步骤标题
正文区
验证标准块
链接
图片组件
视频组件
媒体容器
图注
放大预览层
关闭按钮
卡片/内容块
输入框
图标

Layout Strategy
页面最大宽度
页面内边距
页面外边距
栅格系统
图文布局
单栏布局
双栏布局
区块间距
内容垂直节奏
对齐规则
移动端布局规则

Effects & Interaction
交互动效原则
Hover 状态
Focus 状态
Active 状态
Disabled 状态
翻页行为
图片放大行为
链接跳转行为
滚动行为
动画时长
动画缓动

Iconography
图标风格
图标尺寸
图标线宽
图标颜色
图标容器
图标使用规则

Responsive Strategy
桌面端规则
平板端规则
移动端规则
标题缩放规则
栅格折叠规则
按钮触控规则
媒体堆叠规则

Accessibility
对比度规则
Focus 可见规则
键盘操作规则
触控目标尺寸
图片 Alt 规则
链接可识别规则
语义结构规则

Non-Negotiable UI Rules
必须保留的视觉特征
禁止使用的视觉元素
必须统一的组件规则
必须遵守的交互规则
必须检查的响应式规则

也就是说，它不是简单地告诉 AI：

请参考这张图片，做得高级一点。

而是把参考图中的布局、字体、颜色、组件、间距、媒体样式、交互方式和响应式逻辑，转换成一套具体、可执行、可以持续复用的设计规范。

例如，在颜色系统中，不只是写“使用蓝色”，而是要明确主色、辅助色、背景色、文字色、边框色和状态色之间的关系；在字体系统中，需要说明标题、正文、标签和按钮分别使用什么字号、字重、字距和行高；在组件样式中，需要定义按钮、导航、步骤编号、媒体容器、图注和验证标准块应该如何呈现；在响应式策略中，还需要规定桌面端、平板端和移动端分别如何折叠布局。

这样做的好处是，后续再生成其他教程页面时，可以直接继续使用同一份风格提示词。即使教程内容、图片和步骤发生变化，整体配色、排版节奏、组件语言和交互方式仍然能够保持统一。

示例：传该图片生成的提示词如下：

请为该项目建立一套统一、完整、可复用的视觉设计系统，整体设计感参考“单色蓝色线描收藏室、创意工作室、玩具陈列架与科技实验空间”的插画语言，但只提取视觉风格、构图方式、配色逻辑和线稿表达，不复制参考图中的具体角色、品牌标志、文字、玩具造型或物品组合。最终界面应像一间被整理成数字产品的创意收藏工作室：以高纯度蓝色作为绝对主色，以黑色线稿勾勒结构，以少量白色和浅蓝色制造光线、层次和视觉焦点；整体既具有工程制图般的清晰秩序，又带有玩具收藏、设计工作室和轻科幻生活场景的趣味性。所有页面、组件、插图和交互必须严格遵守以下规范。

【Design Style｜设计风格】

设计风格名称：Mono Blue Collector Studio，中文可称“单色蓝图收藏室风格”“蓝色线描创意工作室风格”或“单色科技玩具陈列风”。

设计哲学：用单一蓝色空间统一整个视觉世界，再通过黑色轮廓、白色高光、浅蓝遮罩和不同线宽建立清晰层级。设计不依靠丰富颜色、复杂渐变或真实材质，而是通过精密线稿、物品陈列、功能分区、场景式构图和少量光束营造具有故事性的数字空间。页面不是传统的卡片堆叠，而应像一个可以被观看、探索和使用的创意工作室：导航像工作台标签，卡片像陈列柜，步骤像架子上的收藏品，媒体区域像被台灯照亮的重点展品。

核心原则：单色统一、线稿优先、轮廓清晰、层级克制、物件化表达、场景化布局、功能与趣味并存。所有组件首先依靠轮廓、线宽、面积和留白区分层级，其次才使用浅蓝深浅变化；每个页面只能有一个最强视觉焦点；装饰元素必须服务于内容叙事；界面必须在减少颜色的情况下仍保持高度可读。

视觉气质：聪明、轻松、精密、克制、年轻、工程感、收藏感、工作室感、科技感、玩具感、探索感、幽默但不过分卡通。整体应像设计师、工程师或创作者的私人收藏空间，既理性有序，又充满小型惊喜。

情绪关键词：Curious、Inventive、Playful、Technical、Collected、Monochrome、Studio、Blueprint、Friendly、Precise、Calm、Exploratory、Mechanical、Whimsical。

风格禁区：禁止彩虹配色、蓝紫霓虹渐变、赛博朋克灯效、玻璃拟态、毛玻璃卡片、真实金属高光、复杂3D模型、写实摄影作为主要视觉语言、柔和大阴影、黏土风、低幼卡通、糖果色、复杂纹理、油画质感、厚重商务蓝后台、标准企业SaaS模板、大面积纯白、无边框极简卡片、随机涂鸦和过度拥挤的信息墙。

风格DNA：高纯度天蓝背景、黑色或深蓝黑细线轮廓、白色局部高光、浅青蓝光束、透明度极低的超大背景水印、密集但有秩序的陈列架、工业层板、细腿台灯、桌面工作台、模块化收纳、线描玩具、科技小物、机械结构、圆形轨道、星球环、微型机器人、书籍、器材、滑板或长条设备等“收藏物件”式视觉元素；整体使用平面化线稿，不强调体积光和真实阴影；局部使用聚光灯、横向基准线和纵向支撑结构建立空间。

与相近风格的差异：它不同于传统蓝图风，不使用密集尺寸标注、工程编号和网格底纸，而更强调生活化、收藏感和叙事情境；不同于普通线性插画，不使用多色填充和轻柔暖色，而坚持蓝、黑、白的强统一；不同于赛博朋克，不依赖霓虹、暗色背景和发光界面，而是明亮、平静、清晰；不同于儿童插画，不使用夸张表情、泡泡字体和糖果配色；不同于企业科技蓝风，不使用抽象渐变波纹和通用图标，而使用具象的工作室、陈列柜和物件化视觉语言。

【Design Token System｜设计令牌系统】

颜色系统：主背景蓝建议使用#2698CE、#2797CC或#2396CC；深背景蓝可使用#1784BB；高光浅蓝使用#75C9EC、#9DDBF2；光束蓝使用rgba(190,235,250,0.42)；主轮廓使用近黑色#06141C或深蓝黑#071A24；主文字可使用#071A24；反白文字使用#F7FCFE；浅色填充使用#EAF8FD；弱化线条使用rgba(7,26,36,0.35)；弱化背景水印使用rgba(255,255,255,0.04)至0.08。整体颜色占比建议为主蓝65%—75%、深色轮廓和文字12%—18%、浅蓝与白色高光10%—18%。除状态提示外，不增加高饱和辅助色；成功、警告和错误状态也优先通过线型、图标和深浅区分，必要时才局部使用低饱和青绿、橙或红。

字体系统：主标题采用简洁、稍窄、结构清晰的现代无衬线字体，中文优先使用思源黑体、HarmonyOS Sans、阿里巴巴普惠体、OPPO Sans或MiSans；英文可使用Inter、Space Grotesk、DIN、IBM Plex Sans或Archivo。数字编号和技术标签可使用DIN Condensed、Roboto Mono、IBM Plex Mono或等宽字体。字体不应过度圆润，也不使用强烈复古衬线体、书法体、手写体和厚重黑体作为大面积正文。

字号系统：展示标题桌面端56—88px，移动端36—52px；一级标题40—56px；二级标题28—38px；三级标题20—26px；卡片标题17—22px；正文15—18px；辅助信息13—14px；技术标签10—12px；步骤编号40—72px。字号层级清晰，但整体不采用极端夸张的海报式文字。

字重系统：展示标题650—800；一级标题650—750；二级标题600—700；卡片标题600—700；正文400—500；辅助文字400—500；标签和编号600—700。避免大量900超粗字重，以免破坏线描插画的轻巧感。

字距系统：中文标题字距-0.01em至0；英文标题0至0.02em；正文0至0.02em；技术标签、导航和微型英文说明使用0.06em至0.12em；等宽编号保持默认字距。不得使用过度压缩或过度扩张的字距。

行高系统：展示标题1.0—1.12；一级标题1.1—1.2；二级标题1.2—1.3；正文1.65—1.8；辅助文字1.45—1.6；标签1.2；图注1.5。正文必须保持轻松阅读，不因追求密度而压缩行高。

圆角系统：大型页面容器12—24px；卡片12—18px；按钮10—14px或999px胶囊形；输入框10—14px；媒体容器16—24px；标签6—10px；图标容器8—12px。圆角应适度，避免所有组件都变成过度柔软的胶囊。

边框系统：主边框使用1.5—2px深蓝黑实线；重点容器2px；轻量卡片1px深色透明边框；插画和图标轮廓1.5—2.5px；大型结构线2—3px。边框必须清晰、连续、无模糊发光。

分割线系统：使用1px或1.5px深色实线、短划线、层板式横线、工程基准线或带节点的连线；禁止渐变分割线和纯装饰性波浪线。重要区块可通过“架子横板”式粗线分隔。

阴影系统：整体以无阴影为主；浮层和重点卡片可以使用0 6px 18px rgba(2,20,30,0.12)的低强度阴影；线描风卡片也可采用2—4px深色硬偏移阴影，但只能局部使用。禁止大面积柔光阴影、彩色阴影和多层发光。

纹理系统：默认使用纯色平面；可加入极轻微的纸张颗粒、数字噪点或印刷网点，透明度控制在1%—3%；背景水印可使用超大圆形徽章、模糊文字轮廓或工作室标记，但透明度不得超过8%。禁止明显做旧、污渍和金属拉丝。

背景系统：主背景为整面天蓝色；局部内容区可使用浅蓝、白色或深蓝面板；大型页面允许加入低透明度圆形徽章、水印文字、弧线或工作室标识作为后景；重要内容可通过一束浅蓝或近白色聚光形成焦点；背景不使用复杂渐变，最多允许同色系从#2A9DD2到#1E8FC5的极轻微纵向变化。

间距系统：采用8px基础单位，常用间距8、12、16、24、32、40、48、64、80、96、128px。组件内部留白适中，场景型页面允许物件之间较紧密，但文字与交互区域必须保持足够呼吸感。

容器系统：页面容器可以模拟陈列柜、工具架、工作台、设备面板或带层板的展架；卡片可以使用透明浅蓝填充加深色线框；重要模块可设计为“架子中的一个格子”“被灯光照亮的展品”或“贴在设备上的信息标签”。容器应具有明确上下、左右结构，不使用大量漂浮无边框卡片。

响应式断点：移动端0—639px；大屏移动端640—767px；平板端768—1023px；桌面端1024—1439px；宽屏桌面端1440px以上。设计采用移动端优先原则，但桌面端应充分展现场景式陈列布局。

【Component Styling｜组件样式】

按钮：按钮采用清晰线框、适中圆角和简洁文字，最小高度44px；按钮文字使用600—700字重；图标与文字间距8—10px；按钮不得过度厚重。

主按钮：深蓝黑背景、白色文字或白色背景、深蓝黑文字两种模式；在蓝色主背景中优先使用近黑色实心按钮；边框1.5—2px；Hover时按钮向上移动2px，并出现浅蓝或白色硬边阴影；Active时回落。

次按钮：透明或浅蓝背景，深蓝黑文字，1.5—2px边框；Hover时填充白色或浅蓝高光；不得使用普通灰色按钮。

幽灵按钮：透明背景，仅保留文字、下划线或细线边框；Hover时出现浅色矩形底或局部聚光效果；必须保持边界可识别。

导航栏：导航栏可设计为工作台顶部工具条、陈列架标签栏或悬浮设备控制条；背景使用主蓝、浅蓝或白色；底部使用1.5px深色分割线；品牌标识可采用线描图形加文字；导航项使用中等字重，当前项通过深色实心短线、白色标签块或小型圆形节点标识。

当前页指示器：使用深蓝黑短横线、实心圆点、浅色聚光块或小型设备指示灯；禁止使用常规蓝色渐变胶囊背景。

翻页按钮：采用圆形或圆角方形线框按钮，尺寸40—48px；箭头使用1.75—2px线宽；当前页可使用深色实心底和白色数字；Hover时沿翻页方向移动2px。

页面容器：页面外层使用整面蓝色背景，主内容置于透明线框、浅蓝面板或工作室场景式布局中；页面底部可使用一条水平基准线连接不同模块，形成空间地面感。

报头：由品牌标志、超大标题、短说明和一组线描物件组成；标题区可放在左侧或上方，右侧以陈列柜、设备、灯具或工作台插图形成视觉焦点；背景可加入低透明度圆形徽章或大型文字水印。

标题区：标题必须简洁、清晰、偏理性；可配一条细线、坐标点、编号或小型线描图标；副标题宽度控制在480—620px；避免标题与复杂插画叠压。

步骤页：步骤页可设计成“沿着工作台逐步操作”“逐层浏览陈列架”或“设备组装流程”；每一步由编号、标题、说明、媒体和验证结果构成；步骤之间通过细线、插头线缆、层板或轨道连接。

步骤编号：使用圆形、方形设备标签或架子格位编号；字号40—72px；编号可使用深色轮廓加浅蓝填充，也可使用深色实心圆加白字；不得仅使用普通小圆点。

步骤标题：使用20—30px中高字重无衬线字体，左对齐；标题旁可加入短横线、小型工具图标或状态节点；控制在两行以内。

正文区：正文使用深蓝黑文字，行宽控制在30—65个中文字符；强调内容通过加粗、浅蓝高亮、左侧线条或小型标签表达；不使用大面积纯红色强调。

验证标准块：设计成检测面板、设备状态卡、清单夹或仪表区；使用浅蓝或白色背景、1.5—2px深色边框；左上角可加入CHECK、TEST、PASS、VERIFY等小型等宽标签；验证成功使用勾选图标、实心节点或深色状态条，不依赖绿色。

链接：链接使用深蓝黑粗体并带1.5px下划线，Hover时下划线加粗、向右延伸或出现小箭头；外部链接添加东北向箭头图标；不得只依赖颜色区分。

图片组件：图片置于线框媒体容器中，边框1.5—2px，圆角16—24px；可配编号、图注、角标和轻微浅蓝遮罩；摄影图片如必须使用，建议统一降低饱和度并覆盖蓝色单色滤镜，使其融入整体。

视频组件：视频采用16:9或4:3比例；播放按钮为深色圆形线框或深色实心圆；内部使用白色三角形；控制栏保持简洁，可模拟设备面板，但不得影响可用性。

媒体容器：媒体区域可设计为陈列柜中的重点格位、被台灯照亮的展品区或透明设备面板；外围使用深色线框；内部可加入聚光、浅蓝底板和编号标签。

图注：字号12—14px，使用中等字重或等宽字体；放在图片下方或左下角；可带图号、时间、状态或设备编号；与媒体间距8—12px。

放大预览层：使用深蓝黑或深蓝半透明全屏遮罩，中央媒体使用白色或浅蓝描边；背景保持简洁，不使用毛玻璃；允许保留轻微聚光效果。

关闭按钮：采用圆形或方形线框按钮，尺寸44—48px，深色边框和X形图标；Hover时填充白色或浅蓝；Focus状态必须明显。

卡片/内容块：卡片模拟陈列格、工具盒、设备模块或标签板；使用浅蓝、白色或透明背景，1.5—2px深色边框；内部可加入一条层板式分割线和小型线描图标；所有卡片需保持统一线宽、圆角和标题层级。

输入框：背景使用白色、浅蓝或透明蓝；边框1.5—2px深色；高度48—56px；Focus时边框加粗并增加浅色外轮廓；错误状态通过深色图标、明确错误文字和局部低饱和红色提示线表达，不使用大面积粉红底。

图标：图标统一为线描工业插画风，轮廓圆润但不幼稚；可表现工具、设备、书籍、机器人、星球、灯具、收藏品等；图标不得使用复杂渐变和多色填充。

【Layout Strategy｜布局策略】

页面最大宽度：展示型页面最大宽度1440px；内容型页面1200—1280px；长文本阅读区680—780px；教程和步骤页面1100—1240px。

页面内边距：桌面端48—80px；平板端32—48px；移动端20—24px；场景型首屏可增加顶部80—120px留白。

页面外边距：宽屏桌面端32—64px；普通桌面端24—40px；移动端8—16px。主背景蓝可延伸至浏览器边缘，核心内容保持安全边距。

栅格系统：桌面端12列，列间距24—32px；平板端8列，列间距20—24px；移动端4列，列间距16px。场景插画可跨6—8列，文字区跨4—6列。

图文布局：优先使用不对称构图，文字占4—5列，线描场景占7—8列；插画可贴近底部水平线，文字悬于较空区域；图文之间通过聚光、线缆、架子边缘或基准线形成联系。

单栏布局：用于长文、表单、说明页和移动端；使用600—800px正文宽度；通过编号、图标和线描小物件维持视觉节奏。

双栏布局：桌面端推荐5/7、4/8或6/6比例；不强调完全对称；左侧可为说明，右侧为媒体或工作台场景；在内容较多时采用上下错位而非等高卡片。

区块间距：大型区块96—144px；普通区块64—96px；卡片组32—48px；标题与正文20—32px；正文段落16—24px。

内容垂直节奏：采用“空旷背景—密集陈列—空旷说明—重点媒体”的节奏；场景插画区域可相对密集，文字区必须保持舒展；不得让每个区块都同样拥挤。

对齐规则：文字和交互组件遵循严格左对齐；插画物件可沿底部基准线、架子层板或垂直支撑线对齐；任何物件漂移都必须有视觉支撑，不允许无依据悬浮。

移动端布局规则：双栏折叠为单栏；场景插画优先拆分成2—3个核心物件，不保留桌面端全部细节；大型陈列柜可以横向裁切但不能遮挡关键信息；标题、按钮和正文优先于装饰；媒体宽度100%；所有交互组件保持至少44px触控尺寸。

【Effects & Interaction｜效果与交互】

交互动效原则：动效模拟台灯点亮、抽屉滑动、标签弹出、机械按钮按下、展品被聚光或设备状态切换。动效应精确、轻巧、短促，不使用液态、果冻、弹簧和强烈粒子特效。

Hover状态：卡片边框加深、局部浅蓝填充增强、图标轻微上移2px或旋转3—8度；按钮产生1—2px上移和轻微硬边阴影；媒体可出现聚光增强或局部线稿变亮。

Focus状态：使用2—3px白色或浅蓝外轮廓加深色内边框；Focus不得只依赖颜色；所有键盘可操作元素必须显示明显轮廓。

Active状态：按钮或卡片向下回落1—2px，阴影缩小，模拟机械按压；持续时间80—120ms。

Disabled状态：透明度可降低至45%—60%，但文字仍需可读；边框改为弱化深蓝；禁止仅通过极低透明度隐藏组件；鼠标指针和状态文字需明确。

翻页行为：内容可沿水平轨道滑动、架子格位切换或由聚光灯从一侧扫入；不使用3D翻转；分页状态需保持位置稳定。

图片放大行为：点击后背景转为深蓝黑，图片从0.97轻微放大至1；周围出现细线边框和编号；关闭时反向收起；支持Esc、点击遮罩和关闭按钮。

链接跳转行为：同页锚点使用平滑滚动；滚动到目标时可短暂出现浅蓝聚光或边框高亮；外部链接新标签页打开。

滚动行为：使用原生平滑滚动；背景水印和大型线描物件可产生不超过20px的轻微差速；禁止滚动劫持、强制分页和过度视差。

动画时长：微交互100—160ms；按钮Hover120—180ms；卡片进入200—320ms；聚光点亮240—420ms；页面切换300—480ms；浮层180—260ms。

动画缓动：优先使用cubic-bezier(0.22,1,0.36,1)和cubic-bezier(0.4,0,0.2,1)；机械滑动可使用cubic-bezier(0.25,0.8,0.25,1)；禁止强弹簧和连续抖动。

【Iconography｜图标系统】

图标风格：极简黑色或深蓝黑线描，带轻微工业插画和玩具收藏感；轮廓清楚，局部可有少量白色填充；允许使用工具、设备、灯具、机器人、书本、星球、车辆、收藏玩具和抽象机械符号。

图标尺寸：小型16px，中型20—24px，大型32—48px，场景图标64—160px；同一组件层级保持统一尺寸。

图标线宽：16—24px图标使用1.5—1.75px；32—48px使用1.75—2px；场景插画使用2—3px；线宽变化应有限，不使用毛笔式粗细变化。

图标颜色：默认深蓝黑；蓝色背景上使用深蓝黑或白色；深色背景上使用白色或浅蓝；仅允许局部浅蓝填充，不使用多色。

图标容器：可使用圆形仪表盘、方形设备格、架子格位或无容器形式；带容器时使用1.5—2px边框；重点图标可配浅蓝聚光。

图标使用规则：图标必须辅助理解，不替代重要文字；陌生图标必须配标签；一个页面只能使用一套统一线描图标；装饰图标不得重复堆叠；场景插图中的物件数量应根据屏幕宽度动态减少。

【Responsive Strategy｜响应式策略】

桌面端规则：保留完整工作室场景、陈列柜、台灯、设备和多个收藏物件；采用不对称图文布局；背景水印可完整出现；允许插画贴近页面底部并横向延展。

平板端规则：减少20%—35%的装饰物件；大型陈列柜拆成较少层板；双栏可保持但比例趋近1:1；背景水印缩小或降低透明度；导航折叠为精简模式。

移动端规则：仅保留最具识别性的2—4个物件，例如小型陈列柜、台灯、机器人或书本；场景改为纵向堆叠；主标题保持清晰；不允许小尺寸密集线稿影响识别；按钮优先全宽。

标题缩放规则：使用clamp()连续缩放；展示标题建议clamp(2.4rem,6vw,5.5rem)；一级标题clamp(2rem,4vw,3.5rem)；标题行数控制在2—3行以内。

栅格折叠规则：桌面12列转平板8列，再转移动4列；1024px以下减少场景复杂度；768px以下双栏折叠为单栏；媒体与文字顺序根据任务优先级调整。

按钮触控规则：移动端按钮最小高度48px，图标按钮不小于44×44px；按钮间距至少8px；不能将多个小型图标按钮密集排列。

媒体堆叠规则：移动端图片、视频和示意图全部100%宽度；多媒体网格转单列或双列；图注紧随媒体；放大预览保留16px安全边距。

【Accessibility｜无障碍规范】

对比度规则：深蓝黑文字与蓝色、浅蓝或白色背景的对比度必须达到WCAG AA；浅蓝文字不得直接放在主蓝背景上作为正文；重要文本优先使用深色或白色。

Focus可见规则：所有链接、按钮、输入框、分页和媒体控制必须有明显Focus边框；Focus不得被容器裁切；禁止移除默认Focus后不提供替代。

键盘操作规则：导航、按钮、表单、分页、图片预览和视频控件必须支持Tab、Shift+Tab、Enter、Space和Esc；操作顺序必须与视觉顺序一致。

触控目标尺寸：所有可点击区域不小于44×44px，推荐48×48px；小型线描图标必须通过透明点击区域扩大触控范围。

图片Alt规则：功能性图片描述其用途和核心内容；场景插画Alt需概括其表达的信息，不逐一罗列所有装饰物；纯背景水印和装饰性线稿使用空Alt。

链接可识别规则：正文链接必须同时具有下划线、图标、字重或边框变化，不得只依赖深浅蓝差异；外部链接提供明确图标。

语义结构规则：每页仅有一个H1；标题按H1、H2、H3顺序组织；主要区域使用header、nav、main、section、article和footer；步骤使用ol；按钮使用button；输入项必须绑定label和错误提示。

【Non-Negotiable UI Rules｜不可妥协的界面规则】

必须保留的视觉特征：必须使用高纯度蓝色作为主背景；必须使用深蓝黑线稿作为核心视觉语言；必须保留白色或浅蓝局部高光；必须出现至少一种工作室、陈列架、设备、台灯、书籍、工具或收藏物件式视觉元素；必须有明确底部基准线、架子层板或结构支撑线；必须使用低透明度大型背景水印或圆形徽章；必须保持单色统一、平面线描和轻科技收藏感。

禁止使用的视觉元素：禁止蓝紫霓虹、赛博朋克、玻璃拟态、复杂渐变、炫光、真实金属材质、厚重3D、彩色卡通、糖果色、柔和大阴影、照片拼贴、无边框白卡片瀑布流、通用企业后台风、随机图标库混搭和过度密集的小型装饰。

必须统一的组件规则：所有组件使用统一深色轮廓、圆角、线宽和字重；所有按钮状态逻辑一致；所有卡片遵循同一陈列格或设备面板语言；所有图片和视频使用统一媒体边框；所有步骤编号使用同一编号体系；所有图标必须属于同一线描风格；新增组件必须从现有颜色、边框、间距、圆角和字体令牌中选择。

必须遵守的交互规则：Hover、Focus、Active和Disabled状态必须完整；交互动效必须模拟设备、灯光、抽屉或标签的机械感；主要功能支持键盘；图片预览支持Esc关闭；不得使用影响阅读的连续动画；不得仅依靠颜色表达状态。

必须检查的响应式规则：必须在320px、375px、768px、1024px、1440px宽度下检查；不得出现横向滚动；复杂陈列插画在移动端必须主动简化；文字不得被物件遮挡；按钮触控区域必须达标；媒体不得超出容器；背景水印不得影响正文；线稿在缩小时不得糊成一团；导航展开后不得遮挡主要操作；正文最小字号不得低于14px，辅助信息不得低于12px。

最终效果应像一间被数字化的蓝色创意收藏工作室：整面明亮蓝色空间中，黑色精细线稿勾勒出陈列柜、灯具、书籍、工具、玩具与科技设备，少量白色和浅蓝聚光强调重点内容，所有组件都像被整齐摆放在架子上的功能物件。整体必须保持聪明、有趣、理性、年轻、统一和易用，既有插画故事感，又具备成熟数字产品所需的清晰结构与交互规范。

整体工作流

这个 Skill 的整体工作流大致如下：

输入教程内容
    ↓
选择已有风格，或者从参考图提取新风格
    ↓
整理步骤、截图、视频和链接
    ↓
按照真实操作顺序拆分页面
    ↓
生成单文件 HTML 教程
    ↓
本地打开或部署到服务器

默认的素材目录也比较简单：

tutorial.html

images/
  image_01.png
  image_02.png

videos/
  video_01.mp4
  video_02.mp4

把截图放到 images 文件夹，把视频放到 videos 文件夹，AI 会根据教程步骤，将对应素材插入页面。不需要搭建复杂的前端项目，也不依赖 Vue、React 或其他框架，最终交付的就是一个可以直接打开的 HTML 文件。

为什么我不让 AI 疯狂堆卡片？

现在很多 AI 生成的网页都有一个共同特点：卡片特别多。外面一个大卡片，里面三个小卡片，小卡片里面再放一个媒体卡片，一层套一层，看起来似乎很现代，实际上信息层级越来越乱。

所以我在 Skill 中写了几条比较严格的底层规则。

第一条：禁止卡片套卡片

页面尽量只保留一个主要内容容器，其他信息层级优先通过字号、字重、网格、分割线、留白、标签、媒体边框、验证提示和内容顺序来建立，而不是不断增加圆角矩形。

说得直白一点就是：

少套几层盒子，多把内容关系讲清楚。

也可以补一小段代码说明。

错误示例：

<div class="card">
  <div class="card">
    <div class="card">
      <img src="images/image_01.png" alt="操作截图">
    </div>
  </div>
</div>

推荐写法：

<section class="tutorial-step">
  <header class="step-header">
    <span class="step-label">步骤 01</span>
    <h2>下载并安装软件</h2>
  </header>

  <p>进入官方网站，下载与你当前操作系统匹配的版本。</p>

  <figure class="media-frame">
    <img src="images/image_01.png" alt="官方网站下载按钮位置">
    <figcaption>图 1：选择对应系统版本</figcaption>
  </figure>
</section>

这里的代码不要继续展开，控制在二十行左右即可。

第二条：装饰必须有意义

AI 很喜欢往页面里加各种“氛围元素”，比如渐变圆球、树叶、山丘、烟雾、光斑、小动物、漂浮图标和抽象几何图形。单独看可能挺好看，但放在教程页面里，很多时候只会干扰阅读。

所以这个 Skill 要求，任何插图或图形都必须有明确用途，例如强化教程主题、建立章节节奏、引导阅读方向、展示操作状态、标注图片内容、强化品牌气质或者提供状态反馈。解释不出用途的装饰，就直接去掉。

第三条：教程可读性优先

网页可以使用不同设计风格，但首先必须是一个能看懂的教程。不能为了视觉效果把步骤标题藏得很深，不能让截图和对应说明隔得特别远，也不能让用户看完整页以后，还是不知道自己到底有没有操作成功。

所以每一个步骤页面都会优先展示这些信息：

当前步骤
当前操作
操作原因
对应媒体
成功标准

设计风格应该为内容服务，而不是让教程内容去迁就视觉效果。

生成的网页支持哪些功能？

目前生成的教程网页重点支持分页式阅读、当前进度提示、图片点击放大、视频直接播放、全局图片编号、移动端适配和本地直接运行。

分页式阅读

教程会根据实际步骤拆分页面，用户可以通过“上一页”和“下一页”切换内容。顶部只保留一套导航区域，避免页面上到处都是翻页按钮。

当前进度提示

用户可以清楚看到当前是第几步、总共有多少步，以及当前处于什么阶段。

图片点击放大

教程截图可以点击放大查看。对于按钮位置、菜单选项、配置项和代码截图，这个功能会比较实用。

视频直接播放

操作录屏可以直接嵌入当前步骤，用户不需要跳转到其他页面，就可以边看边操作。

全局图片编号

所有图片和视频都会按照实际出现顺序统一编号：

图 1
图 2
图 3

不会每翻一页，又重新从图 1 开始。

移动端适配

在手机上会自动切换为单栏布局，同时保证按钮尺寸足够大、文字不会重叠、图片不会溢出、页面不会产生横向滚动，导航也仍然方便点击。

本地直接运行

生成的页面可以直接双击打开，不需要先运行开发服务器，也不要求用户懂前端，这对非技术用户会友好很多。

它适合哪些使用场景？

虽然最初的想法和 PPT 有关，但它实际上并不局限于“PPT 转网页”。准确来说，它更适合把各种具有明确流程的内容转成可阅读、可演示的网页。

例如软件安装教程、AI 工具使用指南、产品操作手册、企业内部培训、新员工入职说明、开发环境配置教程、知识库教程、品牌规范说明、项目汇报页面、课程讲解材料、工作流程说明、产品功能演示、客户交付文档以及售后使用指南。

只要内容存在明确的操作顺序，就可以尝试用这种方式展示。

一个简单的使用示例

假设我要制作一个“软件安装教程”，可以先准备以下内容：

第一步：进入官方网站
第二步：下载对应系统版本
第三步：运行安装程序
第四步：完成基础配置
第五步：验证软件是否正常运行

再准备对应截图：

images/
  image_01.png
  image_02.png
  image_03.png
  image_04.png
  image_05.png

然后告诉 AI：

请根据这些步骤和截图，生成一个分页式安装教程网页。

使用默认 UI 风格。

每一步都需要说明：
1. 当前操作
2. 为什么要这样做
3. 操作完成后的可见结果

Skill 会根据流程自动处理教程步骤拆分、页面分页、图片插入、全局图号、图片说明、上一页与下一页、当前页数、移动端布局、图片放大和成功状态提示，最终输出一个 tutorial.html 文件。

不喜欢默认风格怎么办？

项目提供了一套默认 UI 风格，但并不要求所有教程都长得一样。用户可以修改主色、字体、圆角、间距、导航样式、图片样式、视频样式、插图风格、页面动效和内容宽度。

也可以直接提供一张自己喜欢的参考图，让 AI 从中提取新的网页风格。例如可以创建这些风格：

minimal-editorial
retro-capsule
monochrome-tech
ink-wash-oriental
modern-corporate
soft-natural

之后生成新教程时，直接选择对应风格即可。这也是为什么我把“风格提取”和“教程生成”拆成两个独立工作流：风格可以反复复用，而教程内容则可以持续替换。

它和直接让 AI 写 HTML 有什么区别？

直接告诉 AI：

帮我写一个好看的教程网页。

当然也可以生成网页，但通常会遇到几个问题：风格不稳定、容易生成成宣传官网、过度使用卡片、图片和说明不对应、成功标准不清楚、多次修改后逻辑容易出错，以及移动端容易出现布局问题。

例如页面数量和步骤数量不匹配，上一页和下一页失效，最后一页按钮没有禁用，图片编号重复，按钮被挤压，文字重叠，图片超出屏幕，或者页面产生横向滚动。

Tutorial Website Builder 做的事情，就是把这些反复踩过的坑总结成固定生成规则。它不是只给 AI 一句提示词，而是给 AI 一套完整的工作流程、页面规范、设计约束、内容拆分方式、媒体处理规则和交付检查标准。

生成前还会进行配置确认

在正式生成页面之前，Skill 会确认用户是否需要调整默认设计参数，例如：

默认使用所选风格提示词。

是否需要修改主色、字体、圆角、间距、导航、媒体样式、插图风格或动效？

如果不需要，将按默认值生成。

这样既可以避免 AI 每次都反复追问，也可以让用户在真正生成之前调整关键视觉参数。如果用户只修改了主色，那么其他字体、间距和组件规则会继续沿用原风格，不会整套推倒重来。

页面生成之后还会自动检查

Skill 中还加入了一套交付前检查规则，主要包括：风格提示词是否统一应用，是否出现卡片套卡片，是否加入无意义装饰，教程阅读顺序是否清晰，上一页和下一页按钮是否正常，第一页和最后一页按钮是否正确禁用，页面数量和步骤数量是否一致，图片编号是否全局递增，图片和视频路径是否正确，图片是否有有效的 alt 文本，媒体是否有说明文字，外部链接是否在新标签页打开，页面能否作为本地 HTML 文件运行，以及手机端是否存在横向滚动、按钮裁剪和文字重叠。

这些规则看起来比较细，但真正使用 AI 生成页面时，很多问题往往就出在这些细节上。