AgentSkillsCN

frontend-design

打造兼具高设计水准的差异化生产级前端界面。当用户提出构建 Web 组件、页面、宣传物料、海报，或开发各类应用（如网站、着陆页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式美化与优化）时，可运用此技能。生成富有创意、精致优雅的代码与 UI 设计，有效规避千篇一律的 AI 风格。

SKILL.md
--- frontmatter
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Frontend Design

Create 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 an extreme—brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
  • •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.

Implementation Requirements

Produce working code (HTML/CSS/JS, React, Vue, etc.) that is:

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

Aesthetic Guidelines

Typography

Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial, Inter, Roboto. See references/typography.md for distinctive font pairings.

Color & Theme

Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.

Motion

Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.

  • •CSS-only solutions for HTML
  • •Motion library for React when available
  • •Use animation-delay for staggered reveals
  • •Scroll-triggering and hover states that surprise

Spatial Composition

  • •Unexpected layouts
  • •Asymmetry and overlap
  • •Diagonal flow
  • •Grid-breaking elements
  • •Generous negative space OR controlled density

Backgrounds & Visual Details

Create atmosphere and depth:

  • •Gradient meshes, noise textures, geometric patterns
  • •Layered transparencies, dramatic shadows
  • •Decorative borders, custom cursors, grain overlays

Anti-Patterns (NEVER Use)

  • •Overused fonts: Inter, Roboto, Arial, system fonts
  • •Clichéd color schemes: purple gradients on white
  • •Predictable layouts and component patterns
  • •Cookie-cutter design lacking context-specific character

Complexity Matching

Match implementation complexity to the aesthetic vision:

  • •Maximalist designs: Elaborate code with extensive animations and effects
  • •Minimalist designs: Restraint, precision, careful attention to spacing, typography, and subtle details

See references/aesthetic-examples.md for implementation patterns.