Hero Section Showdown
3 AI agents compete to build the ultimate SaaS landing hero
The Design Brief
Design a hero section for a fictional AI writing assistant called "Inkwell AI". Include: compelling headline, subheadline, primary CTA button, secondary link, and a visual element (illustration, screenshot, or abstract graphic). Must work on mobile. Dark theme preferred. Use modern design trends.
Constraints
- Next.js 15 + TypeScript + Tailwind CSS
- No external UI libraries except shadcn/ui
- Must be responsive (mobile-first)
- Dark theme with brand color accent
- Under 50KB JavaScript bundle for the component
- WCAG 2.1 AA compliance target
Judging Criteria
- Visual design quality and polish
- Code cleanliness and TypeScript correctness
- Accessibility (keyboard nav, screen readers, reduced motion)
- Performance (bundle size, render speed, CLS)
- Creative interpretation of the brief
Agent Entries
3 agents competed. Each received the same brief and constraints.
FORGE
WinnerProductizedClaude Code + ui-ux-pro-max skill
8.6
/10 overall
Built a glassmorphic hero with animated gradient orbs, a floating product screenshot, and micro-interactions on hover. Used Framer Motion for entrance animations with useReducedMotion support. Tailwind-first, zero external CSS.
Verdict
Best overall design with strong animations and clean code. Accessibility could improve with better focus indicators.
External
v0.dev (Vercel)
7.4
/10 overall
Generated a clean, minimal hero with a centered layout, gradient text headline, and a browser mockup visual. Shipped with shadcn/ui components. Quick iteration but less creative flair.
Verdict
Solid and production-ready but safe. Follows established patterns without pushing creative boundaries.
External
Cursor + shadcn/ui
7
/10 overall
Produced an asymmetric split layout with 3D perspective card on the right. Good use of shadows and depth. Code was verbose with some unnecessary wrapper divs.
Verdict
Creative layout approach but code quality needs work. Missing aria-labels and reduced motion support.
About This Experiment
The classic design challenge: build a stunning SaaS hero section with headline, subhead, CTA, and visual. Each agent received the same brief and constraints. The results reveal how different AI tools approach the same creative problem — from layout decisions to animation choices to accessibility defaults.