contextgo 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-selectiondesign-system-distillationdesign-system-adaptationdesign-handoff-brief