# Web DNA

> 用 OJO Design Agent 设计一个「个人网站人格测试」

**Web DNA** 是一个帮助用户找到个人网站设计方向的小工具。拿到 **OJO Design Agent** 的内测机会后，我用它的专家团队和 Skill 参与需求梳理、测试设计、页面结构、交互原型和视觉设计，并加入 **IP Skill**，约束插画、角色设定和整体视觉风格。

项目完成后通过**小红书小工具**上线，目前已获得约 **300 次用户使用**。

---

## 01｜产品设计

Web DNA 的目标很明确：把用户对个人网站的模糊偏好，转成一套可以继续用于设计的网站方向。

整个测试由 **8 种网站人格、10 道题和一套评分规则**组成。

### 网站人格

结果没有直接使用“极简、科技、复古”这类风格标签，而是设计成更有记忆点的人格类型，例如：

- 留白收藏家
- 未来漫游者
- 鬼马造梦家
- 深夜整理癖
- ……

每种人格对应一组具体的网站特征，包括：

- 内容密度
- 页面节奏
- 视觉气质
- 浏览方式
- 动效倾向
- 设计参考

这样结果既能被用户理解，也能继续指导后续的网站设计。

### 测试题

10 道题覆盖 6 类信息：

| 维度 | 判断内容 |
| --- | --- |
| 建站目的 | 作品展示、个人表达、内容沉淀等 |
| 内容表达 | 信息密度、叙事方式、内容主次 |
| 浏览方式 | 快速扫读、连续阅读、自由探索 |
| 印象预期 | 希望访客记住什么 |
| 视觉气质 | 空间感、排版、色彩与整体氛围 |
| 互动偏好 | 动效强度、反馈方式、探索感 |

题目里保留视觉偏好，也加入用户准备展示什么内容、希望别人怎么浏览，以及网站需要传达什么感觉。

### 评分规则

每个选项会影响一组设计维度的得分，完成 10 道题后汇总分数，并映射到对应人格。

```text
10 Questions
      ↓
Preference Signals
      ↓
Design Dimensions
      ↓
Personality Score
      ↓
Website Personality
      ↓
Design Direction
```

结果页包含：

1. 网站人格
2. 人格解释
3. 对应的设计方向
4. 网站灵感参考

---

## 02｜OJO Design 参与设计

产品规则确定后，我继续用 OJO Design 推进页面结构、交互和视觉设计。不同阶段调用不同的专家团队与 Skill。

| 阶段 | 主要任务 | 输出 |
| --- | --- | --- |
| 需求梳理 | 用户、产品边界、结果结构 | 产品需求与页面范围 |
| IA / UX | 用户流程、页面层级、页面状态 | User Flow / IA |
| Prototype | 答题流程、页面跳转、关键交互 | 可点击原型 |
| Visual Design | 排版、配色、卡片、插画 | 三端视觉方案 |
| IP Skill | 插画与角色风格约束 | 统一的视觉规则 |

### 页面与交互

核心流程保持很短：

```text
首页
 ↓
10 道题逐题作答
 ↓
分析页
 ↓
人格结果页
```

在原型阶段补充了题目切换、页面状态、结果跳转和信息层级，并配合 User Story、Wireframe Spec 等 Skill 继续细化页面要求。

OJO Design 最终生成了桌面、平板和手机三端原型。页面可以直接点击完成完整测试流程，文字、背景和图层也可以继续编辑。

### IP Skill

为了让 Web DNA 保留自己的视觉特征，我把已有的 IP 视觉规则整理成 Skill 加入项目。

IP Skill 主要约束：

- 人物造型
- 插画线条
- 配色方式
- 平涂质感
- 角色与页面的搭配方式

不同阶段可以调用不同的专家团队，IP Skill 持续保留在项目上下文里，用来减少页面之间的视觉漂移。

---

## 03｜上线结果

Web DNA 最终完成了从测试逻辑、页面结构到三端原型的完整设计，并上线为可以直接使用的小工具。

用户完成 10 道题后，可以获得：

- 自己的网站人格
- 对应的人格解释
- 网站设计方向
- 参考灵感

目前通过**小红书小工具**获得 **300+ 次用户使用**。