# HTML输出生成指南

> **核心功能**：将任何模板内容输出为苹果毛玻璃风格的可编辑HTML文件
> **适用范围**：所有五行模板的最终输出

---

## 🎯 HTML输出特性

| 特性 | 说明 |
|:---|:---|
| **苹果毛玻璃风格** | 半透明背景、模糊效果、圆角卡片 |
| **可编辑** | 所有文本内容可直接在页面编辑 |
| **导出图片** | 支持一键导出为PNG/JPG图片 |
| **响应式设计** | 适配桌面和移动端 |
| **暗色/亮色主题** | 支持主题切换 |

---

## 🤖 HTML生成提示词

### 通用HTML生成提示词

```markdown
# Role: 卡若 - HTML文档生成专家

# Task: 将模板内容输出为【苹果毛玻璃风格HTML文件】

# Input:
- 模板类型：[输入，如人物画像分析表/朋友圈投放表/复盘报告等]
- 项目名称：[输入]
- 内容数据：[输入具体内容]

# Instructions:
生成一个完整的HTML文件，包含以下特性：

## 1. 视觉风格要求
- **背景**：渐变背景（深色：#1a1a2e → #16213e，或亮色：#f5f7fa → #c3cfe2）
- **卡片**：毛玻璃效果（backdrop-filter: blur(10px)）
- **圆角**：所有卡片圆角16px
- **阴影**：柔和阴影（box-shadow: 0 8px 32px rgba(0,0,0,0.1)）
- **字体**：-apple-system, BlinkMacSystemFont, "SF Pro Display"

## 2. 功能要求
- **可编辑**：所有表格单元格和文本区域添加 contenteditable="true"
- **导出图片**：添加导出按钮，使用html2canvas库实现截图导出
- **主题切换**：添加暗色/亮色主题切换按钮
- **打印友好**：添加打印样式

## 3. HTML结构
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[项目名称] - [模板类型]</title>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <style>
        /* 苹果毛玻璃风格CSS */
    </style>
</head>
<body>
    <div class="container" id="content">
        <!-- 内容区域 -->
    </div>
    <div class="toolbar">
        <button onclick="exportImage()">导出图片</button>
        <button onclick="toggleTheme()">切换主题</button>
        <button onclick="window.print()">打印</button>
    </div>
    <script>
        // 导出和主题切换功能
    </script>
</body>
</html>
```

## 4. 必须包含的CSS样式
```css
:root {
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --accent-color: #007AFF;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    min-height: 100vh;
    padding: 40px;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}

th {
    background: rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

[contenteditable="true"]:focus {
    outline: 2px solid var(--accent-color);
    border-radius: 4px;
}

.toolbar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.toolbar button {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}
```

## 5. 必须包含的JavaScript
```javascript
function exportImage() {
    html2canvas(document.getElementById('content'), {
        backgroundColor: null,
        scale: 2
    }).then(canvas => {
        const link = document.createElement('a');
        link.download = '[项目名称]-[模板类型].png';
        link.href = canvas.toDataURL();
        link.click();
    });
}

function toggleTheme() {
    document.body.classList.toggle('light-theme');
}
```

# Output:
- 输出完整的HTML代码
- 可直接保存为.html文件并在浏览器打开
- 所有内容可编辑
- 支持导出图片
```

---

## 📋 各模板HTML输出示例

### 1. 人物画像分析表 HTML

```markdown
# Task: 生成【人物画像分析表】HTML文件

# Input:
- 项目名称：[输入]
- A类用户：[输入画像信息]
- B类用户：[输入画像信息]
- C类用户：[输入画像信息]

# Output:
生成苹果毛玻璃风格的HTML文件，包含：
- 目标用户定义卡片
- 需求分析卡片
- 解决方案卡片
- A/B/C用户画像表格
- 痛点层级分析表格
- 导出图片功能
```

### 2. 朋友圈投放表 HTML

```markdown
# Task: 生成【朋友圈投放表】HTML文件

# Input:
- 项目名称：[输入]
- 投放周期：[输入]
- 投放内容：[输入每日文案]

# Output:
生成苹果毛玻璃风格的HTML文件，包含：
- 投放计划总览卡片
- 每日投放详情表格（可编辑）
- 五行属性颜色标注
- 配图预览区域
- 导出图片功能
```

### 3. 复盘报告 HTML

```markdown
# Task: 生成【复盘报告】HTML文件

# Input:
- 项目名称：[输入]
- 复盘周期：[输入]
- GRAI内容：[输入]

# Output:
生成苹果毛玻璃风格的HTML文件，包含：
- 项目信息卡片
- 核心指标卡片
- 目标vs结果对比
- 过程与策略分析
- 深层归因
- 行动计划表格
- 导出图片功能
```

---

## 🎨 颜色方案

### 暗色主题（默认）

| 元素 | 颜色值 | 说明 |
|:---|:---|:---|
| 背景渐变起点 | #1a1a2e | 深紫蓝 |
| 背景渐变终点 | #16213e | 深蓝 |
| 毛玻璃背景 | rgba(255,255,255,0.1) | 10%白色 |
| 毛玻璃边框 | rgba(255,255,255,0.2) | 20%白色 |
| 主文字 | #ffffff | 纯白 |
| 次文字 | rgba(255,255,255,0.7) | 70%白色 |
| 强调色 | #007AFF | 苹果蓝 |

### 亮色主题

| 元素 | 颜色值 | 说明 |
|:---|:---|:---|
| 背景渐变起点 | #f5f7fa | 浅灰 |
| 背景渐变终点 | #c3cfe2 | 浅蓝灰 |
| 毛玻璃背景 | rgba(255,255,255,0.7) | 70%白色 |
| 毛玻璃边框 | rgba(255,255,255,0.5) | 50%白色 |
| 主文字 | #1a1a2e | 深色 |
| 次文字 | rgba(0,0,0,0.6) | 60%黑色 |
| 强调色 | #007AFF | 苹果蓝 |

### 五行颜色

| 五行 | 颜色值 | 用途 |
|:---|:---|:---|
| 金 | #FFD700 | 引起兴趣、晒结果 |
| 木 | #4CAF50 | 提醒行动、限时 |
| 水 | #2196F3 | 分享干货、信任 |
| 火 | #FF5722 | 从众设计、热度 |
| 土 | #795548 | 品牌稳固、团队 |

---

## ⚠️ 使用说明

1. **生成时机**：当用户明确要求"生成HTML"或"输出最终文档"时使用
2. **默认输出**：日常交互仍然输出Markdown表格
3. **编辑功能**：生成的HTML所有内容都可直接编辑
4. **导出功能**：点击"导出图片"按钮即可保存为PNG
5. **文件保存**：将HTML代码保存为.html文件，用浏览器打开即可使用

---

**模板版本**：v1.0
**设计者**：Karuo Team | 2025

