visual-designing
2
总安装量
1
周安装量
#66549
全站排名
安装命令
npx skills add https://github.com/vidyfoo/antigravity-skill-engine --skill visual-designing
Agent 安装分布
cline
1
openclaw
1
cursor
1
Skill 文档
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.