AgentSkillsCN

frontend-design

创建大胆、高端、生产级前端界面，以专业 UI/UX 设计师和前端工程师的思维模式打造。当用户要求设计或重新设计必须感觉有意图、独特且非通用的 Web 界面（组件、页面、仪表板或应用）时使用此技能。 该模型应积极从广泛的现实世界设计参考中汲取灵感（例如现代产品界面、编辑版面、设计系统、实验性网页设计、Pinterest、Awwwards、Dribbble 等平台上的趋势），但不复制任何单一来源。 输出必须是真实、可实施的代码，但应避免僵硬、模板化或过于对称的“AI 风格”组件。布局、间距、排版、层级和交互模式应感觉经过设计而非生成。 更倾向于强烈的视觉方向、深思熟虑的 UX 决策和受控实验，而非安全或传统的 UI 模式。

SKILL.md
--- frontmatter
name: frontend-design
description: Create bold, high-end, production-grade frontend interfaces with the mindset of a professional UI/UX designer and frontend engineer.
  This skill is used when the user asks to design or redesign web interfaces
  (components, pages, dashboards, or applications) that must feel intentional,
  distinctive, and non-generic.

  The model should actively draw inspiration from a wide range of real-world design
  references (e.g. modern product interfaces, editorial layouts, design systems,
  experimental web design, trends seen on platforms like Pinterest, Awwwards, Dribbble),
  without copying any single source.

  The output must be real, implementation-ready code, but should avoid rigid,
  template-like, or overly symmetric “AI-looking” components. Layouts, spacing,
  typography, hierarchy, and interaction patterns should feel designed, not generated.

  Preference is given to strong visual direction, thoughtful UX decisions, and
  controlled experimentation over safe or conventional UI patterns.

This skill guides 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.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

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 clear extreme: brutally minimal, maximalist chaos, luxury/refined, brutalist/raw, retro-futuristic, organic/soft, etc.
  • •Constraints: Technical requirements (framework, performance, accessibility).
  • •Differentiation: What makes this UNFORGETTABLE?

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

Then implement 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

Frontend Aesthetics Guidelines

Focus on:

  • •Typography: Choose distinctive fonts. Avoid Arial/Inter/Roboto. Pair a bold display font with refined body font.
  • •Color & Theme: Commit to cohesive aesthetic. Use CSS variables. Dominant colors with sharp accents outperform timid palettes.
  • •Motion: High-impact animations for page load with staggered reveals. Use CSS @keyframes for HTML, Framer Motion for React.
  • •Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements.
  • •Backgrounds & Visual Details: Create atmosphere with gradient meshes, noise textures, patterns, layered transparencies, shadows.

NEVER use generic AI aesthetics: Inter/Roboto/Arial fonts, purple gradients on white, predictable layouts, cookie-cutter design lacking context-specific character. No design should be the same. NEVER converge on common choices (Space Grotesk, etc.).

IMPORTANT: Match code complexity to vision. Maximalist = elaborate animations. Minimalist = restraint and precision.

Design Process

Discovery → Understand requirements, audience, constraints → Define 3 key visual principles Concept → Choose aesthetic direction → Select fonts (1-2), colors (3-5), spacing scale Implement → Design tokens → Semantic HTML → Visuals → Motion → Polish Verify → Accessibility, responsiveness, performance

Design Token Detection

Before implementing, check if user's project has existing design tokens:

Check: tailwind.config.js, CSS :root variables, theme.js, styles/variables.css, styled-components themes

If found: Extract and use existing colors/typography/spacing. Follow naming conventions. Only add new tokens for gaps. If not found: Use templates/design-tokens-template.css or create inline matching chosen aesthetic.

Accessibility (Non-Negotiable)

WCAG 2.1 AA required. Creative freedom in aesthetics, NOT accessibility.

  • •Contrast: 4.5:1 text, 3:1 UI
  • •Keyboard: Tab/Enter/Escape work, visible focus, no traps
  • •Semantic HTML: h1-h6 hierarchy, landmarks, alt text
  • •Motion: @media (prefers-reduced-motion: reduce) for all animations
  • •Forms: Labels for all inputs, clear error messages

Rule: Accessibility wins. External ref: https://www.w3.org/WAI/WCAG21/quickref/

Responsive Design

Mobile-first. Breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl).

  • •Fluid typography: clamp(1rem, 0.5rem + 2vw, 2rem)
  • •CSS Grid/Flexbox over fixed widths
  • •Touch targets: 44x44px minimum
  • •Test on real devices

Technical Patterns

Design Tokens: Follow this structure: fonts, colors, spacing, radius, shadows, animation timings (see templates/design-tokens-template.css for reference)

Animations:

  • •HTML/CSS: @keyframes with animation-delay for staggered effects
  • •React: Framer Motion for complex, CSS for simple
  • •Only animate transform/opacity

Code Quality:

  • •Semantic HTML (header, nav, main, article, section)
  • •BEM or Tailwind utilities
  • •Mobile-first CSS, no !important
  • •Performance: <50kb CSS, <3.5s TTI

Delivery Checklist: ✓ All states (hover/focus/loading/error) ✓ Responsive ✓ Accessible ✓ No console errors