interface-design-taste

name: interface-design-taste description: "Design high-quality product apps, marketing sites, dashboards, and desktop UI. Use for art direction, critique, redesign, hierarchy, layout, typography, color, motion, or lightweight design systems. Do NOT use for logos, illustration-only work, image prompts, or backend-only tasks." compatibility: "Requires: markdown-reading support. Optional: access to the target repo, screenshots, and local build tooling." metadata: version: "1.0.0" short-description: "Product-appropriate interface taste for web, app, and desktop design" openclaw: category: "design" subcategory: "interface-design" tags: ["ui", "ux", "web", "desktop", "design-system", "redesign"] references:

• principles
• style-families
• layout-and-rhythm
• typography-and-copy
• color-material-and-iconography
• interaction-motion-and-states
• platform-adaptation
• critique-workflow
• design-systems-and-tokens
• gotchas

interface-design-taste

Build interfaces that feel deliberate, product-appropriate, and structurally clear instead of generic, noisy, or under-designed.

Decision Tree

What kind of design problem are you solving?

• Need a direction from scratch for a site, app, or desktop product

  • Read references/principles.md
  • Then read references/style-families.md

• Need to improve an existing interface without rewriting everything blindly

  • Read references/critique-workflow.md
  • Then branch into the weakest layer: layout, typography, color, motion, or platform fit

• Need stronger hierarchy, composition, spacing, or screen structure

  • Read references/layout-and-rhythm.md

• Need better type choices, copy tone, labels, or information cadence

  • Read references/typography-and-copy.md

• Need a tighter palette, clearer surfaces, better icons, or more intentional imagery

  • Read references/color-material-and-iconography.md

• Need hover/focus/active states, transitions, onboarding flow polish, or motion guidance

  • Read references/interaction-motion-and-states.md

• Need platform-specific guidance for marketing web, product web, or desktop UI

  • Read references/platform-adaptation.md

• Need to turn the design direction into reusable tokens and component rules

  • Read references/design-systems-and-tokens.md
  • Use templates/design-brief-template.md

• Need traps, failure modes, or "why does this still feel off?" answers

  • Read references/gotchas.md

Quick Reference

Default Workflow

1. Identify the artifact first: marketing page, content page, product surface, dashboard, or desktop tool.
2. Set the taste axes before talking about components.
3. Choose one dominant visual thesis for the screen. Do not stack multiple vibes.
4. Solve hierarchy, states, and platform fit before adding flourish.
5. Translate the direction into reusable tokens and component rules once the screen logic is working.

Taste Axes

Set these five axes explicitly when the user has not already done it. They prevent vague "make it nicer" work.

Use the axes as planning variables, not as decoration knobs. A dense desktop tool can still be calm. A marketing page can still be restrained.

Operating Rules

1. Fit the product before fitting a trend. The right answer for a workflow tool is not the same as the right answer for a launch page.
2. Establish hierarchy at three distances: page structure, section structure, and component structure.
3. Treat states as part of the design, not implementation leftovers. Empty, loading, success, error, hover, focus, and selected states all count.
4. Use motion to clarify change, sequence, or causality. If motion exists only to look expensive, cut it.
5. Keep the visual vocabulary tight. Repetition creates identity; one-off flourishes create noise.
6. Prefer specific, believable copy and realistic data over placeholder language.

Platform Guardrails

• Marketing web:

  • Allow more dramatic pacing and asymmetry.
  • Let imagery and motion carry more narrative weight.

• Product web:

  • Favor navigational clarity, repeated tasks, and fast scanability.
  • Keep decorative motion below the level of interaction feedback.

• Desktop:

  • Design for density, keyboard use, secondary controls, and longer sessions.
  • Do not import landing-page hero logic into tool surfaces.

Read references/platform-adaptation.md before applying a single visual language unchanged across all three.

Review Questions

Before you finalize a direction, answer these:

1. What is the first thing the user should notice in under two seconds?
2. What would disappear if you removed 20% of the chrome?
3. Which states are still undesigned?
4. Does the interface feel like the product category, or like a generic AI demo?
5. Would this still hold up with real content, messy data, and long labels?

Gotchas

1. A beautiful hero does not rescue a weak working surface.
2. Extra shadows do not create hierarchy if the grouping is wrong.
3. More accent colors usually reduce confidence rather than increase richness.
4. Dense interfaces fail from rhythm problems more often than from lack of whitespace.
5. Desktop tools need affordances for precision, not just prettier cards.
6. Motion without state logic reads as theater.
7. A design system created too early can freeze a bad direction into reusable parts.

Reading Guide

Helper Files

• references/README.md — reference index and routing overview
• templates/design-brief-template.md — reusable brief for new work
• templates/critique-scorecard.md — audit and redesign worksheet
• scripts/validate.py — structural validator for this skill
• scripts/test_skill.py — packaging and content coverage checks