New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Drawnote Skill

by peterfei in peterfei/ai-agent-team

智能笔记与流程图绘制工具（优化版-无权限读取）。根据用户提供的内容，自动生成精美的可视化笔记和流程图，支持多种风格(手写笔记、思维导图、流程图等)，并导出为图片。使用内置模板，无需读取文件权限。适用于：(1) 学习笔记可视化，(2) 知识梳理与总结，(3) 流程图绘制，(4) 概念解释图表

MITAuto-check passedTesting & QA

Install Drawnote Skill

skills CLI
$ npx skills add peterfei/ai-agent-team --skill drawnote-skill -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install peterfei/ai-agent-team drawnote-skill --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/peterfei/ai-agent-team.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/drawnote .claude/skills/drawnote-skill && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
drawnote-skill
GitHub stars
441
Token cost
~2.1k tokens
SKILL.md length
280 words
Files
11 (incl. scripts)
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

智能笔记与流程图绘制工具（优化版-无权限读取）。根据用户提供的内容，自动生成精美的可视化笔记和流程图，支持多种风格(手写笔记、思维导图、流程图等)，并导出为图片。使用内置模板，无需读取文件权限。适用于：(1) 学习笔记可视化，(2) 知识梳理与总结，(3) 流程图绘制，(4) 概念解释图表

  • Works in 4 steps: 内容准备阶段 → 使用内置提示词模板 → 生成 HTML 信息图 → …
  • Testing & QA work in your project
  • SKILL.md covers 🚀 优化说明, 概述, 工作流程 and 🎨 风格选择, plus 9 more sections
  • Runs JavaScript scripts from its folder; calls npm, node and nvm

What it does

Drawnote Skill is an agent skill from peterfei/ai-agent-team. 智能笔记与流程图绘制工具（优化版-无权限读取）。根据用户提供的内容，自动生成精美的可视化笔记和流程图，支持多种风格(手写笔记、思维导图、流程图等)，并导出为图片。使用内置模板，无需读取文件权限。适用于：(1) 学习笔记可视化，(2) 知识梳理与总结，(3) 流程图绘制，(4) 概念解释图表

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 12 other files, including scripts (for example `package-lock.json`, `package.json` and `scripts/capture.js`).

It sits in Testing & QA. It works with Playwright. The repository describes itself as: AI Agent Team-拥有24/7专业AI开发团队：产品经理、前端开发、后端开发、测试工程师、DevOps工程师、技术负责人。一键安装，支持中英文命令，大幅提升开发效率！. The licence is MIT.

When your agent uses it

  • Testing & QA work in your project

Example prompts

  • “/drawnote-skill”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. 内容准备阶段
  2. 使用内置提示词模板
  3. 生成 HTML 信息图
  4. Playwright 截图

What it can do on your machine

Read from SKILL.md and the folder at commit 9d85024. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 4 files in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • npm
    • node
    • nvm
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm and npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Drawnote Skill loads about 2.1k tokens when it runs. Until then it costs about 40 tokens; SKILL.md has 280 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~40
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from peterfei/ai-agent-team at commit 9d85024, republished under its MIT licence (© peterfei). 280 words, ~2,134 tokens.

Download SKILL.mdSave it as .claude/skills/drawnote-skill/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
drawnote-skill
description
智能笔记与流程图绘制工具（优化版-无权限读取）。根据用户提供的内容，自动生成精美的可视化笔记和流程图，支持多种风格(手写笔记、思维导图、流程图等)，并导出为图片。使用内置模板，无需读取文件权限。适用于：(1) 学习笔记可视化，(2) 知识梳理与总结，(3) 流程图绘制，(4) 概念解释图表

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（高质量）
  • 确保完整渲染后再截图

🎨 风格选择

drawnote-skill 提供多种信息图风格，详见 风格使用指南.md

可用风格
  1. 专业商务风格 (默认) - 适合商业报告、数据分析
  2. 彩色手写笔记风格 ⭐ 推荐 - 适合学习笔记、读书总结
  3. 科技创新风格 - 适合技术文档、产品介绍
  4. 自然清新风格 - 适合环保主题、健康生活
  5. 现代简约风格 - 适合极简设计、艺术展示
如何指定风格
bash
# 方式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，文件会保存到该目录下

质量检查

生成信息图后，应该检查：

  • 内容是否完整准确
  • 布局是否合理美观
  • 文字是否清晰可读
  • 配色是否协调
  • 视觉层次是否清晰

如果需要调整，可以：

  1. 修改 HTML 文件
  2. 重新截图
  3. 比较前后效果

依赖安装

如果需要安装 Node.js 相关包，使用 nvm 管理：

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

# 安装 Playwright
npm install playwright

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

最佳实践

  1. 内容优先: 在生成视觉效果之前，确保内容清晰、准确、结构化
  2. 简洁设计: 避免过度装饰，保持信息图的专业性和可读性
  3. 数据可视化: 适当使用图表、图标等视觉元素辅助理解
  4. 一致性: 保持字体、配色、间距等设计元素的一致性
  5. 可访问性: 确保足够的对比度和字号，便于阅读

内置提示词模板

🎨 风格选择

drawnote-skill 提供多种信息图风格，可根据内容类型和使用场景选择：

1. 彩色手写笔记风格 ⭐ 推荐

适用场景：学习笔记、读书总结、知识梳理

设计特点：

  • 🎨 6种颜色笔标注（红、蓝、绿、橙、紫、粉）
  • 🖍️ 5种荧光笔高亮效果
  • ✏️ 手写风格字体
  • 📓 笔记本横线背景
  • 📌 彩色便签纸效果

配色方案：

css
/* 彩色手写笔记风格配色 */
--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. 专业商务风格

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

配色方案：

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

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

配色方案：

css
/* 科技创新风格配色 */
--primary-color: #1A1A2E;    /* 深蓝黑 */
--secondary-color: #16213E;  /* 深蓝 */
--accent-color: #0F3460;     /* 中蓝 */
--highlight-color: #E94560;  /* 粉红 */
HTML 基础结构模板
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 安装问题
bash
# 安装浏览器
npx playwright install chromium
截图不完整
  • 增加等待时间，确保页面完全渲染
  • 检查 HTML 中是否有异步加载的内容
  • 调整视口大小
样式未生效
  • 检查 CSS 语法
  • 确保外部资源（字体、图标等）正确加载
  • 使用浏览器开发者工具调试
文件创建确认提示

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

  • ✅ Playwright 配置优化，自动接受对话框
  • ✅ 禁用浏览器弹窗和确认
  • ✅ 静默模式运行，提升用户体验

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

  1. 系统文件权限设置
  2. 浏览器安全策略
  3. 防病毒软件是否拦截

© peterfei, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. 8 hidden characters (zero-width or bidirectional) removed. Raw file

Files

SKILL.md and 10 other files (scripts) in .claude/skills/drawnote of peterfei/ai-agent-team.

  • SKILL.md
  • .npmignore
  • package-lock.json
  • package.json
  • scripts/capture.js
  • scripts/check-status.js
  • scripts/install-dependencies.js
  • scripts/verify-installation.js
  • styles/彩色手写笔记风格.md
  • 生成信息图提示词.md
  • 风格使用指南.md

Open the folder on GitHubat commit 9d85024

Compare with similar skills

Drawnote Skill next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Drawnote Skill compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Drawnote Skill this skillpeterfei/ai-agent-team441—~2.1kAutomated safety check: PassMIT
Web Application Testinganthropics/skills180k51 repos~966Automated safety check: PassApache-2.0
Playwright CLIsanity-io/sanity6.4k18 repos~1.9kAutomated safety check: PassMIT
playwright-cli Browser Automationgithub/gh-aw5.4k24 repos~2.8kAutomated safety check: PassMIT
Write and Verify Playwright Testsappsmithorg/appsmith41k—~2.9kAutomated safety check: NotesApache-2.0
Cucumber and Playwright E2E Testslanggenius/dify158k—~682Automated safety check: PassCustom licence

Similar skills

  • Web Application Testing

    anthropics/skills

    Official

    Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.

    180k GitHub starsUsed in 51 repos~966 tokens
    Testing & QAAuto-check passed

  • Playwright CLI

    sanity-io/sanity

    Official

    Automates browser interactions for web testing, form filling, screenshots, and data extraction.

    6.4k GitHub starsUsed in 18 repos~1.9k tokens
    Testing & QAAuto-check passed

  • playwright-cli Browser Automation

    github/gh-aw

    Official

    Drives a real browser from the command line with playwright-cli to open pages, interact, mock requests, save state and work with Playwright tests.

    5.4k GitHub starsUsed in 24 repos~2.8k tokens
    Testing & QAAuto-check passed

  • Write and Verify Playwright Tests

    appsmithorg/appsmith

    Writes a Playwright end-to-end test from a prompt, runs it against a live Appsmith deployment and retries with fixes up to three times until it passes.

    41k GitHub stars~2.9k tokensUpdated today
    Testing & QAAuto-check: notes

  • Cucumber and Playwright E2E Tests

    langgenius/dify

    Guides changes and reviews of the Cucumber and Playwright end-to-end suite under `e2e/`: feature files, step definitions, support code, tags, locators and assertions.

    158k GitHub stars~682 tokensUpdated today
    Testing & QAAuto-check passed

  • E2E Testing

    langflow-ai/langflow

    Write and review Playwright E2E tests for Langflow. An agent skill from langflow-ai/langflow.

    156k GitHub stars~3.3k tokensUpdated today
    Testing & QAAuto-check passed

More from peterfei/ai-agent-team

All 10 skills in this repo

  • Softcopyright

    peterfei/ai-agent-team

    智能软件著作权申请材料生成工具。自动分析项目源码，生成符合软著申请要求的软件说明书和源代码文档。支持关键词搜索、智能源码分析、格式化输出和PDF导出。

    441 GitHub stars~1.1k tokensUpdated 3 mo ago
    Auto-check passed

  • Tidymydesktop

    peterfei/ai-agent-team

    智能桌面和目录整理工具。根据用户提示词自动分类、整理文件和应用程序图标，去除重复版本，生成整理报告。支持整理桌面或指定目录。

    441 GitHub stars~1.2k tokensUpdated 3 mo ago
    Auto-check passed

  • Backend Dev Agent

    peterfei/ai-agent-team

    后端开发 Agent — API 设计、数据库优化、服务器端逻辑、认证授权、性能优化. An agent skill from peterfei/ai-agent-team.

    441 GitHub stars~966 tokensUpdated 3 mo ago
    Auto-check passed

  • Changelog Generator

    peterfei/ai-agent-team

    智能变更日志生成器 - 自动分析Git提交历史，生成符合规范的CHANGELOG.md。支持语义化版本管理、多种输出格式、增量更新和GitHub/GitLab集成。

    441 GitHub stars~2k tokensUpdated 3 mo ago
    Auto-check passed

  • Devops Engineer Agent

    peterfei/ai-agent-team

    DevOps 工程师 Agent — CI/CD 流水线、容器化与 K8s、基础设施即代码、可观测性. An agent skill from peterfei/ai-agent-team.

    441 GitHub stars~1k tokensUpdated 3 mo ago
    Auto-check passed

  • Tech Leader Agent

    peterfei/ai-agent-team

    技术负责人 Agent — 技术架构决策、代码审查、团队技术管理、技术规划与路线图. An agent skill from peterfei/ai-agent-team.

    441 GitHub stars~845 tokensUpdated 3 mo ago
    Auto-check passed

Works with

Categories

Questions about Drawnote Skill

What does Drawnote Skill do?

智能笔记与流程图绘制工具（优化版-无权限读取）。根据用户提供的内容，自动生成精美的可视化笔记和流程图，支持多种风格(手写笔记、思维导图、流程图等)，并导出为图片。使用内置模板，无需读取文件权限。适用于：(1) 学习笔记可视化，(2) 知识梳理与总结，(3) 流程图绘制，(4) 概念解释图表. Drawnote Skill is an agent skill from peterfei/ai-agent-team.

When should I use Drawnote Skill?

Drawnote Skill fits situations like: testing & QA work in your project.

How do I install Drawnote Skill in Claude Code?

Run `npx skills add peterfei/ai-agent-team --skill drawnote-skill -a claude-code`. Or copy the skill folder (.claude/skills/drawnote in peterfei/ai-agent-team) into .claude/skills/drawnote-skill in your project. Claude Code loads it when a task matches its description.

How do I install Drawnote Skill in Codex?

Run `npx skills add peterfei/ai-agent-team --skill drawnote-skill -a codex`. Or copy the skill folder (.claude/skills/drawnote in peterfei/ai-agent-team) into .agents/skills/drawnote-skill in your project. Codex loads it when a task matches its description.

Can I use Drawnote Skill in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add peterfei/ai-agent-team --skill drawnote-skill -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/drawnote-skill, .gemini/skills/drawnote-skill, .github/skills/drawnote-skill and .opencode/skills/drawnote-skill in your project.

What does Drawnote Skill need to run?

Going by SKILL.md and its folder, Drawnote Skill needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npm, node, nvm and npx). Our summary lists: Node.js.

Does Drawnote Skill access the network?

SKILL.md contains no URLs. Its commands use npm and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Drawnote Skill safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Drawnote Skill use?

Drawnote Skill is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Drawnote Skill use?

About 2.1k tokens (SKILL.md is roughly 8.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Drawnote Skill?

Skills that share tags, products or a category with Drawnote Skill: Web Application Testing (anthropics/skills, 180k stars), Playwright CLI (sanity-io/sanity, 6.4k stars), playwright-cli Browser Automation (github/gh-aw, 5.4k stars) and Write and Verify Playwright Tests (appsmithorg/appsmith, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Drawnote Skill?

peterfei (a GitHub user) maintains it in peterfei/ai-agent-team, which has 441 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on June 29, 2026.

Source: peterfei/ai-agent-team on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.