平台优先
以原生控件和语义化地标为基础；只有平台无法提供的交互才使用 JavaScript。
A3S 产品设计系统
让每个界面都像同一个产品。
源自 A3S Office、智能体工作区和运维控制台的可复用视觉语言，以语义化 HTML、Tailwind CSS 与轻量原生 JavaScript 控制器交付。
$
npm install @a3s-lab/ui@0.2.0- 52
- 组件指南
- 06
- 基础系统
- 00
- 运行时依赖
实时样例可交互 OFFICE 工作台
P
项目复盘演示文稿，刚刚保存
工作区 / 最近使用
继续上次工作
从基础控件到完整工作台。
每篇指南都包含实时样例、最小标记、参数、变体、状态行为与可访问性说明。
表单
浏览完整组件目录 字段、选择器、开关、滑块，以及可访问的表单组合。
导航活动栏、面包屑、标签页、分页与产品侧边栏。
浮层对话框、抽屉、菜单、浮层、命令面板与上下文帮助。
反馈警告、徽标、进度、骨架屏、加载状态与 Toast 反馈。
数据展示卡片、图表、表格、列表项、头像与结构化信息展示。
应用模式应用外壳、功能区、工具栏、分割面板与资源网格。
把 A3S UI 调成你的产品。
选择外观、强调色、圆角和界面密度。修改会立即作用于整站与组件预览，并在下次访问时恢复。
语义化 HTML
浅色 + 深色
响应式 + RTL
可访问状态
Nunjucks + Jinja
一套系统，覆盖每个 A3S 界面。
产品语义只定义一次，并在文档工具、Coding Agent 界面与可观测控制台之间共享。
ACTIONSUCCESSAGENTATTENTIONDANGER
TYPE SCALEAa
Geist Sans
12 / 14 / 16 / 20 / 32 / 64SPACING SCALE4812162432
CONTROL SHAPE
R06 / R10 / R14支撑复杂产品的三条原则。
参数，而不是分叉
通过 CSS 变量和明确的数据属性适配组件，不复制结构，也不牺牲可访问行为。
面向生产力应用的密度
清晰层级、紧凑工具栏、可预测焦点，以及能承受复杂业务的响应式布局。
构建下一个 A3S 界面。
安装组件包、选择设计基础，然后从任意组件指南复制语义化标记。