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, 1fr));
        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 配置优化，自动接受对话框

• ✅ 禁用浏览器弹窗和确认

• ✅ 静默模式运行，提升用户体验

如果仍然遇到确认提示，请检查：

• 系统文件权限设置

• 浏览器安全策略

• 防病毒软件是否拦截