AgentSkillsCN

frontend-design

打造兼具高设计水准与独特性的生产级前端界面。适用于被要求构建网页组件、页面或应用时使用。生成富有创意、精雕细琢的代码，避免落入千篇一律的 AI 风格。

SKILL.md
--- frontmatter
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when asked to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Frontend Design

This skill guides the creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

  • •Purpose: What problem does this interface solve? Who uses it?
  • •Tone: Pick a distinct flavor: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc.
  • •Constraints: Technical requirements (framework, performance, accessibility).
  • •Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Implement working code that is:

  • •Production-grade and functional
  • •Visually striking and memorable
  • •Cohesive with a clear aesthetic point-of-view
  • •Meticulously refined in every detail

Frontend Aesthetics Guidelines

Typography

  • •Choose fonts that are beautiful, unique, and interesting.
  • •Avoid generic fonts like Arial, Roboto, or Inter.
  • •Opt for distinctive choices (e.g., from Google Fonts or similar) that elevate the aesthetics.
  • •Pair a distinctive display font with a refined body font.

Color & Theme

  • •Commit to a cohesive aesthetic. Use CSS variables for consistency.
  • •Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
  • •Vary between light and dark themes based on the chosen tone.

Motion

  • •Use animations for effects and micro-interactions.
  • •Prioritize CSS-only solutions for vanilla HTML/CSS.
  • •Use libraries like Framer Motion for React when available.
  • •Focus on high-impact moments: staggered reveals on load, scroll-triggered states, and surprising hover interactions.

Spatial Composition

  • •Use unexpected layouts: asymmetry, overlap, diagonal flow, grid-breaking elements.
  • •Balance generous negative space with controlled density.

Backgrounds & Visual Details

  • •Create atmosphere and depth rather than defaulting to solid colors.
  • •Apply creative forms: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, custom cursors, and grain overlays.

What to Avoid

  • •Generic AI Aesthetics: Overused font families (Inter, Roboto, Arial, system fonts).
  • •Cliche Color Schemes: Purple gradients on white backgrounds.
  • •Predictable Layouts: Cookie-cutter design that lacks context-specific character.

Interpret requirements creatively. No two designs should look the same. Match implementation complexity to the aesthetic vision.