with one click
design-sketch
// ASCII art UI sketches + .monojson Monodraw stub. Use for any UI/layout decision or layout code changes (flexbox, grid, modals, dialogs).
// ASCII art UI sketches + .monojson Monodraw stub. Use for any UI/layout decision or layout code changes (flexbox, grid, modals, dialogs).
[HINT] Download the complete skill directory including SKILL.md and all related files
| name | design-sketch |
| description | ASCII art UI sketches + .monojson Monodraw stub. Use for any UI/layout decision or layout code changes (flexbox, grid, modals, dialogs). |
The default medium for UI design discussions in this account. Use ASCII art in chat to communicate layout decisions; emit a sibling empty Monodraw stub on disk so the user can draw an alternative visually if the ASCII proposal isn't quite right.
Fire when:
/design-sketchDo NOT fire when:
Every invocation produces both:
Render the proposed layout using box-drawing characters and a consistent vocabulary:
┌─┐ │ └─┘ for borders, ┏━┓ ┃ ┗━┛ for emphasis, ╭─╮ │ ╰─╯ for rounded├─┤ for horizontal, ┬─┴ for T-junctions◯ empty radio, ⦿ selected radio, ☐ empty checkbox, ☑ checked[ Label ] for buttons, [[ Primary ]] for primary actionSOURCE, TARGET, ACTION)← → ↑ ↓ if pointing at somethingWhen mcp-monodraw is configured, you can use its mcp__monodraw__create_ascii_art tool for typed shapes (box, flowchart, sequence, architecture, table, tree). For freeform layouts, hand-author the ASCII — it's usually faster and more precise.
Render the part being decided, not the whole app. A modal redesign shows the modal, not the surrounding page. A sidebar tweak shows the sidebar with brief context, not the entire layout.
Write an empty Monodraw canvas to ~/.claude/design-sketches/<YYYY-MM-DD>-<HHMM>-<slug>.monojson and print the path in chat so the user can click it in Ghostty to open Monodraw.
Slug rules:
conflict-modal-action-column, not sketch-1)Example path: /Users/pierce/.claude/design-sketches/2026-05-05-1430-conflict-modal.monojson
How to create the stub:
mkdir -p ~/.claude/design-sketches
cp ~/.claude/skills/design-sketch/seed.monojson \
~/.claude/design-sketches/$(date +%Y-%m-%d-%H%M)-<slug>.monojson
Use the actual slug, not the placeholder. The seed is a valid empty canvas; the user draws into it. The ~/.claude/design-sketches/ directory is gitignored at the top level — files inside are ephemeral working copies, not committed artifacts.
How to communicate the path to the user:
After writing the stub, print one line in chat with the full absolute path so it's clickable in Ghostty:
Stub: /Users/pierce/.claude/design-sketches/2026-05-05-1430-conflict-modal.monojson
Tell the user they can click that path in Ghostty to open it in Monodraw, draw an alternative, save, and let you know.
When the user says "I edited it" / "take a look" / "I drew it":
mcp__monodraw__export_diagram tool (or fall back to /usr/local/bin/monodraw <path> via Bash)When writing or editing a plan file (under ~/.claude/plans/ or a project's docs/) and the conversation included design decisions, embed the ASCII sketch directly in the plan under a ## Design or ### Layout heading. Plan files for design work must visually communicate what was decided, not just describe it.
The .monojson stub does NOT go into the plan — only the ASCII rendering. Reference the stub path in a "Working files" or "Artifacts" section if relevant.
Before writing each new stub, prune the directory:
~/.claude/design-sketches/*.monojson<YYYY-MM-DD> prefix is more than 30 days before today.monojson files, delete oldest until 50 remain (sort by filename, which is chronologically ordered)A single find invocation handles the date-based prune:
find ~/.claude/design-sketches -name "*.monojson" -mtime +30 -delete
For the count cap, list and trim:
ls -1t ~/.claude/design-sketches/*.monojson 2>/dev/null | tail -n +51 | xargs rm -f
Run both before writing the new stub. Don't announce the cleanup unless something unusual happened.
/usr/local/bin/monodraw) is render-only: .monojson → ASCII. It cannot import ASCII back into a .monojson. Don't try.mcp-monodraw is not configured in the current project, fall back to invoking the CLI via Bash — the workflow still works, just with one fewer convenience.