Claude Code Design Demo
Description
Claude Code /design skill demo: three Instagram-post variations on one editable canvas with aggressive tweak controls. Follows the workflow from the YouTube video 'Claude Code Just Got Its Biggest Design Upgrade Of The Year'.
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
Claude Code /design demo
About
A test-drive of the Claude Code `/design` skill (2026-08-28). One prompt produced three Instagram-post variations (1080×1080) that announce the skill, each in a deliberately different aesthetic, on a single editable canvas with aggressive tweak controls.
This project follows the workflow shown in the video [Claude Code Just Got Its Biggest Design Upgrade Of The Year (And Here's How To Master It)](https://www.youtube.com/watch?v=nSfEL1Y-nUk), using the same prompts against this machine's own skill set.
- Option A · Amber Terminal — amber CRT screen, IBM Plex Mono, scanlines and glow
- Option B · Swiss Poster — flat cobalt, giant "/design" in Archivo Black, strict grid
- Option C · Riso Zine — cream paper, two-ink risograph look, halftone dots
Each artboard carries 16–19 controls in the canvas Tweaks panel, grouped as Copy / Type / Style / Effects-Layout.
Live canvas
**Open the design here:** 👉 https://claude.ai/code/artifact/54cbaf08-96f0-4da3-8133-f91fbd11fb50?via=auto_preview
GitHub does not run iframes in a README, so the page cannot embed inline. Click the preview below (the Tweaks panel in action) to open the live canvas:
[](https://claude.ai/code/artifact/54cbaf08-96f0-4da3-8133-f91fbd11fb50?via=auto_preview)
Repository contents
| File | Role |
|---|---|
Main.dc.html |
Option A · Amber Terminal artboard (source of truth) |
SwissPoster.dc.html |
Option B · Swiss Poster artboard (source of truth) |
RisoZine.dc.html |
Option C · Riso Zine artboard (source of truth) |
canvas.json |
Canvas layout: three 1080×1080 frames in a row, 100px gaps |
design-skill-launch-post.html |
Seeded canvas output — never edit; regenerate |
HANDOFF.md |
Resume file: state, re-seed and republish procedure |
DEVELOPMENT-JOURNEY.md |
Warts-and-all story of the build session |
How it was built
/designwith one prompt asking for three extre
Related Skills
Algorithmic Art
Create generative art using p5.js with seeded randomness, flow fields, and particle systems
Brand Guidelines
Apply Anthropic's official brand colors and typography to artifacts
Canvas Design
Create beautiful visual art in PNG and PDF documents using design philosophy
Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality
Slack Gif Creator
Create animated GIFs optimized for Slack's size constraints
Theme Factory
Style artifacts with professional themes including 10 pre-set color/font combinations