endfield-ui skill
A skill that teaches an agent Arknights: Endfield industrial interfaces: light base, one bright accent, cut corners.
- 172 ★ on the repository
- Last commit
Minimal access
Why this level
- A set of instructions and templates: the skill executes nothing and makes no network calls.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/endfield-uiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- A set of instructions and templates: the skill executes nothing and makes no network calls.
This is third-party code. Review the repository files before installing.
What it does
The skill sets the look of an interface inspired by the game Arknights: Endfield: a light base with black text, one accent color (yellow `#FFFA00` by default), buttons with a cut corner, numbered list rows and short, sharp motion. The background gets fine diagonal hatching and contour lines. No game assets are used. The rules are platform-neutral: web, mobile web, iOS, Android, Flutter, React Native, WeChat mini programs and desktop. Six parameters (accent, base, cut, ground, density, motion) and four ready presets tune the look so products do not all look alike. The repository ships a CSS kit, motion scripts, HTML templates and a Flutter package.
Who it is for. Front-end developers and designers who want a recognizable industrial style for a site, app or dashboard.
Good fit when
- A fan page or interface inspired by Arknights: Endfield is under construction.
- A dashboard should look like a technical device console in a light theme.
- A Flutter mobile app is assembled from ready components in one style.
- A product needs short, sharp transitions and panel entrances.
Not a fit when
- The interface should look neutral with no game references.
- The client brand book requires a palette with several accents.
- Official game assets are needed; the skill contains none.
Example request
Build a settings page in the Endfield style: light theme, yellow accent, cut-corner buttons and numbered rows.Limitations
No license is declared in the repository, so confirm the terms for the template code with the author. The style mirrors the look of the game without its assets, but trademarks belong to their owner. The strict grid and single accent fit multicolor interfaces poorly. The main `SKILL.md` and README are mostly Chinese with English parts, while the skill description in the header is English. Templates target the browser and Flutter; native iOS and Android are covered by guides only.
How to disable. Delete the skill folder (`~/.claude/skills/endfield-ui` or `~/.agents/skills/endfield-ui`), or remove it through `npx skills` if installed that way.
FAQ
How do I install the skill for Codex only?
Run `npx skills add hhikr/endfield-ui-skill -a codex`. For Claude Code the repository is cloned into `~/.claude/skills/endfield-ui`.
Can the accent color change?
Yes, the accent is one of six tunable parameters. Tokens live in `assets/tokens.json` and variants are described in `references/variation.md`.
Which platforms are supported?
Web, mobile web, iOS, Android, Flutter, React Native, WeChat mini programs and desktop. Each has a guide under `references/platforms/`.
Are game assets required?
No, the skill uses none: only rules, tokens, CSS and templates.
How do I invoke the skill in Codex?
After installing, restart Codex and ask for the Endfield style or call `$endfield-ui`. The name, description and color in the Codex interface come from `agents/openai.yaml`.
Discussion
No questions or reviews yet.
Related
SkillsA Codex skill designs web interfaces in one of five industrial styles at four levels of depth
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
A skill that bans the stock AI interface with floating cards, gradients and glass and sets plain sizes, radii and shadows like Linear
A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
A Codex skill: three distinct visual concepts, screenshot review and cutting excess, so interfaces look less templated.
README in short
A standard Agent Skills package with a root `SKILL.md`; other files open on demand. The agent reads `SKILL.md`, picks a variant, opens the platform guide, wires in assets and runs the checklist.
README badge
Original SKILL.md
--- 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:)`）。 不能变的是固定规则：单一强调色只做填充、红色只给删除、切角表示可点击、宽体英文配粗体中文、编号日期计数都是真数据、细线、机械动效。