Research to Website in 26 Minutes
Two Design Forge skills — UX Researcher for competitive intelligence, then Design Forge for implementation — produced a full 13-page Next.js marketing site with Radix mega menus, 5 industry verticals, and research-driven branding.
From Research to 13-Page Website in 26 Minutes
Two Design Forge skills — UX Researcher for competitive intelligence, then Design Forge for implementation — produced a full Next.js marketing site with Radix mega menus, 5 industry verticals, interactive playground, and research-driven branding. Total hands-on build time: 26 minutes.
What Happened
A developer needed a full marketing website for AIGRaaS (AI Guardrails as a Service) — a new product entering a $1.9B market with 6+ direct competitors. The workflow used two Design Forge skills across two sessions:
Session 1 — UX Researcher produced two research documents: a competitive analysis (6 competitors deep-dived, gap analysis, differentiation matrix) and a full market intelligence + design direction report (market sizing, 4 personas, messaging framework, validated pricing, complete visual direction with hex codes and font choices, 35+ sourced citations).
Session 2 — Design Forge read both research reports, loaded the taxonomy routing, and built a complete 13-page website with 47 files and 4,244 lines of production code — from create-next-app to clean build in 16 minutes, with 3 rounds of live mega menu iterations bringing the total to 26 minutes.
Phase 1: UX Researcher
The /design-forge:ux-researcher skill was invoked twice in a prior session, producing two comprehensive reports:
| Report | Lines | Words | Content |
|---|---|---|---|
| Competitive Analysis | 1,082 | 7,210 | 6 competitors deep-dived, gaps analysis, differentiation matrix, messaging analysis |
| Market Intelligence + Design Direction | 720 | 6,072 | TAM/SAM, 4 personas, pricing validation, full visual direction, 35+ citations |
| Total | 1,802 | 13,282 | Complete product positioning + website design brief |
What the Researcher Discovered
Critical finding — consolidation wave: 3 of 7 primary competitors were acquired in 18 months (Lakera → Check Point ~$300M, CalypsoAI → F5 $180M, Aporia → Coralogix ~$50M). This became a key messaging angle on the final site: "Their roadmaps now belong to networking, logging, and firewall companies."
Gap analysis that drove the entire site design:
| Gap | Who Has It | AIGRaaS Fills It |
|---|---|---|
| Voice AI guardrails | Nobody | VAPI/11Labs/Bland integration, sub-10ms for real-time voice |
| Constitutional behavioral eval | Nobody | 4 decision trees, 8 harm variables, 3 validation tests |
| Deterministic (no LLM judge) | Nobody | Pure TypeScript, no adversarial attacks on the judge |
| Operator-first no-code | Aporia (now Coralogix) | Dashboard-first, describe domain in English |
| Sub-10ms guaranteed | Lakera (injection only) | All evaluation types, not just prompt injection |
Visual direction decisions (all research-driven):
- Teal-mint primary (
#34D399) — differentiates from purple-heavy competitors, signals "safe/approved/go" - Dark mode default — 87% of target audience uses dark mode
- Geist typography — matches VAPI's ecosystem (primary customer segment)
- Animation intensity: gentle — research overrode taxonomy's "expressive" default for professional credibility
Every major design decision — color, typography, animation level, pricing tiers, page structure, CTA hierarchy — came directly from the research reports. The Design Forge build phase made zero guesses about positioning or visual direction.
Phase 2: Design Forge Build
Timeline
| Time (ET) | Milestone | Elapsed |
|---|---|---|
| 3:20 PM | Design Forge invoked with research reference | 0:00 |
| 3:22 | Research files read, taxonomy loaded with overrides | ~2m |
| 3:22:58 | create-next-app scaffolded | ~3m |
| 3:25 | Design system complete (globals.css, brand tokens, theme) | ~5m |
| 3:28 | Shared UI + animation components written | ~8m |
| 3:30 | Homepage with 8 sections assembled | ~10m |
| 3:35 | All interior pages done (How It Works, Pricing, 5 Use Cases, Playground, Blog, About) | ~15m |
| 3:36 | First clean build — all 13 routes statically generated | ~16m |
| 3:40 | Radix refactor (NavigationMenu + Sheet replacing Framer Motion) | ~20m |
| 3:46 | Mega menu layout iterations complete (3 rounds of live feedback) | ~26m |
What Was Built
| Category | Count |
|---|---|
| Files created | 47 |
| Lines of code | 4,244 |
| Routes | 13 (all static) |
| Section components | 9 |
| UI primitives | 7 (including Radix NavigationMenu + Sheet) |
| Layout components | 6 |
| Animation components | 3 |
| Data constants | 450+ lines (zero inline data) |
Pages
| Route | Content |
|---|---|
/ | Hero + social proof + feature bento + how-it-works + stats + competitive edge + testimonials + CTA |
/how-it-works | 5-phase constitutional pipeline, 3 evaluation modes, 3 validation tests, architecture diagram |
/use-cases | Overview grid → 5 verticals |
/use-cases/voice-ai | VAPI/11Labs/Bland integration, pain points + solutions |
/use-cases/healthcare | HIPAA compliance, telehealth, audit trails |
/use-cases/financial | PCI DSS, FINRA, hallucination losses |
/use-cases/customer-service | Air Canada ruling, unauthorized promises |
/use-cases/real-estate | Fair Housing Act, steering language detection |
/pricing | 4-tier cards (Free/$29/$99/Enterprise) + FAQ |
/playground | Interactive evaluation demo, 4 examples, ruleset selector |
/blog | Article grid with categories, 6 research-backed posts |
/about | Mission, values, timeline, Anthropic attribution |
Mid-Session Refactor: Framer Motion → Radix
The initial mega menu used Framer Motion for animations. Based on the Composure Pro website's existing pattern, this was refactored to Radix UI primitives mid-session:
| Component | Before | After |
|---|---|---|
| Desktop mega menu | Framer Motion + manual state | Radix NavigationMenu with viewport={false} |
| Mobile nav | Framer Motion slide + manual backdrop | Radix Sheet with focus trap + portal |
| Nav items | Inline divs with hover handlers | NavLinkCard wrapping NavigationMenuLink asChild |
The Radix approach handles keyboard navigation, focus management, aria attributes, and escape dismissal — all of which the Framer Motion version missed.
How Design Forge Made This Possible
1. Research eliminated decision paralysis
Without the UX Researcher output, the developer would have needed to manually research 10+ competitors, decide on colors/typography/animation without market context, guess at pricing, and define site structure without persona analysis. The research reports provided every design decision pre-made with rationale.
2. Taxonomy routing selected the right patterns
The researcher's Classification block (saas / website / modern) fed into the Design Forge taxonomy, auto-selecting layout patterns, animation intensity, scroll choreography, and section templates — with research overrides where the researcher's findings disagreed with defaults.
3. Data-driven architecture prevented coupling
All content lives in constants.ts (450+ lines). Pages are pure assembly. Adding a use case = one object in an array + a 10-line page file. Changing navigation = edit one array, all menus update.
4. Reference site patterns matched production quality
The research identified specific patterns to borrow from Vercel (restraint, Geist typography), Stripe (mesh gradient hero), Linear (dark mode), and VAPI (color palette) — with explicit notes on what to skip from each.
Key Metrics
| Metric | Value |
|---|---|
| Research output | 1,802 lines, 96KB, 2 reports |
| Sources cited | 35+ |
| Competitors analyzed | 10 (6 deep, 4 adjacent) |
| Build time (to first clean build) | ~16 minutes |
| Build time (including iterations) | ~26 minutes |
| Files created | 47 |
| Lines of code | 4,244 |
| Routes | 13 (all statically generated) |
| Iteration rounds with live feedback | 3 |
Next in the Series
This use case ends with a clean local build at 3:46 PM ET. For the deployment phase — GitHub repo creation, Shipyard preflight, Vercel deploy, live header audit, and security header hardening — continue with Hardened Deploy in 22 Minutes.
Together, the two use cases cover the full workflow from /ux-researcher invoked to aigraas.com live with A/A+ security headers in under 70 minutes of hands-on time.
From Idea to Production
One sentence becomes a shipped feature in 50 minutes. Every organism layer fires — Soul, Brain, Conscience, Skeleton, Spine, Body.
Hardened Deploy in 22 Minutes
Shipyard preflight + GitHub repo creation + Vercel deploy + live header audit + security header fixes + redeploy. From "clean local build" to "live with A/A+ security headers" in 22 minutes.