菜单
Create hand-drawn editorial illustration diagrams in Excalidraw with a sketchy, annotated, character-driven style. Use for AI workflow illustrations, technical comparisons, concept explanations, and visual storytelling.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/az9713/my-agent-skills --skill excalidraw-sketch命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | excalidraw-sketch |
| description | Create hand-drawn editorial illustration diagrams in Excalidraw with a sketchy, annotated, character-driven style. Use for AI workflow illustrations, technical comparisons, concept explanations, and visual storytelling. |
Generate .excalidraw JSON files in a hand-drawn, editorial illustration style — sketchy, annotated, character-driven diagrams for explaining AI workflows, technical concepts, and comparisons.
This skill builds on the base excalidraw skill. Use the same render pipeline, element templates, and JSON schema from ../excalidraw/references/. The difference is purely aesthetic and compositional — this skill defines a specific visual language.
Before generating any diagram, read the sample images in references/ to internalize the target style:
references/sample.jpg — Side-by-side comparison: "Human Interruption" vs "LLM Context Pollution". Shows two-panel layout with robot mascot in each, thick flow arrow between panels, speech/thought bubbles, scattered annotation labels, red X for negative, code windows.references/sample2.jpg — Top statement + two-panel layout: "/btw Quick Questions" vs "--fork-session Deep Dives". Shows problem statement at top with downward arrow, robot waving in left panel, robot at laptop in right panel, annotation arrows to icons (magnifying glass, gears, HTML/mermaid artifacts).references/sample3.jpg — Side-by-side with detail sub-row: "Messy Desk" (red X, overwhelmed robot buried in papers, scattered symbols) vs "Clean Desk" (green check, organized robot, thought bubble with progress bar/target). Bottom row shows 3 smaller robot figures demonstrating individual tools (Esc, /rewind, --fork-session, /btw).references/sample4.jpg — Three-stage sequential flow left-to-right: "Claude Mid-Task" → "Noise in Conversation History" → "Impact: Drowned Signal". Shows robot working with code windows, human figure interrupting with speech bubble, conversation history panel with red X, confused robot surrounded by scattered documents.Use these samples as your ground truth for:
This style mimics hand-drawn whiteboard sketches used in tech blog posts and YouTube explainers. Key traits:
These settings create the hand-drawn aesthetic:
| Property | Value | Why |
|---|---|---|
roughness | 2 | Maximum hand-drawn wobble — this is the core of the style |
fontFamily | 1 | Virgil (hand-drawn font) — never use monospace or sans-serif |
strokeWidth | 1 for annotations, 2 for shapes, 3 for major arrows | Visual hierarchy through line weight |
opacity | 100 | Always fully opaque |
roundness | { "type": 3 } on rectangles | Rounded corners for a softer, sketchier feel |
This replaces the base skill's color palette. All colors below are tuned for the soft, muted, editorial look.
| Semantic Purpose | Fill | Stroke | When to Use |
|---|---|---|---|
| Robot body / neutral | #e8edf3 | #5b6e85 | Robot mascot shapes, neutral containers |
| Robot eye glow | #7dd3fc | #0284c7 | Robot eye circles |
| Robot chest screen | #38bdf8 | #0369a1 | Small rectangle on robot body |
| Panel border | transparent | #94a3b8 | Hand-drawn rounded rectangles framing scenes |
| Good / positive | #bbf7d0 | #16a34a | Green checkmarks, success indicators |
| Bad / negative | #fecaca | #dc2626 | Red X marks, error indicators |
| Warning / attention | #fef08a | #ca8a04 | Yellow highlights, exclamation marks |
| Code window | #1e293b | #475569 | Dark rectangles representing terminal/editor |
| Document / file | #fefce8 | #a3a3a3 | Paper-like rectangles for documents |
| Thought bubble | #f8fafc | #94a3b8 | Cloud shapes for thought content |
| Speech bubble | #ffffff | #64748b | Rounded rectangles with tail for dialogue |
| UI mockup | #f1f5f9 | #94a3b8 | Light rectangles representing screens/windows |
| Arrow (flow) | — | #64748b | Thick gray arrows between scenes |
| Arrow (annotation) | — | #94a3b8 | Thinner arrows pointing from labels to elements |
| Level | Color | Font Size | Use For |
|---|---|---|---|
| Diagram title | #1e293b | 28-36 | Main title spanning the top |
| Section subtitle | #334155 | 20-24 | Panel/scene headers |
| Label / annotation | #475569 | 14-16 | Callout text, small labels |
| Caption | #64748b | 14-16 | Explanatory text below scenes |
| Emphasis text | #dc2626 or #16a34a | 16-20 | Key terms, red for bad, green for good |
| On dark background | #e2e8f0 | 12-14 | Text inside code windows |
| Property | Value |
|---|---|
| Canvas background | #faf9f6 |
Read the sample images first (references/sample*.jpg) to see the target robot likeness. The robot in the samples has: a round-ish head slightly wider than tall, two large glowing blue circular eyes (prominent, ~40% of head width), a compact metallic body with a small bright blue screen on the chest, short stubby arms and legs, and a small antenna nub on top. The overall proportions are chibi/cute — large head relative to body.
The recurring robot character is built from basic Excalidraw shapes to approximate this likeness:
Head: rectangle, 50×45, rounded, fill #e8edf3, stroke #5b6e85
Eyes: 2× ellipse, 12×12, fill #7dd3fc, stroke #0284c7
Body: rectangle, 40×50, rounded, fill #e8edf3, stroke #5b6e85
Chest screen: rectangle, 20×15, fill #38bdf8, stroke #0369a1 (centered on body)
Arms: 2× line, strokeWidth 2, stroke #5b6e85 (short lines from body sides)
Legs: 2× line, strokeWidth 2, stroke #5b6e85 (short lines from body bottom)
Antenna: line + small ellipse on top of head
| State | How to Show |
|---|---|
| Working/focused | Robot next to a code window or laptop shape, small gear icons nearby |
| Confused | Question marks (?) and scattered symbols around the robot's head |
| Overwhelmed | Piles of document rectangles surrounding the robot |
| Presenting/explaining | Robot with a speech bubble, one arm line angled outward |
| Happy/success | Green checkmark nearby, clean organized elements around |
| Error/problem | Red X mark nearby, scattered messy elements |
Simple silhouette: ellipse head (20×20) + rectangle body (15×30), fill #94a3b8, stroke #475569. With a speech bubble for dialogue.
This style is annotation-heavy. Every scene should have multiple callout labels.
| Element | How to Build |
|---|---|
| Callout label | Free-floating text (14-16px, color #475569) + thin arrow (strokeWidth 1, stroke #94a3b8) pointing to the target |
| Speech bubble | Rounded rectangle (fill #ffffff, stroke #64748b) with hand-written text inside. Add a small triangle line below for the tail. |
| Thought bubble | Ellipse (fill #f8fafc, stroke #94a3b8) with wavy/cloud-like feel. Place 2-3 small ellipses trailing toward the character. |
| Red X | Two crossing lines (stroke #dc2626, strokeWidth 3) — 30×30 |
| Green check | Two lines forming a checkmark (stroke #16a34a, strokeWidth 3) |
| Question marks | Free-floating text ? in various sizes (16-28px), scattered, color #ca8a04 or #dc2626 |
| Exclamation marks | Free-floating text ! (20-28px), color #ca8a04 |
| Scattered symbols | Small text elements (@, #, %, *, ?) in varied sizes around a focal point to convey noise/chaos |
| Icon: gear | Small diamond (20×20) or use text ⚙ |
| Icon: magnifying glass | Small ellipse (15×15) + short line for handle |
Aim for 5-10 annotation labels per scene/panel. Each major element should have at least one label pointing to it. This density is what gives the style its editorial/explainer character.
Choose the layout that fits the concept. These can be combined.
Two panels with hand-drawn rounded-rectangle borders. Used for before/after, good/bad, two approaches.
┌─────────────────┐ ┌─────────────────┐
│ ✗ Bad Title │ │ ✓ Good Title │
│ │ │ │
│ [robot scene] │ → │ [robot scene] │
│ │ │ │
│ caption text │ │ caption text │
└─────────────────┘ └─────────────────┘
3+ scenes arranged horizontally with thick directional arrows between them. Used for processes, chains of events, cause-and-effect.
[Scene 1] ──→ [Scene 2] ──→ [Scene 3]
subtitle subtitle subtitle
robot + robot + robot +
context context context
caption caption caption
A headline statement or problem at the top, with an arrow pointing down to a row of smaller scenes/solutions below.
┌──────────────────────────┐
│ Problem Statement │
└────────────┬─────────────┘
↓
[solution 1] [solution 2] [solution 3]
Central concept with radiating connections to surrounding elements. Used for "one thing connects to many."
Combine any patterns above. Common: comparison panels at top + detail row at bottom. Or sequential flow with an inset detail panel.
| Spacing | Value |
|---|---|
| Between major scenes | 100-150px |
| Between elements within a scene | 30-50px |
| Panel padding (if bordered) | 40-60px |
| Title to first panel | 60-80px |
| Robot size (total height) | 100-130px |
| Minimum scene width | 300px |
Read the sample images in references/sample*.jpg using the Read tool. Internalize the robot likeness, annotation style, scene composition, and overall feel. Every diagram you produce should look like it belongs in the same series as these samples.
Based on the concept, pick from the layout patterns above (or combine them).
For each scene/panel:
Follow the base excalidraw skill's section-by-section workflow:
"robot1_head", "panel_bad_border")Use the base skill's render pipeline:
cd .claude/skills/excalidraw/references && uv run python render_excalidraw.py <path-to-file.excalidraw>
Then Read the PNG and run the fix loop.
roughness: 2 on all shapes and linesfontFamily: 1 (Virgil) on all text#faf9f6 (cream, not white)#faf9f6), not cold white?, !, @, # symbolsUse this skill whenever the user presents a claim, idea, proposal, argument, or belief and wants rigorous critical analysis. Triggers on phrases like "steelman this", "red team this", "challenge this idea", "evaluate this claim", "is X a good idea?", "devil's advocate", "what are the strongest arguments for/against", "analyze this proposal", or whenever someone shares a position and clearly wants balanced, adversarial thinking rather than just validation. Also use proactively when someone asks you to evaluate whether something is true, wise, or worth doing — even if they don't use the word "steelman". The skill performs a structured four-argument dialectical analysis and synthesizes a final verdict.
Launch a live dashboard showing all running Claude Code sessions on this machine. Use when the user asks to monitor sessions, check what's running, or view session activity.
360-degree Windows system health diagnostics — covers CPU, memory, disk, network, security, startup programs, services, system info, hardware, and installed software. Use this skill whenever the user mentions system diagnostics, PC health check, performance issues, 'why is my computer slow', disk space, memory usage, startup optimization, security audit, bloatware removal, system cleanup, laptop health, or wants to keep their PC in prime condition. Also use when the user asks about high CPU, RAM usage, what's eating their disk, or wants a full system report.