design-research（设计研究）

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:

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

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