ui-taste git:20260708.5e39c69B

Immutable. This exact content is served forever at /api/v1/blob/469956261ac1ae05.

---
ownerAgent: bcfcb4921dce
name: ui-taste
description_zh: "提升 UI 审美判断，覆盖反模板、视觉密度、动效强度、领域化视觉签名和高质量界面 critique。"
description_en: "Improve UI taste judgment across anti-template critique, visual density, motion intensity, domain-specific signature, and high-quality interface review."
category: rnd
---

# ui-taste

Use this skill to keep UI work from becoming generic. It adapts Taste Skill-style visual judgment into concrete product UI decisions.

## Visual Thesis

Before rendering a design, define:

- `product_type`: operational tool, creative workspace, consumer product, developer tool, marketplace, education, finance, content, or brand site.
- `audience_pressure`: speed, trust, comparison, learning, creativity, delight, or compliance.
- `primary_workflow`: the action users repeat.
- `density`: compact, balanced, spacious, or editorial.
- `tone`: 2 precise words, not "modern" or "clean" alone.
- `signature_device`: one subject-specific visual rule, not decoration.
- `anti_template_rejection`: what generic idea you rejected.

A design without a thesis becomes default SaaS UI.

## Anti-Template Rejections

Reject these unless they are explicitly justified:

- Purple-blue neon gradients for AI products.
- Glass panels, blur-heavy surfaces, and decorative bokeh.
- Generic bento grids for tools that need workflow density.
- Floating page-section cards.
- Cards inside cards.
- Oversized hero sections for apps, dashboards, editors, or tools.
- Monochrome one-hue palettes made from tints of a single color.
- Decorative orbs, blobs, and abstract SVG backgrounds.
- Tiny badges and over-dense microcopy replacing clear hierarchy.
- Motion everywhere instead of meaningful motion.

## Domain Fit

Match the UI to the work:

- SaaS operations: quiet, dense, fast scanning, predictable controls.
- Developer tools: precise type, code/data affordances, clear states, restrained contrast.
- Finance/trading: tabular clarity, risk status, high density, strong alignment.
- Creative tools: canvas-first, toolbars, palettes, shortcuts, direct manipulation.
- Education: progression, feedback, explanations, gentle structure.
- Ecommerce: product inspection, comparison, trust, conversion, clear imagery.
- Brand/editorial: stronger typography and imagery, but only if the first viewport communicates the object or offer.

## Variation Controls

Adjust deliberately:

- Visual density: information per viewport.
- Contrast: calm, standard, high.
- Motion intensity: none, subtle, expressive.
- Shape language: sharp, practical, soft, playful.
- Surface depth: flat, bordered, raised, layered.
- Type personality: neutral, technical, editorial, humanist, display-led.

Use only 1-2 expressive axes at a time. If everything is expressive, nothing is readable.

## Good-Taste Checks

Before delivery, ask:

- Can a target user complete the main task without reading an explanation?
- Is the primary action obvious?
- Does hierarchy come from layout and type, not decoration?
- Does the page look specific to this product, not any startup?
- Are there enough real states to judge the interface?
- Does mobile still feel designed, not squeezed?
- Is there one memorable visual choice, and does it help the work?

## Reporting

When describing design direction, include:

- Visual thesis.
- Signature device.
- Rejected generic choice.
- Density and motion settings.
- One tradeoff the design makes intentionally.