endfield-ui — скилл

---
name: endfield-ui
description: "Build UI with an \"Arknights: Endfield\"-flavoured industrial look (终末地风味 / 终末地风格 / 工业科技感) on any platform: web, mobile web, iOS, Android, Flutter, React Native, mini programs, desktop. Off-white paper and ink, one acid yellow for here/act/look, cut corners on pressable things, wide Latin labels over bold Chinese, // prefixes, numbered record rows, hatching, short mechanical motion; reading, showcase and console modes; light and dark; per-product variants (accent, paper, cut, ground, density, motion) so products do not all look alike. Use when asked for a screen, app, page, dashboard or component that looks like Endfield or clean industrial sci-fi. Ships tokens, a CSS kit, a Flutter kit, platform guides and templates. Uses no game assets."
---

# 终末地风味 UI（endfield-ui）

这个 skill 教你做出"像《明日方舟：终末地》官网和游戏界面那种气质"的界面，**但不搬用它的任何素材**。网页、手机网页、iOS、Android、Flutter、React Native、微信小程序、桌面应用都适用：规则和 token 与平台无关，各平台的写法在 `references/platforms/`。

## 先抓住气质：六条法则

> 读起来像一个项目的开发手册；首屏和控制台像一台工业设备的操作台。

这句话是给你的设计方向，不是界面文案，不要把它写进产品里。

不是"深色背景 + 霓虹 + 发光扫描线"的赛博朋克，也不是把游戏界面原样搬过来。从游戏取的是**结构习惯**，归成六条法则，这些设计原则在不同产品中一脉相承：

1. **使用唯一强调色**：一种强调色（默认 `#FFFA00`，每个产品可以换一种，见第二步），只有三种含义：当前位置、可点击内容、醒目提醒。只做填充，从不大面积铺底。
2. **切角 = 可点击**：切掉一个角的块可以按；正文、图片、展示用的栏目都是直角。看形状就分得出按钮和展示栏目。
3. **拉宽字母，加粗汉字**：英文小字大写、拉宽、在上，中文粗体在下（`// RECORDS` / `记录`）。
4. **使用数字装饰**：编号、日期、计数、进度这些真实统计数字（`No.024`、`2026.10.17`、`24 篇`、`3 / 100`）用宽体等宽数字排出来，就是界面的装饰和工业感的来源。数字必须是真的，不编造。
5. **简约细线分割空间**：用 1px 细线分区，不用滥用的阴影、发光、渐变和带边框的卡片。
6. **干脆利落的动画**：短、硬、机械，每个动效对应一次操作；不弹跳、不缩放弹出。

## 第一步：选页面类型

每个页面或屏幕先判断属于哪一种。三种页面类型共用同一套颜色和部件，差别在"敢不敢大"。

| 页面类型 | 用在 | 样子 |
| --- | --- | --- |
| **阅读**（安静） | 文章、详情、列表、归档、设置、帮助 | 一栏正文（约 38 个汉字宽），黑体常规字重、行高宽；细线分区；黄色只在"当前"标记和链接上 |
| **展示**（大胆） | 首页、落地页、App 首屏、启动页 | 超大宽体字标（实心加空心）、切角画框和斜线纹影子、空心大编号、墨色滚动条、入场动效 |
| **控制台**（大胆但要好用） | 仪表盘、管理后台、App 的总览页 | 深色命令栏；大数字看板（不排成规整的卡片网格）；桌面上中间一个分段圆盘；下面是干活用的列表和表单 |

拿不准时：**内容是给人读的，就用阅读页**。

## 第二步：定变体

这套风格会被很多产品用，不定变体，做出来就都一样。开工前读 `references/variation.md`，然后：

1. 从四组预设里挑一组（`standard` 标准、`coldstore` 冷库、`site` 工地、`nightshift` 夜班），或者把六个维度逐项定值：强调色、纸色、切角、底纹、密度、动效。
2. 想好**主视觉**：首屏和控制台中间放什么，从产品自己的内容里来，不用模板里的 ACME 字标、木箱线稿和圆盘占位。
3. 把结果写成三行"变体卡"放在交付说明最前面，只在一个地方设置（网页写在 `<html>` 的 `data-ef-*` 上，Flutter 传给 `efTheme(…, accent:)`）。

不能变的是固定规则：单一强调色只做填充、红色只给删除、切角表示可点击、宽体英文配粗体中文、编号日期计数都是真数据、细线、机械动效。