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 AppBar
s, 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.
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:
Clip.antiAlias
on the same container),The screenshot is the debugger.
"Redesign this" gives you noise. The skill encodes a rubric the model follows every time:
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.
A skill is just a folder with a SKILL.md
. Drop it in:
.claude/skills/<name>/SKILL.md
~/.claude/skills/<name>/SKILL.md
Clone the repo into that folder, restart Claude Code, done.
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.
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."
---
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.