为产品经理、人类团队与 AI Agent 准备

更快做出管理后台原型

这不是散装组件集合,而是一套可直接运行的后台底座。页面模式、Mock API、设计规范和协作文档已经配齐,适合从需求评审一路走到原型落地。

  • Apache-2.0
  • Vue 3 + Vite
  • Element Plus
  • Mock API
  • Docs Ready
  • AI Friendly
后台 Dashboard 预览
真实运行界面 工作台 Dashboard,来自当前主干 DEMO

为什么做它

让原型更快接近成品

它适合想把后台需求讲清楚、演出来、再交给研发或 AI 继续往前推进的人。产品经理可以更快做出可信原型,前端可以从稳定骨架起步,AI Agent 可以直接读取仓库结构、规范和内置 skills。

完整后台骨架,不是散装组件

登录、Dashboard、列表、表单、详情、可视化、管理页和文档页都已经形成模式,适合直接替换业务名词继续推进。

既能演示,也能继续开发

`web + mock-server + docs` 的三段式结构把可视化效果、接口联调和交付说明放在一起,避免“演示版”与“开发版”脱节。

对 AI 协作天然友好

仓库已经声明允许 AI 读取、分析、修改与生成衍生内容,并内置面向产品、开发、测试的项目级 skills。

你会拿到什么

页面、接口与文档,一次配齐

01

后台页面模式

工作台、列表、表单、详情、组件展示、可视化等页面模式可直接复用。

02

可运行前端 DEMO

Vue 3 + Vite + Element Plus 的标准实现,结构稳定,适合二次开发。

03

轻量 Mock Server

使用 Node.js 原生 HTTP 模拟接口,适合前后端分离演示与早期联调。

04

规范与模板文档

技术规范、设计规范、API 示例、需求模板和测试模板全部在仓库内闭环。

05

开源协作基础设施

许可证、行为准则、支持说明、Issue 模板、PR 模板已经就位,适合公开协作。

06

面向 AI 的项目级 Skills

支持把需求拆解、页面开发、测试回归直接映射到可执行工作流,减少反复解释。

真实界面

仓库里已经能跑起来的真实界面

以下截图来自当前主干 DEMO,覆盖工作台、登录、表单、详情等典型后台界面。

工作台 Dashboard 预览
工作台 Dashboard 指标、趋势、任务与状态模块在同一页建立信息节奏。
用户管理页预览
用户管理 筛选、表格、标签、分页与抽屉操作保持标准后台节奏。
登录页预览
登录页 品牌头图、欢迎信息与表单区保持清晰分层,适合快速换皮。
表单页示例预览
表单页示例 分组卡片、校验与提交反馈适合真实业务表单替换。
详情页示例预览
详情页示例 摘要、基础信息、时间线与附件区形成稳定详情模式。

适合谁

最适合这些场景

  • 产品经理快速搭管理后台原型并做需求评审
  • 团队用统一骨架起一个新管理后台项目
  • 前端需要一个可复用的后台布局和页面模式样板
  • AI Agent 需要一个结构清晰、文档齐全、允许协作的仓库
  • 运营后台、审批后台、配置中心和数据看板型中后台

不建议直接用于

这些场景需要别的起点

  • C 端营销页面与强品牌官网
  • 依赖复杂富文本或自定义画布的编辑器型产品
  • 把一个业务系统的专有流程硬塞进模板主干
  • 需要高度品牌定制、重动效或讲故事型叙事站点

开始使用

三步,把后台原型跑起来

git clone git@github.com:vantang/RuiWebAdminStandardStarter.git
cd RuiWebAdminStandardStarter
npm run dev:start
  1. 先跑起现有 DEMO,用真实截图和交互去校准需求。
  2. 保留骨架与规范,用业务页面替换 `web/src/views/examples`。
  3. 前期继续用 `mock-server` 联调,后期再替换成真实后端。