AgentSkillsCN

frontend-design

运用自适应复杂度，打造独具特色、符合生产级标准的前端界面。当用户提出构建网页组件、页面或应用时，可运用此技能。在适当场合，借助 Antigravity 工具生成富有创意、精雕细琢的代码，助力作品达到 Awwwards 水准。

SKILL.md
--- frontmatter
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with Adaptive Complexity. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that leverages Antigravity tools for Awwwards-level execution where appropriate.
license: Complete terms in LICENSE.txt

This skill guides the creation of distinctive, production-grade frontend interfaces. It implements real working code with exceptional attention to aesthetic details and creative choices, scaling from refined utility to immersive cinematic experiences.

Adaptive Design Tiers

Before coding, commit to an Aesthetic Intensity based on the project needs:

  1. •

    Refined Precision: (Default for tools/dashboards)

    • •Focus: High-quality typography, generous negative space, and logical flow.
    • •Vibe: Minimal, technical, and precise.
    • •Tech: Clean CSS, subtle transitions.
  2. •

    Interactive Depth: (Default for modern marketing/landing pages)

    • •Focus: Micro-interactions, custom textures, and nuanced motion.
    • •Vibe: Premium, tactile, and professional.
    • •Tech: CSS Variables, glassmorphism, subtle GSAP entries.
  3. •

    Immersive Kinetic: (For high-impact "Awwwards-level" experiences)

    • •Focus: Choreographed storytelling, scroll-linked animations, and non-linear layouts.
    • •Vibe: Cinematic, experimental, and unforgettable.
    • •Tech: GSAP + ScrollTrigger, Lenis (Smooth Scroll), Shaders, Typography masking.

Frontend Aesthetics Guidelines

  • •Typography as Art: Move beyond basic fonts. Use variable font animations, vertical text, or text-masking for kinetic effects in Higher Tiers.
  • •Spatial Composition: Break the box. Use asymmetrical layouts, overlapping elements, and diagonal flows for Cinematic designs.
  • •Motion Logic: In Higher Tiers, treat every section as a "Scene." Use staggered reveals and scroll-triggered physics.
  • •Atmospheric Backgrounds: Create depth using CSS filters, SVG noise, or gradient meshes rather than solid colors.

NEVER settle for "AI-generated" cliches (purple gradients, Inter font exclusively, standard 12-column grids). Push for a unique point-of-view in every generation.