# Design Product Surface Art Direction

> Art-direct a dashboard, workspace, settings page, or operator surface through hierarchy, density, component ranking, and workflow clarity.

- Skill: `contextgo/design-product-surface-art-direction` (Agent Skill)
- Install (CLI): `npx skillmds@latest add contextgo/design-product-surface-art-direction`
- Raw SKILL.md: https://api.skillmd.com/api/skills/contextgo/design-product-surface-art-direction/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: contextgo (https://skillmd.com/u/contextgo)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/contextgo/design-product-surface-art-direction

---


# 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`