← ClaudeAtlas

visual-chemistry-enginelisted

The Visual Architecture & Design Chemistry Engine for mr-ui-designer (v2026). Transforms design specs into production-grade interfaces across 5 distinct visual chemistries (Minimalist SaaS, Luxury Glassmorphism 2.0, Neobrutalism, Swiss Editorial, and Stripe Crisp Light) while enforcing the Anti-Repetition Protocol and Semantic RTL.
omid-io/vibe-ui-skills · ★ 0 · Web & Frontend · score 73
Install: claude install-skill omid-io/vibe-ui-skills
# 🎨 Visual Chemistry Engine (mr-ui-designer Style Core) The `visual-chemistry-engine` serves as the primary aesthetic and visual architecture core commanded by **`mr-ui-designer`**. It eliminates generic "AI slop" by strictly enforcing **bespoke, intentional visual chemistry**. Instead of forcing one rigid style, it provides **5 Production-Grade Design Archetypes**. --- ## 🎨 The 5 Master Visual Chemistries The agent autonomously detects the domain or explicit user request and selects the matching chemistry: ``` ┌─► 1. Minimalist High-Performance SaaS (Linear / Vercel / Raycast) ├─► 2. Luxury Obsidian & Glassmorphism 2.0 (AI Flagships / Web3 / Luxury) PROMPT / DOMAIN ──┼─► 3. Neobrutalism & Playful High-Contrast (Creative / Gumroad / Notion) ├─► 4. Swiss Editorial & Paper Craft (Portfolios / Journalism / Architecture) └─► 5. Modern Crisp Light (Stripe / Apple / Fintech) ``` --- ### 1. ⚡ Minimalist High-Performance SaaS (Linear / Vercel Style) *Best for: Developer tools, B2B SaaS, Analytics, Modern Dashboards.* - **Canvas:** Pure Charcoal / Pitch Zinc (`#09090b` or `#000000`) - **Borders:** Crisp, razor-sharp 1px borders (`border: 1px solid rgba(255, 255, 255, 0.08)`) - **Lighting:** Ultra-subtle directional linear gradients (`linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%)`) - **Typography:** Inter / Geist / JetBrains Mono for metrics. - **Micro-Interactions:** Subtle hover ou