</code></td>
<td><code>[必填] 替换为 PPT 标题 · Deck Title</code></td>
<td>实际 deck 标题(如 <code>一种新的工作方式 · Luke Wroblewski</code>)</td>
</tr>
</tbody></table>
<p>每次拷贝完 template.html 第一件事:grep 一下"[必填]" 确认全部替换完。</p>
<h4>2.2 · 选定主题色(5 套预设 · 不允许自定义)</h4>
<p>本 skill <strong>只允许从 5 套精心调配的预设里选一套</strong>,不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。</p>
<table>
<thead>
<tr>
<th>#</th>
<th>主题</th>
<th>适合</th>
</tr>
</thead>
<tbody><tr>
<td>1</td>
<td>🖋 墨水经典</td>
<td>通用 / 商业发布 / 不知道选啥的默认</td>
</tr>
<tr>
<td>2</td>
<td>🌊 靛蓝瓷</td>
<td>科技 / 研究 / 数据 / 技术发布会</td>
</tr>
<tr>
<td>3</td>
<td>🌿 森林墨</td>
<td>自然 / 可持续 / 文化 / 非虚构</td>
</tr>
<tr>
<td>4</td>
<td>🍂 牛皮纸</td>
<td>怀旧 / 人文 / 文学 / 独立杂志</td>
</tr>
<tr>
<td>5</td>
<td>🌙 沙丘</td>
<td>艺术 / 设计 / 创意 / 画廊</td>
</tr>
</tbody></table>
<p><strong>操作</strong>:</p>
<ol>
<li>基于内容主题推荐一套,或直接问用户选哪一套</li>
<li>打开 <code>references/themes.md</code>,找到对应主题的 <code>:root</code> 块</li>
<li><strong>整体替换</strong> <code>assets/template.html</code>(已拷贝版本)开头 <code>:root{</code> 块里标有"主题色"注释的那几行(<code>--ink</code> / <code>--ink-rgb</code> / <code>--paper</code> / <code>--paper-rgb</code> / <code>--paper-tint</code> / <code>--ink-tint</code>)</li>
<li>其他 CSS 都走 <code>var(--...)</code>,无需任何其他改动</li>
</ol>
<p><strong>硬规则</strong>:</p>
<ul>
<li>一份 deck 只用一套主题,不要中途换色</li>
<li>不要接受用户给的任意 hex 值——委婉拒绝并展示 5 套让选</li>
<li>不要混搭(例如 ink 取墨水经典、paper 取沙丘)——会彻底违和</li>
</ul>
<h3>Step 3 · 填充内容</h3>
<h4>3.0 · 预检:类名必须在模板的 <code><style></code> 里有定义（<strong>最重要</strong>）</h4>
<p><strong>这是所有生成问题的源头</strong>。layouts 骨架使用了很多类名,如果模板的 <code><style></code> 里没有对应定义,浏览器会 fallback 到默认样式——大标题字体错、卡片挤成一团、pipeline 糊成一行、图片堆到页面底部。</p>
<p><strong>两种风格类名互不通用</strong>(再次强调):</p>
<ul>
<li>风格 A 模板里有 <code>h-hero</code>(衬线)、<code>stat-card</code>、<code>grid-2-7-5</code>、<code>frame</code> 等</li>
<li>风格 B 模板里有 <code>h-hero</code>(无衬线)、<code>kpi-hero</code>、<code>accent-block</code>、<code>span-N</code>、<code>dots</code>、<code>grid-12</code> 等</li>
<li>同名 class 在两个模板里<strong>视觉表现完全不同</strong>(例:风格 A 的 <code>h-hero</code> 是 Noto Serif SC 衬线,风格 B 的 <code>h-hero</code> 是 Inter 无衬线)</li>
</ul>
<p><strong>在写任何 slide 代码之前:</strong></p>
<ol>
<li><strong>先 Read 当前用的模板</strong>(至少读到 <code><style></code> 块末尾):<ul>
<li>风格 A → <code>assets/template.html</code></li>
<li>风格 B → <code>assets/template-swiss.html</code></li>
</ul>
</li>
<li><strong>对照对应 layouts 文件的 Pre-flight 列表</strong>,确认你要用的每个类都在 <code><style></code> 里存在</li>
<li>如果某个类缺失:<strong>在模板的 <code><style></code> 里补上</strong>,不要在每个 slide 里 inline 重写</li>
<li><strong>模板是唯一的类名来源</strong>——不要发明新类名,如需自定义用 <code>style="..."</code> inline</li>
</ol>
<p><strong>风格 A 常见容易遗漏的类</strong>:
<code>h-hero</code> / <code>h-xl</code> / <code>h-sub</code> / <code>h-md</code> / <code>lead</code> / <code>kicker</code> / <code>meta-row</code> / <code>stat-card</code> / <code>stat-label</code> / <code>stat-nb</code> / <code>stat-unit</code> / <code>stat-note</code> / <code>pipeline-section</code> / <code>pipeline-label</code> / <code>pipeline</code> / <code>step</code> / <code>step-nb</code> / <code>step-title</code> / <code>step-desc</code> / <code>grid-2-7-5</code> / <code>grid-2-6-6</code> / <code>grid-2-8-4</code> / <code>grid-3-3</code> / <code>grid-6</code> / <code>grid-3</code> / <code>grid-4</code> / <code>frame</code> / <code>frame-img</code> / <code>img-cap</code> / <code>callout</code> / <code>callout-src</code> / <code>chrome</code> / <code>foot</code></p>
<p><strong>风格 B 常见容易遗漏的类</strong>(2026-05 重构后):</p>
<ul>
<li>画布:<code>canvas-card</code> / <code>chrome-min</code></li>
<li>排版:<code>h-hero</code>(无衬线 7.4vw weight 200) / <code>h-statement</code>(9.6vw) / <code>h-xl</code> / <code>h-md</code> / <code>t-cat</code>(SemiBold 600 小标) / <code>t-meta</code>(mono uppercase) / <code>lead</code> / <code>num-mega</code> / <code>mono</code></li>
<li>卡片(四类互斥):<code>card-ink</code> / <code>card-accent</code> / <code>card-fill</code> / <code>card-outlined</code></li>
<li>网格:<code>grid-12</code> / <code>grid-2-9</code> / <code>grid-2-9-5</code> / <code>span-N</code></li>
<li>时间线:<code>timeline-v</code> + <code>tl-node</code> + <code>tl-axis</code> + <code>dot</code> / <code>timeline-h</code> + <code>tl-h-node</code> + <code>tl-h-axis</code></li>
<li>图表:<code>kpi-tower-row</code> + <code>bar-tower</code> / <code>h-bar-chart</code> + <code>bar-row</code> + <code>bar-fill</code> / <code>spec-bars</code> + <code>bar-vert</code></li>
<li>装饰:<code>dot-mat</code>(SVG mask 实心点)/ <code>ring-mat</code>(描边圆)/ <code>cross-mat</code>(× 网格)/ <code>hr-hairline</code></li>
<li>版式专属:<code>cover-split</code> / <code>closing-split</code> / <code>duo-compare</code> + <code>vrule</code> / <code>manifesto-top</code> + <code>ink-banner-full</code> / <code>three-forces</code> / <code>loop-diagram</code> / <code>matrix-fill</code> + <code>matrix-cell</code> / <code>brief-grid</code> + <code>brief-card</code> / <code>system-diagram</code> / <code>why-now-grid</code> / <code>four-cards</code> / <code>stacked-ledger</code> + <code>ledger-row</code> / <code>tech-spec</code> / <code>image-hero</code> + <code>hero-img-wrap</code> + <code>hero-overlay-block</code> + <code>hero-stats</code></li>
<li>图片混排:<code>frame-img</code> / <code>fit-contain</code> / <code>r-21x9</code> / <code>r-16x9</code> / <code>r-16x10</code> / <code>h-22</code> / <code>h-26</code> / <code>swiss-img-split</code> / <code>swiss-img-grid</code> / <code>swiss-img-caption</code> / <code>swiss-keyline</code> / <code>swiss-lined</code></li>
<li>spacing token:<code>--sp-3</code>...<code>--sp-13</code>(8/12/16/24/32/40/48/64/80/96/160 px)</li>
</ul>
<h4>3.0.5 · 规划主题节奏（<strong>和类预检同等重要</strong>)</h4>
<p><strong>在挑布局之前</strong>,必须先列出每一页的主题 class(<code>hero dark</code> / <code>hero light</code> / <code>light</code> / <code>dark</code>)并写到文档或草稿里对齐。详细规则看 <code>references/layouts.md</code> 开头的"主题节奏规划"一节。</p>
<p><strong>强制规则</strong>:</p>
<ul>
<li>每页 section 必须带 <code>light</code> / <code>dark</code> / <code>hero light</code> / <code>hero dark</code> 之一,不要只写 <code>hero</code></li>
<li>连续 3 页以上同主题 = 视觉疲劳,不允许</li>
<li>8 页以上必须有 ≥1 个 <code>hero dark</code> + ≥1 个 <code>hero light</code></li>
<li>整个 deck 不能只有 <code>light</code> 正文页,必须有 <code>dark</code> 正文页制造呼吸</li>
<li>每 3-4 页插入 1 个 hero 页(封面/幕封/问题/大引用)</li>
</ul>
<p><strong>生成后自检</strong>:<code>grep 'class="slide' index.html</code> 列出所有主题,人工确认节奏合理再交付。</p>
<h4>3.1 · 挑布局</h4>
<p><strong>不要从零写 slide</strong>。打开对应的 layouts 文件,里面有 10 种现成布局骨架,每种都是完整可粘贴的 <code><section></code> 代码块。</p>
<p><strong>风格 A</strong> → <code>references/layouts.md</code>:</p>
<table>
<thead>
<tr>
<th>Layout</th>
<th>用途</th>
</tr>
</thead>
<tbody><tr>
<td>1. 开场封面</td>
<td>第 1 页</td>
</tr>
<tr>
<td>2. 章节幕封</td>
<td>每幕开场</td>
</tr>
<tr>
<td>3. 数据大字报</td>
<td>抛硬数据</td>
</tr>
<tr>
<td>4. 左文右图(Quote + Image)</td>
<td>身份反差 / 故事</td>
</tr>
<tr>
<td>5. 图片网格</td>
<td>多图对比 / 截图实证</td>
</tr>
<tr>
<td>6. 两列流水线(Pipeline)</td>
<td>工作流程</td>
</tr>
<tr>
<td>7. 悬念收束 / 问题页</td>
<td>幕末 / 收尾</td>
</tr>
<tr>
<td>8. 大引用页(Big Quote)</td>
<td>衬线金句 / takeaway</td>
</tr>
<tr>
<td>9. 并列对比(Before / After)</td>
<td>旧模式 vs 新模式</td>
</tr>
<tr>
<td>10. 图文混排(Lead Image + Side Text)</td>
<td>信息密集的图文页</td>
</tr>
</tbody></table>
<p><strong>风格 B</strong> → 先读 <code>references/swiss-layout-lock.md</code>,再读 <code>references/layouts-swiss.md</code>。</p>
<p>瑞士主题默认进入 <strong>Swiss locked mode</strong>:</p>
<ul>
<li>正文页只能使用原始参考 PPT 登记的 22 个版式 <code>S01-S22</code>;新增首页/尾页只能使用 Skill 明确提供的 <code>SWISS-COVER-ASCII</code> / <code>SWISS-CLOSING-ASCII</code>。</li>
<li>每个 <code><section class="slide"></code> 必须写 <code>data-layout="Sxx"</code>。没有 <code>data-layout</code> 就视为未登记版式。</li>
<li>不允许临时发明 <code>P23/P24</code>、<code>Swiss Image Split</code>、<code>Evidence Grid</code> 这类原始 22P 之外的正文结构,除非用户明确要求实验版式。</li>
<li>顶部中文标题默认左对齐、处在左上内容轴。不要把小标题放左列、大标题放右列,造成视觉居中;只有原始 statement/split 版式允许强中心叙事。</li>
<li>SVG 只负责几何图形。不要在 SVG 里写文字标签,所有标签改用 HTML 网格/卡片/caption。</li>
<li>地理/历史/城市路线/地点关系页使用 <code>S08 + Swiss Map Component</code>:先读 <code>references/swiss-map-component.md</code>,仍保留 <code>data-layout="S08"</code>。</li>
</ul>
<p>原始 22 个正文版式如下:</p>
<table>
<thead>
<tr>
<th>Layout</th>
<th>用途</th>
</tr>
</thead>
<tbody><tr>
<td>S01 Index Cover</td>
<td>原始索引封面</td>
</tr>
<tr>
<td>S02 Vertical Timeline + KPI</td>
<td>演化对比 / 年代变迁</td>
</tr>
<tr>
<td>S03 Split Statement</td>
<td>核心论点 / 左右分屏</td>
</tr>
<tr>
<td>S04 Six Cells</td>
<td>6 项概念定义</td>
</tr>
<tr>
<td>S05 Three Layers</td>
<td>三层架构</td>
</tr>
<tr>
<td>S06 KPI Tower</td>
<td>4 项数据视觉化高度差</td>
</tr>
<tr>
<td>S07 H-Bar Chart</td>
<td>5-10 项排名比较</td>
</tr>
<tr>
<td>S08 Duo Compare</td>
<td>Before/After 对照</td>
</tr>
<tr>
<td>S09 Dot Matrix Statement</td>
<td>大引述 / statement</td>
</tr>
<tr>
<td>S10 Split Closing</td>
<td>收束页</td>
</tr>
<tr>
<td>S11 Horizontal Timeline</td>
<td>4-7 步流程</td>
</tr>
<tr>
<td>S12 Manifesto + Ink Banner</td>
<td>阶段性结论</td>
</tr>
<tr>
<td>S13 Three Forces</td>
<td>3 个对等概念深化</td>
</tr>
<tr>
<td>S14 Loop Form</td>
<td>自学闭环 / 自动化</td>
</tr>
<tr>
<td>S15 Matrix + Hero Stat</td>
<td>8-12 项矩阵 + 总数据</td>
</tr>
<tr>
<td>S16 Multi-card Brief</td>
<td>6 项快讯小卡</td>
</tr>
<tr>
<td>S17 System Diagram</td>
<td>三层架构 / 生态地图</td>
</tr>
<tr>
<td>S18 Why Now</td>
<td>三论点 + 数据支撑</td>
</tr>
<tr>
<td>S19 Four Cards</td>
<td>4 项等权特性</td>
</tr>
<tr>
<td>S20 Stacked KPI Ledger</td>
<td>纵向账单数据</td>
</tr>
<tr>
<td>S21 Tech Spec Sheet</td>
<td>产品规格 / benchmark</td>
</tr>
<tr>
<td>S22 Image Hero</td>
<td>21:9 顶图 + 标题块 + 三列 KPI</td>
</tr>
</tbody></table>
<p><strong>登记扩展</strong>:<code>S08 + Swiss Map Component</code> 用于地点、人物住所、路线、城市关系。它不是新 layout,而是 S08 右侧插槽的 MapLibre 地图组件;必须按 <code>references/swiss-map-component.md</code> 的点位、连线、卡片和右上角缩放/拖动控制实现。</p>
<p>选对应 layout,粘过去,改文案和图片路径即可。<strong>务必先完成 3.0 预检</strong>。</p>
<p><strong>风格 B 版式多样性硬规则</strong>:</p>
<ul>
<li>7-8 页 deck 至少使用 <strong>6 个不同 S 编号版式</strong>;10 页以上至少使用 8 个不同版式。</li>
<li>如果用户说"测试模板 / 看看效果 / 多一点版式",必须覆盖:一个封面、一个收尾、至少 1 个对比或时间线(S08/S11/S02)、至少 1 个结构图(S14/S17/S15)、至少 1 个图片版式(S22 或 S15/S16 图片格改造)。</li>
<li>不允许连续 3 页使用同一种主体结构,例如连续三页 <code>head + grid + card</code>。</li>
<li>图片页不能偷懒发明新结构。2-3 张图时,用 S15/S16 的原始网格骨架改造成图片格;单张大图用 S22。</li>
<li>开写 HTML 前先列一张 <code>页码 → data-layout → 选用理由 → 图片槽位</code> 草稿;交付前运行 <code>node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html</code>。</li>
</ul>
<h4>3.2 · 图片比例规范</h4>
<p>永远用<strong>标准比例</strong>,不要用原图奇葩比例(如 <code>2592/1798</code>):</p>
<table>
<thead>
<tr>
<th>场景</th>
<th>推荐比例</th>
</tr>
</thead>
<tbody><tr>
<td>S22 顶部主图</td>
<td><strong>21:9</strong>;照片关键主体放中央安全区</td>
</tr>
<tr>
<td>S15/S16 多图格</td>
<td>统一 21:9 或统一 16:10,不能混用</td>
</tr>
<tr>
<td>左文右图 主图(风格 A)</td>
<td>16:10 或 4:3 + <code>max-height:56vh</code></td>
</tr>
<tr>
<td>图片网格(风格 A)</td>
<td><strong>固定 <code>height:26vh</code></strong>,不用 aspect-ratio</td>
</tr>
<tr>
<td>左小图 + 右文字</td>
<td>1:1 或 3:2</td>
</tr>
<tr>
<td>全屏主视觉</td>
<td>16:9 + <code>max-height:64vh</code></td>
</tr>
<tr>
<td>图文混排小插图</td>
<td>3:2 或 3:4</td>
</tr>
</tbody></table>
<p><strong>默认不要让图片 <code>align-self:end</code></strong>——会滑到页面底部,很容易碰到分页组件。用 grid 容器 + <code>align-items:start</code>(template 已预设)让图片贴顶即可;如果确实需要图文底对齐,必须先控制图片高度,再使用模板已有安全区类 <code>.nav-safe-bottom</code> / <code>.nav-safe-bottom-tight</code>,不要让最低处碰到分页组件。</p>
<p><strong>风格 B 瑞士风额外规则</strong>:</p>
<ul>
<li>单张大图用 S22;多图测试用 S15/S16 的原始卡片网格改造,不要用未登记的 P23/P24</li>
<li>生成图片前先写 <code>data-image-slot</code>:例如 <code>s22-hero-21x9</code> / <code>s15-grid-21x9</code> / <code>s16-brief-21x9</code></li>
<li>S22 配图默认生成 21:9,提示词必须包含 <code>subject centered in the safe middle area</code>;照片容器用 <code>object-position:center 35%</code>,不要用 <code>top center</code></li>
<li>图片容器必须直角、无阴影、无圆角;默认背景用白色 <code>var(--paper)</code>,不要用灰底包白底信息图</li>
<li>白底 GPT 信息图/流程图/UI 图默认不要加外框描边,不要随手套 <code>.swiss-keyline</code>;需要强调时只用 <code>.swiss-lined</code> 的顶部 accent 线</li>
<li>UI/信息图如果是用户原始截图或文字密集图,才用 <code>.fit-contain</code>;如果已按 S15/S16 槽位重生成,必须用 <code>.frame-img.r-21x9</code> / <code>.frame-img.r-16x10</code> 铺满容器,不要固定 <code>height:18vh</code> 后把图缩小</li>
<li>多图同组必须统一图片槽位、比例和高度,不能混用</li>
<li>GPT-M 2.0 生成图使用 <code>image-prompts.md</code> 的"风格 B:瑞士国际主义配图规则"</li>
<li>任何图片、caption、timeline label、footnote 的最低处都不能进入底部分页区域;需要贴底时用 <code>.nav-safe-bottom</code> / <code>.nav-safe-bottom-tight</code>,不要手写 <code>bottom:2vh</code></li>
</ul>
<h4>3.2.1 · 中文大标题字号分档(风格 B 必做)</h4>
<p>中文方块字视觉面积大,不能直接套英文 hero 的 6.8-7vw。写中文大标题前先分档:</p>
<table>
<thead>
<tr>
<th>标题形态</th>
<th>推荐字号</th>
</tr>
</thead>
<tbody><tr>
<td>1 行,≤ 8 个中文字符</td>
<td><code>min(6.4vw,11.2vh)</code></td>
</tr>
<tr>
<td>2 行,每行≤ 8 个中文字符</td>
<td><code>min(5.8vw,10.2vh)</code></td>
</tr>
<tr>
<td>2 行,任一行 9-12 个中文字符</td>
<td><code>min(5.2vw,9.2vh)</code></td>
</tr>
<tr>
<td>3 行或更长</td>
<td>优先改写标题;不得已用 <code>min(4.6vw,8.2vh)</code></td>
</tr>
</tbody></table>
<p>如果标题挤占了图片或正文区域,先压缩标题文案,再降字号;不要靠把下方内容推到底来硬塞。</p>
<p>组件细节(字体、颜色、网格、图标、callout、stat-card 等)在 <code>references/components.md</code>。</p>
<h3>Step 4 · 对照检查清单自检</h3>
<p>生成完一定要打开 <code>references/checklist.md</code>，逐项对照。里面总结了<strong>真实迭代过程中踩过的所有坑</strong>，P0 级别的问题（emoji、图片撑破、标题换行、字体分工）必须全部通过。</p>
<h4>4.0 · 不只看代码:必须打开网页做视觉核对</h4>
<p>代码只能证明类名和结构存在,不能证明版式舒服。生成后必须打开网页逐页看:</p>
<ol>
<li>同时打开原始参考 PPT、当前模板或生成页、测试 PPT;原始参考是 <code>/Users/guohao/Documents/op7418的仓库/项目/Thin-Harness-Fat-Skills/ppt/index.html</code>。</li>
<li>截图前等入场动效稳定(约 1-2 秒),不要把动画中间态当成版式问题。</li>
<li>先看视觉:大标题字重、标题与内容间距、图片是否与正文对齐、图片/说明是否碰到底部分页组件。</li>
<li>再看代码:确认该页选用的版式与内容形状匹配,没有把数据专用版式拿来讲概念,也没有把可选组件堆成装饰。</li>
<li>对照原始参考模板时,以实际页面用法为准,不要只看 CSS helper 定义;原始页面的大字实际多为 200/300,不要被 raw CSS 里的 700/800/900 带偏。</li>
<li>如果页面别扭,先判断是版式选错、必选组件缺失、可选组件滥用,还是间距/安全区问题;不要直接靠加 margin 硬救。</li>
</ol>
<h4>风格 A · 电子杂志风必查</h4>
<ol>
<li><strong>大标题必须是衬线字体</strong>——如果显示成非衬线,99% 是 Step 3.0 预检没做,<code>h-hero</code> 类在 template.html 里缺失</li>
<li><strong>图片网格里只用 <code>height:Nvh</code>,不用 <code>aspect-ratio</code></strong>(会撑破)</li>
<li><strong>图片不能堆到页面底部</strong>——不要用 <code>align-self:end</code>,用 grid + <code>align-items:start</code>(见 Step 3.2)</li>
<li><strong>图片只能用标准比例</strong>(16:10 / 4:3 / 3:2 / 1:1 / 16:9),不要复制原图的奇葩比例</li>
<li><strong>中文大标题 ≤ 5 字且 <code>nowrap</code></strong>(避免 1 字 1 行)</li>
<li><strong>用 Lucide,不用 emoji</strong></li>
<li><strong>标题用衬线,正文用非衬线,元数据用等宽</strong></li>
</ol>
<h4>风格 B · 瑞士国际主义必查</h4>
<ol>
<li><strong>全程无衬线</strong>——任何衬线字体出现都是错的(检查 <code>font-family</code> 没用 <code>--serif</code> 类变量)</li>
<li><strong>只有一个 accent 色</strong>——一份 deck 不能同时出现 IKB 蓝 + 柠檬黄 + 安全橙等多个高亮色</li>
<li><strong>不允许渐变 / 阴影 / 圆角</strong>——所有色块直角纯色,任何 <code>box-shadow</code> / <code>linear-gradient</code> / <code>border-radius</code> > 0 都要砍掉(rule 横线除外)</li>
<li><strong>极致字号对比</strong>——主标题与正文比例 ≥ 8:1</li>
<li><strong>大字号必须双约束限高</strong>——<code>font-size:min(Xvw, Yvh)</code>,只用 vw 在标准 16:9 屏会溢出(吸取 P15/P20/P22 教训)</li>
<li><strong>大字字重 200</strong>(ExtraLight)——字号越大越细,瑞士风灵魂;<strong>禁止</strong> 600/700/800 大字</li>
<li><strong>卡片填充类型互斥</strong>——<code>card-ink</code> / <code>card-accent</code> / <code>card-fill</code> / <code>card-outlined</code> 四类<strong>不能混用</strong>(禁止"蓝底+蓝描边"、"灰底+描边"等)</li>
<li><strong>多卡并列时统一样式</strong>——3-12 张卡用同一类(优先 <code>card-fill</code> 灰底);只突出一项时单独换 <code>card-accent</code>,且<strong>只允许一张</strong></li>
<li><strong>直角到底</strong>——任何 <code>border-radius</code> 都不允许;装饰用 8×8 直角小方块,<strong>不要</strong> 9px 圆形点</li>
<li><strong>图标用 lucide,不自己画 SVG</strong>——<code><i data-lucide="name"></i></code> + <code>lucide.createIcons()</code>,选棱角风格(避免圆胖)</li>
<li><strong>时间线对齐</strong>——axis 列固定 12px + dot 绝对定位,<strong>不要</strong>用 grid <code>justify-self</code>(会与虚线错位)</li>
<li><strong>章节级标题与内容间距 ≥ 9vh</strong>——避免拥挤(吸取 P15/P16 教训)</li>
<li><strong>每页一个语义化动效 recipe</strong>——不是统一 fade-up,数字 scale 弹入、bar scaleY 拉起、SVG stroke 描线、节点序列点亮等;<strong>禁止</strong>所有页用同一个 generic 配方</li>
<li><strong>playSlide 入口 reveal 容器</strong>——<code>[data-anim]</code> 容器先强制 opacity:1,recipe 内再用 motion <code>{opacity:[0,1]}</code> 覆盖,否则有些页会"看不见"</li>
<li><strong>ESC 索引页可见性</strong>——cloned slide 必须有 CSS override 让 <code>[data-anim]</code> 在缩略图里 opacity:1</li>
<li><strong>Helvetica/Inter 兜底中文字体</strong>——Windows 用户没有"苹方",必须 fallback 到 <code>"Microsoft YaHei UI", "Noto Sans SC"</code></li>
<li><strong>字体粗细体例</strong>:大字 200 / 正文 300 / <code>t-cat</code> SemiBold 600 / <code>t-meta</code> mono uppercase</li>
<li><strong>保留低功耗快捷键</strong>——右下角必须提示 <code>B 静态</code>;按 <code>B</code> 切换 <code>body.low-power</code>,停止 WebGL/ASCII canvas RAF 和 Motion 入场动画</li>
<li><strong>装饰元素严格在 grid 内</strong>——bars 矩阵、点阵、ring-mat 不能贴边或溢出页面</li>
<li><strong>底部内容预留 nav 空间</strong>——nav 在 ~97vh,内容收尾不要过 93vh(吸取 P22 KPI 大字溢底教训)</li>
<li><strong>图片容器直角无阴影</strong>——<code>.frame-img</code> 不加 <code>border-radius</code> / <code>box-shadow</code>;边界只用 hairline</li>
<li><strong>S15/S16/S22 图片同组一致</strong>——同一组图片统一比例、高度、边距、线条粗细;信息图/UI 图加 <code>.fit-contain</code></li>
<li><strong>组件角色要正确</strong>——S15/S16 图片格需要 caption 信息锚点;S22 的 KPI/说明是必选;数据专用版式必须有真实数据,不能靠文案硬填</li>
<li><strong>通用/非通用版式要分清</strong>——S03/S08/S11/S19 较通用;S06/S07/S20/S21/S22 是数据/案例专用;S14/S15/S17 是结构专用</li>
</ol>
<h3>Step 5 · 本地预览</h3>
<p>直接在浏览器打开 <code>index.html</code> 就行。macOS 下：</p>
<pre class="brush:php;toolbar:false;">open "项目/XXX/ppt/index.html"
</pre>
<p>不需要本地服务器。图片走相对路径 <code>images/xxx.png</code>。</p>
<h3>Step 6 · 迭代</h3>
<p>根据用户反馈修改——模板的 CSS 已经高度参数化，90% 的调整都是改 inline style（字号 <code>font-size:Xvw</code> / 高度 <code>height:Yvh</code> / 间距 <code>gap:Zvh</code>）。</p>
<h3>Step 7 · 生成可编辑的 .pptx（可选）</h3>
<p>如果用户需要可编辑的 PowerPoint 文件（用于 PowerPoint/Keynote/WPS 进一步编辑），可以使用内置脚本将 HTML 转换为 .pptx：</p>
<p><strong>方案一：Python 脚本（无需浏览器）</strong></p>
<pre class="brush:php;toolbar:false;">pip install python-pptx
# 风格 A + 墨水经典主题（默认）
python scripts/html_to_pptx.py 项目/XXX/ppt/index.html 项目/XXX/ppt/output.pptx
# 风格 A + 指定主题
python scripts/html_to_pptx.py 项目/XXX/ppt/index.html 项目/XXX/ppt/output.pptx A 靛蓝瓷
# 风格 B + IKB蓝主题
python scripts/html_to_pptx.py 项目/XXX/ppt/index.html 项目/XXX/ppt/output.pptx B IKB蓝
</pre>
<p><strong>方案二：浏览器方案（高精度，推荐）</strong></p>
<p>使用 Playwright + pptxgenjs，通过浏览器 DOM 的 <code>getBoundingClientRect()</code> 获取精确位置，还原度更高。</p>
<pre class="brush:php;toolbar:false;">cd scripts/puppeteer
npm install
npx playwright install chromium
# 生成 PPTX
node html_to_pptx_browser.js 项目/XXX/ppt/index.html 项目/XXX/ppt/output.pptx ikb
</pre>
<p><strong>主题选项</strong>（浏览器方案）：</p>
<ul>
<li><code>default</code> - 墨水经典</li>
<li><code>ikb</code> - IKB 克莱因蓝</li>
<li><code>lemon</code> - 柠檬黄</li>
<li><code>green</code> - 柠檬绿</li>
<li><code>orange</code> - 安全橙</li>
</ul>
<p><strong>方案对比</strong>：</p>
<table>
<thead>
<tr>
<th>方案</th>
<th>精度</th>
<th>依赖</th>
<th>适合场景</th>
</tr>
</thead>
<tbody><tr>
<td>Python 脚本</td>
<td>★★★☆☆ CSS 类名推断</td>
<td>python-pptx</td>
<td>批量处理、无需浏览器</td>
</tr>
<tr>
<td>浏览器方案</td>
<td>★★★★★ getBoundingClientRect</td>
<td>Node.js + Playwright</td>
<td>高还原度需求</td>
</tr>
</tbody></table>
<p><strong>详细说明</strong>见 <code>references/pptx-guide.md</code>。</p>
<h2>资源文件导览</h2>
<pre class="brush:php;toolbar:false;">guizang-ppt-skill/
├── SKILL.md ← 你正在读
├── assets/
│ ├── template.html ← 风格 A · 电子杂志风模板（种子文件）
│ ├── template-swiss.html ← 风格 B · 瑞士国际主义风模板（种子文件）
│ ├── screenshot-backgrounds/ ← 截图美化内置背景(WebP):style-a 5 套 / style-b 4 套
│ └── motion.min.js ← Motion One 本地副本（离线兜底,约 64KB,共用）
├── scripts/
│ ├── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐
│ └── html_to_pptx.py ← HTML → .pptx 转换脚本（生成可编辑 PowerPoint）
└── references/
├── components.md ← 组件手册（字体、色、网格、图标、callout、stat、pipeline、动效... 风格 A 适用）
├── layouts.md ← 风格 A · 10 种页面布局骨架（可直接粘贴,含动效标记）
├── swiss-layout-lock.md ← 风格 B · 原始 22P 版式锁,正文页必须按这里登记
├── layouts-swiss.md ← 风格 B · 原始 22P 骨架说明 + 少量明确标注的实验区
├── swiss-map-component.md ← 风格 B · S08 地图扩展组件(MapLibre 点位/连线/卡片/控制)
├── themes.md ← 风格 A · 5 套主题色预设（只能选不能自定义）
├── themes-swiss.md ← 风格 B · 4 套瑞士风主题色预设（IKB / 柠檬黄 / 柠檬绿 / 安全橙）
├── image-prompts.md ← GPT-M 2.0 配图类型、比例和基础提示词
├── screenshot-framing.md ← CleanShot X 式截图适配语义 + 内置背景资产映射
├── pptx-guide.md ← HTML → .pptx 转换指南（生成可编辑 PowerPoint）
└── checklist.md ← 质量检查清单（P0/P1/P2/P3 分级）
</pre>
<p><strong>加载顺序建议</strong>：</p>
<ol>
<li>先读完 <code>SKILL.md</code>(这个文件)了解整体</li>
<li>Step 1 需求澄清<strong>第一问</strong>先确定风格 A 还是 B,然后:<ul>
<li>风格 A:读 <code>themes.md</code> 帮用户选一套主题色</li>
<li>风格 B:读 <code>themes-swiss.md</code> 帮用户选一套主题色</li>
</ul>
</li>
<li><strong>动手前 Read 对应模板的 <code><style></code> 块</strong>——这是类名的唯一来源,缺类会导致整页样式崩<ul>
<li>风格 A → <code>assets/template.html</code></li>
<li>风格 B → <code>assets/template-swiss.html</code></li>
</ul>
</li>
<li>读对应的 layouts 文件挑布局:<ul>
<li>风格 A → <code>layouts.md</code>(顶部有 Pre-flight 类名清单、主题节奏规划、动效 recipe 决策树)</li>
<li>风格 B → <strong>先读 <code>swiss-layout-lock.md</code></strong>,再读 <code>layouts-swiss.md</code>;正文页必须从 S01-S22 选择,每页写 <code>data-layout</code></li>
</ul>
</li>
<li>如果风格 B 需要地点、路线、人物住所或城市关系地图,读 <code>swiss-map-component.md</code></li>
<li>如果在 Codex 中生成配图,读 <code>image-prompts.md</code> 挑图片类型、比例和基础提示词;如果是用户原始截图,先读 <code>screenshot-framing.md</code>,优先使用 <code>assets/screenshot-backgrounds/</code> 的内置背景资产</li>
<li>细节调整时读 <code>components.md</code> 查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在 <code>layouts-swiss.md</code> 附录)</li>
<li>生成后先运行 <code>node scripts/validate-swiss-deck.mjs path/to/index.html</code>,再读 <code>checklist.md</code> 自检</li>
</ol>
<p><strong>动效相关</strong>:模板已把 Motion One 的加载和 recipe 逻辑内嵌到底部 module script。你不需要改 JS,只需要按 <code>layouts.md</code> / <code>layouts-swiss.md</code> 的骨架在 HTML 里加 <code>data-anim</code> / <code>data-animate</code> 即可。离线演示靠 <code>assets/motion.min.js</code>,断网时自动降级为"无动画但内容可读"。风格 B 模板必须保留 <code>B</code> 键低功耗模式:切换后停止 WebGL/ASCII canvas RAF,取消正在运行的 Web Animations,并把当前页内容直接 reveal 到静态最终态。</p>
<h2>核心设计原则（哲学）</h2>
<h3>风格 A · 电子杂志风（5 轮迭代总结）</h3>
<blockquote>
<p>违反其中任何一条，杂志感都会垮。</p>
</blockquote>
<ol>
<li><strong>克制优于炫技</strong> — WebGL 背景只在 hero 页透出，普通页几乎看不见</li>
<li><strong>结构优于装饰</strong> — 不用阴影、不用浮动卡片、不用 padding box，一切信息靠<strong>大字号 + 字体对比 + 网格留白</strong></li>
<li><strong>内容层级由字号和字体共同定义</strong> — 最大衬线 = 主标题，中衬线 = 副标，大非衬线 = lead，小非衬线 = body，等宽 = 元数据</li>
<li><strong>图片是第一公民</strong> — 图片只裁底部，保证顶部和左右完整；网格用 <code>height:Nvh</code> 固定，不要用 <code>aspect-ratio</code> 撑</li>
<li><strong>节奏靠 hero 页</strong> — hero 和 non-hero 交替，才不累眼睛</li>
<li><strong>术语统一</strong> — Skills 就是 Skills，不要中英混合翻译</li>
</ol>
<h3>风格 B · 瑞士国际主义风</h3>
<blockquote>
<p>违反其中任何一条，画面瞬间从瑞士掉到 PowerPoint。</p>
</blockquote>
<ol>
<li><strong>单一锚点色</strong> — 一份 deck 只用一个 accent，不允许多色高亮拼贴</li>
<li><strong>极致字号对比</strong> — 主标题与正文比例 ≥ 8:1,KPI 必须是"Data Hero"(屏幕宽度的 18-22%)</li>
<li><strong>无衬线只此一家</strong> — Inter / Helvetica / Noto Sans SC,任何衬线都是错的</li>
<li><strong>直角纯色</strong> — 不允许渐变 / 阴影 / 圆角(rule 横线除外)</li>
<li><strong>网格至上</strong> — 所有元素吸附到 12-col grid,左对齐 + 大幅留白做非对称美学</li>
<li><strong>Hairline 是手术刀</strong> — 1px 的极细分割线就够,不要加粗、不要加阴影</li>
<li><strong>点阵装饰只在 hero 页透出</strong> — 正文页保持纯净底色</li>
</ol>
<h2>参考作品</h2>
<p>本 skill 的两种风格分别参考了：</p>
<p><strong>风格 A · 电子杂志风</strong>:</p>
<ul>
<li>歸藏 "一人公司：被 AI 折叠的组织" 分享（2026-04-22，27 页）</li>
<li><em>Monocle</em> 杂志的版式</li>
<li>YC 总裁 Garry Tan "Thin Harness, Fat Skills" 那篇博客的 demo</li>
</ul>
<p><strong>风格 B · 瑞士国际主义风</strong>:</p>
<ul>
<li>Massimo Vignelli 的 NYC Subway / Unimark 系统</li>
<li><em>Helvetica Forever</em> 的字体设计语言</li>
<li>Josef Müller-Brockmann 的网格系统经典著作</li>
<li>当代设计:Acne Studios / Off-White / IKEA / Beck Design</li>
</ul>
<p>可以把它们当做风格锚点。</p> </div>
</div>
<script>
layui.use(["jquery"], function () {
var $ = layui.jquery;
function switchIndexMain21Tab(index) {
$("#skillML3_title button").eq(index).addClass("active").siblings().removeClass("active");
$("#skillML3_body .skillML3_bodys").eq(index).addClass("active").siblings().removeClass("active");
}
$("#skillML3_title button").click(function () {
switchIndexMain21Tab($(this).index());
});
});
</script>
<div class="catalogue_card">
<div class="catalogue_card_title">
<b></b>
<span>目录</span>
</div>
<div class="catalogue_cards"></div>
</div>
<div class="artlef-down">
<div class="authormore">
<div class="rightdTitle flexRow">
<div class="title-left flexRow">
<b></b>
<p>作者最新文章</p>
</div>
</div>
<div class="authlist flexColumn">
<div class="autharts flexRow">
<a class="autharta flexRow" target="_blank" href="/faq/3345617.html" title="Word 首行缩进和悬挂缩进设置：段落格式规范与标尺调整"><b></b>
<p class="overflowclass">Word 首行缩进和悬挂缩进设置：段落格式规范与标尺调整</p>
</a>
<div class="authtime flexRow">
<b></b>
<p>2026-10-28 14:26</p>
</div>
</div>
</div>
<div class="authlist flexColumn">
<div class="autharts flexRow">
<a class="autharta flexRow" target="_blank" href="/faq/3345629.html" title="Word 脚注和尾注怎么插入：学术文档引用规范与格式设置"><b></b>
<p class="overflowclass">Word 脚注和尾注怎么插入：学术文档引用规范与格式设置</p>
</a>
<div class="authtime flexRow">
<b></b>
<p>2026-10-28 14:28</p>
</div>
</div>
</div>
<div class="authlist flexColumn">
<div class="autharts flexRow">
<a class="autharta flexRow" target="_blank" href="/faq/3345630.html" title="伟达与Meta深化AI合作 拓展智能Agent生态"><b></b>
<p class="overflowclass">伟达与Meta深化AI合作 拓展智能Agent生态</p>
</a>
<div class="authtime flexRow">
<b></b>
<p>2026-10-28 14:28</p>
</div>
</div>
</div>
<div class="authlist flexColumn">
<div class="autharts flexRow">
<a class="autharta flexRow" target="_blank" href="/faq/3345632.html" title="抖音怎么跨界电影？抖音短剧创作平台"><b></b>
<p class="overflowclass">抖音怎么跨界电影？抖音短剧创作平台</p>
</a>
<div class="authtime flexRow">
<b></b>
<p>2026-10-28 14:28</p>
</div>
</div>
</div>
<div class="authlist flexColumn">
<div class="autharts flexRow">
<a class="autharta flexRow" target="_blank" href="/faq/3345648.html" title="Word 分栏排版怎么设置：等宽和偏左偏右分栏完整教程"><b></b>
<p class="overflowclass">Word 分栏排版怎么设置：等宽和偏左偏右分栏完整教程</p>
</a>
<div class="authtime flexRow">
<b></b>
<p>2026-10-28 14:29</p>
</div>
</div>
</div>
<div class="authlist flexColumn">
<div class="autharts flexRow">
<a class="autharta flexRow" target="_blank" href="/faq/3345651.html" title="抖音时间直播怎么设置？抖音直播伴侣怎么用"><b></b>
<p class="overflowclass">抖音时间直播怎么设置？抖音直播伴侣怎么用</p>
</a>
<div class="authtime flexRow">
<b></b>
<p>2026-10-28 14:30</p>
</div>
</div>
</div>
<div class="authlist flexColumn">
<div class="autharts flexRow">
<a class="autharta flexRow" target="_blank" href="/faq/3345656.html" title="小红书发货超时会罚款吗？小红书揽件超时有没有事"><b></b>
<p class="overflowclass">小红书发货超时会罚款吗？小红书揽件超时有没有事</p>
</a>
<div class="authtime flexRow">
<b></b>
<p>2026-10-28 14:30</p>
</div>
</div>
</div>
<div class="authlist flexColumn">
<div class="autharts flexRow">
<a class="autharta flexRow" target="_blank" href="/faq/3345697.html" title="Blazor Server 组件点击事件不触发的常见原因与解决方案"><b></b>
<p class="overflowclass">Blazor Server 组件点击事件不触发的常见原因与解决方案</p>
</a>
<div class="authtime flexRow">
<b></b>
<p>2026-10-28 14:35</p>
</div>
</div>
</div>
<div class="authlist flexColumn">
<div class="autharts flexRow">
<a class="autharta flexRow" target="_blank" href="/faq/3345713.html" title="抖音怎么让图上热门？抖音流量怎么推流"><b></b>
<p class="overflowclass">抖音怎么让图上热门？抖音流量怎么推流</p>
</a>
<div class="authtime flexRow">
<b></b>
<p>2026-10-28 14:37</p>
</div>
</div>
</div>
<div class="authlist flexColumn">
<div class="autharts flexRow">
<a class="autharta flexRow" target="_blank" href="/faq/3345735.html" title="如何为 colspan 表头下的单元格设置更细（或视觉区分）的内部边框"><b></b>
<p class="overflowclass">如何为 colspan 表头下的单元格设置更细（或视觉区分）的内部边框</p>
</a>
<div class="authtime flexRow">
<b></b>
<p>2026-10-28 14:40</p>
</div>
</div>
</div>
</div>
<div class="moreAi">
<div class="rightdTitle flexRow">
<div class="title-left flexRow">
<b></b>
<p>热门AI工具</p>
</div>
<a class="rititle-more flexRow" target="_blank" href="/ai" title="热门AI工具"><span>更多</span><b></b></a>
</div>
<div class="moreailist flexRow">
<div class="aibtns flexRow">
<a target="_blank" href="/ai/2363" title="墨刀AI" class="aibtnimga">
<img src="https://img.php.cn/upload/ai_manual/001/246/273/6a82db90becd6869.png?x-oss-process=image/resize,m_mfit,h_76,w_76,limit_0" alt="墨刀AI" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" />
</a>
<div class="aibtn-right flexColumn">
<div class="abripone_f">
<a target="_blank" href="/ai/2363" title="墨刀AI" class="overflowclass abripone">墨刀AI</a>
<span class="hot_span">Hot</span>
</div>
<p class="overflowclass abriptwo">一款AI图像与设计工具，主要用于产品经理的专属智能体，适合需要提升相关任务效率的用户。</p>
<div class="aidconstab flexRow">
<a title="AI设计工具" class="aidcontbp flexRow flexcenter" href="/ai/tag/design" target="_blank" >AI设计工具</a><a title="Agent智能体" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-agent" target="_blank" >Agent智能体</a> </div>
</div>
</div>
<div class="aibtns flexRow">
<a target="_blank" href="/ai/2780" title="UpDream" class="aibtnimga">
<img src="https://img.php.cn/upload/ai_manual/000/969/633/6a82e315d584b724.webp?x-oss-process=image/resize,m_mfit,h_76,w_76,limit_0" alt="UpDream" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" />
</a>
<div class="aibtn-right flexColumn">
<div class="abripone_f">
<a target="_blank" href="/ai/2780" title="UpDream" class="overflowclass abripone">UpDream</a>
<span class="hot_span">Hot</span>
</div>
<p class="overflowclass abriptwo">一款AI视频创作工具，主要用于哔哩哔哩推出的自研AI视频创作工具，适合需要提升相关任务效率的用户。</p>
<div class="aidconstab flexRow">
<a title="AI视频创作" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-video-creation" target="_blank" >AI视频创作</a><a title="视频生成" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-video-creation/video-generate" target="_blank" >视频生成</a> </div>
</div>
</div>
<div class="aibtns flexRow">
<a target="_blank" href="/ai/726" title="豆包大模型" class="aibtnimga">
<img src="https://img.php.cn/upload/ai_manual/001/246/273/69b379b1c5e3f597.png?x-oss-process=image/resize,m_mfit,h_76,w_76,limit_0" alt="豆包大模型" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" />
</a>
<div class="aibtn-right flexColumn">
<div class="abripone_f">
<a target="_blank" href="/ai/726" title="豆包大模型" class="overflowclass abripone">豆包大模型</a>
</div>
<p class="overflowclass abriptwo">豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。</p>
<div class="aidconstab flexRow">
<a title="AI编程开发" class="aidcontbp flexRow flexcenter" href="/ai/tag/code" target="_blank" >AI编程开发</a><a title="AI大模型" class="aidcontbp flexRow flexcenter" href="/ai/tag/code/large-model" target="_blank" >AI大模型</a> </div>
</div>
</div>
<div class="aibtns flexRow">
<a target="_blank" href="/ai/2237" title="Seko" class="aibtnimga">
<img src="https://img.php.cn/upload/ai_manual/000/969/633/6a82e1ef45fe8976.png?x-oss-process=image/resize,m_mfit,h_76,w_76,limit_0" alt="Seko" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" />
</a>
<div class="aibtn-right flexColumn">
<div class="abripone_f">
<a target="_blank" href="/ai/2237" title="Seko" class="overflowclass abripone">Seko</a>
<span class="hot_span">Hot</span>
</div>
<p class="overflowclass abriptwo">一款AI视频创作工具，主要用于商汤科技推出的创编一体的AI短视频创作Agent，适合需要提升相关任务效率的用户。</p>
<div class="aidconstab flexRow">
<a title="AI视频创作" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-video-creation" target="_blank" >AI视频创作</a><a title="视频生成" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-video-creation/video-generate" target="_blank" >视频生成</a> </div>
</div>
</div>
<div class="aibtns flexRow">
<a target="_blank" href="/ai/4298" title="PixPix" class="aibtnimga">
<img src="https://img.php.cn/upload/ai_manual/001/246/273/6abb48da4cf94897.webp?x-oss-process=image/resize,m_mfit,h_76,w_76,limit_0" alt="PixPix" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" />
</a>
<div class="aibtn-right flexColumn">
<div class="abripone_f">
<a target="_blank" href="/ai/4298" title="PixPix" class="overflowclass abripone">PixPix</a>
<span class="hot_span">Hot</span>
</div>
<p class="overflowclass abriptwo">PixPix是一款面向电商视觉生产的AI商品图生成工具。</p>
<div class="aidconstab flexRow">
<a title="电商工具" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-fuwu/dianshang" target="_blank" >电商工具</a><a title="AI绘画作图" class="aidcontbp flexRow flexcenter" href="/ai/tag/image" target="_blank" >AI绘画作图</a> </div>
</div>
</div>
<div class="aibtns flexRow">
<a target="_blank" href="/ai/2704" title="音述AI" class="aibtnimga">
<img src="https://img.php.cn/upload/ai_manual/001/246/273/6a82d57903ca9413.webp?x-oss-process=image/resize,m_mfit,h_76,w_76,limit_0" alt="音述AI" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" />
</a>
<div class="aibtn-right flexColumn">
<div class="abripone_f">
<a target="_blank" href="/ai/2704" title="音述AI" class="overflowclass abripone">音述AI</a>
<span class="hot_span">Hot</span>
</div>
<p class="overflowclass abriptwo">一款AI音频处理工具，主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区，适合需要提升相关任务效率的用户。</p>
<div class="aidconstab flexRow">
<a title="AI音频制作" class="aidcontbp flexRow flexcenter" href="/ai/tag/audio" target="_blank" >AI音频制作</a><a title="音乐创作" class="aidcontbp flexRow flexcenter" href="/ai/tag/audio/music-creation" target="_blank" >音乐创作</a> </div>
</div>
</div>
<div class="aibtns flexRow">
<a target="_blank" href="/ai/1287" title="讯飞绘文" class="aibtnimga">
<img src="https://img.php.cn/upload/ai_manual/000/969/633/6a82e41309ea7240.webp?x-oss-process=image/resize,m_mfit,h_76,w_76,limit_0" alt="讯飞绘文" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" />
</a>
<div class="aibtn-right flexColumn">
<div class="abripone_f">
<a target="_blank" href="/ai/1287" title="讯飞绘文" class="overflowclass abripone">讯飞绘文</a>
<span class="hot_span">Hot</span>
</div>
<p class="overflowclass abriptwo">讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。</p>
<div class="aidconstab flexRow">
<a title="AI应用软件" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-application" target="_blank" >AI应用软件</a><a title="PC软件" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-application/software" target="_blank" >PC软件</a> </div>
</div>
</div>
<div class="aibtns flexRow">
<a target="_blank" href="/ai/2686" title="WorkBuddy" class="aibtnimga">
<img src="https://img.php.cn/upload/ai_manual/001/246/273/177086639789686.png?x-oss-process=image/resize,m_mfit,h_76,w_76,limit_0" alt="WorkBuddy" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" />
</a>
<div class="aibtn-right flexColumn">
<div class="abripone_f">
<a target="_blank" href="/ai/2686" title="WorkBuddy" class="overflowclass abripone">WorkBuddy</a>
</div>
<p class="overflowclass abriptwo">一款AI办公效率工具，主要用于腾讯云推出的AI原生桌面智能体工作台，适合需要提升相关任务效率的用户。</p>
<div class="aidconstab flexRow">
<a title="AI办公学习" class="aidcontbp flexRow flexcenter" href="/ai/tag/office" target="_blank" >AI办公学习</a><a title="Agent智能体" class="aidcontbp flexRow flexcenter" href="/ai/tag/ai-agent" target="_blank" >Agent智能体</a> </div>
</div>
</div>
<div class="aibtns flexRow">
<a target="_blank" href="/ai/723" title="DeepSeek" class="aibtnimga">
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679963982777.png?x-oss-process=image/resize,m_mfit,h_76,w_76,limit_0" alt="DeepSeek" class="aibtnimg" onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'" />
</a>
<div class="aibtn-right flexColumn">
<div class="abripone_f">
<a target="_blank" href="/ai/723" title="DeepSeek" class="overflowclass abripone">DeepSeek</a>
</div>
<p class="overflowclass abriptwo">DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。</p>
<div class="aidconstab flexRow">
<a title="AI编程开发" class="aidcontbp flexRow flexcenter" href="/ai/tag/code" target="_blank" >AI编程开发</a><a title="AI聊天问答" class="aidcontbp flexRow flexcenter" href="/ai/tag/chat" target="_blank" >AI聊天问答</a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="skillMR">
<div class="hotzt artdtzt">
<div class="rightdTitle flexRow">
<div class="title-left flexRow">
<b></b>
<p>相关专题</p>
</div>
<a class="rititle-more flexRow" href="/faq/zt" title="相关专题" target="_blank"><span>更多</span><b></b></a>
</div>
<div class="hotztuls flexColumn">
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/pptplxgtzcc" class="aClass flexRow hotzta" title="PPT批量修改调整尺寸教程合集"><img
src="https://img.php.cn/upload/subject/202604/07/2026040716092011369.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="PPT批量修改调整尺寸教程合集" class="hotztaimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/pptplxgtzcc" class="aClass flexRow hotztra overflowclass" title="PPT批量修改调整尺寸教程合集">PPT批量修改调整尺寸教程合集</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了PPT批量修改图片尺寸教程合集，阅读专题下面的文章了解更多详细内容。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">378</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.04.03</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/pptplcrtp" class="aClass flexRow hotzta" title="PPT批量插入图片方法合集"><img
src="https://img.php.cn/upload/subject/202604/07/2026040716091451864.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="PPT批量插入图片方法合集" class="hotztaimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/pptplcrtp" class="aClass flexRow hotztra overflowclass" title="PPT批量插入图片方法合集">PPT批量插入图片方法合集</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了PPT批量插入图片相关技巧，阅读专题下面的文章了解更多详细步骤。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">164</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.04.03</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/htmltermux" class="aClass flexRow hotzta" title="html termux代码合集"><img
src="https://img.php.cn/upload/subject/202604/07/2026040718304122631.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="html termux代码合集" class="hotztaimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/htmltermux" class="aClass flexRow hotztra overflowclass" title="html termux代码合集">html termux代码合集</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了html termux相关教程，阅读专题下面的文章了解更多详细内容。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">499</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.04.02</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/pptzdbfszhj" class="aClass flexRow hotzta" title="PPT自动播放设置合集"><img
src="https://img.php.cn/upload/subject/202604/01/2026040117120954190.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="PPT自动播放设置合集" class="hotztaimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/pptzdbfszhj" class="aClass flexRow hotztra overflowclass" title="PPT自动播放设置合集">PPT自动播放设置合集</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了PPT自动播放相关教程内容合集，阅读专题下面的文章了解更多详细内容。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">139</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.04.01</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/htmltxszhj" class="aClass flexRow hotzta" title="HTML提醒设置合集"><img
src="https://img.php.cn/upload/subject/000/000/075/69c5f11790130667.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="HTML提醒设置合集" class="hotztaimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/htmltxszhj" class="aClass flexRow hotztra overflowclass" title="HTML提醒设置合集">HTML提醒设置合集</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了HTML提醒设置相关教程，阅读专题下面的文章了解更详细的操作步骤。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">840</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.03.27</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/pptyjscxghj" class="aClass flexRow hotzta" title="ppt一键生成相关合集"><img
src="https://img.php.cn/upload/subject/000/000/075/6968cbd97c088675.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="ppt一键生成相关合集" class="hotztaimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/pptyjscxghj" class="aClass flexRow hotztra overflowclass" title="ppt一键生成相关合集">ppt一键生成相关合集</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了ppt一键生成相关教程汇总，阅读专题下面的的文章了解更多详细内容。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">654</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.01.15</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/phpyhtmlhbjcd" class="aClass flexRow hotzta" title="php与html混编教程大全"><img
src="https://img.php.cn/upload/subject/202601/14/2026011417401993869.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="php与html混编教程大全" class="hotztaimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/phpyhtmlhbjcd" class="aClass flexRow hotztra overflowclass" title="php与html混编教程大全">php与html混编教程大全</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了php和html混编相关教程，阅读专题下面的文章了解更多详细内容。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">158</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.01.13</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/pptjhtbjcdq" class="aClass flexRow hotzta" title="PPT交互图表教程大全"><img
src="https://img.php.cn/upload/subject/000/000/075/6965bf3356981311.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="PPT交互图表教程大全" class="hotztaimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/pptjhtbjcdq" class="aClass flexRow hotztra overflowclass" title="PPT交互图表教程大全">PPT交互图表教程大全</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了PPT交互图表相关教程汇总，阅读专题下面的文章了解更多详细内容。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">273</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.01.12</p>
</div>
</div>
</div>
</div>
<div class="hotztlls flexRow">
<a target="_blank" href="/faq/pptdttbzzjcdq" class="aClass flexRow hotzta" title="PPT动态图表制作教程大全"><img
src="https://img.php.cn/upload/subject/202601/07/2026010718235143506.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="PPT动态图表制作教程大全" class="hotztaimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'"></a>
<div class="hotztright flexColumn">
<a target="_blank" href="/faq/pptdttbzzjcdq" class="aClass flexRow hotztra overflowclass" title="PPT动态图表制作教程大全">PPT动态图表制作教程大全</a>
<p class="aClass flexRow hotztrp overflowclass">本专题整合了PPT动态图表制作相关教程，阅读专题下面的文章了解更多详细内容。</p>
<div class="hotztrdown flexRow">
<div class="htztdsee flexRow"> <b></b>
<p class="">314</p>
</div>
<div class="htztdTime flexRow"> <b></b>
<p>2026.01.07</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hotdownload ">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p>热门下载</p>
</div>
<a target="_blank" class="rititle-more flexRow" href="/xiazai" title="热门下载"><span>更多</span><b></b></a>
</div>
<div class="hotdownTab">
<div class="hdTabs flexRow">
<div class="check" data-id="onef">网站特效 <b></b> </div> /
<div class="" data-id="twof">网站源码 <b></b></div> /
<div class="" data-id="threef">网站素材 <b></b></div> /
<div class="" data-id="fourf">前端模板 <b></b></div>
</div>
<ul class="onef">
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="登录表单页面js，现代化登录页面模板" href="/xiazai/js/10373"><span>[表单按钮]</span><span>登录表单页面js，现代化登录页面模板</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="注册表单布局HTML代码，登录注册切换js模板" href="/xiazai/js/10372"><span>[表单按钮]</span><span>注册表单布局HTML代码，登录注册切换js模板</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="文字透视变形设计，有趣的css滑动动画" href="/xiazai/js/10371"><span>[文字特效]</span><span>文字透视变形设计，有趣的css滑动动画</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="精美登录注册UI，登录页面设计模板" href="/xiazai/js/10370"><span>[表单按钮]</span><span>精美登录注册UI，登录页面设计模板</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="意境背景图片唯美下载，云破月来花弄影素材" href="/xiazai/js/10369"><span>[图片特效]</span><span>意境背景图片唯美下载，云破月来花弄影素材</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="液体背景制作，创意液体文字动画" href="/xiazai/js/10368"><span>[其它特效]</span><span>液体背景制作，创意液体文字动画</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="html滑块选择器，简单的滑块控制数字表达式" href="/xiazai/js/10367"><span>[其它特效]</span><span>html滑块选择器，简单的滑块控制数字表达式</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="文本闪烁css，文字闪光动图特效" href="/xiazai/js/10366"><span>[其它特效]</span><span>文本闪烁css，文字闪光动图特效</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="css滑块效果，气球移动动画效果图素材" href="/xiazai/js/10365"><span>[其它特效]</span><span>css滑块效果，气球移动动画效果图素材</span></a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" title="手写字体设计，好看的svg文字特效" href="/xiazai/js/10364"><span>[其它特效]</span><span>手写字体设计，好看的svg文字特效</span></a>
</div>
</li>
</ul>
<ul class="twof" style="display:none;">
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12061" title="CodeIgniter4.6.1"><span>[开发框架]</span><span>CodeIgniter4.6.1</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12060" title="Django Web框架5.2.2"><span>[开发框架]</span><span>Django Web框架5.2.2</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12059" title="NutzFw企业级快速开发框架1.0.3"><span>[开发框架]</span><span>NutzFw企业级快速开发框架1.0.3</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12058" title="go-admin前后端分离权限管理系统脚手架2.2.0"><span>[开发框架]</span><span>go-admin前后端分离权限管理系统脚手架2.2.0</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12057" title="Ember.js3.28.9"><span>[开发框架]</span><span>Ember.js3.28.9</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12056" title="MaxKey单点登录认证系统3.3.3"><span>[开发框架]</span><span>MaxKey单点登录认证系统3.3.3</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12055" title="PHP7框架Phalcon71.2.3"><span>[开发框架]</span><span>PHP7框架Phalcon71.2.3</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12054" title="TimoPHP开发框架1.4.1"><span>[开发框架]</span><span>TimoPHP开发框架1.4.1</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12053" title="猿团YTF框架1.0"><span>[开发框架]</span><span>猿团YTF框架1.0</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12052" title="zentaophp框架3.0"><span>[开发框架]</span><span>zentaophp框架3.0</span> </a>
</div>
</li>
</ul>
<ul class="threef" style="display:none;">
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4930" title="万圣之夜氛围感节日海报设计下载"><span>[网站素材]</span><span>万圣之夜氛围感节日海报设计下载</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4929" title="复古照相机摄影展海报矢量模板"><span>[网站素材]</span><span>复古照相机摄影展海报矢量模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4928" title="披萨美食竖版招贴美食海报PSD素材下载"><span>[网站素材]</span><span>披萨美食竖版招贴美食海报PSD素材下载</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4927" title="秋季农产品丰收矢量插图"><span>[网站素材]</span><span>秋季农产品丰收矢量插图</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4926" title="手绘法式甜点面包合集矢量素材"><span>[网站素材]</span><span>手绘法式甜点面包合集矢量素材</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4925" title="复古旧物服饰海报矢量模板"><span>[网站素材]</span><span>复古旧物服饰海报矢量模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4924" title="2027年新年快乐宣传海报设计下载"><span>[网站素材]</span><span>2027年新年快乐宣传海报设计下载</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4923" title="二十四节气立冬海报矢量模板"><span>[网站素材]</span><span>二十四节气立冬海报矢量模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4922" title="爵士酒吧派对海报矢量模板"><span>[网站素材]</span><span>爵士酒吧派对海报矢量模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/sucai/4921" title="万圣节主题横幅海报模板设计源文件下载"><span>[网站素材]</span><span>万圣节主题横幅海报模板设计源文件下载</span> </a>
</div>
</li>
</ul>
<ul class="fourf" style="display:none;">
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12112" title="探索文化产业服务机构网站模板"><span>[前端模板]</span><span>探索文化产业服务机构网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12111" title="现代商业数字化服务公司网站模板"><span>[前端模板]</span><span>现代商业数字化服务公司网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12110" title="响应式烟草公司HTML5网站模板"><span>[前端模板]</span><span>响应式烟草公司HTML5网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12109" title="园艺服务机构响应式网页模板"><span>[前端模板]</span><span>园艺服务机构响应式网页模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12108" title="HTML5日本动画动漫网站模板"><span>[前端模板]</span><span>HTML5日本动画动漫网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12107" title="蛋糕烘焙美食宣传网站模板"><span>[前端模板]</span><span>蛋糕烘焙美食宣传网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12106" title="黑白风格律师个人简历展示网页模板"><span>[前端模板]</span><span>黑白风格律师个人简历展示网页模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12105" title="黑色风格摄影工作室宣传网站模板"><span>[前端模板]</span><span>黑色风格摄影工作室宣传网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12104" title="响应式金融公司HTML5网站模板"><span>[前端模板]</span><span>响应式金融公司HTML5网站模板</span> </a>
</div>
</li>
<li>
<div class="wzrfourli flexRow">
<b></b>
<a target="_blank" href="/xiazai/code/12103" title="HTML5音乐节演唱会宣传网站模板"><span>[前端模板]</span><span>HTML5音乐节演唱会宣传网站模板</span> </a>
</div>
</li>
</ul>
</div>
<script>
$('.hdTabs>div').click(function (e) {
$('.hdTabs>div').removeClass('check')
$(this).addClass('check')
$('.hotdownTab>ul').css('display', 'none')
$('.' + e.currentTarget.dataset.id).show()
})
</script>
</div>
<div class="xgarts ">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p>相关下载</p>
</div>
<a target="_blank" class="rititle-more flexRow" href="/xiazai" title="相关下载"><span>更多</span><b></b></a>
</div>
<div class="xgwzlist ">
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="MDPHP(麦迪php框架系统)1.1" href="/xiazai/code/12051">MDPHP(麦迪php框架系统)1.1</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP 多国语言框架2.0" href="/xiazai/code/12046">PHP 多国语言框架2.0</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="ujframe简单快速PHP开发框架1.0" href="/xiazai/code/12045">ujframe简单快速PHP开发框架1.0</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="php轻量型框架1.0" href="/xiazai/code/12044">php轻量型框架1.0</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="MyQEE开源PHP多项目及模块化开发框架3.0 RC2" href="/xiazai/code/12041">MyQEE开源PHP多项目及模块化开发框架3.0 RC2</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="php开源学习型框架CMVC1.2.0" href="/xiazai/code/12040">php开源学习型框架CMVC1.2.0</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP框架Kohana3.3.1" href="/xiazai/code/12039">PHP框架Kohana3.3.1</a></div>
</div>
</div>
<div class="jpkc">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p>精品课程</p>
</div>
<a class="rititle-more flexRow" target="_blank" href="/course/sort_new.html" title="精品课程"><span>更多</span><b></b></a>
</div>
<div class=" jpkcTab">
<div class=" jpkcTabs flexRow">
<div class="check" data-id="onefd">相关推荐 <b></b> </div> /
<div class="" data-id="twofd">热门推荐 <b></b></div> /
<div class="" data-id="threefd">最新课程 <b></b></div>
</div>
<div class="onefd jpktabd">
<div class="ristyA flexRow " >
<a target="_blank" href="/course/2119.html" title="GDB 17.2 官方文档集合">
<img onerror="this.onerror=''; this.src='https://staticw.php.cn/static/lhimages/moren/morenfengmian.png'" src="https://img.php.cn/upload/course/000/000/085/6aa146f9288de428.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="GDB 17.2 官方文档集合" class="ristyAimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/2119.html" title="GDB 17.2 官方文档集合"
class="rirightp overflowclass">GDB 17.2 官方文档集合</a>
<div class="risrdown flexRow">
<p>共0课时 | 0人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/1981.html" title="Bootstrap 入门安装配置">
<img onerror="this.onerror=''; this.src='https://staticw.php.cn/static/lhimages/moren/morenfengmian.png'" src="https://img.php.cn/upload/course/000/000/085/6a671315cd7b9962.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Bootstrap 入门安装配置" class="ristyAimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/1981.html" title="Bootstrap 入门安装配置"
class="rirightp overflowclass">Bootstrap 入门安装配置</a>
<div class="risrdown flexRow">
<p>共0课时 | 0人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/1723.html" title="38+ PhpStorm 提示和技巧">
<img onerror="this.onerror=''; this.src='https://staticw.php.cn/static/lhimages/moren/morenfengmian.png'" src="https://img.php.cn/upload/course/000/000/080/69ccc31acdae1956.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="38+ PhpStorm 提示和技巧" class="ristyAimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/1723.html" title="38+ PhpStorm 提示和技巧"
class="rirightp overflowclass">38+ PhpStorm 提示和技巧</a>
<div class="risrdown flexRow">
<p>共1课时 | 228人学习</p>
</div>
</div>
</div>
</div>
<div class="twofd jpktabd" style="display:none;">
<div class="ristyA flexRow " >
<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学">
<img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"
class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a>
<div class="risrdown flexRow">
<p>共6课时 | 12.1万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)">
<img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="ristyAimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"
class="rirightp overflowclass">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>
<div class="risrdown flexRow">
<p>共79课时 | 161.6万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程">
<img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="phpStudy极速入门视频教程" class="ristyAimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程"
class="rirightp overflowclass">phpStudy极速入门视频教程</a>
<div class="risrdown flexRow">
<p>共6课时 | 54.7万人学习</p>
</div>
</div>
</div>
</div>
<div class="threefd jpktabd" style="display:none;">
<div class="ristyA flexRow " >
<a target="_blank" href="/course/2197.html" title="Golangci-lint命令行使用演示">
<img src="https://img.php.cn/upload/course/000/000/098/6ad9d443e4295546.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="Golangci-lint命令行使用演示" class="ristyAimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/2197.html" title="Golangci-lint命令行使用演示"
class="rirightp overflowclass">Golangci-lint命令行使用演示</a>
<div class="risrdown flexRow">
<p>共0课时 | 0人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/2196.html" title="Go夜读：golint及Golangci-lint介绍和使用">
<img src="https://img.php.cn/upload/course/000/000/098/6ad9d443e4295546.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="Go夜读：golint及Golangci-lint介绍和使用" class="ristyAimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/2196.html" title="Go夜读：golint及Golangci-lint介绍和使用"
class="rirightp overflowclass">Go夜读：golint及Golangci-lint介绍和使用</a>
<div class="risrdown flexRow">
<p>共0课时 | 0人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow " >
<a target="_blank" href="/course/2195.html" title="1小时Playwright自动化测试从入门到精通教程">
<img src="https://img.php.cn/upload/course/000/000/090/6ad5d40b0aea3589.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="1小时Playwright自动化测试从入门到精通教程" class="ristyAimg"
onerror="this.src='https://staticw.php.cn/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a target="_blank" href="/course/2195.html" title="1小时Playwright自动化测试从入门到精通教程"
class="rirightp overflowclass">1小时Playwright自动化测试从入门到精通教程</a>
<div class="risrdown flexRow">
<p>共0课时 | 0人学习</p>
</div>
</div>
</div>
</div>
<script>
$('.jpkcTabs>div').click(function (e) {
$('.jpkcTabs>div').removeClass('check')
$(this).addClass('check')
$('.jpkcTab .jpktabd').css('display', 'none')
$('.' + e.currentTarget.dataset.id).show()
})
</script>
</div>
</div>
<div class="zxarts ">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p>最新文章</p>
</div>
<a class="rititle-more flexRow" href="/article.html" title="最新文章" target="_blank"><span>更多</span><b></b></a>
</div>
<div class="xgwzlist ">
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="腾讯WorkBuddy上线「远程控制」：手机可实时观看并接管电脑桌面，远程操作不消耗Token" href="/faq/3346411.html">腾讯WorkBuddy上线「远程控制」：手机可实时观看并接管电脑桌面，远程操作不消耗Token</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="OpenAI被曝将向谷歌采购TPU芯片，算力供应链格局再变" href="/faq/3346392.html">OpenAI被曝将向谷歌采购TPU芯片，算力供应链格局再变</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="下一波“大的”要来了？DeepSeek V5 现身官方代码库，新一代旗舰模型预计 11 月登场" href="/faq/3346372.html">下一波“大的”要来了？DeepSeek V5 现身官方代码库，新一代旗舰模型预计 11 月登场</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="Liquid AI重磅发布LFM3 多模态模型家族，主打高效专用智能" href="/faq/3346364.html">Liquid AI重磅发布LFM3 多模态模型家族，主打高效专用智能</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="豆包公关回应"15 万群演被喂模型"：传言严重失实" href="/faq/3346362.html">豆包公关回应"15 万群演被喂模型"：传言严重失实</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="百度世界大会前夕重磅流出：消息称其将披露世界模型进展" href="/faq/3346354.html">百度世界大会前夕重磅流出：消息称其将披露世界模型进展</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="外国博主用AI耳机当看诊翻译:“直接听、直接翻，整个交流会顺很多”" href="/faq/3346351.html">外国博主用AI耳机当看诊翻译:“直接听、直接翻，整个交流会顺很多”</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="CVE 漏洞数近乎垂直拉升，AI 成安全研究"放大器"" href="/faq/3346349.html">CVE 漏洞数近乎垂直拉升，AI 成安全研究"放大器"</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="LiblibAI 导航入口 哩布哩布AI 灵感生图创作官网" href="/faq/3346334.html">LiblibAI 导航入口 哩布哩布AI 灵感生图创作官网</a></div>
<div class="xgwzlid flexRow"><b></b><a target="_blank" title="LiblibAI 网页官网 LiblibAI ComfyUI在线运行入口" href="/faq/3346331.html">LiblibAI 网页官网 LiblibAI ComfyUI在线运行入口</a></div>
</div>
</div>
</div>
</div>
</div>
<!--底部-->
<div class="phpFoot">
<div class="phpFootIn">
<div class="phpFootCont">
<div class="phpFootLeft">
<dl>
<dt>
<a target="_blank" href="/about/us.html" rel="nofollow" title="关于我们" class="cBlack">关于我们</a>
<a target="_blank" href="/about/disclaimer.html" rel="nofollow" title="免责申明" class="cBlack">免责申明</a>
<a target="_blank" href="/about/jbzx.html" rel="nofollow" title="举报中心" class="cBlack">举报中心</a>
<a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')" title="意见反馈" class="cBlack">意见反馈</a>
<a target="_blank" href="https://www.php.cn/teacher.html" rel="nofollow" title="讲师合作" class="cBlack">讲师合作</a>
<a target="_blank" href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" title="广告合作" class="cBlack">广告合作</a>
<a target="_blank" href="/new/" title="最新文章列表" class="cBlack">最新更新</a>
<div class="clear"></div>
</dt>
<dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd>
<dd class="cont2">
<span class="ylwTopBox">
<a href="javascript:;" class="cBlack"><b class="icon1"></b>关注服务号</a>
<em style="display:none;" class="ylwTopSub">
<p>微信扫码<br />关注PHP中文网服务号</p>
<img src="https://staticw.php.cn/static/images/examples/text16.png" />
</em>
</span>
<div class="clear"></div>
</dd>
</dl>
</div>
<div class="phpFootRight">
<div class="phpFootMsg">
<span><img src="https://staticw.php.cn/static/images/examples/text17.png" /></span>
<dl>
<dt>PHP中文网订阅号</dt>
<dd>每天精选资源文章推送</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="phpFootCode">
<div class="phpFootCodeIn">
<p>Copyright 2014-2026 <a href="https://www.php.cn/">https://www.php.cn/</a> All Rights Reserved | php.cn </p> </div>
</div>
</div>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?3fc525002bf1c4f1d536daef98e9a33c";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
layui.use(['element', 'carousel'], function() {
var element = layui.element;
$ = layui.jquery;
var carousel = layui.carousel;
carousel.render({
elem: '#test1',
width: '100%',
height: '330px',
arrow: 'always'
});
$.getScript('https://staticw.php.cn/static/js/jquery.lazyload.min.js', function() {
$("img").lazyload({
placeholder: "https://staticw.php.cn/static/images/load.jpg",
effect: "fadeIn",
threshold: 200,
skip_invisible: false
});
});
});
</script>
<script src="https://staticw.php.cn/static/js/cdn.js?v=1.0.1"></script>
<script>
$(function(){
setCookie('is_article', 1, 1);
})
</script>
<!--底部 end-->
<!-- content -->
<script type="text/javascript" src="https://staticw.php.cn/static/js/global.min.js?5.5.33"></script>
</body>
</html>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '49']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code --> |
