面向非专业开发者，基于 https://copilot.tencent.com 网站内容，写一份介绍 PPT ，背景色采用 腾讯蓝 #0161FF，PPT 命名为腾讯蓝版本

一、选择配置级别
#1.在项目中配置项目 Skills
.codebuddy/skills/
#2.在本地配置用户级 Skills
~/.codebuddy/skills/
#3.例如在 用户级配置 Skills
mkdir - p ~/.codebuddy & cd ~/.codebuddy 

二、克隆代码到用户级目录
git clone https://github.com/anthropics/skills.git 

/plugin marketplace add anthropics/skills
/plugin install document-skills@anthropic-agent-skills

面向非专业开发者，基于 https://copilot.tencent.com 网站内容，写一份介绍 PPT ，背景色采用 腾讯蓝 #0161FF，PPT 命名为腾讯蓝版本

我想开发一个酷炫的音乐APP，现在需要采用 skill 输出高保真的原型图，最终需要 PPT 保留，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰：
5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
真实感增强：
界面尺寸应模拟 iPhone 16 Pro，并让界面圆角化，使其更像真实的手机界面。
使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。
请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。

#前提条件，下载好PPT 在本地，并放在 IDE 文件夹之中，可以满足添加到对话中
基于该 PPT 版本，在第 7 页后面补充一页 关于 CodeBuddy 在腾讯内部落地的情况，信息如下：
腾讯云代码助手（Tencent Cloud CodeBuddy，简称CodeBuddy)，覆盖支持多款主流IDE和主流编程语言及框架， 超 90% 的腾讯程序员都使用，多款国民级产品都选择了我们，例如微信、QQ、元宝、腾讯会议、王者荣耀、和平精英、腾讯云等，2025 年腾讯新增代码 50%由 CodeBuddy生成，整体提效超 20%。

按照该模版，帮我做一份面向 CEO 的汇报 CodeBuddy 的 PPT，数据就用这几个指标：周活跃用户数3.3 万、AI 代码生成占比超 50%、 人均编码时间缩短40%、人均千行bug率降低 31.5%，其他内容你来推荐写。

git init                    # 初始化新的 Git 仓库，首次使用。
git add .                   #  每次有内容，就进行 add 暂存你的更改
git commit -m "添加搜索组件"  # 用描述性消息保存

场景A: 从零创建演示文稿（不使用模板）
  ↓
HTML → html2pptx → PowerPoint
  ↓
优势：精确定位、现代设计、灵活布局

场景B: 编辑现有演示文稿
  ↓
OOXML 解包 → XML 编辑 → 验证 → 打包
  ↓
优势：保留原有样式、精确控制

场景C: 使用模板创建演示文稿
  ↓
模板分析 → 幻灯片复制/重排 → 文本替换
  ↓
优势：保持品牌一致性、快速生成

HTML：通过前端 HTML 实现效果
Playwright：浏览器自动化引擎，用于渲染 HTML 内容 
Sharp：图像处理库，用于SVG栅格化和图标处理 
PptxGenJS：JavaScript PPT生成库 
React Icons：图标组件库

1.  AI创建 HTML 幻灯片（带尺寸约束），设置精确尺寸，使用 <p>, <h1>-<h6>, <ul>, <ol> 包裹所有文本      
   ↓       
2. Playwright 启动无头浏览器（Chromium） 渲染 HTML，
   ↓
3. Dom 提取元素位置和样式、定位
   ↓
4. CSS 样式解析与转换 
   ↓
5. 位置精确计算（px → pt → inches 转换）    
   ↓
6. 转换为 PptxGenJS 对象
   ↓   
7. 样式应用与尺寸、内容溢出等验证
   ↓   
8. 生成 .pptx 文件

// HTML 尺寸约束
```javascript
// html2pptx.js - getBodyDimensions()
const bodyDimensions = await page.evaluate(() => {
  const body = document.body;
  const style = window.getComputedStyle(body);

  return {
    width: parseFloat(style.width),    // 720px (16:9)
    height: parseFloat(style.height),  // 405px
    scrollWidth: body.scrollWidth,     // 检测溢出
    scrollHeight: body.scrollHeight
  };
});
```

// 单位转换
```javascript
const PT_PER_PX = 0.75;   // 1px = 0.75pt
const PX_PER_IN = 96;     // 1inch = 96px

// RGB 转十六进制（PowerPoint 格式）
const rgbToHex = (rgbStr) => {
  // "rgb(255, 0, 0)" → "FF0000"
  const match = rgbStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
  return match.slice(1)
    .map(n => parseInt(n).toString(16).padStart(2, '0'))
    .join('');
};
```

1. 解包 .pptx → XML 文件
   ↓
2. 编辑 XML（文本、样式、结构）
   ↓
3. XSD Schema 验证
   ↓
4. 打包 → 新的 .pptx 文件

presentation.pptx (ZIP 压缩包)
├── [Content_Types].xml         # 文件类型定义
├── _rels/                       # 根关系
│   └── .rels                   # 包关系
├── docProps/                    # 文档属性
│   ├── app.xml                 # 应用属性（幻灯片数）
│   └── core.xml                # 核心属性（作者、标题）
└── ppt/                         # 演示文稿内容
    ├── presentation.xml        # 演示文稿主文件
    ├── _rels/                  # 演示文稿关系
    │   └── presentation.xml.rels
    ├── slides/                  # 幻灯片
    │   ├── slide1.xml
    │   ├── slide2.xml
    │   └── _rels/              # 幻灯片关系
    │       ├── slide1.xml.rels
    │       └── slide2.xml.rels
    ├── slideLayouts/            # 幻灯片布局
    │   ├── slideLayout1.xml
    │   └── _rels/
    ├── slideMasters/            # 母版幻灯片
    │   ├── slideMaster1.xml
    │   └── _rels/
    ├── theme/                   # 主题
    │   └── theme1.xml
    ├── media/                   # 媒体文件
    │   ├── image1.png
    │   └── image2.jpg
    └── notesSlides/             # 演讲者备注（可选）
        └── notesSlide1.xml

#unpack.py - 解包工具

```python
#!/usr/bin/env python3
"""
解包 Office 文件到目录

原理：
1. PPTX 本质是 ZIP 文件
2. 使用 zipfile 模块解压
3. 保持目录结构
"""

import zipfile
from pathlib import Path

def unpack_document(office_file, output_dir):
    """
    解包 Office 文件
    
    Args:
        office_file: .pptx/.docx/.xlsx 文件
        output_dir: 输出目录
    """
    output_dir = Path(output_dir)
    output_dir.mkdir(parents=True, exist_ok=True)
    
    with zipfile.ZipFile(office_file, 'r') as zf:
        zf.extractall(output_dir)
    
    print(f"Unpacked {office_file} to {output_dir}")

# 使用
if __name__ == '__main__':
    unpack_document('presentation.pptx', 'unpacked/')
```

**注意事项**：
- 解包后的 XML 可能是压缩的（无换行）
- 需要格式化 XML 以便编辑
- 保留文件权限和时间戳

**XSD Schema 验证**：

```python
def validate_against_xsd(self):
    """
    使用 XSD Schema 验证 XML 结构
    
    Schema 位置：
    • ooxml/schemas/ISO-IEC29500-4_2016/
    • pml.xsd（演示文稿）
    • dml-main.xsd（绘图）
    """
    # 加载 XSD Schema
    pml_schema = lxml.etree.XMLSchema(
        lxml.etree.parse('ooxml/schemas/.../pml.xsd')
    )
    
    errors = []
    for xml_file in self.xml_files:
        doc = lxml.etree.parse(str(xml_file))
        
        if not pml_schema.validate(doc):
            for error in pml_schema.error_log:
                errors.append(
                    f"{xml_file}:{error.line} {error.message}"
                )
    
    return len(errors) == 0
```

# 工作流程
1. 分析模板（缩略图 + 文本提取）
   ↓
2. 创建清单 & 内容映射（内容 → 模板幻灯片）
   ↓
3. 复制/重排幻灯片
   ↓
4. 文本内容提取与替换
   ↓
5. 视觉验证输出

### inventory.py - 智能文本分析
 #### 核心数据结构
 ```python
@dataclass
class ParagraphData:
    """段落数据"""
    text: str
    bullet: bool = False
    level: Optional[int] = None
    alignment: Optional[str] = None
    space_before: Optional[float] = None
    space_after: Optional[float] = None
    font_name: Optional[str] = None
    font_size: Optional[float] = None
    bold: Optional[bool] = None
    italic: Optional[bool] = None
    color: Optional[str] = None
    line_spacing: Optional[float] = None
 @dataclass
class ShapeData:
    """形状数据"""
    left: float              # 位置（英寸）
    top: float
    width: float
    height: float
    placeholder_type: Optional[str]  # TITLE, BODY, etc.
    paragraphs: List[ParagraphData]
    overflow: Optional[dict]  # 溢出信息
```
 #### 文本提取算法
 ```python
def extract_text_inventory(pptx_path):
    """
    提取所有文本形状及其属性

    流程：
    1. 遍历所有幻灯片
    2. 递归处理 GroupShape
    3. 提取形状位置和文本
    4. 按视觉位置排序
    5. 检测溢出和重叠
    """
    prs = Presentation(pptx_path)
    inventory = {}

    for slide_idx, slide in enumerate(prs.slides):
        # 收集所有有效形状（含组内形状）
        shapes = []
        for shape in slide.shapes:
            shapes.extend(
                collect_shapes_with_absolute_positions(shape)
            )

        # 转换为 ShapeData
        shape_data_list = [
            ShapeData(
                swp.shape,
                swp.absolute_left,
                swp.absolute_top,
                slide
            )
            for swp in shapes
        ]

        # 按视觉位置排序
        sorted_shapes = sort_shapes_by_position(shape_data_list)

        # 分配稳定 ID
        for idx, shape_data in enumerate(sorted_shapes):
            shape_data.shape_id = f"shape-{idx}"

        # 检测重叠
        detect_overlaps(sorted_shapes)

        inventory[f"slide-{slide_idx}"] = {
            sd.shape_id: sd for sd in sorted_shapes
        }

    return inventory
```

### 3.4 replace.py - 智能文本替换
 #### 替换流程
 ```python
def apply_replacements(pptx_file, json_file, output_file):
    """
    应用文本替换

    流程:
    1. 加载演示文稿
    2. 提取清单（获取形状引用）
    3. 验证替换 JSON
    4. 清除所有形状的文本
    5. 应用新文本（仅替换 JSON 中指定的）
    6. 检测溢出变化
    7. 保存并验证

    关键设计决策:
    • 默认清除所有文本（避免残留）
    • 仅替换 JSON 中有 "paragraphs" 的形状
    • 验证溢出是否恶化
    """
    prs = Presentation(pptx_file)

    # 提取清单（获取形状对象引用）
    inventory = extract_text_inventory(Path(pptx_file), prs)

    # 加载替换数据
    with open(json_file) as f:
        replacements = json.load(f)

    # 验证
    errors = validate_replacements(inventory, replacements)
    if errors:
        raise ValueError(f"Invalid replacement JSON")

    # 处理每个形状
    for slide_key, shapes_dict in inventory.items():
        for shape_key, shape_data in shapes_dict.items():
            shape = shape_data.shape
            text_frame = shape.text_frame

            # 清除文本
            text_frame.clear()

            # 检查是否有替换
            replacement = replacements.get(slide_key, {}).get(shape_key, {})
            if 'paragraphs' not in replacement:
                continue  # 保持空白

            # 应用新段落
            for i, para_data in enumerate(replacement['paragraphs']):
                if i == 0:
                    p = text_frame.paragraphs[0]
                else:
                    p = text_frame.add_paragraph()

                apply_paragraph_properties(p, para_data)

    # 验证输出
    prs.save(output_file)
    validate_output(output_file)
```

#### GroupShape 递归处理
 ```python
def collect_shapes_with_absolute_positions(
    shape, 
    parent_left=0, 
    parent_top=0
):
    """
    递归处理组形状，计算绝对位置

    挑战：
    • 组内形状的坐标相对于组
    • 需要累加所有父级偏移
    • 支持嵌套组

    解决：
    ├── 检测是否为 GroupShape
    ├── 累加父级偏移
    ├── 递归处理子形状
    └── 返回绝对位置
    """
    if hasattr(shape, 'shapes'):  # GroupShape
        group_left = shape.left
        group_top = shape.top

        # 累加偏移
        abs_left = parent_left + group_left
        abs_top = parent_top + group_top

        # 递归处理子形状
        result = []
        for child in shape.shapes:
            result.extend(
                collect_shapes_with_absolute_positions(
                    child, abs_left, abs_top
                )
            )
        return result

    # 普通形状
    if is_valid_shape(shape):
        return [ShapeWithPosition(
            shape=shape,
            absolute_left=parent_left + shape.left,
            absolute_top=parent_top + shape.top
        )]

    return []
```

视觉排序算法
 ```python
def sort_shapes_by_position(shapes):
    """
    按视觉位置排序（从上到下，从左到右）

    算法：
    1. 首先按 top 位置排序
    2. 分组为"行"（垂直容差 0.5"）
    3. 每行内按 left 位置排序

    为什么需要容差？
    • 设计师可能手动对齐，不完全精确
    • 0.5" ≈ 36pt，合理的行高差异
    """
    if not shapes:
        return shapes

    # 按 top 排序
    shapes = sorted(shapes, key=lambda s: (s.top, s.left))

    # 分行
    result = []
    row = [shapes[0]]
    row_top = shapes[0].top

    for shape in shapes[1:]:
        if abs(shape.top - row_top) <= 0.5:
            row.append(shape)
        else:
            # 当前行按 left 排序
            result.extend(sorted(row, key=lambda s: s.left))
            row = [shape]
            row_top = shape.top

    # 最后一行
    result.extend(sorted(row, key=lambda s: s.left))

    return result
```

幻灯片：命名 规范，以 "slide-0"、"slide-1" 等定义。
形状：按视觉位置排序（从上到下，从左到右）为 "shape-0"、"shape-1" 等。
占位符类型：TITLE、CENTER_TITLE、SUBTITLE、BODY、OBJECT 或 null
默认字体大小：从布局占位符提取的 default_font_size（点）（如果可用）
幻灯片编号已过滤：具有 SLIDE_NUMBER 占位符类型的形状自动从清单中排除
间距：space_before、space_after 和 line_spacing（点）（仅在设置时包含）
颜色：技能内置18种专业配色方案：RGB 的 color（例如 "FF0000"），主题颜色的 theme_color（例如 "DARK_1"）
属性：输出中仅包含非默认值

优势：
✓ AI 已精通 HTML/CSS
✓ Flexbox 布局强大
✓ 易于验证和调试
✓ 所见即所得

代价：
✗ 需要转换层
✗ 某些 PPT 特性受限

# 多层验证
1. HTML 阶段：尺寸、溢出
2. 转换阶段：元素支持度
3. XML 阶段：Schema、关系
4. 输出阶段：文件完整性

thumbnail.py    → 可视化
inventory.py    → 分析
rearrange.py    → 重组
replace.py      → 替换
validate.py     → 验证
pack.py         → 打包

经典蓝：深海军蓝 (#1C2833)、石板灰 (#2E4053)、银色 (#AAB7B8)、米白色 (#F4F6F6)
青绿与珊瑚：青绿 (#5EA8A7)、深青绿 (#277884)、珊瑚 (#FE4447)、白色 (#FFFFFF)
大胆红：红色 (#C0392B)、亮红 (#E74C3C)、橙色 (#F39C12)、黄色 (#F1C40F)、绿色 (#2ECC71)
温暖腮红：紫灰 (#A49393)、腮红 (#EED6D3)、玫瑰 (#E8B4B8)、奶油 (#FAF7F2)
勃艮第奢华：勃艮第 (#5D1D2E)、深红 (#951233)、铁锈 (#C15937)、金色 (#997929)
深紫与翡翠：紫色 (#B165FB)、深蓝 (#181B24)、翡翠 (#40695B)、白色 (#FFFFFF)
奶油与森林绿：奶油 (#FFE1C7)、森林绿 (#40695B)、白色 (#FCFCFC)
粉红与紫色：粉红 (#F8275B)、珊瑚 (#FF574A)、玫瑰 (#FF737D)、紫色 (#3D2F68)
青柠与梅子：青柠 (#C5DE82)、梅子 (#7C3A5F)、珊瑚 (#FD8C6E)、蓝灰 (#98ACB5)
黑金：金色 (#BF9A4A)、黑色 (#000000)、奶油 (#F4F6F6)
鼠尾草与陶土：鼠尾草 (#87A96B)、陶土 (#E07A5F)、奶油 (#F4F1DE)、炭灰 (#2C2C2C)
炭灰与红：炭灰 (#292929)、红色 (#E33737)、浅灰 (#CCCBCB)
活力橙：橙色 (#F96D00)、浅灰 (#F2F2F2)、炭灰 (#222831)
森林绿：黑色 (#191A19)、绿色 (#4E9F3D)、深绿 (#1E5128)、白色 (#FFFFFF)
复古彩虹：紫色 (#722880)、粉红 (#D72D51)、橙色 (#EB5C18)、琥珀 (#F08800)、金色 (#DEB600)
复古大地：芥末黄 (#E3B448)、鼠尾草 (#CBD18F)、森林绿 (#3A6B35)、奶油 (#F4F1DE)
海岸玫瑰：旧玫瑰 (#AD7670)、海狸 (#B49886)、蛋壳 (#F3ECDC)、灰绿 (#BFD5BE)
橙与青绿：浅橙 (#FC993E)、灰青绿 (#667C6F)、白色 (#FCFCFC)

- Arial（无衬线，通用，几乎所有操作系统预装，适用：正文、标题，安全性最高的选择。） 
- Helvetica（无衬线，Mac首选/适合印刷，适用：专业演示文稿，现代风格设计。） 
- Times New Roman（衬线，正式，学术性强，适用：正式报告，学术论文，传统文档。） 
- Georgia（衬线，专为屏幕阅读，适用：长篇屏幕阅读，电子书。） 
- Courier New（等宽，打印机风格代码，适用：代码片段，技术文档，强调数据对齐。） 
- Verdana（无衬线，屏幕优化，宽间距，适用：低分辨率屏幕，小字号文本。）

/**
 * 优化布局函数 - 根据内容智能选择最佳布局
 * @param {Object} content - 需要布局的内容
 * @returns {Object} - 布局配置对象
 */
function optimizeLayout(content){
  if (hasChartOrTable(content)) {
    // 使用两列布局：文本 + 图表
    return {
      type: 'two-column',
      ratio: isTextHeavy(content) ? '40/60' : '60/40',
      text_column: extractTextContent(content),
      visual_column: extractVisualContent(content)
    };
  } else {
    // 使用单列布局
    return {
      type: 'single-column',
      content: structuredContent(content)
    };
  }
}

✅ 在编写代码之前说明你基于内容的设计方法
✅ 仅使用网页安全字体：Arial、Helvetica、Times New Roman、Georgia、Courier New、Verdana、Tahoma、Trebuchet MS、Impact
✅ 通过大小、粗细和颜色创建清晰的视觉层次
✅ 确保可读性：强对比度、适当大小的文本、清晰的对齐
✅ 保持一致性：在幻灯片之间重复模式、间距和视觉语言

sync function processSlidesParallel(htmlFiles, pptx){
    const concurrency = 3; // 并发数量限制
    console.log(`? Starting parallel processing of ${htmlFiles.length} slides (Concurrency: ${concurrency})`);

    const chunks = chunkArray(htmlFiles, concurrency);
    
    for (let i = 0; i < chunks.length; i++) {
        const chunk = chunks[i];
        console.log(`\n? Processing batch ${i + 1}/${chunks.length} (${chunk.length} files)...`);
        
        const promises = chunk.map(htmlFile => 
            html2pptx(htmlFile, pptx)
                // 成功回调：注入文件名以便日志记录
                .then(res => {
                    // 如果返回值是对象，合并 file 属性；否则返回包含 result 和 file 的新对象
                    return (typeof res === 'object' && res !== null) 
                        ? { ...res, file: htmlFile } 
                        : { result: res, file: htmlFile };
                })
                // 失败回调：捕获错误，防止 Promise.all 整体失败
                .catch(error => ({ 
                    error: error.message, 
                    file: htmlFile 
                }))
        );
        
        const results = await Promise.all(promises);
        handleProcessingResults(results);
    }
    
    console.log('\n✨ All processing completed.');
}

def generate_thumbnail_grid(pptx_path, output_prefix, cols=5):
    """生成缩略图网格用于质量检查"""
    try:
        # 1. 转换PPT为PDF
        pdf_path = convert_pptx_to_pdf(pptx_path)
        
        # 2. 将PDF转换为图片
        images = convert_pdf_to_images(pdf_path)
        
        # 3. 创建网格布局
        grid = create_image_grid(images, cols)
        
        # 4. 保存检查结果
        output_filename = f"{output_prefix}.jpg"
        grid.save(output_filename, quality=85)
        print(f"✅ 检查结果已保存: {output_filename}")
        
    except Exception as e:
        print(f"❌ 流程中断: {e}")
        sys.exit(1)