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

My app functioned, but its appearance resembled a patchwork of several disparate applications. The BrandMeld Flutter AI brand generator had expanded screen by screen, resulting in inconsistent design elements. Some screens featured plain AppBars, others displayed gradient hero images, while the settings screen resembled a disorganized list of gray ListTile items.

Spacing was haphazard, and the "create brand" form demanded eight fields before any action could be initiated. Recognizing this, I opted to install a Claude Code skill tailored for mobile UI/UX instead of manually fixing the 14 screens. This article will detail the specific issues resolved by the skill, along with instructions on installation and utilization.

The skill remedied the following problems:

1. Absence of shared header language: Each screen independently designed its top bar, leading to a disjointed appearance. The skill replaced these disparate headers with a unified full-width gradient header pattern, merging the back button and action buttons. This approach positioned the app as a cohesive product.

2. A settings screen comprising a wall of gray rows: This layout was transformed into iOS-style grouped cards with tinted icon badges, enhancing visual clarity and readability.

3. An 8-field creation form: The skill revamped the form to require only a name, with the remaining fields accessible via an "Add more details" expander. Additionally, the skill introduced a smart default feature that prompted users to select a preset industry, which automatically populated the target audience and keywords fields. This reduction in required input streamlined the form-filling process.

4. A dead-end paywall: The skill replaced the abrupt message, "Your trial ended," with a card listing the features that were inaccessible due to the expiration of the trial. This change employed loss aversion by highlighting the specific elements that would no longer be available, prompting users to reconsider their actions.

5. Rendering bugs: The skill detected rendering issues through screenshots that might have gone unnoticed during manual code review. These issues included clipped borders on selected cards, an avatar obscured by a floating statistics card, and visually inconsistent blur effects behind the header. The skill's ability to identify these bugs underscored its effectiveness as a debugging tool.

Rather than simply aiming to "make it nicer," the skill provides a structured framework that ensures consistency throughout an application's design. This framework encodes an 8-point spacing grid, a 60/30/10 color system, named patterns (such as floating stat strips and grouped cards), and gradient headers. By adhering to these design principles, the skill transforms a series of isolated screens into a cohesive, consistent design system.

To utilize the skill, follow these steps:

1. Clone the repository containing the skill: https://github.com/ceorkm/mobile-app-ui-design.

2. Place the skill folder within the designated directory: Project: .claude/skills/name/SKILL.md or Personal (.claude/skills/name/SKILL.md).

3. Restart Claude Code to activate the skill.

Once installed, the skill can be employed by pointing it at a specific screen, issuing commands such as "Redesign the settings screen" and "Apply the design principles." The skill will then utilize its predefined rubric to review and revise the layout, respecting the established design principles. This iterative process allows for continuous refinement of the UI while maintaining a clear focus on the logical and routing aspects of the application.