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:
- 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.
- 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.
- 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.
Antigravity Integration Workflow
You MUST leverage Antigravity's specific tools to enhance the design process:
- Aesthetic Start (
task_boundary): Before writing code, use a task boundary to propose the Design Tier, Color Palette, and Typography (The "Aesthetic North Star"). Get sign-off vianotify_user. - Bespoke Assets (
generate_image): Use this tool to create context-aware textures (grain, noise), abstract background meshes, or hero illustrations. NEVER use generic placeholders. - Visual Validation (
browser_subagent): After implementation, use the subagent to perform "Visual QA" across Mobile, Tablet, and Desktop. - Proof of Motion (
walkthrough.md): Embed recordings from thebrowser_subagentin your walkthrough to demonstrate smooth performance and animation transitions.
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.