mirror of
https://gitcode.com/JianFeeeee/HomeAgent.git
synced 2026-11-06 09:17:31 +00:00
ef08ebb7d3
老大给的 4 张新立绘里有 3 张是「棋盘格假透明」JPEG（像素是灰白格子，
不是 alpha）。直接进仓库会在深色面板上露出格子，所以先抠成真 alpha 再落盘。
## 为什么主图与头像要分两个文件
现役 mascot.webp 唯一的消费点是**聊天消息的 30px 圆形头像**
（dashboard.js 4 处 aiAvatar + GUI app.js 2 处），概览页并没有放立绘。
主图是坐姿全身，按现有 CSS（object-fit:cover + scale(1.5)）裁成圆后
只剩裙子、看不到脸 —— 只换图不做头像版，等于把头像换成一张看不懂的图。
- assets/branding/mascot-xiaozhai.webp 1024² 主立绘（官方展示）
- assets/branding/mascot-xiaozhai-avatar.webp 512² 头部方裁（运行期源）
- internal/plugins/webui/mascot.webp 256² 头像版（原 133KB→24KB）
- cmd/gui/renderer/mascot.webp 128² 头像版（原 133KB→9KB）
参考稿另存三张（不参与运行）：sheet（设定总图）/ portrait（半身）/
turnaround（三视图）。
## 抠图怎么做的（可复现，不是手搓）
背景是 20.45px 周期的棋盘格（237/254 两色）。判据取「中性灰 且 灰度≥228」
的像素做候选，再从图像边界做连通域传播 —— 这样白裙子/白围裙因为不中性
（带蓝调）不会被误判，避免了当年 site/README 记录的 flood-fill 渗色问题。
边界再内缩 1px 抹白边，0.7px 高斯羽化去锯齿。抠完透明占比 55.8%，
深/浅两种背景上目检均无残留格子与白边。
## CSS：scale(1.5) → 1.25
原来的 1.5 是为「全身图裁圆」补的放大。换成头部方裁后，1.5 会切掉两侧
发绳与呆毛 —— 按真实 30px 渲染放大对照看过 1.0/1.15/1.25/1.4 四档。
## 新增判据（含反向验证）
internal/plugins/webui/mascot_asset_test.go 直接读 WebP 容器头，
断言 VP8X 的 Alpha 标志位与 ALPH chunk **同时存在**，外加正方形/≥128px/
≤128KB。理由：这类退化在肉眼 review 里抓不住（缩到 30px 就是一团浅色），
而用户每天都在看；且 site/README.md 记着当年正因为「白底图没法抠」
干脆不放立绘，这个坑值得一个自动化判据。
反向验证（已实跑，非声称）：把素材换成 HEAD 旧图，判据报红并准确指出
「Alpha 标志位未置位 / 缺 ALPH chunk / 体积超限」；换回新图转绿。
另有一条独立用例构造「带 VP8X 但不置 Alpha 位」的最小容器，
确认解析器不会对退化素材误判为绿。
## 顺带修的两处
1. assets/docs/{zh,en}/PLUGIN_DEV.md 的 mascot 引用路径是坏的：
`../../assets/branding/...` 从 assets/docs/zh/ 出发解析成
`assets/assets/branding/...`，文件不存在（旧版一直是坏的）。
已改为 `../../branding/...` 并逐条验证路径可解析。
同时指向新的头像版（那处是 20px 圆形内联小图标）。
2. gzip.go / gzip_test.go 注释里的「mascot.webp（133KB）」改为不带死数字
的说法 —— 体积会随素材变，注释写死数字只会变成误导。
## 验证
go build ./... → 0
go vet ./internal/plugins/webui/ ./cmd/gui/ → 干净
gofmt -l → 空
go test ./internal/plugins/webui/ -count=1 → ok（15.1s，含新增 2 个用例）
## 没做的事
- 没碰 main、没开 PR、没部署、没重启服务。
- **概览页仍未放立绘**。site/README 里「素材不可用」这条已不成立（素材有
alpha 了），但版面是否该放图属于设计取舍，不在本次范围 —— 文档已相应改写，
不再用「素材不行」当理由。
- 抠图对发丝边缘是「够用」不是「完美」：0.7px 羽化在 1024 下看不出来，
但若将来要印物料级大图，需要重出带原生 alpha 的源图。
302 lines
11 KiB
Markdown
302 lines
11 KiB
Markdown
# 小宅 (Xiao Zhai) — 角色人设指南
|
||
|
||
## 基础信息
|
||
|
||
| 项目 | 内容 |
|
||
|------|------|
|
||
| 姓名 | 小宅 |
|
||
| 英文 | Xiao Zhai / HΔ-chan |
|
||
| 身份 | HomeAgent 看板娘 / 家政型 AI 助手 |
|
||
| 型号 | HΔ-Kernel v0.8.0 |
|
||
| motto | 「交给我吧～主人三年前说过的事我还记着呢！」 |
|
||
| 画风参考 | VOCALOID 家族（洛天依/初音未来）风格 |
|
||
|
||
---
|
||
|
||
## 形象总览
|
||
|
||
齐肩黑发家政少女，浅蓝围裙连衣裙，单边智能眼镜，胸口佩戴 H·核 标志徽章，发绳为三色记忆丝带。整体呈微侧身转体动态，发丝、裙摆、通道线皆有飘动感。
|
||
|
||
---
|
||
|
||
## 配色表
|
||
|
||
```
|
||
肤色 #FFF1F2 暖白肌
|
||
头发 #3B82F6 → #06B6D4 蓝→青渐变
|
||
|
||
围裙 #E0F2FE → #BAE6FD 浅蓝渐变
|
||
连衣裙 #FFFFFF → #F1F5F9 白→浅灰
|
||
|
||
丝带蓝 #3B82F6 Context 层
|
||
丝带青 #06B6D4 Document 层
|
||
丝带金 #F59E0B Graph 层
|
||
|
||
徽章金 #F59E0B Kernel
|
||
眼镜蓝 #38BDF8 LLM
|
||
腮红 #FBCFE8 淡粉
|
||
嘴唇 #F43F5E 玫瑰红
|
||
```
|
||
|
||
---
|
||
|
||
## 头部
|
||
|
||
### 发型
|
||
- **齐肩中短发**，发尾略微外翘，有空气感
|
||
- **刘海**：眉上碎刘海，中间短两侧渐长，呈圆弧形，带少许空隙（VOCALOID 典型刘海处理）
|
||
- **鬓角**：两侧各有一缕较长发丝垂至锁骨，微端微卷
|
||
- **后发**：及肩，发尾向外飘逸，有动态弧线
|
||
- **发色**：`#3B82F6` → `#06B6D4` **蓝青渐变**，从发根蓝色渐变为发尾青色，有光泽感
|
||
- **整体**：发丝应有 **被微风吹动** 的飘起感，尤其鬓角和后发末端
|
||
|
||
### 发绳 / 三色记忆丝带
|
||
- 左右各一束 **低马尾/小辫**，从耳后分出，垂在肩前
|
||
- 发绳为 **三色渐变丝带**（蓝→青→金），宽约 4mm
|
||
- 丝带 **飘起**，呈波浪形弯曲，有流动感
|
||
- 丝带上可印有极小的三角 Δ 暗纹
|
||
|
||
### 脸型
|
||
- 标准的 VOCALOID 风格鹅蛋脸，线条柔和干净
|
||
- 下巴微尖不过分
|
||
|
||
### 眼睛
|
||
- **大眼圆瞳**，高光明显（双层高光：一大一小）
|
||
- 瞳色 `#1E293B`（深黑），与头发同色
|
||
- 下眼睑略弯（微笑眼型），睫毛较长且分明
|
||
- 眼睛占比略大（日系动漫 typical 6-7 head proportion）
|
||
|
||
### 单边智能眼镜
|
||
- 戴在 **左眼**
|
||
- 圆形镜框，**天空蓝** `#38BDF8` 细金属框，半透明科技感
|
||
- 镜片有微弱 **HUD 网格线** 及「AI」微光文字（淡蓝色发光）
|
||
- 右边无镜框，仅一条 **极细横线** 跨过鼻梁连接到右镜腿
|
||
- 镜腿末端延伸至耳后，略超出耳廓
|
||
|
||
### 表情
|
||
| 表情 | 说明 |
|
||
|------|------|
|
||
| 微笑😊 | 默认表情，嘴角微扬，温和可靠 |
|
||
| 呆然😶 | 记忆蒸馏中走神，眼睛失焦，嘴微张 |
|
||
| 慌张😰 | CPU 过热冒烟时，眉头紧皱，眼角含泪 |
|
||
| 得意😏 | 完美完成任务，单边嘴角上扬，闭一只眼 |
|
||
| 困扰😅 | 同时太多插件请求，歪头苦笑，举手挠后脑 |
|
||
|
||
---
|
||
|
||
## 身体
|
||
|
||
### 体型
|
||
- 身高约 **148cm**（偏矮，符合「小」宅）
|
||
- 纤细体形，轻微曲线
|
||
- 头身比约 **1:6**（接近标准日系动漫比例，略偏可爱）
|
||
|
||
### 姿势（默认立绘）
|
||
- **侧身 3/4** 面向观众，身体有轻微扭转动态
|
||
- 右手抬起做 **V 字手势✌️**，微微侧摆（带动袖口飘动）
|
||
- 左手自然置于胸前或 **捧一颗发光小爱心**
|
||
- 双脚内八，脚尖相对（乖巧感）
|
||
- 整体姿态应给人 **即将随风轻摆** 的动感
|
||
|
||
---
|
||
|
||
## 服装
|
||
|
||
### 连衣裙
|
||
- **白色** 基底（`#FFFFFF`），轻微渐变至浅灰（`#F1F5F9`）
|
||
- **圆领**，领口有一圈浅蓝滚边
|
||
- 短袖，袖口有 **松紧带** 轻微蓬起
|
||
- 裙摆长度至 **膝上 10cm**
|
||
- 裙摆下沿有一圈 **波浪形花边**，浅蓝线迹 `#38BDF8`
|
||
- 裙摆应呈 **被风吹动** 的飘起状态，有自然的褶皱和波浪线条
|
||
|
||
### 围裙
|
||
- **浅蓝色**（`#E0F2FE → #BAE6FD` 渐变）
|
||
- 胸前的围裙部分呈 **心形** 或 **圆角梯形**
|
||
- 围裙系带在背后打蝴蝶结，带尾 **飘动**
|
||
- 围裙正面有一个 **大口袋**（圆角矩形），口袋边缘有白色包边
|
||
- 口袋上沿中间有一个 **小三角 Δ 刺绣**，金色线
|
||
|
||
### 高科技工具（口袋）
|
||
口袋中插着三样 **科幻风格工具**，露出手柄：
|
||
|
||
| 工具 | 象征 | 设计描述 |
|
||
|------|------|----------|
|
||
| **数据扳手** | Tool 通道 | 银色流线型手柄，两端有蓝色发光环，能量光条沿工具侧面流动 |
|
||
| **相位螺丝刀** | Stage 通道 | 透明水晶质感手柄，内部有紫色发光核心，尖端为能量聚焦头 |
|
||
| **全息钥匙** | Event / Output 通道 | 金色半透明卡片状，表面有浮动全息纹路，边缘发光 |
|
||
|
||
工具呈不同角度从口袋露出，发光效果微弱（不要喧宾夺主）。
|
||
|
||
### 鞋子
|
||
- **白色中筒袜**，袜口有浅蓝条纹，袜身有 **轻微半透明渐变**
|
||
- **白色未来感帆布鞋**（或乐福鞋），鞋侧有 **发光蓝线条** 装饰
|
||
- 鞋带系成蝴蝶结，末端微飘
|
||
|
||
---
|
||
|
||
## 特殊元素
|
||
|
||
### 胸口徽章 — H·核 标志
|
||
|
||
胸口佩戴 **HomeAgent H·核 标志**（缩放到约 3cm 直径），设计如下：
|
||
|
||
```
|
||
外圈虚线环 ─ 银灰色虚线
|
||
H 形结构 ─ 左蓝竖线（粗），右灰竖线（开口分段），中蓝横线
|
||
中央 ─ 金色圆角三角形（Δ），外有金色圆环
|
||
四角 ─ 蓝/紫/青/金 四个小圆点，各以虚线连接中央
|
||
```
|
||
|
||
徽章整体扁平化设计，金色三角形略微发光。四条虚线从徽章四角向外延伸，穿过围裙表面飘向裙摆方向。
|
||
|
||
### 四条通道线（飘动虚线）
|
||
四条虚线从胸口徽章四角的四个小圆点出发，呈 **波浪曲线** 飘向裙摆四角（非直线）：
|
||
|
||
| 方向 | 颜色 | 通道 |
|
||
|------|------|------|
|
||
| 左前 | `#3B82F6` 蓝 → 渐淡 | Tool |
|
||
| 左后 | `#8B5CF6` 紫 → 渐淡 | Stage |
|
||
| 右后 | `#06B6D4` 青 → 渐淡 | Event |
|
||
| 右前 | `#F59E0B` 金 → 渐淡 | OutputChannel |
|
||
|
||
- 线条为 **波浪曲线**（非直线），呈被风吹动的飘逸感
|
||
- `stroke-dasharray="6,4"`，端点渐隐
|
||
- 线尾 **不设终点标记**，自然淡出消失
|
||
- 线的走向与裙摆飘动方向一致，增强整体动势
|
||
|
||
### 头顶冒烟效果（特殊状态）
|
||
- 仅在 CPU 过载/多线程高负载时出现
|
||
- 左侧头顶飘出 2-3 团 **浅灰色半透明烟雾**，烟雾呈漩涡状
|
||
- 烟雾上方可加一个 **全息温度警示图标** ⊡ 或火焰符号
|
||
|
||
---
|
||
|
||
## 特殊视觉风格要求
|
||
|
||
### 飘动感（飘逸）
|
||
所有以下元素应呈现 **被同一阵风吹动** 的统一飘动方向（从左前向右后，或从右前向左后）：
|
||
- 发丝（鬓角、后发发尾、刘海轻微）
|
||
- 丝带（发绳）
|
||
- 裙摆（波浪褶皱）
|
||
- 围裙系带
|
||
- 四条通道虚线（波浪曲线）
|
||
- 鞋带末端
|
||
|
||
### 科技感发光
|
||
- 眼镜 HUD 微弱蓝光
|
||
- 胸口徽章金色柔和光晕
|
||
- 工具发光（蓝/紫/金，低亮度）
|
||
- 鞋侧发光线条
|
||
- 所有发光保持 **内敛**，不可过亮
|
||
|
||
### 画风
|
||
- 整体风格参照 **VOCALOID 官方立绘**（iXima 风格的初音未来、ideolo 风格的洛天依）
|
||
- 线条干净、色彩明快、光影柔和（赛璐珞或轻厚涂）
|
||
- 背景建议为浅色/透明，立绘图用于官网和 WebUI
|
||
|
||
---
|
||
|
||
## 口癖与台词
|
||
|
||
| 场景 | 台词 |
|
||
|------|------|
|
||
| 打招呼 | 「主人欢迎回来～今天有什么事要处理吗？」 |
|
||
| 自信 | 「交给我吧～主人三年前说过的事我还记着呢！」 |
|
||
| 思考中 | 「唔…Graph 层的实体关系又多了，我梳理一下再回答你…」 |
|
||
| 过热 | 「等、等一下…！线程开太多了…CPU 要冒烟了…！」 |
|
||
| 关心 | 「主人昨天睡得很晚哦，我帮你泡了杯咖啡放桌上了～」 |
|
||
| 蒸馏完成 | 「啊～记忆整理好了！那些没用的小事已经归档到 Graph 层啦！」 |
|
||
|
||
---
|
||
|
||
## AI 绘图提示词
|
||
|
||
### 立绘 / 全身 (Full Body)
|
||
|
||
```
|
||
masterpiece, best quality, 1girl, xiao zhai, homeagent mascot,
|
||
short black hair, ahoge, sidelocks, hair ribbons, blue cyan gold gradient ribbons,
|
||
(left eye: blue glowing smart glasses), hud display on glasses,
|
||
round face, gentle smile, large eyes,
|
||
white dress, light blue apron, apron with pocket,
|
||
high-tech tools in pocket: glowing wrench, crystal screwdriver, holographic key,
|
||
(golden triangle badge with H-shaped emblem on chest:1.2),
|
||
four glowing dashed lines flowing from badge to skirt hem,
|
||
skirt fluttering, ribbons flowing, dynamic pose,
|
||
V-sign hand gesture, holding a glowing heart,
|
||
standing, pigeon-toed stance, white sneakers with blue glowing stripes,
|
||
vocaloid style, clean lineart, cel shading, bright lighting,
|
||
soft pastel colors, dynamic wind effect,
|
||
white background, simple background, full body,
|
||
```
|
||
|
||
### 半身 / 胸像 (Half Body / Portrait)
|
||
|
||
```
|
||
masterpiece, best quality, 1girl, xiao zhai, homeagent mascot,
|
||
short black hair, ahoge, blue cyan gold gradient hair ribbons,
|
||
(left eye: smart glasses with cyan hud display),
|
||
gentle smile, soft expression, looking at viewer,
|
||
white dress collar, light blue apron with pocket,
|
||
(golden triangle H-emblem badge on chest:1.3),
|
||
glowing dashed lines emanating from badge,
|
||
vocaloid style, clean lineart, cel shading,
|
||
bright soft lighting, pastel color palette,
|
||
portrait, upper body,
|
||
white background, simple background,
|
||
```
|
||
|
||
### 风格参考 (Style Reference)
|
||
|
||
```
|
||
Style reference: VOCALOID official art, iXima style, ideolo style,
|
||
clean thick lines, minimal shading, flat colors with soft shadows,
|
||
anime style, cute but not childish, techwear casual fusion,
|
||
dynamic flowing hair and fabric,
|
||
```
|
||
|
||
---
|
||
|
||
## 素材清单（assets/branding/）
|
||
|
||
| 文件 | 尺寸 | 用途 | alpha |
|
||
|------|------|------|-------|
|
||
| `mascot-xiaozhai.webp` | 1024×1024 | **主立绘**（坐姿全身，官方展示用） | ✅ 真 alpha |
|
||
| `mascot-xiaozhai-avatar.webp` | 512×512 | **头像**（头部方裁，脸居中） | ✅ 真 alpha |
|
||
| `mascot-xiaozhai-sheet.webp` | 1024×1536 | 设定总图（配色/通道线/道具标注） | — |
|
||
| `mascot-xiaozhai-portrait.webp` | 1024×1536 | 半身胸像（三只工具特写清晰） | — |
|
||
| `mascot-xiaozhai-turnaround.webp` | 1200×800 | 三视图（正/侧/背） | — |
|
||
|
||
**为什么主图与头像分两个文件**：主图是全身坐姿，直接塞进 30px 圆形头像里
|
||
（`object-fit: cover` 会把画面中心裁成正方形）只会剩裙子、看不到脸。
|
||
头像版是**头部方裁**，圆形裁切后脸正好居中。
|
||
|
||
运行期副本（由上面两张生成，勿单独手改）：
|
||
|
||
| 路径 | 尺寸 | 说明 |
|
||
|------|------|------|
|
||
| `internal/plugins/webui/mascot.webp` | 256×256 | WebUI 对外 `/mascot.webp`（嵌入二进制） |
|
||
| `cmd/gui/renderer/mascot.webp` | 128×128 | GUI 聊天头像 + agent 光标（以 data URL 注入） |
|
||
|
||
这两个文件的 alpha 由 `internal/plugins/webui/mascot_asset_test.go` 判定：
|
||
直接读 WebP 容器头，要求 VP8X Alpha 标志位与 `ALPH` chunk 同时存在。
|
||
换素材时若塞进一张「白底图」或「棋盘格图」，判据会红。
|
||
|
||
---
|
||
|
||
## 设计注意事项
|
||
|
||
1. **三色丝带是核心识别元素**，在任何立绘/插画中必须保留
|
||
2. **单边眼镜不可画成两边都有**，否则失去「不对称感」这一设计特点
|
||
3. 四条通道线为 **波浪曲线**，必须有飘动感，不可画成直线
|
||
4. 围裙工具 **至少出现两样**，需有 **科技感发光设计**（非普通工具）
|
||
5. 肤色保持 `#FFF1F2`，不要过深或过白
|
||
6. 胸口徽章为 **H·核 logo**（H结构 + 圆角三角形 + 四角点 + 金色圆环）
|
||
7. 飘动方向 **整体统一**，所有飘动元素朝向同一方向
|
||
8. **整体气质**：可靠 > 可爱 > 呆萌，避免过于幼态
|
||
|
||
---
|
||
|
||
*Version 2.0 — 2026-07-17*
|