关于 design-guidelines
Even Hub G2 应用界面设计指南，涵盖眼镜显示屏和手机端 WebView。开发者可参考其中的布局限制、文字、色彩与交互规范设计两端界面。
主要功能
- 01G2 显示分辨率与色彩限制
- 02容器数量和布局规则
- 03字体与文本行为说明
- 04像素图标设计建议
- 05手机端 UI 色彩、排版与间距
适用场景
- 01在显示限制内规划 G2 眼镜界面
- 02设计文本布局与导航模式
- 03设置手机端配置和设置页面样式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/design-guidelines确认已加载。
详细介绍
Even Hub G2 设计指南
显示限制
- 分辨率：每只眼睛 576 x 288 像素
- 色深：4 位灰度 — 16 级绿色
- 白色像素显示为亮绿色；黑色像素为关闭状态（透明）
- 没有背景颜色或填充颜色属性
- 没有 CSS、没有 flexbox、没有 DOM — UI 由绝对定位的像素容器构建
- 每页最多 4 个图像容器和 8 个其他容器
容器限制
- 总计最多 12 个容器（8 个文本/列表 + 4 个图像）
- 必须恰好有一个容器设置
isEventCapture: 1 - 每页的
containerID必须唯一（整数） - 每页的
containerName必须唯一（字符串，最多 16 个字符） - 通过
zOrderIndex控制堆叠顺序（SDK 0.0.12+）— 每页要么全部设置，要么全部不设置；值必须唯一，数值越大越靠前；如果都省略，则按声明顺序确定重叠关系
字体和文本
- 固件中内置单一 LVGL 字体
- 非等宽字体
- 不支持选择字体、调整字号、加粗或斜体
- 字体不包含的字符会被静默跳过
- 文本会根据容器宽度自动换行
- 使用
\n换行 - 约 400–500 个字符可填满全屏文本容器
- 固件字体集支持范围内的 Unicode 字符均可使用
常见 UI 模式
| 模式 | 用法 |
|---|---|
| 仿按钮 | 在文本前加 > 作为光标指示符 |
| 选择高亮 | 切换单个文本容器的 borderWidth |
| 多行布局 | 垂直堆叠多个文本容器（例如，每个容器高 96px，共 3 个容器） |
| 进度条 | 使用 Unicode 方块字符：━（已填充）和 ─（未填充），或 █▇▆▅▄▃▂▁ |
| 翻页 | 按约 400–500 个字符的边界预先分页，在滚动事件时重建 |
| 文本“居中” | 手动用空格补齐（不支持文本对齐） |
图标设计原则
- 按原生分辨率设计 — 按实际像素尺寸制作（例如 24x24）。避免先按大尺寸设计再缩小。
- 保持简洁 — 目标是打造一眼可辨的轮廓，尽量减少内部细节。
- 在硬件上测试 — 带绿色色调的灰度显示效果与显示器不同。务必在实际显示屏或启用辉光效果的模拟器上确认可读性。
实用 Unicode 字符
| 用途 | 字符 |
|---|---|
| 进度条 | ━ ─ █▇▆▅▄▃▂▁ |
| 导航 | ▲△▶▷▼▽◀◁ |
| 选择 | ●○ ■□ ★☆ |
| 边框 | ╭╮╯╰ │─（制表符绘图字符集） |
| 扑克牌花色 | ♠♣♥♦ |
完整的支持字形表：https://github.com/nickustinov/even-g2-notes
图像容器
- 宽度：20–288 px，高度：20–144 px
- 4 位灰度
- 创建时显示占位图 — 必须调用
updateImageRawData才能显示内容 - 不要并发发送图像 — 每次发送完成后再进行下一次
- 使用简单/扁平的颜色；眼镜的内存有限
手机端应用 UI（Flutter WebView 宿主）
眼镜以黑底绿色单色显示，但手机上承载插件的 Flutter WebView 有自己的视觉风格。构建手机端配置/设置/库屏幕时，请与 Even 应用的设计系统保持一致，让插件在 Even Hub 中看起来浑然一体。
颜色令牌
| 令牌 | 浅色 | 深色 | 用途 |
|---|---|---|---|
--color-text | #232323（TC-1st） | #FFFFFF | 主要文本 |
--color-text-dim | #7B7B7B（TC-2nd） | #8A8A8A | 次要文本、时间戳、说明文字 |
--color-bg | #FFFFFF（BC-1st） | #111111 | 页面背景 |
--color-surface | #EEEEEE（BC-3rd） | #1A1A1A | 卡片/行背景 |
--color-input-bg | rgba(35,35,35,0.08) | rgba(255,255,255,0.08) | 搜索栏、输入框 |
--color-accent | #FEF991 | #FEF991 | 品牌强调色（少量用于按钮、高亮） |
--color-text-on-accent | #FFFFFF | #FFFFFF | 强调色背景上的文本 |
品牌规范：
#FEF991是 Even 品牌黄色 — 仅用于强调（按钮、高亮），切勿用作页面背景#3CFA44是眼镜显示屏绿色 — 仅用于 G2 显示屏，绝不可用于手机端 UI
字体排版
主要字体：FK Grotesk Neue（使用负字间距，营造紧凑的编辑风格）。备用字体：CJK 使用 Source Han Sans，其他内容使用系统无衬线字体。
| 样式 | 大小 | 字重 | 字间距 |
|---|---|---|---|
| 展示 | 34 px | 700 | -0.02em |
| 标题 | 24 px | 600 | -0.02em |
| 副标题 | 18 px | 500 | -0.01em |
| 正文 | 16 px | 400 | -0.01em |
| 说明文字 | 13 px | 400 | 0 |
| 标签 | 11 px | 500 | 0.04em（大写） |
间距
使用 4/8 px 网格：4 8 12 16 24 32 48 64。卡片内边距：16。区块间距：24–32。屏幕边缘内边距：20。
Figma 设计指南
官方设计指南，涵盖布局原则、组件模式、交互模型和视觉规范： https://www.figma.com/design/X82y5uJvqMH95jgOfmV34j/Even-Realities---Software-Design-Guidelines--Public-?node-id=2922-80782
社区资源
- even-g2-notes（GitHub：https://github.com/nickustinov/even-g2-notes）— 架构深入解析、完整 Unicode 字形表、SDK 特性、错误代码、参考实现：国际象棋、reddit 阅读器、天气、Tesla 车辆状态、乒乓球、贪吃蛇
- even-toolkit（GitHub：https://github.com/fabioglimb/even-toolkit，npm：`even-toolkit`）— 55+ 个 React 组件、191 个像素艺术图标、设计令牌、眼镜 SDK 桥接工具（useGlasses 钩子、buildActionBar、mapGlassEvent、canvas 渲染器、PNG 工具、分页辅助工具）
- Discord：https://discord.gg/Y4jHMCU4sv — 开发者社区，提供支持、错误报告和讨论
任务
$ARGUMENTS
评论
支持 Markdown