@becrafter/prompt-manager 0.0.8

package/app/desktop/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@becrafter/prompt-desktop",
+  "version": "0.0.7",
+  "description": "Menu bar desktop wrapper for @becrafter/prompt-manager",
+  "private": true,
+  "main": "main.js",
+  "scripts": {
+    "dev": "electron .",
+    "start": "npm run dev",
+    "build": "electron-builder"
+  },
+  "devDependencies": {
+    "electron": "^31.0.2",
+    "electron-builder": "^24.13.3"
+  },
+  "dependencies": {
+    "tar": "^6.2.1"
+  },
+  "build": {
+    "appId": "com.becrafter.promptserver",
+    "productName": "Prompt Manager",
+    "files": [
+      "**/*",
+      "assets/icon.png"
+    ],
+    "directories": {
+      "output": "../../dist",
+      "buildResources": "assets"
+    },
+    "extraResources": [
+      {
+        "from": "../../",
+        "to": "prompt-manager",
+        "filter": [
+          "package.json",
+          "package-lock.json",
+          "packages/**/*",
+          "examples/**/*",
+          "node_modules/**/*"
+        ]
+      }
+    ],
+    "mac": {
+      "category": "public.app-category.productivity"
+    },
+    "win": {
+      "target": [
+        {
+          "target": "nsis",
+          "arch": [
+            "x64"
+          ]
+        }
+      ]
+    },
+    "linux": {
+      "target": [
+        "AppImage"
+      ],
+      "category": "Utility"
+    }
+  }
+}

package/examples/prompts/developer/code-review.yaml

@@ -0,0 +1,32 @@
+name: code-review
+description: 帮助进行代码审查的AI助手
+messages:
+  - role: user
+    content:
+      text: |
+        你是一个专业的代码审查助手。请审查以下代码：
+
+        代码语言: {{language}}
+        代码内容:
+        ```
+        {{code}}
+        ```
+
+        请从以下几个方面进行审查：
+        1. 代码质量和可读性
+        2. 潜在的安全问题
+        3. 性能优化建议
+        4. 最佳实践建议
+        5. 潜在的bug
+
+        请提供具体的改进建议和示例代码。
+arguments:
+  - name: language
+    description: 编程语言
+    type: string
+    required: true
+  - name: code
+    description: 要审查的代码
+    type: string
+    required: true
+enabled: false

package/examples/prompts/developer/code_refactoring.yaml

@@ -0,0 +1,31 @@
+name: code_refactoring
+description: 当用户想要重构代码时，可以使用这个提示词，来帮助用户提高代码质量和可维护性
+arguments:
+  - name: language
+    description: 编程语言
+    required: true
+  - name: code
+    description: 要重构的代码
+    required: true
+  - name: focus_areas
+    description: 重点关注的重构领域(如性能、可读性、模块化等)
+    required: false
+messages:
+  - role: user
+    content:
+      type: text
+      text: |
+        请对以下{{language}}代码进行重构，以提高其质量和可维护性：
+
+        ```{{language}}
+        {{code}}
+        ```
+
+        {{#focus_areas}}
+        重点关注以下方面：{{focus_areas}}
+        {{/focus_areas}}
+
+        请提供：
+        1. 重构后的完整代码
+        2. 详细说明您所做的每项更改及其理由
+        3. 重构如何改进了代码的质量和可维护性

package/examples/prompts/developer/doc-generator.yaml

@@ -0,0 +1,36 @@
+name: doc-generator
+description: "根据代码生成技术文档"
+messages:
+  - role: "user"
+    content:
+      text: |
+        请为以下代码生成详细的技术文档：
+        
+        项目名称: {{projectName}}
+        代码语言: {{language}}
+        代码内容:
+        ```
+        {{code}}
+        ```
+        
+        请生成包含以下部分的文档：
+        1. 功能概述
+        2. API接口说明
+        3. 参数说明
+        4. 使用示例
+        5. 注意事项
+        
+        文档格式要求：使用Markdown格式，结构清晰，易于理解。
+arguments:
+  - name: "projectName"
+    description: "项目名称"
+    type: "string"
+    required: true
+  - name: "language"
+    description: "编程语言"
+    type: "string"
+    required: true
+  - name: "code"
+    description: "要生成文档的代码"
+    type: "string"
+    required: true

package/examples/prompts/developer/error-code-fixer.yaml

@@ -0,0 +1,35 @@
+name: error-code-fixer
+description: "帮助分析和修复代码错误"
+messages:
+  - role: "user"
+    content:
+      text: |
+        你是一个专业的错误修复助手。请帮助分析和修复以下错误：
+        
+        错误信息: {{errorMessage}}
+        代码语言: {{language}}
+        相关代码:
+        ```
+        {{code}}
+        ```
+        
+        请提供：
+        1. 错误原因分析
+        2. 具体的修复方案
+        3. 修复后的代码
+        4. 预防类似错误的建议
+        
+        如果错误信息不够详细，请说明需要哪些额外信息。
+arguments:
+  - name: "errorMessage"
+    description: "错误信息"
+    type: "string"
+    required: true
+  - name: "language"
+    description: "编程语言"
+    type: "string"
+    required: true
+  - name: "code"
+    description: "出错的代码"
+    type: "string"
+    required: false

package/examples/prompts/generator/gen_3d_edu_webpage_html.yaml

@@ -0,0 +1,117 @@
+name: gen_3d_edu_webpage_html
+# 3D教育游戏网页生成器
+
+description: 基于Three.js等技术，为任意教育主题生成沉浸式3D游戏化学习网页，融合教育内容、交互动画和游戏机制，适合寓教于乐的学习体验。
+arguments: []
+messages:
+  - role: user
+    content:
+      type: text
+      text: |
+        # 角色：3D教育游戏开发专家
+
+        你是一名专精于Three.js的教育游戏开发专家，擅长将学习内容转化为引人入胜的交互式3D游戏体验。请为我提供的任何教育主题创建一个游戏化学习HTML应用，融合教育内容与沉浸式3D游戏元素，优先保证代码复杂度可控可运行前提下生成。
+
+        ## 游戏化学习核心要素
+
+        构建以下游戏化元素激发学习动机：
+        - 清晰的学习目标转化为游戏任务和挑战
+        - 进度系统（经验值、关卡或成就徽章）
+        - 即时反馈机制（视觉和音效提示）
+        - 基于探索的学习路径
+        - 互动式问答或挑战，测试知识掌握程度
+        - 故事情境包装学习内容，提升参与感
+
+        ## 技术实现框架
+
+        使用以下技术栈构建教育游戏体验：
+        - Three.js (https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/three.js/110/three.min.js)
+        - 内嵌自定义控件代码，避免外部依赖问题
+        - Tailwind CSS (https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css)
+        - Font Awesome (https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
+        - 中文排版使用 Noto Serif SC 和 Noto Sans SC
+        - GSAP动画库 (https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js)
+        - 可选：简化版物理引擎实现互动效果
+
+        ## 3D游戏场景设计
+
+        根据教育主题，设计一个完整的Three.js游戏场景：
+        - 将学习概念转化为可视化3D元素和互动对象
+        - 创建主题相关的游戏环境（如历史场景、科学实验室、数学空间等）
+        - 设计角色或代理引导学习者完成任务
+        - 添加可交互的3D对象，点击后展示相关知识点
+        - 使用动画和转场效果强化概念理解
+        - 通过粒子效果、光照和材质增强视觉吸引力
+
+        ## 直观交互设计原则
+
+        采用苹果式设计理念，创造自然直观的交互体验：
+        - 放大交互热区：确保可点击区域足够大（至少50x50像素），超出视觉边界
+        - 视觉暗示：使用微妙动画、光效或颜色变化引导用户注意下一步操作
+        - 自动化流程：完成一个步骤后自动引导至下一步，减少不必要的手动确认
+        - 预测性设计：预测用户意图，在用户需要前提供选项
+        - 触觉反馈：通过动画、颜色变化或微妙的音效提供即时反馈
+        - 宽容错误：设计防止错误的界面，即使出错也能优雅恢复
+
+        ## 创意游戏机制
+
+        实现以下创新游戏机制提升学习趣味性：
+        - 知识收集器：设计虚拟工具收集散落在环境中的知识碎片
+        - 环境互动：允许改变环境状态（如日夜切换、季节变化）揭示不同知识点
+        - 解谜元素：设计与学习内容相关的谜题，解开后获得关键信息
+        - 进度叙事：随着学习进展，环境发生变化讲述相关故事
+        - 技能树：解锁新能力后可以访问先前无法到达的区域
+        - 成就系统：完成特定挑战解锁成就徽章和视觉奖励，给用户大大惊喜，制造aha-moment
+        - 游戏性：参考经典游戏设计，比如塞尔达传说等；满足随机奖励原则。
+        - 彩蛋机制：隐藏额外知识点，鼓励探索和实验
+
+        ## 自动化学习路径
+
+        设计智能引导系统确保学习流畅进行：
+        - 完成当前任务后自动引导至下一个学习点（通过相机移动、光效或动画）
+        - 提供明确的视觉指引（如光束、路径或指示箭头）指向下一个目标
+        - 实现智能提示系统，根据用户行为提供上下文相关的帮助
+        - 设置适当的触发区域大小，确保交互轻松无误
+        - 在用户停滞时提供渐进式提示，从微妙暗示到明确指导
+        - 保留手动控制选项，允许高级用户自定义学习路径
+
+        ## 界面控制与用户自主性
+
+        确保用户对学习体验有完全控制权：
+        - 为所有模态窗口和界面元素提供明确的关闭/返回按钮（尺寸足够大）
+        - 允许用户随时暂停、保存和恢复学习进度
+        - 提供跳过或加速某些内容的选项
+        - 设计直观的导航系统，便于在不同学习模块间切换
+        - 确保所有交互元素有清晰的视觉状态反馈
+        - 支持自定义学习路径，尊重不同学习风格
+
+        ## 教育内容整合
+
+        确保游戏体验与教育目标紧密结合：
+        - 将复杂概念分解为可游戏化的小单元
+        - 设计循序渐进的学习路径，由简到难
+        - 通过故事情境或问题场景包装教学内容
+        - 提供多种学习方式（视觉、听觉、互动）满足不同学习风格
+        - 在游戏过程中嵌入自我评估机会
+        - 确保游戏机制服务于学习目标，而非分散注意力
+
+        ## 技术优化与性能
+
+        确保流畅的游戏化学习体验：
+        - 资源预加载和进度指示
+        - 3D模型和纹理优化，确保快速加载
+        - 针对移动设备的性能自适应
+        - 保存学习进度到本地存储
+        - 优雅降级：在低性能设备上提供简化版体验
+        - 错误处理机制，确保学习不中断
+
+        ## 输出成果
+
+        提供包含以下内容的完整教育游戏解决方案：
+        1. 单一HTML文件，包含所有必要CSS和JavaScript（避免外部依赖）
+        2. 只输出HTML，不要其他任何引导语和介绍。
+        3. 确保游戏化学习体验能在现代浏览器中流畅运行
+
+        无论我提供什么教育主题，都请发挥你的创意想象力和技术专长，创造一个寓教于乐的3D游戏化学习体验，让学习过程变得有趣且高效。游戏元素应服务于教育目标，而非仅作装饰。设计应遵循苹果式的直观简洁理念，让用户无需思考即可自然完成学习流程，同时保持足够的创意和趣味性。
+
+        待处理主题或内容：

package/examples/prompts/generator/gen_3d_webpage_html.yaml

@@ -0,0 +1,75 @@
+name: gen_3d_webpage_html
+# 3D网页展示生成器
+
+description: 基于Three.js、GSAP等技术，为任意主题生成沉浸式3D网页单页，融合高级视觉设计、交互动画和最佳UI实践，适合内容展示、可视化和创意体验。
+arguments: []
+messages:
+  - role: user
+    content:
+      type: text
+      text: |
+        # 角色：3D网页创意技术总监
+
+        你是一名专精于Three.js的创意技术总监和可视化专家，擅长将复杂信息转化为引人入胜的交互式3D体验。请为我提供的任何主题或内容创建一个令人惊艳的单页面HTML展示，融合高级视觉设计和沉浸式3D效果。
+
+        ## 关键技术要素
+
+        使用以下技术栈构建沉浸式体验：
+        - Three.js (https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/three.js/110/three.min.js)
+        - 内嵌自定义控件代码，避免外部依赖问题
+        - Tailwind CSS (https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css)
+        - Font Awesome (https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
+        - 中文排版使用 Noto Serif SC 和 Noto Sans SC
+        - GSAP动画库 (https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js)
+
+        ## 3D场景设计
+
+        根据内容主题，设计一个完整的Three.js场景，可能包括：
+        - 适合主题的3D几何体、模型或粒子系统
+        - 动态相机和光照设置
+        - 基于滚动或用户交互的动画效果
+        - 在3D环境与2D内容之间建立有意义的联系
+        - 环境氛围(雾效、阴影、反射等)增强视觉深度
+
+        ## UI与内容布局最佳实践
+
+        遵循以下布局原则，确保3D内容成为焦点：
+        - 3D场景应占据主要视觉空间，内容不应遮挡3D体验
+        - 使用可折叠侧边栏或模态框展示详细文字内容
+        - 鼠标放到侧边栏，自动展开，移开后缩回去。
+        - 为3D元素添加标签系统，允许用户了解各部分功能和意义
+        - 使用半透明UI元素，在提供信息的同时不阻断3D场景的可见性
+
+        ## 交互提示系统
+
+        设计直观的交互引导体验：
+        - 添加简洁的初始操作提示，几秒后自动降低透明度
+        - 在用户执行操作时提供即时反馈，更新提示内容
+        - 为关键3D元素添加标签或高亮效果，帮助用户理解场景
+        - 设计清晰的控制按钮，具有明确的视觉状态变化
+        - 在复杂操作前提供简短教程或演示
+        - 3D模型自动循环，但速度要慢。
+
+        ## 设计原则
+
+        遵循以下设计原则创建引人入胜的体验：
+        - 整合而非装饰：3D元素应直接服务于内容表达，而非仅作装饰
+        - 性能优先：确保复杂视觉效果不影响页面加载和运行速度
+        - 沉浸式叙事：利用3D效果构建内容的视觉叙事层次
+        - 交互深度：添加多层次交互，让用户通过探索发现内容
+        - 响应式适配：确保在所有设备上提供最佳体验，智能降级复杂效果
+
+        ## 额外加分
+
+        可选择以下一种或多种创意方向拓展体验：
+        - 物理引擎模拟：使用cannon.js等物理引擎创建具有真实感的交互
+
+        ## 输出成果
+
+        提供包含以下内容的完整解决方案：
+        1. 单一HTML文件，包含所有必要CSS和JavaScript（避免外部依赖）
+        2. 只输出HTML，不要其他任何引导语和介绍。
+
+        无论我提供什么主题，都请发挥你的创意想象力和技术专长，创造一个超越传统网页的沉浸式体验，确保3D内容成为核心焦点，而辅助信息以不干扰的方式呈现。
+
+        待处理主题：

package/examples/prompts/generator/gen_bento_grid_html.yaml

@@ -0,0 +1,112 @@
+name: gen_bento_grid_html
+# Bento Grid风格单页网站生成器
+
+description: 根据用户选择的设计风格和内容，生成视觉冲击力强、适合截图分享的Bento Grid单页网站，内嵌CSS和JS，优化视觉和分享体验。
+arguments: []
+messages:
+  - role: user
+    content:
+      type: text
+      text: |
+        # 角色：极具审美的前端设计大师
+
+        你是极具审美的前端设计大师，请为我生成一个基于 Bento Grid 设计风格的单页HTML网站，内嵌CSS、JS。这个页面将被截图分享，需要特别优化视觉效果和分享体验。
+
+        ## 设计风格选项
+        你可以选择以下风格编号或名称：
+        - 极简主义风格 (Minimalist)：简约、留白、精确排版、无衬线字体、克制装饰
+        - 大胆现代风格 (Bold Modern)：鲜艳对比色、不对称动态排版、极大标题、几何元素
+        - 优雅复古风格 (Elegant Vintage)：米色背景、衬线字体、对称排版、精致装饰元素
+        - 未来科技风格 (Futuristic Tech)：深色背景、霓虹色、科技界面、数据可视化元素
+        - 斯堪的纳维亚风格 (Scandinavian)：纯白背景、北欧色调、克制排版、简单几何图案
+        - 艺术装饰风格 (Art Deco)：黑金配色、对称排版、装饰性字体、几何图案、奢华感
+        - 日式极简风格 (Japanese Minimalism)：极度留白、克制色彩、非对称排版、禅意美学
+        - 后现代解构风格 (Postmodern Deconstruction)：打破规则、混合字体、不和谐色彩
+        - 朋克风格 (Punk)：DIY效果、高对比色彩、不规则排版、手写字体、粗糙质感
+        - 英伦摇滚风格 (British Rock)：英国元素、红白蓝色系、混合经典与现代字体
+        - 黑金属风格 (Black Metal)：纯黑背景、哥特字体、神秘符号、高对比单色图像
+        - 孟菲斯风格 (Memphis Design)：鲜艳不协调色彩、几何形状、活泼排版、80年代感
+        - 赛博朋克风格 (Cyberpunk)：深色背景、霓虹色彩、故障效果、科技界面元素
+        - 波普艺术风格 (Pop Art)：亮丽原色、漫画风格、半调网点效果、流行文化元素
+        - 瑞士国际主义风格的解构版 (Deconstructed Swiss Style)：基于网格的破坏重组
+        - 蒸汽波美学 (Vaporwave Aesthetics)：粉紫青蓝渐变、80-90年代元素、复古电脑界面
+        - 新表现主义风格 (Neo-Expressionism)：强烈色彩、不规则排版、粗犷线条、手工感
+        - 极简主义的极端版本 (Extreme Minimalism)：极度留白、黑白灰、精确排版、零装饰
+        - 新未来主义 (Neo-Futurism)：流线型曲线、金属色调、高科技材质、动态排版
+        - 超现实主义数字拼贴 (Surrealist Digital Collage)：意外元素组合、比例失调、梦幻色彩
+        - 新巴洛克数字风格 (Neo-Baroque Digital)：华丽装饰、金色深色系、戏剧性光影效果
+        - 液态数字形态主义 (Liquid Digital Morphism)：流体渐变、液态效果、梦幻色彩
+        - 超感官极简主义 (Hypersensory Minimalism)：微妙纹理、精确排版、细微色彩变化
+        - 新表现主义数据可视化 (Neo-Expressionist Data Visualization)：数据驱动的抽象艺术
+        - 维多利亚风格 (Victorian Style)：华丽印刷美学、繁复装饰边框、传统排版
+        - 包豪斯风格 (Bauhaus)：基本几何形状、原色、无衬线字体、功能主义美学
+        - 构成主义风格 (Constructivism)：几何形状、红黑配色、动态排版、革命美学
+        - 简约功能型风格 (Minimal Functional)：清晰卡片式布局、柔和色彩点缀、直观图标系统、精简文本展示、充足留白空间
+        - 德国表现主义风格 (German Expressionism)：强烈明暗对比、扭曲形态、情感表达
+
+        如果我没有指定风格，请默认使用大胆现代的 Bento Grid 风格设计。
+
+        ## 布局要求
+        - 使用不规则的网格布局，确保整个视口区域被充分利用，无明显大块空白
+        - 设计一个主要的大卡片展示核心概念/引言（占据约25-30%的视觉区域）
+        - 其余卡片应包含不同的子主题，每个卡片有独特的标题和简短描述，标题简短，避免换行。
+        - 卡片大小应根据内容重要性进行变化，形成视觉层次感
+        - 卡片之间的间距应保持一致（建议12-20px），创造整洁有序的视觉效果
+        - 为卡片添加相关Fontawesome图标，出现在卡片背景中，非常巧妙的装饰。
+        - 在右下角卡片放置品牌标识和二维码
+        - 确保整体设计在1000px宽的视口中完整显示，无需滚动
+        - 确保网格布局没有明显的"空洞"，所有区域都应有内容填充
+
+        ## 内容分布建议
+        - 主卡片：核心概念介绍（20-25%区域）
+        - 4-6个中型卡片：重要子主题
+        - 1个二维码卡片：位于右下角
+
+        ## 内容展示
+        - 标题使用大号字体，根据所选风格选择适合的字体，言简意赅，避免换行。
+        - 正文使用易读字体，确保在所选背景上清晰可读
+        - **在主大卡片展示核心理念，配色和布局大胆有冲击力，又有杂志版的精致感。**
+        - 每个卡片应聚焦于单一概念，文字简洁有力，主标题加粗
+        - 使用简短的要点而非长段落，便于快速阅读，如无必要，不加句子描述
+        - 确保每个卡片内容量适中，避免过于空洞或过度拥挤
+        - 除专业名词如Few-shot、NBA等，其他输出内容要求中文
+
+        ## 视觉平衡
+        - 确保色彩分布均匀，避免某一区域颜色过于集中，避免超过4种以上色系
+        - 图标和视觉元素应均匀分布在整个布局中
+        - 文本密度应相对均衡，避免某些卡片文字过多而其他过少
+        - 使用视觉权重（大小、颜色、对比度）引导用户视线流动
+        - 卡片形状可以变化（正方形、长方形等），但整体应保持视觉一致性
+
+        ## 技术要求
+        - 单个HTML文件，内嵌CSS
+        - 使用CSS Grid实现不规则网格布局
+        - 确保代码简洁，注释清晰
+        - 优化页面以确保在单视口中完整显示，适合截图。实在放不下，往下方延展。
+        - 使用grid-template-areas属性精确定义布局，确保无空隙
+
+        ## 内嵌资源
+        - Tailwind CSS (https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css)
+        - Font Awesome (https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
+        - 中文排版使用 Noto Serif SC 和 Noto Sans SC
+        - 根据所选风格添加适合的Google Fonts字体
+
+        ## 二维码资源
+        - 使用以下URL作为二维码图片地址: https://img.t5t6.com/1746665263357-2768e6e0-83e1-475c-85ec-d20b52498bbe.jpg
+        - 确保二维码尺寸足够大（至少120px），清晰可扫描，一定放一个正方形卡片显示，**不加**Fontawesome图标。
+        - 在二维码周围添加简短引导文字："一起AI实战"
+
+        ## 其他要求
+        1. 不要使用任何侧边装饰线或边框强调线
+        2. 卡片边框应该是完整的或完全没有，避免单侧边框装饰
+        3. 视觉分隔应通过卡片背景色、间距或阴影实现，而非边框线条
+        4. 如需强调，请使用背景色、字体粗细或图标，而非装饰线条
+        5. 强烈推荐把Fontawesome图标作为背景装饰图案
+        6. 文字和背景对比一定要清晰，可读性高
+        7. 注意：不要让设计风格影响内容生成和意思传递。
+
+        请根据我提供的主题内容和选择的风格，生成一个视觉上引人入胜、布局紧凑无空隙、配色和谐统一、适合截图分享的单页网站。
+
+        ## 待处理内容：
+        - 风格：{{style}}
+        - 内容：{{content}} 

package/examples/prompts/generator/gen_html_web_page.yaml

@@ -0,0 +1,88 @@
+name: gen_html_web_page
+# 中文可视化网页设计生成器
+
+description: 帮助用户将任意中文内容可视化为美观、现代、易读的网页，自动生成高质量HTML单页源码，包含响应式设计、现代配色、精致排版和数据可视化，适合所有设备展示。
+arguments: []
+messages:
+  - role: user
+    content:
+      type: text
+      text: |
+        # 中文可视化网页设计生成器
+
+        ## 角色
+
+        你是一名专业的网页设计师和前端开发专家，对现代 Web 设计趋势和最佳实践有深入理解，尤其擅长创造具有极高审美价值的用户界面。你的设计作品不仅功能完备，而且在视觉上令人惊叹，能够给用户带来强烈的"Aha-moment"体验。
+
+        ## 目标与任务
+
+        用户将提供一段中文内容或主题。你的任务是：
+        1. 分析内容，提取核心信息和情感基调
+        2. 选择最适合内容的现代网页风格、配色、排版和布局
+        3. 设计并生成一个美观、现代、易读的响应式HTML单页，突出内容精髓
+        4. 主动补充关键概念解释、视觉点缀、数据可视化等增强模块
+        5. 代码结构清晰、注释完善，适合直接复制粘贴使用
+
+        ## 设计要求
+
+        * **视觉吸引力**：页面应在视觉上令人印象深刻，能立即吸引用户注意力
+        * **可读性**：内容清晰易读，适配桌面和移动端
+        * **信息传达**：高效美观地呈现信息，突出重点，引导理解
+        * **情感共鸣**：通过设计激发与内容主题相关的情感氛围
+        * **现代风格**：可选杂志风、出版物风、极简风等，风格需与内容契合
+        * **Hero模块**：如合适，设计引人注目的Hero区块（大标题、副标题、引言、背景图/插画）
+        * **排版**：精心选择中/英字体组合，利用字号、字重、颜色、样式分层次，适当用首字下沉、悬挂标点等细节提升质感
+        * **配色方案**：和谐且有冲击力，高对比度突出重点，可用渐变、阴影等增强深度
+        * **布局**：基于网格系统，合理留白，卡片/分割线/图标组织内容
+        * **数据可视化**：如有需要，设计美观的可视化元素（如概念图、时间线、主题聚类等），用Mermaid.js实现交互式图表
+        * **微交互**：添加按钮/卡片悬停、滚动等微妙交互效果
+        * **补充信息**：主动补充关键概念解释、视觉点缀等，提升理解
+        * **技术规范**：
+            - 使用HTML5、Font Awesome、Tailwind CSS、Mermaid.js
+            - 字体链接、CDN见下方
+            - 代码结构清晰、注释完善
+            - 完整响应式，适配所有设备
+        * **CDN资源**：
+            - Font Awesome: https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css
+            - Tailwind CSS: https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css
+            - 中文字体: https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap
+            - Mermaid: https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js
+            - font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
+
+        ## 输出格式
+
+        ---
+
+        # 中文可视化网页设计方案
+
+        ## 设计分析
+        - 核心内容与情感基调分析
+        - 设计风格与配色说明
+        - 关键排版与布局策略
+        - 可视化/交互亮点说明
+
+        ## 完整HTML源码
+        ```html
+        <!-- 直接复制粘贴可用，已包含所有CDN资源和注释 -->
+        <html>
+        ...
+        </html>
+        ```
+
+        ## 设计要点与优化建议
+        - 说明如何根据实际需求调整样式/结构
+        - 推荐A/B测试不同配色/布局以优化体验
+        - 移动端适配与可访问性建议
+
+        ---
+
+        ## 约束与准则
+        * 页面必须真实反映内容核心，不能为美观而失真
+        * 代码结构清晰、注释完善，便于二次开发
+        * 严禁抄袭，尊重原创
+        * 积极正面，传递有价值的信息
+        * 合规优先，符合主流Web内容政策
+
+        请根据以下内容进行分析与网页设计：
+
+        ---