drawnote-skill

drawnote-skill - 智能笔记与流程图绘制工具

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "drawnote-skill" with this command: npx skills add peterfei/ai-agent-team/peterfei-ai-agent-team-drawnote-skill

drawnote-skill - 智能笔记与流程图绘制工具

🚀 优化说明

版本 2.0 - 无权限读取优化：

  • ✅ 移除了运行时文件读取，不再请求读取权限

  • ✅ 所有提示词模板已内置到 skill 中

  • ✅ 风格模板已内置，无需外部文件依赖

  • ✅ 优化 Playwright 配置，消除文件创建确认提示

  • ✅ 自动接受所有弹窗对话框，提升用户体验

  • ✅ 保持完整功能，用户体验更流畅

概述

当用户需要创建可视化笔记或流程图时，此 skill 会自动完成以下流程：

  • 分析用户输入（如果是关键词则搜索相关内容）

  • 使用内置提示词模板（无文件读取）

  • 生成 HTML 格式的笔记/流程图

  • 使用 Playwright 截图保存到用户当前工作目录

工作流程

⚠️ 重要：文件保存路径

  • 所有生成的文件（HTML 和 PNG）必须保存到用户的当前工作目录

  • 在开始工作前，先获取当前工作目录（使用 pwd 命令或检查环境变量）

  • 不要将文件保存到 skill 插件的目录下

  1. 内容准备阶段

分析用户输入：

  • 如果用户提供了详细内容，直接使用

  • 如果用户只提供了关键词或主题，使用 WebSearch 工具搜索相关信息

  • 整合和提取关键信息点

内容准备示例：

用户输入："人工智能发展历程"

-> 需要搜索 AI 发展历程的关键事件、时间线、重要人物等

-> 整理成结构化的内容供信息图使用

  1. 使用内置提示词模板

OPTIMIZED: 使用内置提示词模板，避免运行时读取文件权限请求。

提示词模板已内置，包含：

  • 信息图的设计原则

  • HTML 结构规范

  • 样式指南

  • 布局要求

  • 多种风格模板（彩色手写笔记、专业商务、科技创新等）

  1. 生成 HTML 信息图

根据提示词模板生成 HTML 文件：

  • 使用现代 CSS 布局（Flexbox/Grid）

  • 确保响应式设计

  • 应用美观的配色方案

  • 包含适当的视觉层次

HTML 文件保存位置：当前工作目录/drawnote_[timestamp].html

重要说明：

  • ⚠️ 文件必须保存到用户的当前工作目录，而非 skill 插件目录

  • 先执行 pwd 命令获取当前工作目录路径

  • 文件命名格式：drawnote_YYYYMMDD_HHMMSS.html 和 .png

  • 示例：如果当前在 ~/Downloads ，则保存为 ~/Downloads/drawnote_20231110_143022.html

设计要求：

  • 清晰的视觉层次

  • 适当的留白和间距

  • 统一的配色方案

  • 易读的字体和字号

  • 数据可视化元素（图表、图标等）

  1. 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; / 紫色荧光笔 */

  1. 专业商务风格

适用场景：商业报告、数据分析、专业文档

配色方案：

/* 专业商务风格配色 / --primary-color: #2C3E50; / 深蓝灰 / --secondary-color: #3498DB; / 亮蓝 / --accent-color: #E74C3C; / 红色 / --background-color: #ECF0F1; / 浅灰 */

  1. 科技创新风格

适用场景：技术文档、产品介绍、创新方案

配色方案：

/* 科技创新风格配色 / --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;
    }
&#x3C;/style>

</head> <body> <div class="container"> <!-- 内容区域 --> </div> </body> </html>

常用图标符号

数据/统计：📊 📈 📉 💹 📋 📝 📄 📃 技术/工具：🔧 ⚙️ 🔨 💻 🖥️ 📱 ⌨️ 🖱️ 创意/想法：💡 🎨 ✨ 🌟 🎭 🎪 🎯 🎲 目标/成就：🎯 🏆 ⭐ ✓ ✅ ✔️ 🎖️ 🏅 时间/日程：⏰ 📅 ⏳ 🕐 🕑 🕒 🗓️ ⌛ 人物/团队：👤 👥 👨‍💼 👩‍💼 👨‍👩‍👦‍👦 👨‍🏫 👩‍🏫 👨‍⚕️ 位置/地点：📍 🌍 🏢 🏠 🏫 🏥 🏦 🏪 警告/注意：⚠️ ❗ ⚡ 🔔 🚨 ❌ ⭕ 📢

故障排除

Playwright 安装问题

安装浏览器

npx playwright install chromium

截图不完整

  • 增加等待时间，确保页面完全渲染

  • 检查 HTML 中是否有异步加载的内容

  • 调整视口大小

样式未生效

  • 检查 CSS 语法

  • 确保外部资源（字体、图标等）正确加载

  • 使用浏览器开发者工具调试

文件创建确认提示

已优化：现在 drawnote-skill 会自动处理所有文件创建，不再出现确认提示：

  • ✅ Playwright 配置优化，自动接受对话框

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

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

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

  • 系统文件权限设置

  • 浏览器安全策略

  • 防病毒软件是否拦截

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

Automation

tidymydesktop

No summary provided by upstream source.

Repository SourceNeeds Review
27-peterfei
Automation

changelog-generator

No summary provided by upstream source.

Repository SourceNeeds Review
11-peterfei
Automation

Agent Reader

Document beautifier for AI Agents. Converts Markdown to styled webpages, Word, PDF, and image slideshows — the 'last mile' rendering engine for AI output. 专为...

Registry SourceRecently Updated
550ebbfijsf
Automation

Scalekit-Agent-Auth

Use this skill whenever the user asks for information from, or wants to take an action in, a third-party tool or service. This includes — but is not limited...

Registry SourceRecently Updated
1.1K4Avinash-Kamath