drawnote-skill

name drawnote-skill description 智能笔记与流程图绘制工具（优化版-无权限读取）。根据用户提供的内容，自动生成精美的可视化笔记和流程图，支持多种风格(手写笔记、思维导图、流程图等)，并导出为图片。使用内置模板，无需读取文件权限。适用于：(1) 学习笔记可视化，(2) 知识梳理与总结，(3) 流程图绘制，(4) 概念解释图表 drawnote-skill - 智能笔记与流程图绘制工具 🚀 优化说明 版本 2.0 - 无权限读取优化 ： ✅ 移除了运行时文件读取，不再请求读取权限 ✅ 所有提示词模板已内置到 skill 中 ✅ 风格模板已内置，无需外部文件依赖 ✅ 优化 Playwright 配置，消除文件创建确认提示 ✅ 自动接受所有弹窗对话框，提升用户体验 ✅ 保持完整功能，用户体验更流畅 概述 当用户需要创建可视化笔记或流程图时，此 skill 会自动完成以下流程： 分析用户输入（如果是关键词则搜索相关内容） 使用内置提示词模板（无文件读取） 生成 HTML 格式的笔记/流程图 使用 Playwright 截图保存到 用户当前工作目录 工作流程 ⚠️ 重要：文件保存路径 所有生成的文件（HTML 和 PNG）必须保存到用户的当前工作目录 在开始工作前，先获取当前工作目录（使用 pwd 命令或检查环境变量） 不要将文件保存到 skill 插件的目录下 1. 内容准备阶段 分析用户输入 ： 如果用户提供了详细内容，直接使用 如果用户只提供了关键词或主题，使用 WebSearch 工具搜索相关信息 整合和提取关键信息点 内容准备示例 ： # 用户输入："人工智能发展历程" # -> 需要搜索 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 文件渲染并截图： # 注意：使用当前工作目录的绝对路径 node ~/.claude/plugins/.../drawnote-skill/scripts/capture.js drawnote_[timestamp].html drawnote_[timestamp].png 截图参数 ： 分辨率：1920x1080 或根据内容自适应 格式：PNG（高质量） 确保完整渲染后再截图 🎨 风格选择 drawnote-skill 提供多种信息图风格，详见 风格使用指南.md 可用风格 专业商务风格 (默认) - 适合商业报告、数据分析 彩色手写笔记风格 ⭐ 推荐 - 适合学习笔记、读书总结 科技创新风格 - 适合技术文档、产品介绍 自然清新风格 - 适合环保主题、健康生活 现代简约风格 - 适合极简设计、艺术展示 如何指定风格 # 方式1：直接指定风格 "请使用彩色手写笔记风格生成XXX的信息图" # 方式2：描述风格特征 "请生成一个学习笔记风格的信息图，需要多种颜色标注和荧光笔高亮" # 方式3：引用风格模板 "请参考 styles/彩色手写笔记风格.md 模板生成信息图" 详细说明 ：风格模板已内置到 skill 中，无需额外读取文件 使用示例 示例 1: 关键词输入 用户: 请帮我创建一个关于"量子计算"的信息图 AI 工作流程: 1. 获取当前工作目录 (如 ~/Downloads) 2. 搜索量子计算的相关信息 3. 提取关键概念、应用领域、发展历程 4. 使用内置提示词模板（无需文件读取） 5. 生成 HTML 文件 → ~/Downloads/drawnote_20231110_143022.html 6. 使用 Playwright 截图 → ~/Downloads/drawnote_20231110_143022.png 示例 2: 详细内容输入 用户在 ~/projects/myapp 目录下: 请用以下内容创建信息图： - 标题：敏捷开发方法论 - 核心价值观：个体和互动、工作的软件、客户合作、响应变化 - 实践方法：Scrum、Kanban、XP AI 工作流程: 1. 确认当前工作目录为 ~/projects/myapp 2. 分析提供的内容结构 3. 使用内置提示词模板（无需文件读取） 4. 生成 HTML 信息图 → ~/projects/myapp/drawnote_20231110_143530.html 5. 截图保存 → ~/projects/myapp/drawnote_20231110_143530.png 技术栈 HTML/CSS : 信息图布局和样式 Node.js : 脚本执行环境 Playwright : 浏览器自动化和截图 WebSearch : 内容搜索（当需要时） 脚本文件 capture.js 位置： scripts/capture.js 功能：使用 Playwright 打开 HTML 文件并截图 参数： 输入：HTML 文件路径 输出：PNG 图片路径 输出文件 所有生成的文件都保存在用户的当前工作目录下： HTML 文件： drawnote_[timestamp].html PNG 截图： drawnote_[timestamp].png 示例 ： 如果用户在 ~/Downloads 工作，文件会保存到 ~/Downloads/drawnote_20231110_143022.html 如果用户在项目目录 ~/projects/myapp ，文件会保存到该目录下 质量检查 生成信息图后，应该检查： 内容是否完整准确 布局是否合理美观 文字是否清晰可读 配色是否协调 视觉层次是否清晰 如果需要调整，可以： 修改 HTML 文件 重新截图 比较前后效果 依赖安装 如果需要安装 Node.js 相关包，使用 nvm 管理： # 确保使用正确的 Node 版本 nvm use 18 # 或其他合适的版本 # 安装 Playwright npm install playwright # 如果需要其他依赖 npm install [package-name] 最佳实践 内容优先 : 在生成视觉效果之前，确保内容清晰、准确、结构化 简洁设计 : 避免过度装饰，保持信息图的专业性和可读性 数据可视化 : 适当使用图表、图标等视觉元素辅助理解 一致性 : 保持字体、配色、间距等设计元素的一致性 可访问性 : 确保足够的对比度和字号，便于阅读 内置提示词模板 🎨 风格选择 drawnote-skill 提供多种信息图风格，可根据内容类型和使用场景选择： 1. 彩色手写笔记风格 ⭐ 推荐 适用场景 ：学习笔记、读书总结、知识梳理 设计特点 ： 🎨 6种颜色笔标注（红、蓝、绿、橙、紫、粉） 🖍️ 5种荧光笔高亮效果 ✏️ 手写风格字体 📓 笔记本横线背景 📌 彩色便签纸效果 配色方案 ： /* 彩色手写笔记风格配色 */ --red-color : #FF4757 ; /* 红色笔 */ --blue-color : #3742FA ; /* 蓝色笔 */ --green-color : #26DE81 ; /* 绿色笔 */ --orange-color : #FFA502 ; /* 橙色笔 */ --purple-color : #5F27CD ; /* 紫色笔 */ --pink-color : #FF6B9D ; /* 粉色笔 */ --yellow-highlight : #FFF3CD ; /* 黄色荧光笔 */ --green-highlight : #D4EDDA ; /* 绿色荧光笔 */ --blue-highlight : #D1ECF1 ; /* 蓝色荧光笔 */ --pink-highlight : #F8D7DA ; /* 粉色荧光笔 */ --purple-highlight : #E2D9F3 ; /* 紫色荧光笔 */ 2. 专业商务风格 适用场景 ：商业报告、数据分析、专业文档 配色方案 ： /* 专业商务风格配色 */ --primary-color : #2C3E50 ; /* 深蓝灰 */ --secondary-color : #3498DB ; /* 亮蓝 */ --accent-color : #E74C3C ; /* 红色 */ --background-color : #ECF0F1 ; /* 浅灰 */ 3. 科技创新风格 适用场景 ：技术文档、产品介绍、创新方案 配色方案 ： /* 科技创新风格配色 */ --primary-color : #1A1A2E ; /* 深蓝黑 */ --secondary-color : #16213E ; /* 深蓝 */ --accent-color : #0F3460 ; /* 中蓝 */ --highlight-color : #E94560 ; /* 粉红 */ 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 > < style > * { margin : 0 ; padding : 0 ; box-sizing : border-box; } body { font-family : 'SF Pro Text' , 'Helvetica Neue' , Arial, sans-serif; line-height : 1.6 ; padding : 40px ; min-height : 100vh ; } .container { max-width : 1200px ; margin : 0 auto; background : white; border-radius : 20px ; padding : 60px ; box-shadow : 0 20px 60px rgba ( 0 , 0 , 0 , 0.1 ); } .header { text-align : center; margin-bottom : 50px ; border-bottom : 3px solid; padding-bottom : 30px ; } .header h1 { font-size : 48px ; margin-bottom : 15px ; font-weight : 700 ; } .content-grid { display : grid; grid-template-columns : repeat (auto-fit, minmax ( 300px , 1 fr)); gap : 30px ; margin-bottom : 40px ; } .card { background : #F8F9FA ; border-radius : 15px ; padding : 30px ; transition : transform 0.3s ease, box-shadow 0.3s ease; } .timeline { position : relative; padding : 30px 0 ; } .timeline-item { display : flex; margin-bottom : 30px ; position : relative; } .timeline-marker { width : 50px ; height : 50px ; border-radius : 50% ; display : flex; align-items : center; justify-content : center; color : white; font-weight : bold; flex-shrink : 0 ; margin-right : 20px ; } .timeline-content { flex : 1 ; background : #F8F9FA ; padding : 20px ; border-radius : 10px ; } .highlight-red { background-color : #FFE5E5 ; } .highlight-blue { background-color : #E5F2FF ; } .highlight-green { background-color : #E5FFE5 ; } .highlight-yellow { background-color : #FFF9E5 ; } .highlight-orange { background-color : #FFEFD5 ; } .highlight-purple { background-color : #F5E5FF ; } .note-paper { background : linear-gradient (to bottom, #ffffff 1.8em , #f0f0f0 1.9em ); background-size : 100% 2em ; position : relative; } .sticky-note { background : #FFF3CD ; padding : 20px ; border-radius : 5px ; box-shadow : 2px 2px 5px rgba ( 0 , 0 , 0 , 0.1 ); transform : rotate (- 1deg ); margin : 10px 0 ; } .handwritten { font-family : 'Comic Sans MS' , 'Marker Felt' , cursive; } </ style > </ head > < body > < div class = "container" > <!-- 内容区域 --> </ div > </ body > </ html > 常用图标符号 数据/统计 ：📊 📈 📉 💹 📋 📝 📄 📃 技术/工具 ：🔧 ⚙️ 🔨 💻 🖥️ 📱 ⌨️ 🖱️ 创意/想法 ：💡 🎨 ✨ 🌟 🎭 🎪 🎯 🎲 目标/成就 ：🎯 🏆 ⭐ ✓ ✅ ✔️ 🎖️ 🏅 时间/日程 ：⏰ 📅 ⏳ 🕐 🕑 🕒 🗓️ ⌛ 人物/团队 ：👤 👥 👨‍💼 👩‍💼 👨‍👩‍👦‍👦 👨‍🏫 👩‍🏫 👨‍⚕️ 位置/地点 ：📍 🌍 🏢 🏠 🏫 🏥 🏦 🏪 警告/注意 ：⚠️ ❗ ⚡ 🔔 🚨 ❌ ⭕ 📢 故障排除 Playwright 安装问题 # 安装浏览器 npx playwright install chromium 截图不完整 增加等待时间，确保页面完全渲染 检查 HTML 中是否有异步加载的内容 调整视口大小 样式未生效 检查 CSS 语法 确保外部资源（字体、图标等）正确加载 使用浏览器开发者工具调试 文件创建确认提示 已优化 ：现在 drawnote-skill 会自动处理所有文件创建，不再出现确认提示： ✅ Playwright 配置优化，自动接受对话框 ✅ 禁用浏览器弹窗和确认 ✅ 静默模式运行，提升用户体验 如果仍然遇到确认提示，请检查： 系统文件权限设置 浏览器安全策略 防病毒软件是否拦截