phase-3-mockup

阶段 3：原型开发

无需设计师也能打造潮流 UI + 考虑 Next.js 组件化

目的

在实际实现之前快速验证想法。即使没有设计师，也能通过研究 UI/UX 趋势来创建高质量原型，并为之后轻松转换为 Next.js 组件做好设计。

本阶段要做的事

1. 屏幕原型：使用 HTML/CSS 实现 UI
2. 交互：使用基础 JavaScript 实现行为
3. 数据模拟：使用 JSON 文件模拟 API 响应
4. 功能验证：测试用户流程

交付物

mockup/
├── pages/          # HTML pages
│   ├── index.html
│   ├── login.html
│   └── ...
├── styles/         # CSS
│   └── main.css
├── scripts/        # JavaScript
│   └── app.js
└── data/           # JSON mock data
    ├── users.json
    └── products.json

docs/02-design/
└── mockup-spec.md  # Mockup specification

PDCA 应用

• 计划（Plan）：确定要制作原型的屏幕和功能
• 设计（Design）：设计屏幕结构和交互
• 执行（Do）：实现 HTML/CSS/JS
• 检查（Check）：验证功能行为
• 改进（Act）：应用反馈并进入阶段 4

分级应用

级别	应用方法
入门	本阶段可以作为最终交付物
动态	用于后续阶段前的验证
企业级	用于快速 PoC

核心原则

"Working prototype over perfect code"

- Pure HTML/CSS/JS without frameworks
- JSON files instead of APIs for data simulation
- Fast feedback loops
- Structure considering Next.js componentization

---

UI/UX 趋势研究方法

无需设计师也能打造潮流 UI

1. 趋势研究来源

来源	用途	URL
Dribbble	UI 设计趋势、配色方案	dribbble.com
Behance	真实项目案例研究	behance.net
Awwwards	获奖作品展示的最新网页趋势	awwwards.com
Mobbin	移动应用 UI 模式	mobbin.com
Godly	落地页参考	godly.website
Land-book	落地页图库	land-book.com

2. 2025-2026 年 UI/UX 趋势

🎨 Visual Trends
├── Bento Grid Layout
├── Glassmorphism
├── Gradient Mesh
├── 3D Elements (minimal 3D elements)
└── Micro-interactions

📱 UX Trends
├── Dark Mode First
├── Skeleton Loading
├── Progressive Disclosure
├── Thumb-friendly Mobile Design
└── Accessibility (WCAG 2.1)

🔤 Typography
├── Variable Fonts
├── Large Hero Text
└── Mixed Font Weights

3. 快速实现 UI 的工具

工具	用途
v0.dev	基于 AI 的 UI 生成（兼容 shadcn/ui）
Tailwind UI	高质量组件模板
Heroicons	图标
Lucide	图标（兼容 React）
Coolors	配色方案生成
Realtime Colors	实时颜色预览

4. 原型制作前检查清单

## UI Research Checklist

- [ ] Analyzed 3+ similar services
- [ ] Decided color palette (Primary, Secondary, Accent)
- [ ] Selected typography (Heading, Body)
- [ ] Chose layout pattern (Grid, Bento, etc.)
- [ ] Collected reference design screenshots

---

为 Next.js 组件化做好设计

原型 → 组件的转换策略

从原型阶段开始考虑组件拆分，能让之后转换到 Next.js 更轻松。

1. 按组件单元设计 HTML 结构

<div class="page">
  <header>...</header>
  <main>
    <div class="hero">...</div>
    <div class="features">...</div>
  </main>
  <footer>...</footer>
</div>



<header data-component="Header">
  <nav data-component="Navigation">...</nav>
</header>


<section data-component="Hero">
  <h1 data-slot="title">...</h1>
  <p data-slot="description">...</p>
  <button data-component="Button" data-variant="primary">...</button>
</section>

2. 按组件拆分 CSS

mockup/
├── styles/
│   ├── base/
│   │   ├── reset.css
│   │   └── variables.css      # CSS variables (design tokens)
│   ├── components/
│   │   ├── button.css
│   │   ├── card.css
│   │   ├── header.css
│   │   └── hero.css
│   └── pages/
│       └── home.css

3. 创建组件映射文档

## Component Mapping (mockup → Next.js)

| Mockup File | Next.js Component | Props |
|-------------|------------------|-------|
| `components/button.html` | `components/ui/Button.tsx` | variant, size, disabled |
| `components/card.html` | `components/ui/Card.tsx` | title, description, image |
| `components/header.html` | `components/layout/Header.tsx` | user, navigation |

4. 将数据结构设计为 Props

// mockup/data/hero.json
{
  "title": "Innovative Service",
  "description": "We provide better experiences",
  "cta": {
    "label": "Get Started",
    "href": "/signup"
  },
  "image": "/hero-image.png"
}

// → When transitioning to Next.js
// components/Hero.tsx
interface HeroProps {
  title: string;
  description: string;
  cta: {
    label: string;
    href: string;
  };
  image: string;
}

Next.js 转换示例

原型（HTML）：

<div class="feature-card" data-component="FeatureCard">
  <div class="feature-card__icon">🚀</div>
  <h3 class="feature-card__title">Fast Speed</h3>
  <p class="feature-card__description">We provide optimized performance.</p>
</div>

Next.js 组件：

// components/FeatureCard.tsx
interface FeatureCardProps {
  icon: string;
  title: string;
  description: string;
}

export function FeatureCard({ icon, title, description }: FeatureCardProps) {
  return (
    <div className="feature-card">
      <div className="feature-card__icon">{icon}</div>
      <h3 className="feature-card__title">{title}</h3>
      <p className="feature-card__description">{description}</p>
    </div>
  );
}

---

JSON 数据模拟示例

// scripts/app.js
async function loadProducts() {
  const response = await fetch('./data/products.json');
  const products = await response.json();
  renderProducts(products);
}

JSON 结构 → 用作 API 模式

// mockup/data/products.json
// This structure becomes the basis for Phase 4 API design
{
  "data": [
    {
      "id": 1,
      "name": "Product Name",
      "price": 10000,
      "image": "/products/1.jpg"
    }
  ],
  "pagination": {
    "page": 1,
    "limit": 10,
    "total": 50
  }
}

---

交付物检查清单

• UI 研究

  • 收集参考设计（至少 3 个）
  • 确定配色方案
  • 选择字体

• 原型实现

  • 按组件单元拆分 HTML
  • 使用 CSS 变量定义设计令牌
  • 使用 JSON 模拟数据

• Next.js 转换准备

  • 创建组件映射文档
  • 定义 Props 接口
  • 验证结构可复用

---

模板

参见 templates/pipeline/phase-3-mockup.template.md

下一阶段

阶段 4：API 设计/实现 → 原型已验证，现在开始实现实际后端