Doa Ppt

HTML to PPTX — 商务演示文稿生成

工作流概览

用户输入（描述 + 参考图）
  → 确认PPT规模
  → 使用公司模板（唯一默认模板）
  → 生成可翻页 HTML 预览
  → 逐页检查 HTML 是否越界/裁切/重叠
  → 用户确认/调整 HTML
  → 只有用户明确确认 HTML 无问题后，才进入 PPT 模式选择
  → 默认推荐截图高保真模式（用户如需二次编辑再切换到可编辑）
  → 生成 PPT

本次实战经验固化

当用户提供 PDF、截图、既有 HTML 或已有 PPT，并要求“基于这个继续生成 / 整合 / 扩展 / 转 PPT”时，必须先把资料链路整理清楚，再改版式。

2026-05-30 延峰项目增补（强制）

1. HTML 是唯一语义源：slides.html 才是可维护源文件；截图型 .pptx/.pdf 只作为交付物，不作为反向编辑来源。
2. 双导出链路必须物理分离：

• 截图高保真：export_pptx.py
• 可编辑重建：export_editable_pptx.py
• 严禁在同一脚本里混合两种导出逻辑，避免需求反复切换时互相污染。

1. 需求切换优先级规则：当用户在“可编辑 / 不可编辑”之间反复切换时，始终以“最后一次明确指令”为准，立即切换导出模式，不纠缠历史决策。
2. 先定稿再导出：只有在用户明确确认“按当前 HTML 导出”后，才执行最终导出；导出阶段不再顺手改布局，避免一边改版一边导出导致版本漂移。
3. 输出文件不得覆盖旧版本：每次最终交付使用新文件名（建议带日期和后缀，如 _Editable_YYYYMMDD、_HD_YYYYMMDD），防止 PermissionError 和历史交付丢失。
4. 导出后必须二次验证：至少校验文件存在、页数一致、截图分辨率正确（高清链路应为 2560×1440），再对外宣称“已完成交付”。

资料驱动型 PPT 的处理顺序

1. 先定位源材料：在工作区搜索 .pdf、.html、.pptx、生成脚本和相关资源，确认哪一个是主源文件、哪一个是导出结果。
2. PDF 先提取文本，失败再转图片阅读：优先用 pypdf/pdfplumber；如果每页文本为空，说明多半是扫描型 PDF，应使用 PyMuPDF 渲染为图片后逐页查看。
3. 先总结再入页：不要把 PDF 原文堆进 PPT。先提炼为“调研范围 → 候选路线 → 选型结论 → 当前方案”的决策链路。
4. 封面优先确认：封面通常是客户第一眼看到的页面。若用户要求“第 N 页挪到首页作为封面”，必须同步调整 active 状态、data-index 和页码。
5. 插入/删除页面后整体重编号：任何插页、删页、重排都要统一更新以下内容，缺一不可：

• 每页 data-index 属性（从 0 连续递增）
• 每页 .page-no 页码（当前页 / 新总数）
• 目录页中对应条目的增删和序号重编
• HTML 注释中的页码标注（如 ``）
• 使用 multi_replace_string_in_file 一次性完成所有页码更新，避免遗漏

技术方案类 PPT 推荐叙事结构

对于架构、安全、技术选型类 PPT，优先采用以下结构：

1. 封面：结论导向，明确方案对象、日期和一句话判断
2. 调研范围：说明为什么要调研，选型标准是什么
3. 候选路线：把语言级、进程级、内核级、容器级、云托管等方案放在一张对比页
4. 选型结论：说明为什么选择当前方案，而不是只说“推荐方案”
5. 风险论证：用业务可理解的语言说明备选方案的风险边界
6. 推荐架构：给出控制面、执行面、隔离边界、运行时治理
7. 落地配置：给出参考规格、扩容方式、运维和审计能力
8. 最终结论：用一句客户能复述的话收束，例如“跑自己的任务用 Job，跑别人的代码用沙箱”

版式与导出踩坑记录

• 固定幻灯片画布仍使用 1280×720。浏览器预览可以通过 CSS/JS 做自适应缩放，但导出截图必须保持 .slides-viewport 的原始 1280×720 尺寸。
• 每次新增 layout class 后，要检查它是否覆盖 .content{height:600px}。如果直接把 .grid-* 用在 .content 上，必须补 .content.grid-*{height:600px} 防止内容压到 footer。
• 高保真导出脚本激活页面时不要写 slide.className = 'slide active'，否则会丢失 cover 等特殊 class。应使用 classList.remove('active','exit-left') 和 classList.add('active')。
• PowerShell 执行带空格路径的 Python 时必须用调用运算符：& "c:/path with spaces/.venv/Scripts/python.exe" script.py。
• 如果 PPT 文件可能正被 PowerPoint 打开，优先输出到新文件名，避免 PermissionError。

SVG 装饰插图踩坑记录

• SVG 默认 overflow:visible：SVG 子元素（`, 等）即使超出 viewBox 范围，浏览器仍会渲染并占据布局空间。getBoundingClientRect()` 会返回超出 viewBox 的实际渲染区域，导致边界检查报越界。
• CSS overflow:hidden 对 SVG 子元素的 bounding rect 无效：给 SVG 父容器加 overflow:hidden 只能在视觉上裁剪，但 getBoundingClientRect() 仍然返回子元素的完整渲染尺寸，边界检查仍会报 overflow。
• 正确做法：确保 SVG 内容不超出 viewBox：所有 `, 等元素的坐标 + 半径/尺寸必须在 viewBox 范围内。例如 viewBox="0 0 320 320" 中，` 右边界为 350，超出 320，必须减小 cx 或 r。
• 不要使用负偏移量让 SVG 超出幻灯片边界：如 right:-30px 会让 SVG 内容溢出 slide 右边界。背景装饰 SVG 应使用 right:0 并让视觉内容自然收敛在 viewBox 内。
• 装饰 SVG 推荐写法：position:absolute; pointer-events:none; z-index:0; opacity:0.03~0.08，确保不影响交互且视觉上足够微妙。

左右分栏等高对齐踩坑记录

> 强制规则：所有使用左右分栏的内容页，左右两列必须等高对齐，底部齐平。这是不可协商的硬性要求。

• .grid-2 { align-items: stretch } 只拉伸直接子元素：grid 子 div 会被拉伸到等高，但内部元素（表格、卡片）不会自动填满。
• 必须在 grid 子 div 上加 display:flex; flex-direction:column：让内部元素参与 flex 布局。
• 需要填满高度的元素加 flex:1：表格用 style="flex:1" 填满剩余高度；多张卡片用 flex:1 让每张卡片等分空间。
• 左右卡片数量不对等时，少的一侧每张卡片必须加 flex:1：例如左 3 卡片、右 2 卡片，右侧每张卡片必须加 flex:1 使其自动拉伸填满。禁止出现一侧比另一侧短、底部有大段空白的情况。
• 左右分栏的父容器必须填满内容区：.content 加 display:flex;flex-direction:column，.grid-2 加 flex:1 或 style="height:100%"，确保 grid 占满内容区而非只占内容自然高度。

2026-05-31 图文分栏对齐补充（强制）

• .screenshot-panel 默认 padding 导致高度不对齐：.screenshot-panel 类自带 padding:8px，会导致图片面板比左侧内容区矮 16px。必须在 style 中加 padding:0 覆盖，否则左右高度永远对不齐。
• 背景配图必须用 object-fit:cover：背景类图片（非产品截图）用 width:100%;height:100%;object-fit:cover 铺满面板，不留白边。产品截图用 object-fit:contain 保留完整界面。
• flex 子元素必须加 min-height:0：flex 容器的子元素默认 min-height:auto，内容过多时会撑破容器导致溢出。所有 flex 子元素（左侧内容区、右侧图片面板）都必须加 min-height:0。
• 图片面板必须加 overflow:hidden：防止图片超出面板边界。
• 图片不要用 .product-screenshot 类：该类自带 box-shadow 和 border，适用于产品截图，不适用于背景配图。背景配图直接写内联样式 border-radius:14px。
• 左侧内容区也要 min-width:0：flex 子元素默认 min-width:auto，表格等元素可能撑宽导致右侧图片被压缩。加 min-width:0 允许内容区按比例缩小。

对齐问题诊断清单

当左右高度不对齐时，按以下顺序检查：

1. ☐ .content 是否有 display:flex;align-items:stretch？
2. ☐ 右侧面板是否有 padding:0 覆盖默认 padding？
3. ☐ 图片是否有 width:100%;height:100%;object-fit:cover？
4. ☐ 左右两侧是否都有 min-height:0？
5. ☐ 左侧是否有 min-width:0？
6. ☐ 右侧是否有 overflow:hidden？

• 典型结构：

```html

标题 ...

标题 ...

```

减少空白与紧凑排版踩坑记录

• 页眉上边距应紧凑：.header { padding: 24px 56px 0 } 而非 32px，减少页眉到内容区的间距。色条 .header::after { top: 68px } 同步调整。
• 内容区高度最大化：.content { padding: 16px 56px 10px; height: 600px } 而非旧值 40px/32px/548px，可用面积增加约 20%。
• font-size 全局下限 15px：整个 PPT 中不允许出现小于 15px 的文字。如果内容放不下，优先精简文案或拆页，不要缩小字号。
• 底部摘要/结论用 margin-top:auto 推到底部：全宽表格页（如对比矩阵 + 底部摘要）应让 .content 设为 display:flex;flex-direction:column，底部摘要块用 margin-top:auto 贴近底部，消除表格与摘要之间的大片空白。
• 警告/提示框不要用 position:absolute：绝对定位的提示框容易与上方内容重叠或在不同内容量时错位。应放在正常文档流中，用 margin-top:auto 或 margin-top:10px 控制位置。
• grid-2 内部结合 flex:1 填满高度：.grid-2 的父容器 .content 设为 display:flex;flex-direction:column，然后 .grid-2 自身加 flex:1 使其填满剩余空间，避免 grid 与 footer 之间出现大段空白。
• 典型紧凑内容页结构：

```html

...

💡 结论：摘要文字

```

字体放大与溢出联动踩坑记录

> 当用户反馈"字太小、看不清"时，必须按以下策略系统性放大字体，同时联动调整布局参数防止溢出。

• 系统性放大而非逐个调整：使用 Python 正则脚本批量替换，对 font-size:Npx 统一 +2px（13→15, 14→16, 15→17, 16→18, 17→19, 18→20），.page-title 从 30→34px。不要只改一两处导致大小不统一。
• 内容区高度联动增加：字体放大后 .content { height } 从 590→600px，padding 从 20px 56px 14px → 16px 56px 10px，腾出更多垂直空间。
• 图片高度联动缩减：字体放大必然挤压空间，图片高度按比例缩减：280→240, 220→190, 200→175, 150→140。优先保证文字可读性，图片可以小一些。
• 放大后必须逐页检查溢出：使用浏览器 JS 遍历所有 .slide，计算 scrollHeight - clientHeight，任何 > 2px 的页面必须修复（缩减图片、减少间距、精简文案）。1-2px 的误差属于亚像素渲染，可忽略。
• 时间轴/步骤类页面最容易溢出：这类页面元素多且垂直堆叠，放大后优先压缩 margin-bottom（20→12px）、图片高度、标题 margin，必要时删除 `` 空行。

PDF 导出踩坑记录

• Pillow Image.save(save_all=True) 可用于简单场景：将截图 PNG 合并为多页 PDF，代码最简洁，适合截图高保真模式。需要 convert('RGB') 去掉 alpha 通道。
• reportlab 适合需要自定义页面尺寸的场景：如果 PDF 页面尺寸需要精确控制（如匹配 2x 截图分辨率 2560×1440），使用 reportlab。
• 同时导出 PPTX + PDF 时，共享截图：截图只做一次，分别喂给 build_pptx() 和 build_pdf() 两个函数，避免重复截图。

导出后的强制校验

截图高保真 PPT 生成后，必须验证：

1. .pptx 文件存在
2. Presentation(...).slides 页数等于 HTML 中 .slide 数量
3. ppt/media/image*.png 数量等于页数
4. 首页截图尺寸应与 VIEWPORT × DEVICE_SCALE 一致；标准 2x 高清链路下应为 2560×1440
5. 若封面应为深色/有色背景，检查首页或封面页的平均 RGB，避免背景丢失变白
6. 如果封面被挪到其他页，校验对应媒体图，而不是只校验 image1.png

Step 1: 收集需求

向用户收集以下信息：

1. 业务功能描述：产品/功能的核心卖点、关键特性、目标用户
2. 参考图（可选）：用于参考布局和内容排版
3. PPT 规模（必选）：确认演示文稿的页数范围
4. 特殊要求（可选）：Logo、指标数据等

确认页眉页脚风格

必须在生成前与用户确认，使用 vscode_askQuestions 工具提问，提供两个选项：

| 选项 | 说明 | 适用场景 | |------|------|----------| | 公司品牌模板 | 页眉：左侧渐变圆点 + 标题，右侧 SWO / 微钉双品牌 Logo；页脚：左 "SoftwareOne \| 微钉科技"，右页码胶囊 | 对外商务演示、客户提案、正式交付 | | AI 自动设计 | AI 根据 PPT 主题和内容自动决定页眉页脚的图标、品牌名和排版风格 | 内部分享、读书会、技术沙龙、个人演示等非品牌场景 |

选择"公司品牌模板"时，使用 Step 1.5 中定义的 Logo 和页脚规范；选择"AI 自动设计"时，AI 根据内容主题自行设计页眉标识（如书名缩写、主题 icon 等）和页脚文字，但仍遵循相同的布局结构和字号规范。

公司品牌模板 Logo 素材

品牌素材位于 .claude/skills/doa-ppt/brand-assets/，生成 PPT 时需复制到 output//ppt_softwareonemedlasoft_assets/：

| 文件名 | 用途 | |--------|------| | SoftwareOne.png | SoftwareOne Logo（黑色，通用于封面/内容页/结尾页） | | Medaslsoft.png | 微钉科技 Logo（彩色，含中英文图标，通用于封面/内容页/结尾页） | | Medaslsoft_Sample.png | 微钉小图标（仅 icon，用于目录页和内容页标题左侧的 .header-dot） |

CSS 引用方式（统一用 background: url(...) center/contain no-repeat）：

• 页标题左侧图标：.header-dot → Medaslsoft_Sample.png（32×32px，替代原来的渐变圆点）
• 封面：.cover-logo-swo → SoftwareOne.png，.cover-logo-medalsoft → Medaslsoft.png
• 内容页页眉右侧：.header-logo-swo → SoftwareOne.png，.header-logo-medalsoft → Medaslsoft.png
• 结尾页：.ending-logo-swo → SoftwareOne.png，.ending-logo-medalsoft → Medaslsoft.png

确认 PPT 规模

必须在生成前与用户确认，使用 vscode_askQuestions 工具提问：

| 规模 | 页数 | 适用场景 | 内容深度 | |------|------|----------|----------| | 单页精华版 | 1 页 | 一页纸汇报、功能速览、电梯演讲 | 核心卖点 + 关键指标 | | 标准版 | 7-12 页 | 产品介绍、项目汇报、方案评审 | 封面 + 概览 + 功能详解 + 架构 + 数据 + 总结 | | 完整版 | 17-23 页 | 正式提案、年度汇报、深度技术方案 | 全面覆盖背景、现状、方案、细节、规划、附录 |

Step 1.5: 默认模板 — 公司模板（唯一模板）

所有 PPT 统一使用公司模板，不做主题选择。此模板来源于 DOA-WorkCopilot Skill 产品介绍 PPT 的实际设计成果。

视觉方向

• 整体气质：科技感 + 柔和感，紫蓝色系为主调，通过大面积薰衣草渐变底色营造精致氛围
• 核心视觉元素：3D 紫色球体 + 轨道环 + 旋转玻璃菱形，贯穿封面、章节页和结尾页，形成统一视觉母题
• 配色风格：不走深色系，全程使用浅紫灰渐变底色（#EDE5F8 → #CDD3EC），保持明亮通透
• 装饰克制：内容页只用极轻的 deco-circle 渐变圆点缀右上角，不与内容争夺视线

配色体系

| 用途 | 变量 | 色值 | |------|------|------| | 主色 | --primary | #4C78FF | | 主色深 | --primary-dark | #3B32D4 | | 主色浅 | --primary-soft | #EEF1FF | | 辅助青 | --accent | #46B6FF | | 品牌紫 | --purple | #9D6BFF | | 品牌橙 | --amber | #F2B27C | | 品牌粉 | --red | #F062C0 | | 品牌绿 | --green | #58BFC8 | | 文字主色 | --text-primary | #1E1842 | | 文字次色 | --text-secondary | #4A4567 | | 文字辅助 | --text-muted | #7D78A0 | | 边框 | --border | rgba(141, 136, 208, 0.24) |

页面级背景策略

| 页面类型 | 背景 | |----------|------| | HTML body 背景（浏览器预览区） | linear-gradient(135deg, #EDE5F8 0%, #DDD8F0 30%, #D5D6EE 60%, #CDD3EC 100%) | | 所有幻灯片统一底色 | linear-gradient(90deg, #EDE5F8 0%, #DDD8F0 35%, #D5D6EE 65%, #CDD3EC 100%) | | 底部色条 | linear-gradient(90deg, var(--accent), var(--primary), var(--purple), var(--red)) |

> 硬性要求：body 背景色禁止使用深色（如 #1a1a2e），必须使用浅紫到浅蓝的渐变色，与幻灯片底色保持视觉一致。公司模板不在页面间做深浅分层，所有页面使用同一底色。通过"球体+玻璃"装饰强度区分页面类型。

核心装饰母题：紫色球体 + 轨道环 + 玻璃菱形

三类页面（封面、章节页、结尾页）共享同一组视觉元素，通过位置和大小变化营造统一感：

球体（3D 渐变紫色圆球）：

background: radial-gradient(circle at 38% 32%, #A480F0, #6535D9 55%, #4520B0);
box-shadow: 0 28px 80px rgba(91,48,215,.35);

轨道环（两层同心圆细线）：

border: 1px solid rgba(180,175,210,.3);   /* 内环 */
border: 1px solid rgba(180,175,210,.18);  /* 外环，更淡 */

玻璃矩形（旋转 50° 的毛玻璃矩形，带左侧渐变边线）：

background: linear-gradient(160deg, rgba(255,255,255,.48), rgba(245,240,255,.25), rgba(230,220,250,.10));
border: 1.5px solid rgba(255,255,255,.50);
backdrop-filter: blur(14px);
transform: rotate(50deg);
border-radius: 24px;

/* 左侧渐变边线 */
.cover-glass1::before {
  content:''; position:absolute; top:20px; bottom:20px; left:-2px;
  width:3px; border-radius:99px;
  background:linear-gradient(180deg, #9D6BFF, #6BB8FF);
}

装饰圆点（三种颜色点缀）：

• 蓝色：linear-gradient(135deg, #6BB8FF, #46B6FF)
• 粉色：linear-gradient(135deg, #FF6BA0, #FF4081)
• 紫色：radial-gradient(circle at 35% 30%, #C4A0FA, #7E50DE 80%)

斜切装饰线（极淡渐变线）：

background: linear-gradient(90deg, transparent, rgba(76,120,255,.15), rgba(157,107,255,.20));
transform: rotate(-30deg);

封面页规范

• 布局：左侧文字（标题+副标题+作者），右侧球体+轨道环+毛玻璃矩形
• 左侧对齐规则（强制）：Logo、标题内容、底部信息三者左侧必须对齐
• .cover-logo { left: 28px } — Logo 紧靠左侧
• .cover-content { padding: 0 48px } — 标题/副标题/作者信息
• .cover-bottom { left: 48px } — 底部网址和品牌名
• 球体：460×460px，right:130px; top:60px，z-index:3

``css background: radial-gradient(circle at 38% 32%, #B898FA, #8050F0 40%, #6030D8 65%, #4A20C0); box-shadow: 0 32px 90px rgba(91,48,215,.28); ``

• 轨道环：两层，z-index:1
• 内环：560×560px，right:130px; top:40px，border: 1px solid rgba(180,175,210,.25)
• 外环：660×660px，right:80px; top:-10px，border: 1px solid rgba(180,175,210,.15)
• 毛玻璃矩形：560×780px，rotate(50deg)，right:50px; top:300px，z-index:4（在球体前面，半透明覆盖）

``css background: linear-gradient(160deg, rgba(255,255,255,.48), rgba(245,240,255,.25), rgba(230,220,250,.10)); border: 1.5px solid rgba(255,255,255,.50); backdrop-filter: blur(14px); border-radius: 24px; ``

• 毛玻璃渐变边线：左侧竖向紫蓝渐变线（::before 伪元素）

``css .cover-glass1::before { position:absolute; top:20px; bottom:20px; left:-2px; width:3px; border-radius:99px; background:linear-gradient(180deg, #9D6BFF, #6BB8FF); } ``

• 装饰圆点：三个（非四个），各有独特位置
• 蓝色（22px）：left:130px; top:140px，在左侧空白区
• 粉色（20px）：right:580px; top:130px，在轨道环上
• 紫色（32px）：left:-6px; top:380px，半隐藏在页面左边缘
• × 装饰符号：right:50px; top:60px，18px 淡紫色，z-index:5
• 斜切装饰线：width:900px; rotate(-25deg); left:-100px; bottom:60px
• 标题字体：52px/900 weight，渐变色（--primary-dark → --primary → --red）
• 子标题：36px，用第二渐变（--purple → --accent → --green）
• Logo：左上方双品牌 Logo，top:32px; left:28px，z-index:5
• 底部：bottom:24px; left:48px; right:48px，左侧网址链接，右侧 "Medalsoft"

  
  
  
  
  
  ×
  
  
    ...
    产品名称子标题
    描述文字
    作者 · 公司 · 日期
  
  www.medalsoft.comMedalsoft

章节分隔页规范（标题页）

> 章节分隔页是 PPT 必备页面类型，每个主要章节前必须有一张。球体 + 轨道环 + 毛玻璃面板三要素缺一不可。

> 目录条目与章节分隔页 1:1 对应（强制）：目录页有 N 个条目，就必须有 N 个章节分隔页。例如目录 8 个条目编号 1-8，则必须有 8 个分隔页（sd-num 为 01-08），每个分隔页的标题必须与目录中对应条目的标题一致。不允许"只给部分章节加分隔页"——这会让读者在翻页时失去节奏感。

• 布局：球体居左偏中，毛玻璃面板右侧延伸，页码数字叠加在球体上
• 球体：280×280px，left:210px; top:220px
• 轨道环：两层（380px / 460px）
• 毛玻璃面板（必须还原）：width:fit-content，padding-left:160px; padding-right:50px

``css .sd-glass { background: linear-gradient(155deg, rgba(255,255,255,.46), rgba(210,200,240,.12)); border: 1px solid rgba(255,255,255,.50); backdrop-filter: blur(6px); border-radius: 24px; } ``

• 页码数字：92px 白色斜体（Inter），叠在球体中心
• 章节标题：36px/800 weight，深紫色 #2E1A6E
• 不显示底部色条：.slide.section-divider::after { display:none; }
• 编号必须与目录页一致（强制）：章节分隔页的 .sd-num 数字必须等于目录页中对应条目的序号。例如目录第 2 项“认知革命”，则该章节分隔页显示 02，而不是独立从 01 开始计数。目录页描述文字也必须与对应内容页的标题一致，不得出现通用词糊弄。

  
  
  
  01
  章节标题
  
  
  

结尾页规范

• 布局：封面的镜像 — 球体在左侧，大字 "THANK YOU" 在右侧
• Logo：左上方双品牌 Logo，top:32px; left:28px（与封面完全一致），z-index:5
• 球体：440×440px，left:50px; top:100px，z-index:3

``css background: radial-gradient(circle at 38% 32%, #B898FA, #8050F0 40%, #6030D8 65%, #4A20C0); box-shadow: 0 32px 90px rgba(91,48,215,.28); ``

• 轨道环：两层，z-index:1
• 内环：560×560px，left:-10px; top:40px，border: 1px solid rgba(180,175,210,.25)
• 外环：660×660px，left:-60px; top:-10px，border: 1px solid rgba(180,175,210,.15)
• 毛玻璃矩形：1100×600px，rotate(28deg)，left:450px; top:60px，z-index:4（在球体上面）
• 与封面的关键差异：结尾页的毛玻璃矩形更宽更扁、角度更缓（28° vs 封面 50°），覆盖右半区域直到右下角
• 无上方边框，只有底部渐变色条（::after 伪元素）
• 无左侧渐变边线（::before 隐藏）

``css .ending-glass { width: 1100px; height: 600px; background: linear-gradient(160deg, rgba(255,255,255,.48), rgba(245,240,255,.25), rgba(230,220,250,.10)); border: none; backdrop-filter: blur(10px); transform: rotate(28deg); border-radius: 0 0 24px 24px; overflow: hidden; } /* 左侧渐变边线隐藏 */ .ending-glass::before { display: none; } /* 底部渐变色条（粉→紫→蓝） */ .ending-glass::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #E95BC2, #8050F0, #3DA5FF); border-radius: 0 0 24px 24px; } ``

• 装饰圆点：两个
• 粉色（24px）：left:50px; top:100px，在 Logo 下方
• 蓝色（18px）：right:60px; top:140px，在右侧
• × 装饰符号：right:50px; top:60px，18px 淡紫色
• 斜切装饰线：width:1000px; rotate(-25deg); left:0px; bottom:60px
• "THANK YOU"：108px/900 weight，渐变从粉到紫（linear-gradient(180deg, #E95BC2, #3F2FD7)），居右
• 底部：bottom:24px; left:48px; right:48px，左侧 "Medalsoft"，右侧日期

  
  
  
  ×
  
  
    
    
    
  
  
    
      THANKYOU
    
  
  Medalsoft日期

内容页组件规范

页眉：左侧微钉小图标 Medaslsoft_Sample.png（32×32px）+ 标题（34px/800），右侧双品牌 Logo。页眉下方 120px 蓝紫渐变色条。

卡片：圆角 20px，白色半透明（.94/.84），双层边框 + 柔和阴影，backdrop-filter:blur(10px)。

终端代码块：深色 #1A1730，带红黄绿三色窗口按钮，代码用 JetBrains Mono，高亮色：蓝 #7dd3fc、绿 #86efac、紫 #c4b5fd。

照片框：圆角 16px，底部渐变遮罩 + 白色说明文字。

表格：表头渐变紫 linear-gradient(135deg, #6D79C8, #7E6ED7)，白底行，圆角 14px。

Before/After 对比列：粉色（Before）vs 青色（After），用 justify-content:space-evenly 均匀分布条目。

提示框：白色毛玻璃底，左侧 3px 蓝色竖线，圆角 16px。

流程步骤：48px 渐变圆球 + 连接线 + 文字标签，颜色从蓝到绿到紫渐变。

标签 pill：5 种颜色变体（green/amber/purple/red/bl

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: medalsoftchina
• Source: medalsoftchina/workcopilot
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.