Ungenerated
Skills for designing mobile apps with Claude that don’t look generated: a live design board for
every screen, a design kit before any screen, motion with real physics, the onboarding, paywall
and cancel flows that work, and a checklist for the tells. They come from designing real apps
screen by screen with a demanding reviewer. Every rule in here was a correction once.
The page · The example board · Install · The skills
Same brief, twice
Six made-up apps, one step of each, drawn from the same brief twice: once with no skills loaded,
once with them. Generated, they share one default kit (indigo to pink, Inter, emoji, glass), so
six apps look like one. With the skills, each gets its own kit, its own motion and its own words.
Every phone here is a screenshot of a live screen on the example board,
where they play, react to your thumb and loop.
Every change has a reason
On the page, each app’s corrections are pinned to
both phones: what the draft did, what the skills changed, and the skill each change comes from.
Design kits, before and after
design-kit makes the kit before any screen: colour tokens, one type
pairing, one radius scale, the parts in every state. The six kits live in
examples/apps.json; change a token there and the board, the page and these
pictures follow.
Motion, before and after
Generated motion is one CSS transition on everything. The motion skills give each kind of thing
its own physics: presses spring, content rises, money rolls, picks bloom from the finger.
Press them on the page.
Install
In Claude Code:
/plugin marketplace add iammirrr/ungenerated
/plugin install ungenerated@ungenerated
Or copy the folders you want from skills/ into ~/.claude/skills/ (all projects) or
.claude/skills/ (one project).
Use
Start with “design the onboarding for my app” or “set up a design board”, and Claude follows
app-design-workflow: concept, research, kit, board, then the flow screen by screen, each checked
before you see it. You review on the board with Pick and Note; the next pass reads your notes.
The skills
Start here
| Skill | What it does |
|---|
app-design-workflow | The order to design a mobile app in, and which skill to use at each step. |
app-concept | Define what an app is before designing it. |
Foundation
| Skill | What it does |
|---|
design-kit | Build the design kit before any screen. |
motion-system | The motion rules and engine for app screens. |
interaction-feel | Make controls feel physical and fluid. |
bubbly-motion | Give an app soft, bubbly, alive motion that still feels calm and expensive. |
continuity | Make a flow feel like one continuous thing instead of a deck of screens. |
real-icons-and-devices | Show real app icons and real-looking devices on design screens. |
human-copy | Write app copy that sounds like a person. |
The board
| Skill | What it does |
|---|
design-board | Scaffold and run a live design board for a mobile app. |
app-research | Study how top apps structure a journey (onboarding, paywall, setup, a core screen) and turn it into "what we took" notes on the design board. |
design-review | Run review passes with a reviewer. |
visual-qa | Verify screens and motion with real screenshots before showing them. |
The flow
Quality
| Skill | What it does |
|---|
no-slop | The checklist every screen passes before anyone sees it. |
accessibility-pass | Check app screens for accessibility before approval. |
native-port | Build approved board screens natively in SwiftUI or Jetpack Compose. |
board-to-app | Turn an approved board section into a working native demo that plays exactly like the board. |
app-store-assets | Make App Store and Play Store screenshots and the preview video from the design board. |
The design board
skills/design-board/template/ is a working board: the motion engine, the parts (buttons, rows,
toggles, sliders, segmented controls, reels, coach marks), live bubbly and continuity demos, six
screen transitions, Play the flow, Pick and Note saved to the repo, and the tools that capture
real-time screenshots and contact sheets. Copy it into your project and run node tools/serve.mjs.
The example board is that template running the six
apps from examples/.
In this repository
| Folder | What is in it |
|---|
skills/ | The skills, one folder each, with a SKILL.md and any references or templates. |
examples/ | The six example apps: apps.json (their kits, notes and which skills shaped them), one screen file per app on the board engine, and the screenshots. |
site-src/ | The page and the skill pages. |
scripts/ | build-site.mjs builds the page and the board into site/ (on every push); shots.mjs retakes the screenshots. |
Contributing
Each skill is one folder with a SKILL.md. Keep them specific: a rule, why it holds, and what to do
instead. If a rule came from a real correction, it belongs here. The page rebuilds itself from the
skills on every push. If you change an example app, run node scripts/build-site.mjs and then
node scripts/shots.mjs so the pictures match.
Licence
MIT for this repository. The icon subset in the board template is from Lucide (ISC). App icons are
not included: tools/fetch-appicons.mjs fetches them for your private use. The six example apps
are made up; any resemblance to a real app’s name is a coincidence.
