drawnote-skill

# drawnote-skill - 智能笔记与流程图绘制工具 ## 🚀 优化说明 **版本 2.0 - 无权限读取优化**： - ✅ 移除了运行时文件读取，不再请求读取权限 - ✅ 所有提示词模板已内置到 skill 中 - ✅ 风格模板已内置，无需外部文件依赖 - ✅ 优化 Playwright 配置，消除文件创建确认提示 - ✅ 自动接受所有弹窗对话框，提升用户体验 - ✅ 保持完整功能，用户体验更流畅 ## 概述 当用户需要创建可视化笔记或流程图时，此 skill 会自动完成以下流程： 1. 分析用户输入（如果是关键词则搜索相关内容） 2. 使用内置提示词模板（无文件读取） 3. 生成 HTML 格式的笔记/流程图 4. 使用 Playwright 截图保存到**用户当前工作目录** ## 工作流程 **⚠️ 重要：文件保存路径** - 所有生成的文件（HTML 和 PNG）必须保存到用户的当前工作目录 - 在开始工作前，先获取当前工作目录（使用 `pwd` 命令或检查环境变量） - 不要将文件保存到 skill 插件的目录下 ### 1. 内容准备阶段 **分析用户输入**： - 如果用户提供了详细内容，直接使用 - 如果用户只提供了关键词或主题，使用 WebSearch 工具搜索相关信息 - 整合和提取关键信息点 **内容准备示例**： ```bash # 用户输入："人工智能发展历程" # -> 需要搜索 AI 发展历程的关键事件、时间线、重要人物等 # -> 整理成结构化的内容供信息图使用 ``` ### 2. 使用内置提示词模板 **OPTIMIZED**: 使用内置提示词模板，避免运行时读取文件权限请求。 提示词模板已内置，包含： - 信息图的设计原则 - HTML 结构规范 - 样式指南 - 布局要求 - 多种风格模板（彩色手写笔记、专业商务、科技创新等） ### 3. 生成 HTML 信息图 根据提示词模板生成 HTML 文件： - 使用现代 CSS 布局（Flexbox/Grid） - 确保响应式设计 - 应用美观的配色方案 - 包含适当的视觉层次 **HTML 文件保存位置**：`当前工作目录/drawnote_[timestamp].html` **重要说明**： - ⚠️ 文件必须保存到用户的当前工作目录，而非 skill 插件目录 - 先执行 `pwd` 命令获取当前工作目录路径 - 文件命名格式：`drawnote_YYYYMMDD_HHMMSS.html` 和 `.png` - 示例：如果当前在 `~/Downloads`，则保存为 `~/Downloads/drawnote_20231110_143022.html` **设计要求**： - 清晰的视觉层次 - 适当的留白和间距 - 统一的配色方案 - 易读的字体和字号 - 数据可视化元素（图表、图标等） ### 4. Playwright 截图 使用 Playwright 将 HTML 文件渲染并截图： ```bash # 注意：使用当前工作目录的绝对路径 node ~/.claude/plugins/.../drawnote-skill/scripts/capture.js drawnote_[timestamp].html drawnote_[timestamp].png ``` **截图参数**： - 分辨率：1920x1080 或根据内容自适应 - 格式：PNG（高质量） - 确保完整渲染后再截图 ##...