awesome-ai-prompts

mobile UI auditspec

One prompt from the awesome-ai-prompts catalog, ready to paste into your AI coding agent.

Copy-paste the block below into any AI coding agent to audit a mobile UI at spec level: platform conventions, touch targets, safe areas, accessibility, states, and theming - with evidence-backed findings that cite exact file:line and a verifiable fix for each one. Mobile UI lives on the device, so the audit runs on a real screen, not a web-inspector view of a portrait render.

Keywords: mobile ui, tap targets, safe area, platform guidelines, polish, small screens

Audit the UI of `[screen / flow / feature]` in this mobile project against the
platform conventions it must run on (iOS and/or Android) and the project's own
design conventions. Produce a prioritized list of findings, each with a
concrete fix that can be checked against the codebase - not a style wishlist.

## Define the scope first

1. **Platforms and devices** - Which platforms are in scope, the OS version
   floor, and the concrete devices and screen sizes to audit (small phone,
   large phone, tablet if in scope).
2. **Screens and flows** - The specific screens, routes, and flows to cover.
3. **Design conventions in use** - The tokens, theme, and component
   conventions the project follows. If none exist, say so and recommend one; do
   not invent one.
4. **Out of scope** - Anything explicitly excluded.

Do not begin until the scope and conventions are defined and confirmed.

## What to produce

A findings report covering every in-scope screen, grouped by the dimension
below. Each finding carries file:line, the current value, the correct value,
and the exact change needed, backed by a screenshot where the claim is visual.
Work the dimensions in order; stop on a broken layout before moving to spacing
nuance.

1. **Platform conventions** - Layout, controls, and navigation follow the
   platform idiom (iOS or Android): tab bar vs bottom nav, back affordance,
   swipe-back, pickers and dialogs, feedback patterns. Flag inverted or mixed
   conventions.
2. **Touch targets and hit areas** - Every interactive element is at least
   44x44 pt (iOS) / 48 dp (Android), with the real tappable bounds equal to or
   larger than the visual bounds, never smaller. Flag undersized targets and
   overlapping hit areas.
3. **Safe areas and cutouts** - Content clears the notch, camera cutout,
   status bar, home indicator, and rounded corners on the declared devices.
   Flag layouts that assume a full rectangle.
4. **Layout across sizes, density, and orientation** - Check on the declared
   devices at the densities they actually render (@1x/@2x/@3x), portrait and
   landscape. Flag clipped text, off-screen content, and fixed-pixel layouts
   that break on a smaller device.
5. **Keyboard and input** - Focused fields are never obscured by the keyboard,
   the layout responds when the keyboard opens, and fields use the right input
   type (email, number, phone) so the correct keyboard appears.
6. **States and feedback** - Loading, empty, error, success, offline, and
   retry states exist and are consistent. Interactive elements give visible
   feedback on tap; silent failures are flagged.
7. **Accessibility** - The UI holds at larger font and dynamic-type scales
   without clipped text, contrast meets the platform minimum, and every element
   is reachable by screen reader and keyboard. Flag touch-only dependencies.
8. **Theming** - If the project supports light/dark (or more) themes, each
   screen is checked in every supported theme. Hardcoded colors that break a
   theme are flagged.

## Method

1. **Read the design architecture first** - Find the token definitions, theme,
   and shared components before auditing. You audit against the project's own
   system, not an invented one.
2. **Read each screen's layout and style code** - Note dimensions, colors, and
   constraints with the specific file:line and value for every deviation.
3. **Run it, do not just read it** - On each declared platform, run the app on
   a device or simulator at the declared OS, in portrait and landscape, at the
   large font scale and in each theme. Capture screenshots as evidence.
4. **Group findings by dimension** - Organize everything under its audit
   dimension, not as a flat list.
5. **Show the fix, not just the problem** - For each finding: file:line, the
   current value, the correct value, and the exact change. If a token or shared
   component should be used, name it.

## Verification

- [ ] Every finding cites a specific file:line, not a vague location.
- [ ] No finding invents a platform or design convention the project does not
      have; missing conventions are reported, not assumed.
- [ ] Findings are prioritized: broken layouts, unreadable text, and
      unreachable controls first, minor spacing and typography nits last.
- [ ] Each platform in scope was run (device or simulator), not only read in
      code.
- [ ] Touch targets, safe areas, and large font scale were checked on every
      in-scope screen.
- [ ] Intentional, documented design choices are not flagged unless they
      conflict with a platform requirement.
- [ ] If the UI already meets the conventions within scope, that is stated
      explicitly with what was verified, not padded with invented issues.

## Rules

- State the scope, platforms, devices, and conventions before auditing. Do not
  audit a moving target.
- Never report "could be more consistent" without specifying what is
  inconsistent, where it is, and what the correct value should be.
- Never invent tokens, components, or platform guidelines the project does not
  have.
- Do not flag intentional, documented design choices as errors.
- Prioritize by user impact: a clipped screen at large font scale outranks a
  2pt spacing nit.
- If the UI is already consistent within scope, say so and list what was
  verified - do not invent issues to fill the report.

More mobile-dev prompts