一套基于《明日方舟》12个阵营的真实可运行HTML/CSS/JavaScript界面研究,每个阵营拥有独立的配色方案、任务语义和动效。

Stars

13

7 天增长

暂无数据

Fork 数

0

开放 Issue

0

开源协议

暂无数据

最近更新

2026-07-30

AI 仓库情报摘要
FR-AI / ANALYSIS

为什么值得关注

它展示了一种从共同世界观中创建独特界面标识的系统设计方法论,使用真实代码而非概念图,并附带每个阵营的详细配方和性能考量。

适合谁使用

  • 对主题化和阵营化界面感兴趣的UI/UX设计师
  • 学习CSS动效和设计系统的前端开发者
  • 希望探索背景故事启发界面概念的明日方舟粉丝
  • 研究系统化色彩与材质转换的设计研究人员

典型使用场景

  • 学习如何从叙事阵营推导界面设计
  • 作为游戏UI原型参考(如任务控制台、档案、调度界面)
  • 学习带有减少动效回退方案的CSS动画模式
  • 探索粉丝项目的清洁室设计方法

项目优势

  • 所有12个UI均为真实可运行界面,而非静态图片
  • 每个阵营都有独特的设计配方(颜色、材质、动效),而非统一模板
  • 包含可复用的技能包与审计脚本,方便复现
  • 动效分层(入场、状态、反馈)并支持prefers-reduced-motion

使用前须知

  • 部分阵营(企鹅物流、黑钢国际、乌萨斯学生自治团)标记为暂定配方
  • 需要克隆仓库并启动本地服务器才能运行预览
  • 所有UI仅针对1440×900视口设计

README 快速开始

安装 Skill

项目描述

Twelve clean-room Terra faction UI studies generated with the terra-faction-ui skill

相关仓库与替代方案

根据分类、Topic 和编程语言匹配的相似项目。

filipj9
filipj9 GitHub avatar

Hermes-Control-Deck

Hermes Control is a mobile-first PWA control deck that provides a unified event-driven interface for monitoring and operating Hermes WebUI and Codex CLI AI runtimes from a browser or phone.

AI 与机器学习AI Skills 与提示词
35
react
精选
react GitHub avatar

react

React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.

Web 开发前端框架
246,741
yetone
精选
yetone GitHub avatar

kill-ai-slop

Kill AI Slop is a multilingual field guide and agent skill that catalogues 33 common AI-generated design tells with interactive before-after demos, and provides a tool to scan and fix web projects.

AI 与机器学习AI 智能体
805