Design Product Surface Art Direction

Use this skill when the design problem is not persuasion but repeated, reliable use.

Read ../../references/page-lenses.md before proceeding.

Use when

• The task is a dashboard, workspace, settings page, list, form, or operator tool.
• The current surface feels visually noisy, under-ranked, or inefficient to use.
• The product needs a clearer shell, hierarchy, or density model.

Do not use when

• The page is primarily a public marketing page.
• The task is a generic "make it more modern" request with no working-surface context.

Product-surface failures to avoid

• making everything equally prominent
• importing landing-page drama into dense work surfaces
• confusing decorative polish with workflow clarity
• adding too many card layers and borders
• ignoring empty, loading, error, and success states

Workflow

1. Map the core workflow

Clarify:

• highest-frequency tasks
• critical information
• secondary information
• irreversible or high-risk actions

2. Define the shell

Decide:

• navigation pattern
• page header strategy
• panel structure
• where global controls live

3. Rank the content

Make explicit:

• primary blocks
• secondary blocks
• supporting metadata
• what should collapse or defer

4. Set density rules

Choose where the product should be:

• spacious for clarity
• compact for throughput
• mixed by zone

5. Check the state model

Specify expectations for:

• loading
• empty
• success
• warning
• error

Output format

Return:

1. Surface goal

• primary users
• core tasks

2. Shell direction

• navigation
• page structure
• global controls

3. Hierarchy and density

• what leads
• what supports
• where to compress

4. Component priorities

• tables, cards, forms, panels, actions

5. State behavior

• empty, loading, error, success

6. Risks and anti-patterns

• what would make the surface slower or more confusing

Use together with

• design-style-archetype-selection
• design-system-distillation
• design-system-adaptation
• design-handoff-brief