design-research

设计研究

概述

专业网站模板凝聚了数千小时的 UX 测试、转化率优化和迭代式设计打磨。与其从零发明布局，不如将它们作为蓝图。

**核心原则：**设计任何网站之前，先找到目标细分领域中最出色的现有模板。提取其中的设计模式。以经过验证的基础为起点，而不是凭空猜测。

没有例外。没有变通方案。没有捷径。

首要指令

NO WEBSITE LAYOUT WITHOUT TEMPLATE RESEARCH FIRST

如果你没有调查面向用户所在行业或细分领域的模板市场，就等于舍弃了数千小时的专业设计成果。健身工作室网站应该借鉴优秀的健身模板，而不是看起来像通用的 AI 生成页面。

适用场景

以下情况必须使用：

• 为任何行业或业务类型构建网站
• 设计落地页
• 规划 Web 应用布局
• 搭建电商店铺
• 创建作品集网站或代理机构网站
• 构建 SaaS 营销网站
• 设计仪表板或管理面板

入门流程

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

搜索方法

阶段 1：分类细分领域

确定：“这属于哪类网站？”将其对应到模板市场的搜索词：

用户描述	搜索类别	最佳来源
健身房、教练、健身	健身/运动	Qode Interactive、ThemeForest
餐厅、咖啡馆、面包店	餐饮	Qode Interactive（110+ 个主题）、ThemeForest
律师事务所、律师	法律/专业服务	ThemeForest、TemplateMonster
医疗诊所、门诊	医疗保健	ThemeForest、TemplateMonster
房产列表、房地产代理机构	房地产	ThemeForest、Webflow
网店、精品店	电商	Shopify Theme Store、ThemeForest
作品集、创意代理机构	创意	Framer、Webflow、Squarespace
SaaS 产品、初创公司	科技/SaaS	Cruip、Tailwind Plus、Framer
博客、在线杂志	出版	WordPress 生态系统、Ghost
管理面板、内部工具	仪表板/管理后台	Creative Tim、AdminLTE、CoreUI
婚礼策划、活动	活动	Qode Interactive、ThemeForest
酒店、旅行社	酒店与旅游	Qode Interactive、ThemeForest
建筑、工业	建筑/工业	ThemeForest（1000+ 种选择）
水疗中心、美容院、健康养生	美容/健康养生	Qode Interactive、ThemeForest
在线课程、大学	教育	ThemeForest、TemplateMonster
非营利组织、慈善机构	公益/非营利	HubSpot、ThemeForest
金融服务、咨询	商业	ThemeForest、TemplateMonster

阶段 2：调查多个来源

按优先级搜索（找到 5 个以上优质结果后停止）：

第 1 层——精选高端模板：

• ThemeForest (themeforest.net) —— 50,000 多个项目，规模最大的市场
• Qode Interactive (qodeinteractive.com) —— 100 多款针对细分领域的高端主题
• Webflow Marketplace (webflow.com/marketplace) —— 7,000 多个模板
• Framer Marketplace (framer.com/marketplace) —— 2,500 多个模板
• Shopify Theme Store (themes.shopify.com) —— 适用于电子商务

第 2 层——针对特定框架的模板：

• Tailwind Plus (tailwindcss.com/plus) —— Tailwind 组件的黄金标准
• Cruip (cruip.com) —— Tailwind 落地页和仪表板
• NextJS Templates (nextjstemplates.com) —— 专为 Next.js 打造
• Vercel Templates (vercel.com/templates) —— 可直接部署的起始模板
• shadcn/ui 生态系统 (ui.shadcn.com, shadcnuikit.com)

第 3 层——免费模板：

• HTML5 UP (html5up.net) —— 优雅的免费 HTML 模板
• Start Bootstrap (startbootstrap.com) —— 基于 Bootstrap 的起始模板
• Colorlib (colorlib.com/wp/templates/) —— 1,500 多款免费模板
• BootstrapMade (bootstrapmade.com) —— 166 多款免费模板

第 4 层——设计灵感（仅供参考，不含代码）：

• Awwwards (awwwards.com) —— 屡获殊荣的在线网站
• Lapa Ninja (lapa.ninja) —— 7,300 多个落地页
• Godly (godly.website) —— 精心挑选的精美网站
• Mobbin (mobbin.com) —— 真实应用和网站 UI 模式
• Dribbble (dribbble.com) —— UI/UX 设计概念
• SaaS Landing Page (saaslandingpage.com) —— 专为 SaaS 打造

阶段 3：评估模板

针对发现的每个模板，记录：

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]

阶段 4：识别常见模式

考察该细分领域的 3-5 个模板后，总结：

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]

阶段 5：向用户展示

将发现整理为带标签的选项，并附上可点击的演示链接。用星号标出推荐选项。

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 例外：**参考资料和模板的选择始终需要交互——即使在 YoloMode 下，也要展示选项并让用户挑选。这些选择影响太大，不能自动决定。

多模板综合

最出色的结果来自融合多个模板中的最佳元素：

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.

针对不同细分领域的版块顺序

健身 / 私人教练

主视觉 -> 课程/服务 -> 教练简介 -> 课程时间表 -> 转变/成果 -> 用户评价 -> 会员价格 -> 联系/预约

餐厅 / 美食

主视觉（美食摄影） -> 招牌菜 -> 故事/传承 -> 完整菜单 -> 主厨/团队 -> 图片库 -> 评价 -> 预订 -> 位置/营业时间

SaaS / 初创公司

主视觉（产品截图） -> 社会认同（客户 Logo） -> 核心功能（3-4 项） -> 工作原理 -> 定价方案 -> 用户评价 -> 常见问题 -> 最终行动号召

律师事务所 / 专业服务

主视觉（突出信任） -> 执业领域 -> 律师简介 -> 案件成果 -> 客户评价 -> 资源/博客 -> 联系/咨询

电子商务

主视觉（主打产品或促销） -> 分类 -> 精选产品 -> 畅销商品 -> 品牌故事 -> 客户评价 -> 新闻简报 -> 信任标识

作品集 / 代理机构

主视觉（醒目宣言） -> 精选作品（案例研究） -> 服务项目 -> 流程方法 -> 团队 -> 客户 Logo -> 联系

认知陷阱

合理化说法	事实
“我可以自己设计”	专业模板凝聚了 1000 多小时的 UX 研究成果。你只有 5 分钟。
“模板做出来的东西千篇一律”	综合多个模板中最出色的部分，就能打造独一无二的成果。
“基础网站不需要参考模板”	基础网站最能从经过验证的布局中受益。简单不代表显而易见。
“我之后再看模板找灵感”	务必先做研究。设计决策越早做出，之后就越难更改。
“用户没有要求研究模板”	用户要求的是高质量网站。研究模板正是交付高质量网站的方式。
“免费模板质量低”	HTML5 UP 和 Start Bootstrap 提供了优雅、结构完善的免费模板。

守则

禁止的操作：

• 未先查看模板市场就设计布局
• 只以单个模板作为参考（综合 3 个以上模板）
• 原样复制模板代码（提取设计模式，从头构建）
• 跳过向用户展示成果的步骤
• 忽略特定行业的版块惯例

必须执行的操作：

• 至少搜索 2 个模板市场
• 查看目标细分领域中至少 3 个模板
• 找出不同模板之间的共通模式
• 向用户展示研究结果，并附上演示链接
• 综合多个模板中最出色的元素
• 记录该细分领域的标准版块顺序

集成

调用时机：

• godmode:intent-discovery —— 任务涉及构建网站时
• godmode:ux-patterns —— 模板研究提供宏观布局；UX 模式提供组件级细节

互补技能：

• godmode:codebase-research —— 模板用于设计；公开代码仓库用于代码实现
• godmode:ui-engineering —— 如何根据模板蓝图构建组件
• godmode:design-integration —— 根据模板分析确立设计令牌