메뉴
智能笔记与流程图绘制工具（优化版-无权限读取）。根据用户提供的内容，自动生成精美的可视化笔记和流程图，支持多种风格(手写笔记、思维导图、流程图等)，并导出为图片。使用内置模板，无需读取文件权限。适用于：(1) 学习笔记可视化，(2) 知识梳理与总结，(3) 流程图绘制，(4) 概念解释图表
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/peterfei/ai-agent-team --skill drawnote-skill명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | drawnote-skill |
| description | 智能笔记与流程图绘制工具（优化版-无权限读取）。根据用户提供的内容，自动生成精美的可视化笔记和流程图，支持多种风格(手写笔记、思维导图、流程图等)，并导出为图片。使用内置模板，无需读取文件权限。适用于：(1) 学习笔记可视化，(2) 知识梳理与总结，(3) 流程图绘制，(4) 概念解释图表 |
版本 2.0 - 无权限读取优化：
当用户需要创建可视化笔记或流程图时，此 skill 会自动完成以下流程：
⚠️ 重要：文件保存路径
pwd 命令或检查环境变量）分析用户输入：
内容准备示例：
# 用户输入："人工智能发展历程"
# -> 需要搜索 AI 发展历程的关键事件、时间线、重要人物等
# -> 整理成结构化的内容供信息图使用
OPTIMIZED: 使用内置提示词模板，避免运行时读取文件权限请求。
提示词模板已内置，包含：
根据提示词模板生成 HTML 文件：
HTML 文件保存位置：当前工作目录/drawnote_[timestamp].html
重要说明：
pwd 命令获取当前工作目录路径drawnote_YYYYMMDD_HHMMSS.html 和 .png~/Downloads，则保存为 ~/Downloads/drawnote_20231110_143022.html设计要求：
使用 Playwright 将 HTML 文件渲染并截图：
# 注意：使用当前工作目录的绝对路径
node ~/.claude/plugins/.../drawnote-skill/scripts/capture.js drawnote_[timestamp].html drawnote_[timestamp].png
截图参数：
drawnote-skill 提供多种信息图风格，详见 风格使用指南.md
# 方式1：直接指定风格
"请使用彩色手写笔记风格生成XXX的信息图"
# 方式2：描述风格特征
"请生成一个学习笔记风格的信息图，需要多种颜色标注和荧光笔高亮"
# 方式3：引用风格模板
"请参考 styles/彩色手写笔记风格.md 模板生成信息图"
详细说明：风格模板已内置到 skill 中，无需额外读取文件
用户: 请帮我创建一个关于"量子计算"的信息图
AI 工作流程:
1. 获取当前工作目录 (如 ~/Downloads)
2. 搜索量子计算的相关信息
3. 提取关键概念、应用领域、发展历程
4. 使用内置提示词模板（无需文件读取）
5. 生成 HTML 文件 → ~/Downloads/drawnote_20231110_143022.html
6. 使用 Playwright 截图 → ~/Downloads/drawnote_20231110_143022.png
用户在 ~/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
位置：scripts/capture.js
功能：使用 Playwright 打开 HTML 文件并截图
参数：
所有生成的文件都保存在用户的当前工作目录下：
drawnote_[timestamp].htmldrawnote_[timestamp].png示例：
~/Downloads 工作，文件会保存到 ~/Downloads/drawnote_20231110_143022.html~/projects/myapp，文件会保存到该目录下生成信息图后，应该检查：
如果需要调整，可以：
如果需要安装 Node.js 相关包，使用 nvm 管理：
# 确保使用正确的 Node 版本
nvm use 18 # 或其他合适的版本
# 安装 Playwright
npm install playwright
# 如果需要其他依赖
npm install [package-name]
drawnote-skill 提供多种信息图风格，可根据内容类型和使用场景选择：
适用场景：学习笔记、读书总结、知识梳理
设计特点：
配色方案：
/* 彩色手写笔记风格配色 */
--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; /* 紫色荧光笔 */
适用场景：商业报告、数据分析、专业文档
配色方案：
/* 专业商务风格配色 */
--primary-color: #2C3E50; /* 深蓝灰 */
--secondary-color: #3498DB; /* 亮蓝 */
--accent-color: #E74C3C; /* 红色 */
--background-color: #ECF0F1; /* 浅灰 */
适用场景：技术文档、产品介绍、创新方案
配色方案：
/* 科技创新风格配色 */
--primary-color: #1A1A2E; /* 深蓝黑 */
--secondary-color: #16213E; /* 深蓝 */
--accent-color: #0F3460; /* 中蓝 */
--highlight-color: #E94560; /* 粉红 */
<!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 (,,,);
}
{
: center;
: ;
: solid;
: ;
}
{
: ;
: ;
: ;
}
{
: grid;
: (auto-fit, (, fr));
: ;
: ;
}
{
: ;
: ;
: ;
: transform ease, box-shadow ease;
}
{
: relative;
: ;
}
{
: flex;
: ;
: relative;
}
{
: ;
: ;
: ;
: flex;
: center;
: center;
: white;
: bold;
: ;
: ;
}
{
: ;
: ;
: ;
: ;
}
{ : ; }
{ : ; }
{ : ; }
{ : ; }
{ : ; }
{ : ; }
{
: (to bottom, , );
: ;
: relative;
}
{
: ;
: ;
: ;
: (,,,);
: (-);
: ;
}
{
: , , cursive;
}
数据/统计：📊 📈 📉 💹 📋 📝 📄 📃 技术/工具：🔧 ⚙️ 🔨 💻 🖥️ 📱 ⌨️ 🖱️ 创意/想法：💡 🎨 ✨ 🌟 🎭 🎪 🎯 🎲 目标/成就：🎯 🏆 ⭐ ✓ ✅ ✔️ 🎖️ 🏅 时间/日程：⏰ 📅 ⏳ 🕐 🕑 🕒 🗓️ ⌛ 人物/团队：👤 👥 👨💼 👩💼 👨👩👦👦 👨🏫 👩🏫 👨⚕️ 位置/地点：📍 🌍 🏢 🏠 🏫 🏥 🏦 🏪 警告/注意：⚠️ ❗ ⚡ 🔔 🚨 ❌ ⭕ 📢
# 安装浏览器
npx playwright install chromium
已优化：现在 drawnote-skill 会自动处理所有文件创建，不再出现确认提示：
如果仍然遇到确认提示，请检查：