designAn agent skill for people who ship apps
Your app deserves a design folder.
One conversation in. A storyboard, hi-fi mockups, a landing page, logo concepts, launcher icons, illustrations, store screenshots, and a contrast gate that has to pass. All generated from a single tokens.json, so nothing can drift.
Listed on skills.sh. Claude Code · Codex · OpenCode · Cursor: needs Node and Chrome. Nothing else.
nobody wanted to leave.
from the first night
in the blue tin.”
The one rule
Nothing is hand-drawn.
A design folder that is drawn by hand rots the first time a colour changes. Here every artifact is the output of a small script you can re-run, so the mockup, the icon, the landing page and the App Store screenshots can never disagree with each other.
| Artifact | Generated from |
|---|---|
| Every screen, every store PNG | tokens.json + mockup CSS |
iOS .appiconset | app-icons.mjs |
| Android adaptive + monochrome | app-icons.mjs |
| Illustrations, both platforms | illustrations.mjs |
| Landing page + OG card | the same tokens |
| DESIGN_SYSTEM.md, Kotlin, Swift | tokens.json |
What it builds
One folder that is the source of truth, the review surface and the asset factory.
Storyboard
Every screen, grouped by job, each captioned with why it exists.
Hi-fi mockups
Real CSS, real type, in a device frame, not flattened images.
Directions
Three type-and-colour systems on the same screens. You pick one.
Landing page
Same tokens, objection-led sections, real metadata and an OG card.
Logo + wordmark
Mark, wordmark and launcher icon, shown from 16 to 1024px.
Launcher icons
Opaque iOS set and a 108dp Android adaptive layer with monochrome.
Illustrations
One canvas, one script, both platforms from the same paths.
Content packs
Question and prompt decks, with a real tone per pack.
Store kit
Every required size, generated and headless-rendered.
Platform mirrors
Kotlin and Swift tokens emitted from the same file.
Ten constraint files
Each decision has one owner.
The skill ships ten short concept files. None of them is a chapter to paste onto the board; each owns one slice of the tokens, or one artifact, and says which files it writes.
Psychology
Perception, attention, trust, and the manipulation patterns it refuses. Pick five, write them down.
Type
Three pairings, then one. Scale, tracking, and a wordmark that is defined once.
Color
Palette, semantic aliases, accent reservation, and the contrast pairs that must pass.
Layout
One spacing scale, one radius scale, and screens that consume both without inventing a third.
Motion
Three durations, one easing family, and what reduced motion removes.
Screens
Three structures before the pick, then every state, including empty, error and offline.
Logo
Mark, wordmark, launcher icon: three decisions, in that order, tested at 16px.
Illustration
The SVG ∩ VectorDrawable subset, so one file is genuinely one file.
Voice
One vocabulary. Errors, empty states and the copy deck written as design material.
Board
The one-page review, assembled from the real tokens and the real assets: the page a founder forwards when someone asks “can I see the design?”
The workflow
Eleven phases, two of them stops.
It interviews you before it draws anything, and it stops twice: once after the three directions, once after the tokens. Those are the two decisions that are expensive to undo.
Interview
Promise, user, moment of use, must-nevers, platforms, competitors.
Orient
Inventory what exists and what has to be invented.
Three directions
Same screens, three real systems. Stop.
Tokens + gate
DTCG tokens, then the contrast checker must exit 0. Stop.
Storyboard
Every screen, grouped and captioned.
Logo + icons
Ideas at real sizes, then one generator.
Illustrations
Path-only, so both platforms agree.
Content packs
Questions, prompts, notifications.
Landing page
Same tokens, real metadata, OG card.
Store kit
Every required size, rendered.
Mirror
Kotlin, Swift and the design doc.
Verify
Run it, paste the output, name the placeholders.
Not a mockup of a skill
These came out of the generators.
Four launcher variants and four illustrations, produced by the two scripts that ship in assets/. The page you are reading uses the same token file they do.
Launcher icons
app-icons.mjs
Illustrations
illustrations.mjs
Included, not bolted on
The landing page is part of the design system.
A system that only works inside a 390px phone frame isn't a system. The marketing page is built from the same CSS blocks and tokens as the app, so the site, the store listing and the product can't visibly wobble.
Why it holds up
Three rules it will not break.
Semantic tokens only
UI code references names like textSecondary, never a hex. Raw values live in one file and the generators, so a palette change is one edit.
The gate is a hard stop
Every semantic pair is checked in both directions, and the minimum is never lowered to make a palette pass. If it fails, the tokens change.
Purity by construction
If iOS and Android ever need separate hand edits, the generator is missing a rule. The same script emits both, or the script is wrong.
Install
Four ways in, one of them is a sentence.
The one command
Install it from the skills.sh registry. It wires the skill into every agent it finds, and keeps it updatable with npx skills update.
As a skill
Or clone it, then drop it where your agent looks for skills.
Claude Code / OpenCode
Both read ~/.claude/skills. One symlink keeps them in sync.
Or just the prompt
No install, no repo access. Paste this into any agent that can write files.
“Interview me about the app, then build the full design/ folder: three directions, tokens plus a contrast gate, a storyboard, icons, illustrations, a landing page, content packs, and a store kit, all generated and re-runnable. Pause for sign-off after the directions and after the tokens, and paste real command output.”
Questions
Before you ask
How do I install it?
One command: npx skills add shuence/design-storyboard. It detects your agents and installs into each one. The skill is listed on skills.sh, so npx skills update keeps it current. If you would rather not use the registry, clone the repo and copy skills/design-storyboard into ~/.agents/skills/ by hand.
Is this a Figma replacement?
No. Figma is where you explore with a team. This is where a design becomes buildable: tokens, real CSS, platform assets and a gate that fails CI. It's the folder you keep after the exploration is done.
Do I need design experience?
No, but you do need to answer the interview. The skill asks about the promise, the user, the moment of use and what the product must never do. If you skip that, you get a generic design, which is the failure mode this exists to avoid.
Does it work for iOS and Android?
Yes, natively. Icons and illustrations are emitted for both from one source: opaque full-bleed .appiconsets for iOS, and 108dp adaptive layers with a real <monochrome> drawable for Android. Tokens are mirrored into Kotlin and Swift.
What if I already have a brand?
Bring it to the interview: logo, licensed typefaces, brand hexes. Phase 1 is explicitly about inventorying what's reusable before inventing anything. It won't replace a mark you already ship.
Why does it insist on a contrast checker?
Because “accessible enough” is an opinion until it's a failing build. Every semantic pair is tested in both directions, and the minimum is never lowered to make a palette pass. It's the only automated gate in the folder, so it has to be real.
Where do the screenshots come from?
Headless Chrome. A generator writes the artboard HTML at the exact required size, adds the right platform chrome, and screenshots it. Nothing is exported by hand, so a token change updates every listing on the next run.
Which agents can run it?
Any agent that can read files and run Node: Claude Code, Codex, OpenCode, Cursor, Windsurf. The skill is just markdown plus three small scripts. There is no plugin API to depend on. npx skills add shuence/design-storyboard installs it into every supported agent it detects.
Ship a folder, not a moodboard.
Interview in. Storyboard, mockups, landing page, icons, illustrations and store kit out, all from one tokens file.
MIT licensed · The folder itself needs no npm install and renders offline with file://