A Claude Code skill fixed my app's UI — here's what broke and how to use it yourself

A developer used a Claude Code skill to fix UI inconsistencies across 14 screens of BrandMeld, a Flutter-based AI brand generator. The skill replaced varied headers with a unified gradient pattern, converted a gray settings wall into grouped cards, simplified an 8-field form to name-only with smart defaults, and redesigned a paywall to emphasize loss aversion. It also caught rendering bugs from screenshots, demonstrating that a rubric-in-a-file can enforce a consistent design system.

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." --- 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.