As a developer, I often found traditional admin systems falling short in two key areas: user experience and visual design. I wanted something more refined, aesthetically pleasing, and delightful to use. So I built Art Design Pro — a Vue 3-based admin system template designed for both functionality and beauty.
What Problems Does It Solve?
😴 Visual Fatigue
Tired of dull, lifeless admin panels? Art Design Pro uses thoughtfully crafted colors, layouts, and micro-interactions to make every click and scroll feel like a pleasant journey.
🔧 Poor UX in Admin Interfaces
An admin dashboard should feel intuitive. With clean layouts and smooth interactions, this template helps users quickly find what they need — like the interface is talking to them.
♻️ Reinventing the Wheel
Don't start from scratch every time. Art Design Pro gives you a complete set of reusable UI components, layouts, and styling systems to fast-track your development.
Core Features
🎨 Beautiful & Functional
Modern but minimal, elegant but practical. Every detail has been refined to balance usability with good taste.
🤍 Emotion-Centric Interactions
From button feedback to animations, everything is designed to feel warm and responsive.
⚖️ Modular & Flexible
Highly modular architecture — customize what you need, skip what you don't. Ideal for both rapid prototyping and enterprise-level systems.
🌐 Fully Responsive
Whether you're on desktop or mobile, the layout adapts seamlessly with consistent quality.
❌ No Over-Engineering
Minimal abstraction. Easy to understand, extend, and modify. Designed to give you control.
Live Demo & Resources
- 🎯 Live Demo: https://www.lingchen.kim/art-design-pro
- 🔗 Docs: https://www.lingchen.kim/art-design-pro/docs/
- 📂 GitHub Repo: https://github.com/Daymychen/art-design-pro
Highlights
Light & Dark Mode Support
Cards, Charts & Widgets
Banner & Notifications
Rich Text Editor, Confetti, and System Icons
System Settings, Search & Quick Chat
Getting Started
1. Clone the Repo
git clone https://github.com/Daymychen/art-design-pro
2. Install Dependencies
npm install -g pnpm # or use yarn global add pnpm
pnpm install # or pnpm install --ignore-scripts
3. Run Dev Server
pnpm dev
Open http://localhost:3006 to get started.
Tech Stack
- 📱 Vue 3 + TypeScript + Vite
- 💻 Element Plus (with style optimizations)
- ⚖️ UnoCSS for utility-first design
- 👁 Vue Router & Pinia
- 🔰 ECharts, i18n, permission directives
Project Structure, Aliases & Theming
Well-organized folder structure, handy aliases (e.g., @views, @utils), and a full set of CSS variables for theming across light/dark modes.
You also get auto-imports for Vue APIs, Element Plus components, and system-level UI components — powered by unplugin-auto-import & unplugin-vue-components.
Icon System
Built-in icon system powered by iconfont.cn. Easily use Unicode or class-based icons like:
<i class="iconfont-sys iconsys-gou"></i>
Localization
Supports both Chinese and English via vue-i18n. Easily extendable for other languages.
Git & Commit Best Practices
- 📈 ESLint, Prettier, Stylelint for formatting
- ✍️ CommitLint + cz-git for consistent commit messages
- 💡 Lint-staged + Husky for pre-commit hooks
Deploying
pnpm build
Update VITE_BASE_URL in .env.production if you're deploying under a sub-path. Example nginx config:
server {
location /art-design-pro {
alias /usr/local/nginx/html/art-design-pro;
index index.html;
}
}
Final Thoughts
Art Design Pro isn't just another admin template. It's an opinionated, thoughtfully crafted toolkit aimed at bridging design and development. Whether you're an indie hacker, freelancer, or building internal tools — this can be your foundation.
Thanks for reading — and if you find it helpful, please consider ⭐️ starring the repo, or joining the community.
Top comments (1)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.