AgentSkillsCN

design-excellence

以视觉化的设计思维打造生产就绪的UI。在新建页面、组件，或为任何面向用户的界面进行样式设计时使用。

SKILL.md
--- frontmatter
name: design-excellence
description: "Visual design thinking for production-ready UI. Use when building new pages, components, or styling any user-facing interface."
user-invocable: false

Design Excellence

Before writing CSS or choosing colors, decide on a clear aesthetic direction and commit to it.

Design Thinking

  • •Purpose: What problem does this interface solve? Who uses it?
  • •Tone: Pick a direction -- minimal, bold, editorial, playful, luxury, brutalist, organic. Commit fully.
  • •Differentiation: What makes this memorable? What's the one thing a user will notice?

Principles

  • •Color discipline: Pick a small, intentional palette (primary + neutrals + accent). Define as CSS custom properties. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
  • •Typography hierarchy: Pair a distinctive heading font with a readable body font. Use weight and size to create clear visual hierarchy.
  • •Spatial composition: Use an 8pt spacing system. Be generous with whitespace. Consider asymmetry and grid-breaking elements where appropriate.
  • •Motion: Focus on high-impact moments (page load reveals, hover states) rather than scattered micro-interactions. Keep transitions 200-300ms.
  • •Accessibility: Semantic HTML, 4.5:1 contrast ratio, keyboard navigation, 44px touch targets.

Mobile First

Design for 375px, then enhance for 768px and 1440px. Use CSS Grid/Flexbox for fluid layouts. Cap content width at 1200-1440px.

Avoid

  • •Generic AI aesthetics (purple gradients on white, Inter/Roboto defaults, cookie-cutter card layouts)
  • •Decorative filler with no purpose (random gradient circles, blurry blobs, geometric noise)
  • •Copying the template's visual identity -- create something original

Every interface should feel intentionally designed for its specific context.