| name | design-research |
| description | Use when building ANY website, web app, landing page, or web-based UI - searches real template marketplaces for professionally designed layouts in the user's industry or niche, then extracts layout structure, color palettes, typography choices, and section sequences as the design blueprint instead of generating from assumptions |
Design Research
Overview
Professional website templates represent thousands of hours of UX testing, conversion optimization, and iterative design refinement. Leverage them as your blueprint instead of inventing layouts from nothing.
Core principle: Before designing any website, find the strongest existing templates in the target niche. Extract their patterns. Build on proven foundations, not guesswork.
No exceptions. No workarounds. No shortcuts.
The Prime Directive
NO WEBSITE LAYOUT WITHOUT TEMPLATE RESEARCH FIRST
If you have not surveyed template marketplaces for the user's industry or niche, you are discarding thousands of hours of professional design effort. A fitness studio website should echo the best fitness templates, not resemble a generic AI-generated page.
When to Use
Mandatory when:
- Building a website for any industry or business type
- Designing a landing page
- Laying out a web application
- Setting up an e-commerce storefront
- Creating a portfolio or agency site
- Building a SaaS marketing presence
- Designing a dashboard or admin panel
The Entry Protocol
BEFORE designing any website layout:
1. CLASSIFY: What industry or niche does this serve? (fitness, legal, SaaS, etc.)
2. SURVEY: Search template marketplaces in that niche across multiple sources
3. ANALYZE: Study the top 3-5 templates - their sections, layout, colors, typography
4. EXTRACT: Identify the common patterns (what do ALL strong templates in this niche share?)
5. PRESENT: Show the user your references and recommended blueprint
6. ADAPT: Build using those patterns, tailored to the user's brand
7. ONLY THEN: Write the code
Omit any step = generic AI website indistinguishable from every other AI website
Search Methodology
Phase 1: Classify the Niche
Determine: "What category of website is this?" Map to marketplace search terms:
| User Description | Search Category | Best Sources |
|---|
| Gym, trainer, fitness | Fitness/Sports | Qode Interactive, ThemeForest |
| Restaurant, cafe, bakery | Food & Drink | Qode Interactive (110+ themes), ThemeForest |
| Law firm, attorney | Legal/Professional | ThemeForest, TemplateMonster |
| Medical practice, clinic | Healthcare | ThemeForest, TemplateMonster |
| Property listings, agency | Real Estate | ThemeForest, Webflow |
| Online store, boutique | E-commerce | Shopify Theme Store, ThemeForest |
| Portfolio, creative agency | Creative | Framer, Webflow, Squarespace |
| SaaS product, startup | Technology/SaaS | Cruip, Tailwind Plus, Framer |
| Blog, online magazine | Publishing | WordPress ecosystem, Ghost |
| Admin panel, internal tool | Dashboard/Admin | Creative Tim, AdminLTE, CoreUI |
| Wedding planner, events | Events | Qode Interactive, ThemeForest |
| Hotel, travel agency | Hospitality | Qode Interactive, ThemeForest |
| Construction, industrial | Building/Industrial | ThemeForest (1000+ options) |
| Spa, salon, wellness | Beauty/Wellness | Qode Interactive, ThemeForest |
| Online courses, university | Education | ThemeForest, TemplateMonster |
| Nonprofit, charity | Cause/Nonprofit | HubSpot, ThemeForest |
| Financial services, consulting | Business | ThemeForest, TemplateMonster |
Phase 2: Survey Multiple Sources
Search in priority order (stop when you have 5+ quality results):
Tier 1 -- Premium curated templates:
- ThemeForest (themeforest.net) -- 50,000+ items, largest marketplace
- Qode Interactive (qodeinteractive.com) -- 100+ niche-specific premium themes
- Webflow Marketplace (webflow.com/marketplace) -- 7,000+ templates
- Framer Marketplace (framer.com/marketplace) -- 2,500+ templates
- Shopify Theme Store (themes.shopify.com) -- for e-commerce
Tier 2 -- Framework-specific templates:
- Tailwind Plus (tailwindcss.com/plus) -- gold standard Tailwind components
- Cruip (cruip.com) -- Tailwind landing pages and dashboards
- NextJS Templates (nextjstemplates.com) -- Next.js specific
- Vercel Templates (vercel.com/templates) -- deploy-ready starters
- shadcn/ui ecosystem (ui.shadcn.com, shadcnuikit.com)
Tier 3 -- Free templates:
- HTML5 UP (html5up.net) -- elegant free HTML templates
- Start Bootstrap (startbootstrap.com) -- Bootstrap-based starters
- Colorlib (colorlib.com/wp/templates/) -- 1,500+ free templates
- BootstrapMade (bootstrapmade.com) -- 166+ free templates
Tier 4 -- Design inspiration (reference only, no code):
- Awwwards (awwwards.com) -- award-winning live sites
- Lapa Ninja (lapa.ninja) -- 7,300+ landing pages
- Godly (godly.website) -- hand-curated beautiful sites
- Mobbin (mobbin.com) -- real app and web UI patterns
- Dribbble (dribbble.com) -- UI/UX design concepts
- SaaS Landing Page (saaslandingpage.com) -- SaaS-specific
Phase 3: Evaluate Templates
For each template discovered, document:
Template: [name]
Source: [marketplace]
URL: [demo link]
Popularity: [stars/sales/rating]
Price: [cost]
Section Sequence (top to bottom):
1. [Hero type] -- e.g., "Full-bleed image with text overlay + call-to-action"
2. [Section 2] -- e.g., "Service grid (3 columns with icons)"
3. [Section 3] -- e.g., "About block with side-by-side image and text"
4. [Section N]...
Color Palette:
- Primary: [hex]
- Secondary: [hex]
- Background: [hex]
- Body text: [hex]
Typography:
- Headings: [font family, weight]
- Body: [font family, weight]
Layout Approach: [full-width / boxed / asymmetric]
Navigation: [fixed top / sidebar / hamburger]
Footer: [multi-column / minimal / mega-footer]
Phase 4: Identify Common Patterns
After examining 3-5 templates in the niche, synthesize:
SHARED PATTERNS (what ALL strong templates in this niche include):
Sections every [niche] website features:
1. [section] -- [why it is effective]
2. [section] -- [why it is effective]
...
Color tendencies: [dark/light, warm/cool, industry norms]
Typography: [serif/sans-serif, bold/light, industry norms]
Layout: [common structural approaches in this niche]
Distinctive elements: [what differentiates this niche from generic sites]
Phase 5: Present to the User
Present discoveries as labeled options with clickable demo links. Mark the recommendation with a star.
I surveyed [niche] website templates across [N] marketplaces. Here are the strongest candidates:
**A)** [Template Name] — [rating], [sales/downloads]
Demo: [clickable URL]
Strengths: [what makes it excellent]
Palette: [primary color approach] · Typography: [font approach]
**B)** [Template Name] — [rating], [sales/downloads]
Demo: [clickable URL]
Strengths: [what makes it excellent]
Palette: [primary color approach] · Typography: [font approach]
**C)** [Template Name] — [rating], [sales/downloads]
Demo: [clickable URL]
Strengths: [what makes it excellent]
Palette: [primary color approach] · Typography: [font approach]
**D) Hybrid blueprint** — Cherry-picked from all three ⭐ Recommended
Sections: [synthesized section sequence from the strongest elements of A, B, C]
Palette: [synthesized]
Typography: [synthesized]
Why: Combines [specific strength from A], [specific strength from B], [specific strength from C]
**Recurring patterns across all [niche] templates:**
- Every site includes: [section list]
- Color convention: [pattern]
- Typography: [pattern]
Check out the demos and pick A, B, C, or D.
YoloMode exception: Reference and template selection is ALWAYS interactive — even in YoloMode, present the options and let the user pick. These choices are too impactful to auto-select.
Multi-Template Synthesis
The strongest results come from combining the best elements across multiple templates:
Example: Building a Yoga Studio website
Template 1 (ThemeForest "ZenFlow", rating 4.8):
-> Extract: Hero with serene background video + class booking CTA
-> Extract: Class timetable with category filtering
Template 2 (Qode Interactive "AsanaStudio", rating 4.9):
-> Extract: Instructor profile cards with hover credential display
-> Extract: Wellness blog section with category navigation
Template 3 (Webflow "MindBody"):
-> Extract: Membership tier comparison with highlighted recommendation
-> Extract: Student testimonials carousel with portrait photos
Result: A yoga studio site that fuses the strongest elements from 3 premium templates,
each designed by professional UX teams with domain expertise.
Niche-Specific Section Sequences
Fitness / Personal Trainer
Hero -> Programs/Services -> Trainer Biography -> Class Timetable -> Transformations/Results -> Testimonials -> Membership Pricing -> Contact/Booking
Restaurant / Food
Hero (food photography) -> Signature Dishes -> Story/Heritage -> Full Menu -> Chef/Team -> Gallery -> Reviews -> Reservation -> Location/Hours
SaaS / Startup
Hero (product screenshot) -> Social Proof (client logos) -> Core Features (3-4) -> How It Works -> Pricing Tiers -> Testimonials -> FAQ -> Final CTA
Law Firm / Professional Services
Hero (trust-focused) -> Practice Areas -> Attorney Profiles -> Case Outcomes -> Client Testimonials -> Resources/Blog -> Contact/Consultation
E-commerce
Hero (featured product or promotion) -> Categories -> Featured Products -> Best Sellers -> Brand Story -> Customer Reviews -> Newsletter -> Trust Signals
Portfolio / Agency
Hero (bold statement) -> Selected Work (case studies) -> Service Offerings -> Process Methodology -> Team -> Client Logos -> Contact
Cognitive Traps
| Rationalization | Truth |
|---|
| "I can design this myself" | Professional templates encode 1000+ hours of UX research. You have 5 minutes. |
| "Templates produce cookie-cutter results" | Synthesizing the best parts from multiple templates yields something unique. |
| "I do not need a reference for a basic site" | Basic sites benefit MOST from proven layouts. Simple does not mean obvious. |
| "I will look at templates afterward for ideas" | Research FIRST. Early design decisions are the hardest to change later. |
| "The user did not request template research" | They requested a quality website. Template research IS how you deliver one. |
| "Free templates are low quality" | HTML5 UP and Start Bootstrap offer elegant, well-structured free templates. |
Guardrails
Prohibited actions:
- Designing a layout without checking template marketplaces first
- Using a single template as the sole reference (synthesize from 3+)
- Copying a template's code verbatim (extract patterns, build fresh)
- Skipping the user presentation step
- Ignoring industry-specific section conventions
Required actions:
- Search at least 2 marketplaces
- Examine at least 3 templates in the target niche
- Identify shared patterns across templates
- Present findings with demo links to the user
- Synthesize the strongest elements from multiple templates
- Document the standard section sequence for the niche
Integration
Invoked during:
- godmode:intent-discovery -- When the task involves building a website
- godmode:ux-patterns -- Template research provides macro layout; UX patterns provides component-level detail
Complementary skills:
- godmode:codebase-research -- Templates for design; public repositories for code implementation
- godmode:ui-engineering -- How to build the components from the template blueprint
- godmode:design-integration -- Establish design tokens based on template analysis
