stacks-design-taste-codex

What problem does it solve?

Generic AI-generated frontends suffer from severe layout biases, repetitive generic structures, invisible button text, dead bento grid cells, and cheap meta-labels that fail to meet premium brand standards. This Skill eliminates those issues by enforcing strict, deterministic design rules tailored for high-end Stacks frontend work, including landing pages, portfolios, and marketing sections.

Core Features & Use Cases

• Strict AIDA Page Structure: Enforces Attention (hero), Interest (gapless bento grid), Desire (scroll-driven motion sections), and Action (high-contrast CTA) structure for all marketing and editorial pages.
• Deterministic Layout Variance: Uses seeded server-side selection to avoid repetitive generic layouts, ensuring every brief renders a unique, composed design without random client-side flicker.
• Zero External Motion Libraries: All scroll-driven animations use pure CSS view()/scroll() timelines and Stacks composables, with no imports of GSAP, Framer Motion, or other external libraries.
• Use Case: A SaaS team building a public landing page can use this Skill to guarantee a non-generic, award-worthy design with proper hero line limits, gapless bento grids, WCAG-compliant CTAs, and performant scroll animations, avoiding the common pitfalls of AI-generated frontend code.

Quick Start

Use the stacks-design-taste-codex skill to generate a premium landing page for your SaaS product with enforced AIDA structure, gapless bento grids, and deterministic scroll-driven motion, following all strict anti-slop design rules.