drawnote-skill

drawnote-skill - Smart note-taking and flowchart drawing tool

🚀 Optimization Notes

Version 2.0 - No read permission optimization：

✅ Removed runtime file reading, no longer requests read permission
✅ All prompt templates are built into the skill
✅ Style templates are built in, no external file dependencies
✅ Optimized Playwright configuration, eliminating file creation confirmation prompts
✅ Automatically accepts all pop-up dialogs, improving user experience
✅ Maintains full functionality, smoother user experience

Overview

When the user needs to create visual notes or flowcharts, this skill automatically completes the following process:

Analyze user input (if it is keywords, search for related content)
Use built-in prompt templates (no file reading)
Generate notes/flowcharts in HTML format
Use Playwright screenshots to save toUser's current working directory

Workflow

⚠️ Important: File save path

All generated files (HTML and PNG) must be saved to the user's current working directory
Before starting work, first get the current working directory (use pwd command or check environment variables)
Do not save files to the skill plugin directory

1. Content preparation stage

Analyze user input：

If the user provides detailed content, use it directly
If the user only provides keywords or a topic, use the WebSearch tool to search for related information
Integrate and extract key information points

Content preparation example：

# 用户输入："人工智能发展历程"
# -> 需要搜索 AI 发展历程的关键事件、时间线、重要人物等
# -> 整理成结构化的内容供信息图使用

2. Use built-in prompt templates

OPTIMIZED: Use built-in prompt templates to avoid runtime file read permission requests.

Prompt templates are built in, including:

Design principles for infographics
HTML structure specifications
Style guide
Layout requirements
Multiple style templates (colorful handwritten notes, professional business, tech innovation, etc.)

3. Generate HTML infographic

Generate an HTML file according to the prompt templates:

Use modern CSS layout (Flexbox/Grid)
Ensure responsive design
Apply a beautiful color scheme
Include appropriate visual hierarchy

HTML file save location：当前工作目录/drawnote_[timestamp].html

Important note：

⚠️ Files must be saved to the user's current working directory, not the skill plugin directory
First execute pwd command to get the current working directory path
File naming format:drawnote_YYYYMMDD_HHMMSS.html and .png
Example: if currently in ~/Downloads, then save as ~/Downloads/drawnote_20231110_143022.html

Design requirements：

Clear visual hierarchy
Appropriate whitespace and spacing
Unified color scheme
Readable fonts and font sizes
Data visualization elements (charts, icons, etc.)

4. Playwright screenshot

Use Playwright to render and screenshot the HTML file:

# 注意：使用当前工作目录的绝对路径
node ~/.claude/plugins/.../drawnote-skill/scripts/capture.js drawnote_[timestamp].html drawnote_[timestamp].png

Screenshot parameters：

Resolution: 1920x1080 or adaptive to content
Format: PNG (high quality)
Ensure complete rendering before taking the screenshot

🎨 Style selection

drawnote-skill provides multiple infographic styles, see 风格使用指南.md

Available styles

Professional business style (default) - suitable for business reports, data analysis
Colorful handwritten note style ⭐ Recommended - suitable for study notes, book summaries
Tech innovation style - suitable for technical documentation, product introductions
Natural fresh style - suitable for environmental themes, healthy living
Modern minimalist style - suitable for minimalist design, art displays

How to specify a style

# 方式1：直接指定风格
"请使用彩色手写笔记风格生成XXX的信息图"

# 方式2：描述风格特征
"请生成一个学习笔记风格的信息图，需要多种颜色标注和荧光笔高亮"

# 方式3：引用风格模板
"请参考 styles/彩色手写笔记风格.md 模板生成信息图"

Detailed description: Style templates are built into the skill, no need to read additional files

Usage examples

Example 1: Keyword input

用户: 请帮我创建一个关于"量子计算"的信息图
AI 工作流程:
1. 获取当前工作目录 (如 ~/Downloads)
2. 搜索量子计算的相关信息
3. 提取关键概念、应用领域、发展历程
4. 使用内置提示词模板（无需文件读取）
5. 生成 HTML 文件 → ~/Downloads/drawnote_20231110_143022.html
6. 使用 Playwright 截图 → ~/Downloads/drawnote_20231110_143022.png

Example 2: Detailed content input

用户在 ~/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

Tech stack

HTML/CSS: Infographic layout and styling
Node.js: Script execution environment
Playwright: Browser automation and screenshots
WebSearch: Content search (when needed)

Script file

capture.js

Location:scripts/capture.js Function: Use Playwright to open the HTML file and take a screenshot

Parameters:

Input: HTML file path
Output: PNG image path

Output files

All generated files are saved in the user's current working directory:

HTML file:drawnote_[timestamp].html
PNG screenshot:drawnote_[timestamp].png

Example：

If the user is in ~/Downloads working, the file will be saved to ~/Downloads/drawnote_20231110_143022.html
If the user is in the project directory ~/projects/myapp, the file will be saved in that directory

Quality check

After generating the infographic, you should check:

Whether the content is complete and accurate
Whether the layout is reasonable and aesthetically pleasing
Whether the text is clear and readable
Whether the color scheme is coordinated
Whether the visual hierarchy is clear

If adjustments are needed, you can:

Modify the HTML file
Take the screenshot again
Compare the before and after effects

Dependency installation

If you need to install Node.js-related packages, use nvm to manage:

# 确保使用正确的 Node 版本
nvm use 18  # 或其他合适的版本

# 安装 Playwright
npm install playwright

# 如果需要其他依赖
npm install [package-name]

Best practices

Content first: Ensure the content is clear, accurate, and structured before generating the visual effects
Simple design: Avoid excessive decoration and maintain the professionalism and readability of the infographic
Data visualization: Appropriately use visual elements such as charts and icons to aid understanding
Consistency: Maintain consistency in design elements such as fonts, color schemes, and spacing
Accessibility: Ensure sufficient contrast and font size for easy reading

Built-in prompt templates

🎨 Style selection

drawnote-skill provides multiple infographic styles, which can be selected according to the content type and usage scenario:

1. Colorful Handwritten Note Style ⭐ Recommended

Use Cases: Study notes, book summaries, knowledge organization

Design Features：

🎨 6 colored pen annotations (red, blue, green, orange, purple, pink)
🖍️ 5 highlighter effects
✏️ Handwritten-style fonts
📓 Notebook lined background
📌 Colorful sticky note effect

Color Scheme：

/* 彩色手写笔记风格配色 */
--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. Professional Business Style

Use Cases: Business reports, data analysis, professional documents

Color Scheme：

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

3. Tech Innovation Style

Use Cases: Technical documentation, product introductions, innovative solutions

Color Scheme：

/* 科技创新风格配色 */
--primary-color: #1A1A2E;    /* 深蓝黑 */
--secondary-color: #16213E;  /* 深蓝 */
--accent-color: #0F3460;     /* 中蓝 */
--highlight-color: #E94560;  /* 粉红 */

HTML Basic Structure Template

<!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>

Common Icon Symbols

Data/Statistics：📊 📈 📉 💹 📋 📝 📄 📃 Technology/Tools：🔧 ⚙️ 🔨 💻 🖥️ 📱 ⌨️ 🖱️ Creativity/Ideas：💡 🎨 ✨ 🌟 🎭 🎪 🎯 🎲 Goals/Achievements：🎯 🏆 ⭐ ✓ ✅ ✔️ 🎖️ 🏅 Time/Schedule：⏰ 📅 ⏳ 🕐 🕑 🕒 🗓️ ⌛ People/Team：👤 👥 👨‍💼 👩‍💼 👨‍👩‍👦‍👦 👨‍🏫 👩‍🏫 👨‍⚕️ Location/Place：📍 🌍 🏢 🏠 🏫 🏥 🏦 🏪 Warning/Attention：⚠️ ❗ ⚡ 🔔 🚨 ❌ ⭕ 📢

Troubleshooting

Playwright Installation Issues

# 安装浏览器
npx playwright install chromium

Incomplete Screenshots

Increase wait time to ensure the page is fully rendered
Check whether there is asynchronously loaded content in the HTML
Adjust the viewport size

Styles Not Taking Effect

Check CSS syntax
Ensure external resources (fonts, icons, etc.) load correctly
Use browser developer tools for debugging

File Creation Confirmation Prompt

Optimized: Now drawnote-skill will automatically handle all file creation, and the confirmation prompt will no longer appear:

✅ Playwright configuration optimized, automatically accept dialogs
✅ Disable browser pop-ups and confirmations
✅ Run in silent mode to improve user experience

If you still encounter confirmation prompts, please check:

System file permission settings
Browser security policies
Whether antivirus software is blocking it

About this skill

🚀 Optimization Notes

Overview

Workflow

1. Content preparation stage

2. Use built-in prompt templates

3. Generate HTML infographic

4. Playwright screenshot

🎨 Style selection

Available styles

How to specify a style

Usage examples

Example 1: Keyword input

Example 2: Detailed content input

Tech stack

Script file

capture.js

Output files

Quality check

Dependency installation

Best practices

Built-in prompt templates

🎨 Style selection

1. Colorful Handwritten Note Style ⭐ Recommended

2. Professional Business Style

3. Tech Innovation Style

HTML Basic Structure Template

Common Icon Symbols

Troubleshooting

Playwright Installation Issues

Incomplete Screenshots

Styles Not Taking Effect

File Creation Confirmation Prompt