fnvtk/soul
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d17150154c12753ad2cca9a92da7eebdb305719a
soul/开发文档/生成指南_HTML输出.md
v0 f3195d9331 refactor: overhaul homepage and app structure 
Simplify homepage, show chapter counts, display directory, trim bottom nav, in-page match feature, move marketing content, and enhance "My" page.

#VERCEL_SKIP

Co-authored-by: undefined <undefined+undefined@users.noreply.github.com>
2026-01-14 05:10:32 +00:00

7.0 KiB
Raw Blame History

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

<html lang="zh-CN"> <head> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <style> /* 苹果毛玻璃风格CSS */ </style> </head>
导出图片 切换主题 打印
<script> // 导出和主题切换功能 </script> </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