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 the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt

Frontend Design Skill

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic, repetitive AI-generated aesthetics.

What it is

A design-focused skill that combines strong visual direction with solid implementation. It is used when building web components, pages, or full applications.

What it does

  • •Clarifies purpose, audience, and constraints before coding.
  • •Commits to a bold aesthetic direction rather than generic defaults.
  • •Chooses typography, color, motion, and layout intentionally.
  • •Produces working, production-ready frontend code.
  • •Prioritizes memorable, cohesive design over boilerplate.

Why it is important

Generic AI-generated frontends tend to converge on the same fonts, colors, and layouts. This creates forgettable interfaces and can hide usability problems. A deliberate, skill-driven approach produces frontends that are distinctive, usable, and aligned with the project’s goals.

Process

  1. •

    Understand context

    • •Clarify what problem the interface solves and who will use it.
    • •Identify technical constraints (framework, performance, accessibility, integration points).
  2. •

    Choose a bold aesthetic direction

    • •Pick a clear tone, for example:
      • •Brutally minimal.
      • •Retro-futuristic.
      • •Editorial or magazine-like.
      • •Luxury and refined.
      • •Playful or toy-like.
      • •Industrial or utilitarian.
    • •Commit to that direction and use it to drive all visual decisions.
  3. •

    Define core visual system

    • •Typography: choose distinctive, characterful fonts and pair a display font with a refined body font.
    • •Color and theme: define CSS variables for a cohesive palette with a clear hierarchy.
    • •Motion: identify key moments for animation (such as initial load, hover states, or transitions).
    • •Spatial composition: decide how to use grid, negative space, overlap, and asymmetry.
  4. •

    Implement the interface

    • •Write real, working code in the requested stack (HTML/CSS/JS, React, Vue, etc.).
    • •Reflect the chosen aesthetic in every detail (spacing, borders, shadows, backgrounds).
    • •Avoid overused defaults such as standard system fonts and generic purple gradients.
  5. •

    Refine and iterate

    • •Check for visual coherence across breakpoints.
    • •Validate accessibility basics (contrast, focus states, keyboard navigation where relevant).
    • •Adjust motion and interactions to feel purposeful rather than distracting.

Guidelines

  • •Do not default to the same fonts and colors across projects.
  • •Use animations where they add value; avoid constant, distracting motion.
  • •Match implementation complexity to the chosen aesthetic:
    • •Minimalist designs require careful attention to alignment, spacing, and subtle details.
    • •Maximalist designs may justify more complex animations and layered visuals.

This skill is designed to be portable across harnesses and should be loaded whenever a project requires high-quality frontend design.