iammirrr/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.
| App | The step | Shaped by |
|---|---|---|
| **Loaf**, a sourdough companion | The opening | opening-hook · continuity · human-copy |
| **Stride**, a running coach | A question | onboarding-questions · interaction-feel · design-kit |
| **Halves**, a budget for two | The plan | plan-reveal · no-slop · human-copy |
| **Lull**, sleep sounds | The paywall | paywall · motion-system · no-slop |
| **Parla**, Italian out loud | A permission | consent-and-permissions · bubbly-motion · human-copy |
| **Fern**, plant care | Leaving | cancel-flow · human-copy · no-slop |
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:
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. |