A full admin shell, not scattered widgets
Login, dashboard, list, form, detail, visualization, management, and docs screens are already shaped into reusable patterns.
Built for product managers, human teams, and AI agents
Build admin prototypes faster
This is not a loose pile of UI components. It is a runnable admin foundation with page patterns, mock APIs, design rules, and delivery docs already in place, so a prototype can move from review to implementation with less friction.
Why this exists
Bring prototypes closer to production
It is meant for people who need to explain admin requirements clearly, demo them quickly, and then hand them off to engineers or AI agents without restarting from scratch. Product managers get more credible prototypes, engineers get a stable shell, and agents get a repo with clear structure, docs, and skills.
Good for demos and further development
The `web + mock-server + docs` structure keeps UI, API simulation, and delivery context together so the demo layer does not drift away from implementation.
Friendly to AI collaboration
The repo explicitly allows AI-assisted reading, analysis, and modification, and it ships with project-level skills for product, development, and testing work.
What you get
Pages, APIs, and docs in one place
Admin page patterns
Dashboard, list, form, detail, component showcase, and visualization pages are ready to reuse.
Runnable frontend demo
A stable Vue 3 + Vite + Element Plus implementation that is easy to extend.
Lightweight mock server
Node.js native HTTP endpoints support early demos and frontend-backend separation.
Specs and templates
Technical rules, design rules, API examples, requirement templates, and testing templates stay in repo.
Open collaboration basics
License, code of conduct, support policy, issue templates, and PR templates are already included.
Project-level AI skills
Requirement analysis, implementation, and regression planning can map directly to agent workflows.
Real screens
Runnable screens from the repo today
These screenshots come from the current demo and cover key admin screens such as dashboard, login, form, and detail views.
Best fit
Where it works best
- Product managers building admin prototypes for review
- Teams starting a new admin product from a shared shell
- Frontend teams that need reusable layout and page patterns
- AI agents that need a clear repo, docs, and safe collaboration rules
- Operations consoles, approval systems, config centers, and data dashboards
Not the right start for
Use another foundation here
- Consumer marketing pages and heavy-brand landing sites
- Editor-style products with rich canvases or advanced authoring flows
- Forcing one business workflow into the template core
- Storytelling sites that rely on heavy motion and bespoke branding
Get started
Run the prototype in three steps
git clone git@github.com:vantang/RuiWebAdminStandardStarter.git
cd RuiWebAdminStandardStarter
npm run dev:start- Run the current demo and use real screens to calibrate requirements.
- Keep the shell and rules, then replace `web/src/views/examples` with business pages.
- Use `mock-server` during early integration and switch to the real backend later.