LWMS2 原型设计工作规范

本文最后更新于 2026年7月12日 晚上

📋 目录

概述

目的

建立一套独立于正式代码的原型设计系统，支持快速迭代和多方案对比，确保原型开发不影响现有项目代码。

原则

  • 完全隔离：原型代码与正式代码物理分离

  • 快速预览：通过浏览器直接访问原型页面

  • 多方案对比：一次性提供多个设计方案供选择

  • 灵活部署：选定方案后可快速集成到正式项目

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

项目根目录/
├── .vibe/                      # 原型设计专用文件夹 ⭐ 推荐
│   ├── prototype/              # 原型资源目录
│   │   ├── index.html          # 原型导航首页
│   │   ├── login/              # 登录页面原型
│   │   │   ├── login-1.html    # 方案 1
│   │   │   ├── login-2.html    # 方案 2
│   │   │   └── ...
│   │   └── assets/             # 原型公共资源
│   └── serve_prototype.py      # 原型服务器脚本
│
├── frontend/
│   └── public/             # 静态资源目录 (备选方案)
│       └── prototype/      # 原型资源目录
│           ├── index.html  # 原型导航首页
│           └── login/      # 登录页面原型
│
└── docs/
    └── PROTOTYPE_GUIDE.md  # 本文档

访问方式

方案 A：独立端口（推荐）⭐

使用独立的 Python HTTP 服务器，完全隔离于 Vite 开发服务器。

启动命令:

1
2
3
4
5
6
7

1
2

cd .vibe
python serve_prototype.py

访问地址:

1
2
3
4
5
6
7
8
9
10
11

1
2
3
4

http://localhost:5174                    # 导航页
http://localhost:5174/login/login-1.html  # 登录方案 1
http://localhost:5174/login/login-2.html  # 登录方案 2
...

优势:

  • ✅ 完全独立，不受 Vite 影响

  • ✅ 可以并行运行开发和原型设计

  • ✅ 更接近生产环境的静态文件服务

  • ✅ 自动禁用缓存，方便调试

方案 B：Vite Public 目录

将原型文件放在 frontend/public 目录下。

访问地址:

1
2
3
4
5
6
7

1
2

http://localhost:5173/prototype/index.html
http://localhost:5173/prototype/login/login-1.html

优势:

  • ✅ 只需启动一个服务器

  • ✅ Vite 自动处理静态资源

  • ✅ 无需额外配置

劣势:

  • ⚠️ 与正式项目共享端口

  • ⚠️ 可能受到 Vite 热更新影响

工作流程

1. 需求沟通

  • 明确设计目标

  • 确定功能要点

  • 约定风格偏好

2. 方案设计

设计师（AI）根据需求设计多个方案（建议 3-10 个）。

3. 原型实现

在 .vibe/prototype 目录下创建独立的 HTML 文件。

4. 评审选择

  • 通过浏览器预览所有方案

  • 对比不同设计风格

  • 选择最满意的方案

5. 正式集成

将选定的方案集成到正式项目中：

  • 转换为 React 组件

  • 添加业务逻辑

  • 接入 API 接口

  • 代码审查和测试

6. 清理归档

  • 保留选定的原型作为参考

  • 删除未选定的原型（或移动到 archive 目录）

设计规范

HTML 结构要求

每个原型 HTML 文件应该是自包含的，包含所有必要的 CSS 和 JavaScript。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题 - 方案 X</title>

    <!-- 使用 CDN 引入公共库 -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- 自定义样式 -->
    <style>
        /* 方案特定的样式 */
    </style>
</head>
<body>
    <!-- 页面内容 -->

    <!-- 交互脚本 -->
    <script>
        // 模拟数据和交互逻辑
    </script>
</body>
</html>

技术要求

CSS 框架

  • 推荐: Tailwind CSS (CDN)

  • 备选: Bootstrap, Bulma

  • 禁止: 依赖本地构建的样式文件

JavaScript 库

  • 推荐: Vanilla JS (原生)

  • 可选: Alpine.js, Vue.js (CDN)

  • 避免: React/Angular (需要构建)

图标库

  • 推荐:

  • Heroicons (SVG inline)

  • Font Awesome (CDN)

  • Remix Icon (CDN)

字体

  • 推荐: 系统默认字体栈

  • 可选: Google Fonts (CDN)

数据模拟

使用硬编码的模拟数据，不依赖真实 API：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1
2
3
4
5
6
7
8
9
10

const mockData = {
    user: {
        username: 'admin',
        email: 'admin@example.com'
    },
    warehouses: [
        { id: 1, name: '北京仓', code: 'BJ001' },
        { id: 2, name: '上海仓', code: 'SH001' }
    ]
};

交互模拟

模拟表单提交、页面跳转等交互，但不真正调用后端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1
2
3
4
5
6
7

// 模拟登录
function handleLogin(username, password) {
    // 显示加载状态
    // 延迟 1 秒模拟网络请求
    // 返回成功/失败
    // 跳转到原型页面
}

文件命名

命名规则

1
2
3
4
5

1

{module}-{version}.html

  • module: 页面/功能模块名称（小写，连字符分隔）

  • version: 版本号（数字，从 1 开始）

示例

✅ 正确:

  • login-1.html

  • dashboard-2.html

  • inventory-ledger-1.html

  • scan-inbound-3.html

❌ 错误:

  • Login-1.html (大写)

  • login_v1.html (下划线)

  • login1.html (缺少连字符)

  • test.html (无意义名称)

版本递增

每个新方案递增版本号：

  • 第一个方案：login-1.html

  • 第二个方案：login-2.html

  • 第三个方案：login-3.html

版本管理

Git 配置

在 .gitignore 中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1
2
3
4
5
6
7
8
9
10
11

# ❌ 不要忽略原型文件 - 需要持久保留
# .vibe/prototype/*.html

# 或者只忽略临时测试文件
.vibe/prototype/**/test-*.html
.vibe/prototype/**/*.tmp

# 允许提交所有正式原型文件
!.vibe/prototype/index.html
!.vibe/prototype/login/*.html
!.vibe/prototype/dashboard/*.html

保留策略 ⭐⭐⭐

方案 A：完全保留（推荐）✅

保留所有原型文件作为设计资产:

  • ✅ 所有探索性设计方案

  • ✅ 选定的最终方案 (标记为 selected 或 final)

  • ✅ 有代表性的备选方案

  • ✅ 实验性的创新设计

优点:

  • 完整的设计历史记录

  • 方便未来回顾和参考

  • 展示设计决策过程

  • 避免重复劳动

文件组织:

1
2
3
4
5
6
7
8
9
10
11
12

.vibe/prototype/
├── README.md # 说明文档
├── index.html # 导航首页
├── login/
│ ├── README.md # 登录页面设计说明
│ ├── login-1.html # 现代简约 ⭐ 选定方案
│ ├── login-2.html # 商务专业
│ ├── login-3.html # 科技感
│ ├── login-4.html # 极简主义
│ └── … # 保留所有方案
└── dashboard/
└── …

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

#### 方案 B：选择性保留

只保留代表性方案，删除明显不合适的早期尝试。

**保留清单:**

- ✅ 最终选定的方案 (必须保留)

- ✅ 最有竞争力的 2-3 个备选方案

- ✅ 最具创意的设计尝试

- ❌ 明显的失败尝试 (可删除)

- ❌ 重复度高的微调版本 (可合并)

#### 方案 C：归档策略

对于长期未使用的原型，可以移动到归档目录:

```nix

1
2
3
4
5
6
7
8
9

.vibe/
├── prototype/                  # 活跃原型
│   ├── login/
│   └── dashboard/
└── archive/                    # 历史归档
    ├── 2026-Q1/
    │   └── login-designs/     # 2026 年 Q1 的登录设计
    └── 2026-Q2/
        └── old-concepts/      # 旧的设计理念

推荐策略 ⭐⭐⭐

采用「完全保留」策略:

  • 所有原型文件都应该保留 - 它们是团队的设计资产

  • 使用注释标记重要信息 - 在 HTML 中添加设计说明

  • 定期整理但不删除 - 可以移动位置，但不要删除

  • Git 提交时保留历史 - 每次设计迭代都提交到 Git

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1
2
3
4
5
6
7
8

<!--
  设计方案：login-2.html - 商务专业风格
  创建日期：2026-04-04
  设计师：AI Assistant
  状态：备选方案 (未被选中)
  特点：左右分屏布局，深蓝色主题，适合传统企业用户
  备注：虽然未被选中，但分屏设计理念值得参考
-->

归档策略

方案 A：保留所有

保留所有原型文件作为设计过程记录。

方案 B：只保留选定

只保留最终选定的方案，其他删除或移动到 archive 目录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1
2
3
4
5
6
7
8
9

.vibe/
└── prototype/
    ├── archive/           # 归档目录
    │   └── 2026-04-04/   # 按日期归档
    │       ├── login-1.html
    │       ├── login-2.html
    │       └── ...
    └── login/
        └── login-5.html   # 选定的方案

推荐策略

开发阶段: 保留所有原型
项目交付: 只保留选定方案 + 代表性备选

最佳实践

1. 保持简洁

原型应该专注于视觉设计和交互流程，不要过度复杂化。

✅ 推荐:

  • 单个 HTML 文件控制在 500 行以内

  • 使用内联样式和脚本

  • 模拟 2-3 个典型场景

❌ 避免:

  • 拆分成多个文件

  • 实现完整业务逻辑

  • 处理所有边界情况

2. 响应式设计

确保原型在不同设备上都能正常显示：

1
2
3
4
5

1

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用 Tailwind 的响应式类：

1
2
3
4
5

1

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

3. 可访问性

遵循基本的可访问性原则：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1
2
3
4
5
6
7
8
9

<!-- 语义化标签 -->
<header>, <nav>, <main>, <footer>

<!-- 表单标签 -->
<label for="username">用户名</label>
<input id="username" type="text">

<!-- Alt 文本 -->
<img src="logo.png" alt="LWMS2 Logo">

4. 性能优化

  • 使用 CDN 资源

  • 压缩内联资源（可选）

  • 避免大尺寸图片

5. 注释说明

为复杂的设计决策添加注释：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1
2
3
4
5
6
7
8

<!--
  设计方案说明：
  - 风格：现代简约
  - 配色：蓝色主题
  - 特点：卡片式布局，大字体

  适用场景：现代化企业系统
-->

6. 统一风格 ⭐

新增于 v1.1: 原型中心首页推荐使用侧边栏导航式布局。

原因:

  • ✅ 专业性强，符合企业级系统定位

  • ✅ 信息架构清晰，易于理解

  • ✅ 易于扩展新模块

  • ✅ 与正式项目 MainLayout 布局一致

参考实现: 见 .vibe/prototype/index.html

7. 持久保留原则 ⭐⭐⭐

重要： 所有原型设计方案应该持久保留,即使已经选定了最终方案。

保留原因:

  • 📚 设计过程记录 - 保留完整的设计探索过程

  • 🔄 未来参考 - 后续迭代时可以参考历史方案

  • 🎨 灵感来源 - 不同方案可能在未来项目中发挥作用

  • 📊 对比价值 - 便于向新成员展示决策过程

  • 🔍 快速验证 - 需求变更时可以快速回顾备选方案

保留策略:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

1
2
3
4
5
6
7
8
9
10
11
12
13

.vibe/
└── prototype/
    ├── index.html              # 原型导航首页 (持续维护)
    ├── login/                  # 登录页面系列 (永久保留)
    │   ├── login-1.html        # ✅ 选定方案 + 其他方案都保留
    │   ├── login-2.html        # ✅ 永久保留
    │   ├── login-3.html        # ✅ 永久保留
    │   └── ...                 # ✅ 所有方案都保留
    ├── dashboard/              # 仪表盘系列 (持续扩展)
    │   └── ...
    └── archive/                # 可选：按日期归档旧版本
        └── 2026-04-04-login/   # 保留最初的设计版本
            └── ...

原型导航页

创建 index.html 作为所有原型的入口。

推荐风格：侧边栏导航式 ⭐

设计理念:

  • 左侧固定导航栏，清晰的信息架构

  • 右侧内容区域，展示原型卡片网格

  • 专业感强，符合企业级系统定位

  • 易于扩展到更多模块（仪表盘、库存台账等）

布局结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1
2
3
4
5
6
7
8
9
10
11

┌─────────────────────────────────────┐
│  Sidebar  │    Main Content Area    │
│           │                         │
│  - Logo   │  Welcome Banner         │
│  - 登录页  │  ┌──────┬──────┬──────┐│
│  - 仪表盘  │  │ Card │ Card │ Card ││
│  - 库存台  │  ├──────┼──────┼──────┤│
│  - 扫码作业│  │ Card │ Card │ Card ││
│           │  └──────┴──────┴──────┘│
│  [Footer] │  [Coming Soon Modules]  │
└───────────┴─────────────────────────┘

核心特点:

  • 侧边导航 - 使用毛玻璃效果的白色侧边栏

  • 渐变背景 - 紫色到紫红色的渐变主题

  • 卡片网格 - 响应式网格布局展示各个方案

  • 悬停动画 - 卡片悬停时的提升效果

  • 标签标识 - 使用标签显示方案数量和状态

示例代码结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>LWMS2 原型设计中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .sidebar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }
        .nav-item:hover {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: translateX(8px);
        }
    </style>
</head>
<body class="min-h-screen flex">
    <!-- 左侧导航栏 -->
    <aside class="sidebar w-72 shadow-2xl">
        <div class="p-8 border-b">
            <h1 class="text-2xl font-bold">LWMS2</h1>
            <p class="text-sm text-gray-600">原型设计中心</p>
        </div>

        <nav class="p-4 space-y-2">
            <a href="#login" class="nav-item active block px-4 py-3 rounded-lg">
                🔐 登录页面 <span class="ml-auto text-xs">10 个方案</span>
            </a>
            <a href="#dashboard" class="nav-item block px-4 py-3 rounded-lg">
                📊 仪表盘 <span class="ml-auto text-xs">即将推出</span>
            </a>
        </nav>
    </aside>

    <!-- 右侧内容区 -->
    <main class="flex-1 p-8 overflow-auto">
        <div class="max-w-6xl mx-auto">
            <!-- 欢迎区域 -->
            <div class="mb-8">
                <h2 class="text-4xl font-bold text-white">欢迎使用原型设计中心</h2>
            </div>

            <!-- 原型卡片网格 -->
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <h3 class="text-2xl font-bold mb-6">🔐 登录页面系列</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <a href="login/login-1.html" class="group block bg-gradient-to-br from-purple-50 to-indigo-50 rounded-xl p-6 hover:shadow-lg transition-all transform hover:-translate-y-1">
                        <h4 class="font-semibold text-gray-900">现代简约</h4>
                        <p class="text-sm text-gray-600">紫色渐变 + 毛玻璃效果</p>
                    </a>
                    <!-- 更多卡片... -->
                </div>
            </div>
        </div>
    </main>
</body>
</html>

配色方案:

  • 主背景：linear-gradient(135deg, #667eea 0%, #764ba2 100%)

  • 侧边栏：rgba(255, 255, 255, 0.95) + backdrop-filter: blur(10px)

  • 强调色：紫色系 (#667eea, #764ba2)

  • 卡片背景：渐变色 (from-purple-50 to-indigo-50)

交互效果:

  • 导航项悬停：渐变背景 + 白色文字 + 向右位移 8px

  • 卡片悬停：阴影加深 + 向上位移 4px

  • 平滑过渡：transition-all duration-300 ease

响应式设计:

  • 桌面端：完整侧边栏 + 三列卡片网格

  • 平板端：侧边栏保持 + 两列卡片网格

  • 移动端：可考虑折叠侧边栏或改为顶部导航

备选风格

方案 B：顶部标签式

适合较少分类的场景，使用顶部圆角标签切换器。

方案 C：磁贴卡片式

Windows 磁贴风格，不规则网格布局，视觉冲击力强。

从原型到正式代码

转换步骤

-

创建 React 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1
2
3
4
5
6

// frontend/src/pages/Login.tsx
import { useState } from 'react';

export default function Login() {
    // 基于选定原型的结构和逻辑
}

-

迁移样式

  • Tailwind CDN → Tailwind 配置文件

  • 内联样式 → CSS Modules / Styled Components

  • 替换模拟数据

  • Mock Data → API 调用

  • 硬编码 → 状态管理

  • 添加路由

  • 直接跳转 → React Router

  • 页面刷新 → SPA 导航

  • 集成测试

  • 功能测试

  • 兼容性测试

  • 性能优化

工具和资源

推荐工具

  • 设计灵感: Dribbble, Behance, Pinterest

  • 配色方案: Coolors, Adobe Color

  • 图标资源: Heroicons, Feather Icons

  • 字体搭配: Google Fonts, Fontshare

CDN 资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1
2
3
4
5
6
7
8
9
10
11

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Alpine.js (可选) -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

质量控制清单

原型检查项

  • HTML 结构语义化

  • 响应式布局正常

  • 交互逻辑流畅

  • 配色方案协调

  • 字体大小合适

  • 图标清晰

  • 无明显 bug

  • 文件大小合理 (< 1MB)

集成检查项

  • React 组件拆分合理

  • TypeScript 类型完整

  • API 接口对接正确

  • 样式无冲突

  • 性能指标达标

  • 跨浏览器兼容

  • 单元测试通过

变更日志

版本
日期
变更内容
作者

1.2
2026-04-04
添加持久保留原则，强调所有原型方案都应永久保留
LWMS2 Team

1.1
2026-04-04
添加侧边栏导航式作为推荐的原型中心首页风格
LWMS2 Team

1.0
2026-04-04
初始版本，建立原型设计工作规范
LWMS2 Team

相关文档

最后更新: 2026-04-04
维护者: LWMS2 Team
版本: 1.2.0

技术笔记
LWMS2 原型设计工作规范
https://www.normdist.com/2026/04/04/ND-20260404-002-prototype-design-guide/
作者
小瑞
发布于
2026年4月4日
许可协议