Borrowing it
Nothing to install: this file belongs to peterfei/ai-agent-team. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/peterfei/ai-agent-team/main/.claude/skills/drawnote/SKILL.mdgit clone --depth 1 https://github.com/peterfei/ai-agent-teamWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/peterfei/ai-agent-team/drawnote)<a href="https://agentmods.dev/skills/peterfei/ai-agent-team/drawnote"><img src="https://agentmods.dev/badge/skills/peterfei/ai-agent-team/drawnote.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00122 | $0.03838 |
| Opus 5 | $0.00061 | $0.01919 |
| Sonnet 5 | $0.00024 | $0.00768 |
| Haiku 4.5 | $0.00012 | $0.00384 |
Grade C, and why
drawnote-skill scanned grade C with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Hidden instructionshighPrompt injection
Directives inside HTML comments, invisible characters or bidirectional overrides are read by the model and not by the person reviewing the file.
**人物/团队**：👤 👥 👨💼 👩💼 👨👩👦👦 👨🏫 👩🏫 👨⚕️ **位置/地点**：📍 🌍 🏢 🏠 🏫 🏥 🏦 🏪 **警告/注意**：⚠️ ❗ ⚡ 🔔 🚨 ❌ ⭕ 📢 ## 故障排除 ### Playwright 安装问题 ```bash # 安装浏览器 npx playwright install chromium ``` ### 截图不完整 - 增加等待时间 How it starts
The opening of the file, as written. The whole thing — 439 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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
What ships with it
10 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 439 lines · 122 tokens per session scan C 4a953cdf087e
drawnote-skill is a skill published in the GitHub repository peterfei/ai-agent-team (431 stars, last pushed 2mo ago), licensed MIT. It adds 122 tokens to every session and 3,838 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it C with 1 finding (hidden instructions). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
infographic
Turn text, a document, or a topic into a graphic-first explainer: an imaginative schoolbook-style HTML page where full-page drawings, diagrams and legends carry the ideas and the text is titles only (a print-ready PDF only when asked). Use for an infographic, visual explainer, one-pager, data poster, concept or…
codebase-slideshow
Generate beautiful HTML slideshow courses for any codebase — glassmorphism reveal.js presentations with dialogue narrative, quizzes, and adaptive teaching.
html-ppt-zhangzara-daisy-days
A customer-success workshop onboarding users to a project-management app — the first-value path and the habits that retain. Built as a decision-grade professional training deck for new customers, CS team.
html-ppt-zhangzara-retro-windows
An IT security-awareness training on spotting phishing — the tells, the drill, and what to do in the first 60 seconds. Built as a decision-grade professional training deck for all employees.
gpt-image
Use this skill whenever a user asks to generate, create, draw, render, or edit images with GPT Image 2 / gpt-image-2, text-to-image, reference-image editing, inpainting, posters, typography, Chinese text, UI mockups, diagrams, or gallery prompts. Analyze the user's prompt, search the bundled Reference Gallery/craft…
baoyu-comic
A tool for creating original educational comics that explain knowledge or ideas through multiple illustrated panels. It supports different art styles and tones and can create several comics in one batch.