My app worked. It just looked like three different apps stitched together.
BrandMeld (Flutter, AI brand generator) had grown screen by screen: some had plain AppBars, some had gradient heroes, settings was a gray ListTile dump, spacing was random, and the "create brand" form asked for 8 fields before you could do anything. Every screen was fine in isolation and inconsistent as a whole.
Instead of hand-fixing 14 screens, I installed a Claude Code skill built for mobile UI/UX and pointed it at them. This post is the concrete before/after — the actual problems it fixed — plus how you install and use it.
The problems it fixed (real, not vibes)
1. No shared header language. Every screen reinvented its top bar. The skill replaced them with one full-width gradient header pattern (back button + actions merged in), so the app reads as one product.
2. A settings screen that was a wall of gray rows. Became iOS-style grouped cards with tinted icon badges — scannable in a glance.
3. An 8-field create form. Reworked to name-only required, with the rest behind an "Add more details" expander. Then it added a smart default I didn't ask for: pick a preset industry → target audience + keywords auto-fill (without overwriting anything you typed). Cognitive load dropped from "fill a form" to "type a name."
4. A dead-end paywall. "Your trial ended." → a card that lists what you lose access to (names, palettes, logos, brand guides, saved brands) with lock icons. Loss aversion instead of a shrug.
5. Actual rendering bugs — caught from screenshots. This surprised me. I'd send a screenshot and it diagnosed things code review misses:
- a selected card's border clipped at the top corners (border +
Clip.antiAliason the same container), - an avatar hidden behind a floating stats card (header too short, card overlapped it),
- weird blur blobs behind the header (translucent circles rendering as hard-edged shapes).
The screenshot is the debugger.
Why a "skill" and not just "make it nicer"
"Redesign this" gives you noise. The skill encodes a rubric the model follows every time:
- 8-pt spacing grid
60/30/10 color system
named patterns (floating stat strips, grouped cards, gradient headers)
That's the difference between one-off prettiness and a consistent design system.
What you do with it
Install it
A skill is just a folder with a SKILL.md. Drop it in:
- Project:
.claude/skills/<name>/SKILL.md - Personal (all projects):
~/.claude/skills/<name>/SKILL.md
Clone the repo into that folder, restart Claude Code, done.
Use it
Point it at a screen:
"Redesign the settings screen. Apply the design principles."
Then iterate with screenshots:
"The avatar's hidden — fix it."
It keeps your logic/routing and rewrites the layout. You review UI, not re-test features.
Or build your own
The real lesson: you can package any discipline into a skill. A SKILL.md is tiny:
markdown
---
name: my-skill
description: "What it does AND when to use it. This is how Claude decides to load it."
---
# Instructions
The rules/steps Claude should follow when this runs.
Encode your conventions — API patterns, test style, commit format — once, and get consistent output forever.
Takeaway
The win isn't "AI writes UI." It's that a rubric-in-a-file tura cohesive one in an afternoon, and caught rendering bugs fromscreenshots along the way.
Skill (clone + drop into .claude/skills/): https://github.com/ceorkm/mobile-app-ui-design
If you try it, send me a before/after — those are the fun ones.
