What problem does it solve?
Generic AI-generated websites often look templated, use fake testimonials and logo walls, and ship broken motion or accessibility. This Skill enforces a disciplined art-direction and implementation workflow so landing pages, portfolios, and marketing sites have an original visual identity, honest assets, and robust motion behavior.
Core Features & Use Cases
- Art Direction System: Defines a visual thesis, type hierarchy, color system, and motion narrative before any code is written, with strict rules against copying reference designs.
- Motion & WebGL Guardrails: Uses GSAP with exactly one smooth-scroll engine (Lenis or Locomotive Scroll), reduced-motion fallbacks, and purpose-driven Three.js shaders with full resource cleanup.
- Honest Asset Rules: Requires original or licensed imagery, real photo avatars, Solar icons via Iconify, and truthful logo usage with no fabricated social proof.
- Use Case: A designer asks an agent to build a cinematic product landing page; the Skill produces a complete semantic page with a choreographed hero, scroll-triggered sections, accessible split text, and validated performance.
Quick Start
Use the build-awwwards-quality-sites skill to create an art-directed, motion-rich landing page for my product with original imagery and reduced-motion fallbacks.
