颜色、间距、圆角、层级、动效和排版先收敛成令牌，再往上承接组件和页面模板。
为什么这个域名适合做 VJUI
`vjui.hetao.us` 很自然地指向一个名为 VJUI 的产品、框架或设计系统，所以我把它定义成“界面框架 + 文档站首页”的组合形态，既不空泛，也方便以后继续扩站。
不是只做 Button、Modal，而是从表格、筛选、表单编排、命令栏、分析卡片这些业务场景出发。
产品变化先反映到页面规范和示例，再沉淀成统一的组件约定，降低多人协作成本。
支持 Prompt 面板、Agent 状态卡、操作轨迹和多栏布局，这类场景普通 UI 库往往覆盖不足。
快速开始
先建立一套能跑起来的页面骨架，再把主题变量、布局容器和核心模块接进去。即使你后面改成真正的组件库站点，这个结构也不浪费。
01
定义站点角色
先把 VJUI 定义成一个产品官网兼文档入口，而不是一页空白占位。这会影响后面导航、信息架构和内容语气。
02
固化视觉令牌
先确定主色、强调色、背景层级和卡片半径。这样后面无论是官网页还是文档页，都会有统一识别度。
03
从高频页面倒推组件
优先建设 App Shell、Data Grid、Form Engine、Command Bar、Insight Card 这类业务常用块，而不是只列基础组件。
:root {
--vj-bg: #f6f1e8;
--vj-surface: #fffdf9;
--vj-ink: #10233d;
--vj-accent: #eb5a2a;
--vj-border: rgba(16, 35, 61, 0.12);
}
.vj-shell {
display: grid;
grid-template-columns: 280px 1fr;
min-height: 100vh;
}
.vj-panel {
background: var(--vj-surface);
border: 1px solid var(--vj-border);
border-radius: 24px;
}
核心组件矩阵
这部分不是现成 npm 清单，而是网站当前表达出的产品方向。后续你如果要继续扩成真正的文档站，可以直接按这些模块往下写。
面向后台、控制台和多面板工作台的整体框架。
- 多栏布局
- 固定侧边导航
- 可折叠工作区
支持筛选、冻结列、批量操作和状态联动的数据视图。
- 复杂筛选栏
- 行级动作
- 批量工作流
适合配置页、审批页和批量录入的表单引擎。
- 字段编排
- 条件显隐
- 规则校验
适合搜索、快捷命令、批量动作和 AI 操作入口。
- 快捷检索
- 动作菜单
- 键盘驱动
面向 AI 助手和多轮任务面板的操作容器。
- 上下文区块
- 状态回显
- 任务时间线
用于指标摘要、异常提示、趋势比对与洞察输出。
- 摘要分层
- 关键结论突出
- 可追溯详情
建议文档结构
如果你后面要继续补页面内容，最自然的方式不是再造一个站，而是在当前首页基础上把下面这些文档章节逐步落地。
介绍产品定位、适用场景、站点结构和首个项目应该如何接入页面规范。
整理颜色、字体、边框、阴影、间距、层级与动效参数，形成可复用变量。
沉淀导航、工作区、详情抽屉、搜索区和多栏布局的使用约定。
按钮、标签、输入框、卡片、提示、空状态和骨架屏等基础构件。
表单编排、数据表格、筛选交互、审批流和 AI 面板等复合场景组件。
记录版本演进、破坏性变更和设计策略调整，方便团队持续协作。
路线图
下面这组内容可以直接作为站点的公开路线图，也可以作为你后面继续填充页面时的写作骨架。
统一品牌与首页信息架构
先把域名、品牌名、视觉语言和导航结构稳定下来，避免后续文档扩写时频繁推倒重做。
补齐核心组件与示例页面
围绕后台、控制台和 AI 工作台场景，完成高频页面的组件说明和交互示例。
开放版本记录与团队协作规范
当组件和页面数量增长后，再补充更新日志、迁移指南和贡献方式，形成可维护文档站。
常见问题
这部分主要是把访问者第一时间会问的问题说清楚，避免站点看起来像一页没有落点的占位图。
这是官网还是文档站？
现在是混合形态。首页负责讲清楚 VJUI 是什么，下面的模块负责承接技术方向和文档入口。
后续能拆成多页吗？
可以。当前结构已经把导航和内容分区准备好了，后面拆分成 `/docs`、`/components`、`/changelog` 会很顺。
适合什么业务场景？
尤其适合后台管理、SaaS 控制台、数据分析平台、自动化工作流以及 AI 助手工作台。
为什么不继续用默认占位页？
默认页没有品牌、没有内容、也没有方向。改成现在这版之后，域名、产品定位和后续扩展路径就都能对上了。