tomevault-io Visual Design System
Unified Design Engine v1.0
Purpose
A single source of truth for all UI/UX design tasks. This skill intelligently switches between "Production Efficiency" (Standard) and "Wow Factor" (Premium) based on user intent.
🧭 Design Modes
| Mode | Trigger | Focus | Style Traits |
|---|---|---|---|
| Standard (Production) | "create a dashboard", "login form", "settings page" | Usability, Speed, Accessibility | Tailwind utility-first, clean whites/darks, standard shadcn/ui components. |
| Premium (Aesthetic) | "premium", "glassmorphism", "wow me", "landing page" | Visual Impact, Emotion, Brand | Glass effects, Aurora gradients, Micro-interactions, custom CSS variables. |
🛠️ Execution Protocol
- Analyze Aesthetic Intent: Does the user want a solid tool (Standard) or a piece of art (Premium)?
- Load Resources (Premium Only):
- If Premium/Glass/Motion is requested, you MUST read:
resources/glass-components.md(for glass CSS)resources/premium-palettes.md(for gradients/colors)resources/micro-interactions.md(for animations)
- If Premium/Glass/Motion is requested, you MUST read:
- Generate CSS/Tailwind:
- Standard: Use standard Tailwind (
bg-white,text-slate-900,rounded-lg). - Premium: Use
backdrop-filter,bg-white/10,border-white/20, and custom animations.
- Standard: Use standard Tailwind (
📐 Core Principles (All Modes)
- Mobile First: Always responsive.
- Dark Mode Ready: All specific colors must have dark mode equivalents.
- Accessibility: No ultra-low contrast text, even in "Premium" mode.
🚫 Anti-Patterns
- Mixing Metaphors: Don't put a hyper-realistic glass card inside a flat material design dashboard. Commit to one style.
- Over-Animation: Motion should facilitate understanding, not distract.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.