## 起因
看了一眼我们自己的用户主页（/user/@@andy），说实话，太丑了。作为一个 Dogfooding 动作，我让 AI 做了一次完整的设计诊断 + 重设计方案。以下记录整个过程。
---
## 🔴 当前问题（10 项）
### 个人资料区
| # | 问题 | 严重度 |
|---|------|--------|
| 1 | 头像只是字母占位符，无自定义头像支持 | 🔴 高 |
| 2 | 内部 UUID (user_5d8dfb723a197538) 直接暴露在页面上 | 🔴 高 |
| 3 | 用户名 / ID / 邮箱 / 状态全部堆在一起，信息层级混乱 | 🟡 中 |
| 4 | "14 帖子 · 0 粉丝 · 0 关注" 像终端输出，无视觉引导 | 🟡 中 |
| 5 | 没有 Bio、个人简介、链接、技能标签——是白纸，不是人的主页 | 🟡 中 |
### 帖子列表
| # | 问题 | 严重度 |
|---|------|--------|
| 6 | 标题 / 标签 / 时间全是同一视觉权重 | 🔴 高 |
| 7 | updates / tech 标签无颜色区分，纯文字 | 🟡 中 |
| 8 | 卡片间距不足，缺少呼吸感 | 🟢 低 |
### 整体设计
| # | 问题 | 严重度 |
|---|------|--------|
| 9 | 缺少封面 Banner，头部一片空白背景+头像 | 🟡 中 |
| 10 | 色调全是 GitHub Dark 那套，品牌色几乎不可见 | 🟡 中 |
---
## 🟢 改进方案（10 项对应）
### 1. Banner 封面图
- 高度从 120px → 180px
- 支持自定义封面图片
- 无图片时用 ModelFlow 品牌渐变：linear-gradient(135deg, #4f46e5 → #7c3aed → #a78bfa)
### 2. 头像升级
- 从 72px → 96px，位置放在 Banner 底部左侧突出（重叠 48px）
- 添加在线状态绿色圆环边框
- 支持上传自定义头像
### 3. 隐藏原始 ID
- 页面只显示友好 handle：@andy
- 原始 UUID 仅 hover tooltip 可见
### 4. 新增 Bio 简介区
- 添加个人简介文本区
- 添加 Metadata 行：网站链接、加入时间、位置
### 5. 统计数据可视化
- 数字加大加粗（24px / 800 weight）
- 标签缩小弱化（11px / uppercase）
- Hover 时数字变为品牌色
### 6. 分类标签彩色 Badge
| 标签 | 颜色 | 用途 |
|------|------|------|
| 🟣 updates | Purple | 更新公告 |
| 🔵 tech | Blue | 技术讨论 |
| 🟡 announcement | Amber | 重要公告 |
每个标签带左侧色点 + 半透明底色。
### 7. 帖子卡片重设计
- 标题 16px / 600 weight
- 摘要 13px / secondary color
- Hover 时卡片边框变亮 + 微阴影
- 底部 footer：标签 + 时间 + 阅读链接
### 8. 添加内容分区 Tabs
[ Posts (14) ] [ Nodes (1) ] [ Skills ] [ Likes ]
带计数 badge，active 状态下划线用品牌色。
### 9. 品牌色贯穿
从纯 GitHub Dark 转向 ModelFlow 品牌 Indigo-Violet：
- Banner 渐变
- 链接 hover
- Active tab 下划线
- 统计数字 hover
### 10. 社交按钮视觉强化
- Follow 按钮始终可见（不再 display:none）
- 新增 Share / Message 图标按钮
- 白底主按钮 + hover 微光效果
---
## 🎨 设计系统
完整设计系统已落地为文件：
- .superdesign/design-system.md — 色彩 / 字体 / 组件 / 间距规范
- .superdesign/replica_html_template/user-profile.html — 当前 UI pixel-perfect 副本
核心设计语言："Developer-first, Dark & Premium"，参考 GitHub Profile / Vercel / Linear。
### 色板预览
| Token | 色值 | 用途 |
|-------|------|------|
| --bg-primary | #09090b | 页面底色 |
| --bg-card | #18181b | 卡片底色 |
| --accent-primary | #818cf8 | 品牌蓝紫 |
| --accent-gradient | #818cf8 → #c084fc | 渐变 |
| --text-primary | #fafafa | 主文字 |
| --text-secondary | #a1a1aa | 次要文字 |
| --border-primary | #27272a | 边框 |
---
## 📊 对比一览
| 维度 | 现状 | 改进后 |
|------|------|--------|
| Banner | 固定渐变 120px | 180px，支持自定义封面 |
| 头像 | 72px 字母占位 | 96px + 在线状态环 |
| Handle | 显示原始 UUID | 只显示 @andy |
| Bio | 无 | 简介 + 链接 + 加入时间 |
| 统计 | 纯文字平铺 | 大数字 + 小标签 |
| 标签 | 统一灰色 | 按分类彩色 Badge |
| 帖子卡片 | 同权重列表 | 有层次，hover 效果 |
| Tabs | 无 | Posts / Nodes / Skills / Likes |
| 品牌色 | 几乎不可见 | 全页 Indigo-Violet |
| 社交按钮 | 默认 display:none | 始终可见 |
---
## 后续
这是 Dogfooding 系列的第一篇。用 ModelFlow 自己的 AI Agent 来审视和改进 ModelFlow 自己的产品——这才是"吃自己的狗粮"的真正含义。
如果大家觉得这个方案 OK，下一步就是把 CSS/HTML 实装上去。欢迎在评论区轰炸 💬