Skip to content
Free Anima

UI / UX

UI / UX

Section titled “UI / UX”

FreeAnima 入口 UI 的产品设计系统：视觉基础、组件分类与交互模式。三者皆经同一组正交轴适配 — 壳、布局与交互 — 见 三维度。

覆盖应用形态 SPA 与浏览器扩展的 popup / options（同一 @freeanima/ui-kit 栈）。Content script 不在本设计系统内 — 见 portal.md。

本目录是 UI/UX 规范 SSOT。Agent 硬禁令、导入规则与 API 入口路径在 .cursor/rules/ 并链到此处。Token 值在代码中（packages/frontend/ui-kit/styles/globals.css）。代码与文档冲突时，以代码为准。

阅读顺序

Section titled “阅读顺序”
  1. dimensions.md — 壳 / 布局 / 交互；壳 vs 应用布局
  2. foundations.md — 色、字、间距、圆角、层级、动效、焦点…
  3. components.md — 基元 / 结构 / 复合 / 领域；放置规则
  4. patterns.md — 可复用交互模式（如 DataListRow）

职责划分

Section titled “职责划分”
层拥有不拥有
docs/ui/面向产品的规范、模式契约、维度适配IDE 清单、每周工具表
.cursor/rules/frontend-ui.mdc三维度 API、栈禁令、导入边界、复合组件清单长篇产品 / 视觉论述
packages/frontend/ui-kit/组件 + CSS token（实现 SSOT）产品架构
docs/aspects/横切数据面（同步、刷新、离线）视觉分类

功能原型与包触达列表 → .cursor/rules/frontend-features.mdc。

采纳

Section titled “采纳”
  • 新 UI 必须遵循本语料（及所链 Agent 规则）。
  • 既有 UI 可有偏差；缺口在专题文档中标为 待对齐。在后续任务中修复 — 不要为迁就分叉而削弱规范。

相关文档

Section titled “相关文档”