ai-app-design-principles

name	ai-app-design-principles
description	Use when designing, redesigning, or reviewing an AI-generated app, website, or mobile UI and the user wants a polished, non-generic result using professional design principles: contrast, hierarchy, alignment, proximity, repetition, balance, white space, and unity. Trigger when the user asks to make a vibe-coded UI look premium, critique a screenshot, improve visual polish, or steer an agent's design output.
metadata	{"short-description":"Review AI app UIs with eight design principles","source":"https://expo.dev/blog/how-to-apply-professional-design-principles-in-ai-app-development"}

AI App Design Principles

Use this skill as a design-direction pass for AI-generated interfaces. It turns the eight classical design principles into a practical workflow for briefing, critiquing, and revising app screens so the result feels intentional instead of generic.

Source inspiration: Nicolas Solerieu's Expo article, "How to apply professional design principles in AI app development."

When To Use

Use this skill when:

• The user has an AI-generated UI that looks acceptable but generic, sterile, cluttered, or visually unresolved.
• The user wants a design critique of a screenshot, mockup, implementation, or generated app.
• The user asks for a stronger app design prompt before building a screen.
• The user wants a polished mobile, web, or Expo app interface without default template energy.

Do not use this skill for pure accessibility audits, brand strategy, content writing, or code-only layout bugs unless visual design judgment is part of the request.

Inputs

Ask for or infer:

• Product type, audience, and primary user action.
• Desired emotional tone, such as calm, premium, playful, fast, clinical, or trustworthy.
• Screenshot, mockup, live URL, or relevant UI files.
• Brand constraints: colors, type, imagery, logo, platform conventions.
• Target viewport: mobile, tablet, desktop, or responsive.

If there is no screenshot or render, review the UI code and request a rendered screenshot before making final visual claims.

Workflow

COPY THIS CHECKLIST and work through each step:

AI App Design Principles Workflow
- [ ] Step 1: Define design intent
- [ ] Step 2: Collect visual evidence
- [ ] Step 3: Run the eight-principle scan
- [ ] Step 4: Convert critique into agent instructions
- [ ] Step 5: Revise in focused passes
- [ ] Step 6: Run final unity audit

Step 1: Define Design Intent

State the screen's job in one sentence:

This screen should help [audience] do [primary action] while feeling [tone].

Name the intended focal point before judging details. A design cannot have good hierarchy or contrast until the primary action and emotional promise are clear.

Step 2: Collect Visual Evidence

Use real evidence, not imagination:

• For existing projects, inspect the rendered UI and capture screenshots at relevant breakpoints.
• For new builds, create a design brief before implementation.
• For screenshots, identify the screen type, primary CTA, secondary actions, content groups, and visible navigation.

Prefer direct visual review over abstract taste statements.

Step 3: Run The Eight-Principle Scan

Use resources/principles.md to evaluate:

Principle	Core Question
Contrast	What stands out first, and should it?
Hierarchy	Does the eye move through the screen in the right order?
Alignment	Do elements share intentional edges, axes, and grids?
Proximity	Are related items grouped and unrelated items separated?
Repetition	Do type, spacing, colors, shapes, and treatments form a system?
Balance	Is visual weight distributed with intention?
White space	Does the layout have enough breathing room for the product tone?
Unity	Does every choice feel like it belongs to the same product promise?

For each principle, write one sentence for what works and one sentence for what needs revision.

Step 4: Convert Critique Into Agent Instructions

Use resources/review-loop.md to convert findings into clear instructions. Avoid vague requests like "make it modern" or "make it cleaner."

Good instruction pattern:

Revise the screen so [principle] supports [business/user goal].
Specifically:
- Change [element] from [current issue] to [desired treatment].
- Preserve [working design choice].
- Do not change [constraint].

Step 5: Revise In Focused Passes

Do not try to fix all eight principles at once. Use this order unless the screen has an obvious emergency:

1. Contrast and hierarchy: make the primary path obvious.
2. Alignment and proximity: repair structure and grouping.
3. Repetition: turn isolated choices into a system.
4. Balance and white space: tune the composition.
5. Unity: remove anything that does not support the product promise.

After each pass, inspect the rendered result before continuing.

Step 6: Run Final Unity Audit

The final question is not "does this include all eight principles?" It is:

Does the screen now feel intentional, coherent, and specific to this product?

If the answer is no, identify the one or two principles causing the break and run another focused pass.

Output Format

When reviewing a UI, respond with:

## Design Intent
[One sentence]

## Top Fixes
1. [Highest-impact fix]
2. [Second fix]
3. [Third fix]

## Eight-Principle Scan
- Contrast: [works] / [revise]
- Hierarchy: [works] / [revise]
- Alignment: [works] / [revise]
- Proximity: [works] / [revise]
- Repetition: [works] / [revise]
- Balance: [works] / [revise]
- White space: [works] / [revise]
- Unity: [works] / [revise]

## Agent Instructions
[Concrete patch or generation instructions]

Guardrails

• Do not equate polish with decoration. The goal is stronger visual decisions, not more effects.
• Do not use every color, font weight, radius, shadow, and gradient available.
• Do not add cards or borders to solve proximity when spacing and grouping would be cleaner.
• Do not judge visual quality from code alone when a screenshot can be rendered.
• Do not let secondary content compete with the primary action.
• Do not preserve an AI-generated layout simply because it is functional.

Validation

Use resources/evaluators/rubric_ai_app_design_principles.json after a design pass. A publishable result should average at least 4.0 and have no criterion below 3.