hhikr / endfield-ui-skill

# endfield-ui
An agent skill for building UI with an *Arknights: Endfield*-flavoured industrial look — on the web, mobile web, iOS, Android, Flutter, React Native, WeChat mini programs and desktop apps. Uses no game assets.
一个让 AI 写出"终末地风格"界面的 skill：浅色底配黑字，只用一种亮色（默认是黄 `#FFFA00`），能点的按钮切掉一个角，标题上面放一行拉宽的英文小字、下面是粗体中文，列表每一行都有编号，背景只有淡淡的斜线和等高线，动画短而干脆。覆盖网页、手机网页、iOS、Android、Flutter、React Native、小程序和桌面应用。
基本规则每个产品都一样，外观可以按产品换：亮色、底色、切角大小、背景纹理、疏密、动画多少六项都能调，另有四组现成的搭配，免得每个用它的产品都长得一样（见 `references/variation.md`）。
## 安装
这是一个标准的 Agent Skills 包（根目录 `SKILL.md`），不绑定某一家的 agent。挑一种装法：
**通用：skills CLI（推荐）**，一条命令装给本机已有的 agent（Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot 等）：
 [code] 
**Claude Code**
 [code] 
**OpenAI Codex**（CLI、IDE 插件、桌面版）
 [code] 
装好后重启 Codex；可以直接说"做成终末地风格"，也可以用 `$endfield-ui` 点名调用。`agents/openai.yaml` 提供了 Codex 界面里的名字、简介和颜色。
**其他 agent / 不支持 skills 的工具**（只读 `AGENTS.md`、`.cursorrules`、`GEMINI.md` 这类规则文件的）：把仓库放进项目，例如 `vendor/endfield-ui/`，在规则文件里加一行：
 [code] 
**ChatGPT 网页 / 桌面对话**：没有安装目录。可以把 `SKILL.md` 和要用的平台指南（`references/platforms/*.md`）作为附件上传，让它照着做。
## 结构
agent 只在被触发时读 `SKILL.md`；其余文件按需打开，不会一次全塞进上下文。
 [code] 
agent 的工作顺序：读 `SKILL.md` → 读 `references/variation.md` 定变体和主视觉 → 按页面类型和平台打开对应的 `references/platforms/*.md` → 网页直接引用 `assets/`，Flutter 拷 `templates/flutter/lib/ef/`，其他平台照 `tokens.json` 和平台指南自己落地 → 用 `SKILL.md` 末尾的清单自查。
## 预览
不想起服务器的话，先看下面的截图和录屏。录屏都是从模板实际跑出来的，速度就是真实速度；GIF 的帧率较低（20–30 帧/秒），颜色也压缩过，曲线的手感以浏览器里跑的为准。
### 用起来什么样
截图：`examples/web/`（网页模板的浅、深、手机宽度）和 `examples/app/`（Flutter 六个屏幕）。
真实操作一遍的录屏（`examples/motion/`）：
| 手机网页：列表与底部面板 | 设置与对话框 | 状态 |
| --- | --- | --- |
| | | |
| 列表逐行亮起，点一行推入底部面板，取消后推回 | 开关和分段移动，保存的处理中到完成，删除确认对话框的通电和关上 | 删除一行后下面的行补位，提示条擦入再擦掉 |
| 展示页打开 | 控制台打开 |
| --- | --- |
| | |
| 三色条扫过、字标推入、马克笔划过、读数落定；底部滚动条一直走；然后是指针视差 | 圆盘组装、看板通电、大数字落定；然后悬停圆盘的段：括住、光束连到中心、读数换成该段 |
| 深浅切换 | 换页 |
| --- | --- |
| | |
| 从按钮处扩散一个圆揭开新主题 | 阅读页 → 控制台 → 阅读页：同源跳转时的快门（`@view-transition`） |
### 同一套规则，四种外观
同一个页面，从左到右是四组预设：`standard` 标准、`coldstore` 冷库（冰蓝、冷灰纸、小切角、网格底纹、去掉入场动效）、`site` 工地（琥珀、米色纸、大切角、斜线纹底纹）、`nightshift` 夜班（荧光绿、默认深色、无底纹、紧凑）。编号、切角、宽体字段、细线这些固定规则没变，强调色、纸色、切角大小、底纹和密度变了。
六个维度怎么选、自定义强调色要满足什么对比度、怎么写变体卡，见 `references/variation.md`。
### 每个动效
`references/motion.md` 动效清单里的每一项各有一段录屏（`examples/motion/each/`，从 `templates/motion.html` 对应的那一格录下）。说明格式是“触发 │ 时长（毫秒） │ 曲线”。
**三条曲线**：`snap` 迅速到位后稳住，`mech` 慢起硬停，`ease` 只给三色条和颜色变化。
**打开页面**
 三色条扫过 一次访问的第一页 │ 600 │ ease 
 字标推入 展示页 │ 620，第二行晚 140 │ mech 
 马克笔划过 展示页 │ 晚 420，420 │ mech 
 乱码后落定 打开页面 │ 600，每个晚 ≤ 40 │ 线性 
 通电 打开控制台 │ 520，每行晚 100 │ mech 
 逐行亮起 切换列表内容 │ 320，每行晚 38 │ snap 
 圆盘组装 打开控制台 │ 360，每段晚 45 │ snap 
**回应操作**
 黄色擦入、亮边扫过、按下 悬停 / 聚焦 │ 280 │ mech；按下 100 
 色条落下、整行右移 悬停 / 按下 │ 200，右移 250 │ snap 
 页签伸开 悬停看板 │ 400 │ mech 
 墨色灌满 （数字同时乱码落定） 悬停空心大编号 │ 450 │ mech 
 保存：处理中，然后完成 aria-busy → 完成一次擦过 600 │ mech 
 分段进度 按格跳，不平滑；未知进度循环，完成即停 
 锁定、黄底灌满 （控制台） 悬停圆盘某段：括住、光束连到中心、读数换成该段 300 │ mech；悬停看板里的大数字：黄底灌满 220 │ mech 
**进出与状态变化**
 提示擦入 出错 / 需要注意 │ 280 │ mech；不抖动 
 删除一行 向右擦掉 200 │ mech；下面的行上移 200 │ snap 
 提示条 从左擦入 280，停 2 秒，向右擦掉