AgentSkillsCN

distinctive-frontend-design

以大胆前卫的设计理念与精益求精的视觉细节，打造独具特色、具备生产级水准的前端界面。当用户提出 UI、页面、组件或前端构建需求，并期望设计既令人难忘又不落俗套时，可选用此方案。

SKILL.md
--- frontmatter
name: distinctive-frontend-design
description: Creates distinctive, production-grade frontend interfaces with a bold aesthetic direction and meticulous visual detail. Use when the user requests a UI, page, component, or frontend build and expects memorable, non-generic design.

Distinctive Frontend Design

Quick Start

When a frontend UI is requested, commit to a bold aesthetic direction and execute it with production-grade code. Avoid generic "AI slop" visuals and predictable layouts.

Design Thinking (before coding)

Answer these in the response before implementing:

  • •Purpose: What problem does this interface solve and for whom?
  • •Tone: Choose a strong, specific aesthetic (minimal, maximalist, retro-futuristic, editorial, brutalist, luxury, organic, etc.).
  • •Constraints: Framework, performance, accessibility, and any technical limits.
  • •Differentiation: Identify the one unforgettable visual element or interaction.

Commit to the direction and design every detail to reinforce it.

Implementation Rules

  • •Implement working code (HTML/CSS/JS or framework) that matches the aesthetic.
  • •Use CSS variables for palette and spacing consistency.
  • •Favor intentional layouts: asymmetry, overlap, diagonal flow, grid breaks, or controlled negative space.
  • •Add atmosphere: gradient meshes, noise, textures, layered transparencies, borders, or shadows when aligned with the direction.
  • •Keep the visual system cohesive: colors, type, motion, and spacing all reinforce the same idea.

Typography

  • •Pair a characterful display font with a refined body font.
  • •Avoid generic fonts (Arial, Roboto, Inter, system defaults) and overused modern defaults.
  • •Typography must be a core visual driver, not an afterthought.

Color & Theme

  • •Use a dominant color with sharp accents; avoid timid evenly-distributed palettes.
  • •Do not default to generic purple gradients on white.
  • •Use CSS variables to enforce discipline.

Motion

  • •Prefer CSS-only animations for HTML; use a motion library for React if already available.
  • •Prioritize high-impact moments: a page-load reveal with staggered animation-delay is better than scattered micro-effects.
  • •Use hover/scroll states that reinforce the tone (e.g., precise, chaotic, soft, mechanical).

Spatial Composition

  • •Break the grid when appropriate.
  • •Mix scale shifts (large hero + tiny metadata) and layered elements.
  • •Choose either generous negative space or controlled density, not both.

Anti-Patterns to Avoid

  • •Cliche layouts and component patterns.
  • •Generic, evenly-spread color schemes.
  • •Overused font pairings or default design system choices.
  • •Visuals that do not feel tailored to the context.

Quality Checklist

Before finishing:

  • •Aesthetic direction is stated and obvious in the UI.
  • •One memorable detail stands out.
  • •Code is production-grade and functional.
  • •Motion, color, and type all reinforce the same concept.