A small, practical library of reusable "visual modes" — named style presets you invoke with a /command instead of re-describing the look you want every time you ask Claude for a diagram, illustration, or study aid.
This is the visual sibling of claude-power-modes: where that repo fixes review depth for engineering tasks, this one fixes visual style for anything Claude renders as a diagram, chart, or illustration.
🎥 Add a short recording or GIF here showing a mode in action — e.g. typing
/sticky-notes explain how AI worksand the board rendering in.Keep it under ~15 seconds — one mode, one clear result. Drop it in
examples/demo.gifand replace this block with:
Most people describe the visual they want from scratch every time: "make it colorful," "like a whiteboard," "something for studying." That works, but the results are inconsistent — the look shifts depending on how the request happens to be phrased that day.
A visual mode fixes that. It's a short label mapped to a specific, repeatable style, so /sketchnote always means the same doodle-plus-handwriting look, whether you invoke it today or three weeks from now.
This is just applied prompt engineering for visual output — but naming and saving your style prompts turns one-off phrasing into a reusable tool.
| Mode | Use it when you want... |
|---|---|
/handwritten |
A notebook page — handwritten notes, study notes |
/diagram |
A flowchart or architecture diagram |
/infographic |
An infographic with icons and sections |
/whiteboard |
A whiteboard-style explanation |
/mindmap |
A mind map layout |
/blueprint |
A technical blueprint style |
/sticky-notes |
Colorful sticky-note brainstorming |
/sketchnote |
Doodles plus handwritten notes |
/cheatsheet |
A one-page reference guide |
/timeline |
A chronological visual |
/comic |
A comic-strip explanation |
/poster |
An educational poster |
/flashcards |
Study cards |
/presentation |
A slide-like design |
/minimal |
A clean, simple design |
/isometric |
A 3D isometric illustration |
/pixelart |
Pixel art style |
/watercolor |
A watercolor painting |
/ghibli |
Studio Ghibli–inspired style (where allowed) |
/cyberpunk |
A futuristic neon style |
/3d-render |
A photorealistic 3D render |
Full prompt text for each mode is in mode definitions below — copy what you need.
Option 1 — copy-paste (works anywhere, zero setup) Copy a mode's prompt text from the definitions below and paste it directly above your request in any Claude conversation.
/sticky-notes: explain how compound interest works using colorful
sticky-note brainstorming, one idea per note.
Option 2 — save to CLAUDE.md (best for Claude Code / repeated use)
Claude Code automatically reads a CLAUDE.md file in your repo root for project context. Add your most-used visual modes there once, and just reference them by name afterward.
<!-- CLAUDE.md -->
## Custom visual modes
When I say /diagram, render the concept as a clean flowchart or
architecture diagram — boxes, labels, and arrows, precise over
decorative.
When I say /sketchnote, render it as a doodle-plus-handwritten-notes
sketchnote — small illustrative icons, arrows, and lettering, like a
conference graphic recorder made it.Then in a session, just type:
/sketchnote the water cycle
Option 3 — Claude Project custom instructions (best for teams) If you're using claude.ai, add your team's standard visual modes to a Project's custom instructions so everyone gets the same look and feel, without copy-pasting style prompts between people.
/handwritten — notebook page, handwritten notes, study notes
Render this as a page from a real notebook: slightly uneven pen
strokes, margin notes, underlines, and the natural imperfection of
handwriting. Should feel personal and low-pressure, not polished.
/diagram — flowchart or architecture diagram
Render this as a clean flowchart or architecture diagram: labeled
boxes, arrows, and clear structure. Precision over decoration — this
is a reference diagram someone could point at, not an illustration.
/infographic — infographic with icons and sections
Render this as an infographic: icon-driven, clearly divided sections,
short callouts and stats. Optimize for skimming and sharing, not
deep reading.
/whiteboard — whiteboard explanation
Render this as a whiteboard explanation: loose marker-style lines,
circled key points, an in-the-room, unpolished, exploratory feel —
like someone is walking through it live.
/mindmap — mind map layout
Render this as a mind map: one central idea with branches radiating
outward into subtopics. Show how ideas connect without implying a
strict sequence.
/blueprint — technical blueprint style
Render this as a technical blueprint: light linework on a dark blue
background, with measurement-style annotations. Should signal
precision and engineering rigor.
/sticky-notes — colorful sticky note brainstorming
Render this as a corkboard covered in colorful sticky notes, one
idea or category per note. Capture the energy of a live brainstorm —
unsorted, varied colors, short bites of text per note.
/sketchnote — doodle + handwritten notes
Render this as a sketchnote: handwritten lettering combined with
small illustrative doodles, arrows, and boxes, in the style of a
conference graphic recorder.
/cheatsheet — one-page reference guide
Render this as a dense, scannable one-page reference: grouped
sections, clear headers, tables where useful. Optimize for quick
lookup, not narrative flow.
/timeline — chronological visual
Render this as a timeline: events, milestones, or steps laid out in
chronological order along a single line. Order matters more than
category here.
/comic — comic strip explanation
Render this as a comic strip: sequential panels with characters,
dialogue, or captions that give the concept narrative momentum
rather than stating it flatly.
/poster — educational poster
Render this as an educational poster: bold typographic hierarchy,
large illustrations, readable from across a room. Prioritize visual
impact over density of detail.
/flashcards — study cards
Render this as a set of flashcards: a prompt or term on one side, an
answer or definition on the other (or shown side-by-side). Built for
repetition-based learning.
/presentation — slide-like design
Render this as a single slide: title, one supporting visual, and a
few key points, styled for clarity at a glance rather than as a full
deck.
/minimal — clean, simple design
Render this with maximum restraint: generous whitespace, a limited
color palette, simple shapes. Let the content carry the weight — no
unnecessary decoration.
/isometric — 3D isometric illustration
Render this as an isometric illustration: objects and scenes at the
angled, flat-but-dimensional perspective common in modern tech
illustration. Convey depth without going fully photorealistic.
/pixelart — pixel art style
Render this as retro pixel art: blocky, low-resolution-by-design
visuals reminiscent of classic video games.
/watercolor — watercolor painting
Render this as a watercolor painting: soft edges, bleeding color,
visible paper texture. Hand-painted and artistic rather than
photorealistic.
/ghibli — Studio Ghibli–inspired style (where allowed)
Render this in a soft, painterly, warm-lit style inspired by hand-
drawn Japanese animation: lush backgrounds, expressive but simple
character design. This should evoke the broader animation style, not
reproduce any specific copyrighted artwork or characters.
/cyberpunk — futuristic neon style
Render this in a cyberpunk style: dark backgrounds, neon color
accents, glowing edges, a high-tech and slightly dystopian mood.
/3d-render — photorealistic 3D render
Render this as a photorealistic 3D render: realistic lighting,
materials, and depth, as if modeled and rendered in 3D software
rather than illustrated.
- Stack modes when useful.
/diagram+/minimalgets you a precise flowchart with no visual clutter. - Add context, don't rely on the label alone.
/diagramon a vague topic is fine;/diagram how OAuth token refresh works, focused on the failure pathsgets a sharper, more relevant result. - Keep
CLAUDE.mdmodes short. One clear paragraph per mode is enough — over-specifying style details fights against the model's own visual judgment. - Route on intent, not just subject. The same topic can call for
/diagram(a reference) or/sketchnote(an intuition) depending on whether you want to document it or understand it. - These aren't magic words. A mode is a compressed style instruction, not a special capability — you'll get the same quality of result as if you'd typed the full style description out each time. The value is consistency and speed.
See /examples for real transcripts:
sticky-notes-example.md— "how AI works" rendered as a sticky-note boarddiagram-example.md— a system architecture rendered as a clean flowchartsketchnote-example.md— the water cycle rendered as a sketchnote
All modes are also available as structured JSON in modes.json — useful if you want to build a CLI, browser extension, or Claude plugin on top of this list rather than copy-pasting from markdown.
Got a visual mode that's useful for your workflow? Add it to this file following the same format: name, one-line description, and a copy-pasteable style instruction. See CONTRIBUTING.md.