/mobile-design skill: app design in Claude without the AI look

Ask Claude for a beautiful app design. You get a pink gradient, glass cards, pill buttons and a crown on the paywall.

That is how my Tona looked. It is an iOS app for colour in video that I am finishing in public on my channel. I redesigned it and packed the rules I used into a skill. The image above shows Tona before and after.

Why Claude designs the same thing every time

The model learned from millions of interfaces and defaults to the most common choice. And the most common choice right now is the AI look: gradients, glass, icons in coloured circles, everything centred. Each decision is fine on its own; together they make a template you recognise at first glance.

Saying “make it minimal” isn’t enough to fix that. You need a system and a list of bans.

What the skill does

1. Purpose first. What content matters most, what single action, which platform.
2. A small strict system. Colours, fonts, spacing and three corner radii. Screens take values only from there, no “slightly different grey”.
3. Bans. Gradients, glass, pill buttons, icons in circles, crowns, emoji and centring everything.
4. Screen recipes. Onboarding, paywall, empty state, gallery, settings, editor, sheet.
5. A checklist. Every screen is checked before you see it.

Works for SwiftUI, React Native, Flutter and Compose. No code yet? It draws 402×874 HTML mockups.

How to install

Paste into Claude Code:

Install the skill https://github.com/vaykondev/mobile-design-skill into ~/.claude/skills

Or by hand:

git clone https://github.com/vaykondev/mobile-design-skill /tmp/mobile-design-skill
cp -R /tmp/mobile-design-skill/skills/mobile-design ~/.claude/skills/

Restart Claude Code and the /mobile-design command appears.

How to use it

New screens:

/mobile-design design onboarding and paywall screens for my app

An existing app:

/mobile-design redesign this app, don't touch the features

Without a brand the skill uses the Mono character: black, a white accent, wide headings. With a brand, its colour becomes the only accent and the discipline stays the same.

What’s inside

skills/mobile-design/
  SKILL.md                    workflow
  references/tokens.md        tokens for SwiftUI, React Native, Flutter, Compose, HTML
  references/anti-patterns.md what Claude does by default and what to use instead
  references/screens.md       screen recipes with sizes
  references/checklist.md     pre-delivery check

The most useful file is anti-patterns.md: a list of what the model does on its own and what to replace it with. It is worth reading even without the skill if you design by hand.

What changed in Tona

The pink palette, glass cards, old onboarding art and phone mockups are gone. In their place: a black background, a single white accent and a new icon. The interface stopped competing with the video, and for a colour app that is the whole point.

The skill is free under the MIT licence. I share how I finish the app itself in the Telegram channel @vaykord_dev, and Tona has its own page.