iblai-vibe-design
SolidUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Falls back to the ibl.ai BRAND.md design system when the project has none. Not for backend-only or non-UI tasks.
Install
Quality Score: 86/100
Skill Content
Details
- Author
- iblai
- Repository
- iblai/vibe
- Created
- 5 months ago
- Last Updated
- today
- Language
- JavaScript
- License
- MIT
Integrates with
Bundled in these plugins
Similar Skills
Semantically similar based on skill content — not just same category
vibe-design
Frontend design workflow that produces non-generic, editorial-quality UI. Immediately invokes the frontend-design skill for aesthetic direction before any code is written. Enforces a written design contract that is re-read before every single component — not once and forgotten. Creates separate files per page and component, never monolithic output. Reads DESIGN.md if present for exact brand tokens. Derives the design from the product's domain × audience × emotion (ANTI_GENERIC.md) — killing BOTH the SaaS-generic look AND the anti-generic cliché (warm-cream+terracotta, the Fraunces/DM-Sans reflex, dark-as-premium, SaaS layouts on non-SaaS products). Reads SITE_TYPE_PLAYBOOK.md for domain-specific design worlds well beyond software. Triggers on "design:" prefix, "style this", "make this look better", "redesign this page", "the UI needs work", "can you polish", "do a design pass", "it looks too plain", "it looks generic", "it looks like a saas dashboard", "make separate pages". Always use when the goal is visual
design-refinement
Use to make a UI distinctive instead of generic — when a design "looks AI-made / Claude-type / templated", needs to be bolder or quieter, or before shipping any user-facing surface. Picks real fonts (not training-data defaults), commits to a color strategy, kills cliché patterns, and runs an audit -> polish pass. Trigger on "make it look better", "less generic", "design critique", "polish the UI", "pick fonts/colors", "this looks like AI slop".
vibe-to-ui
Design systems, motion, mood boards, spatial layout, visual assets, Design Context profiles, and a global Inspiration Library from screenshots, website URLs, inspiration images, music, or fuzzy aesthetic intent. Classifies page archetype, explores 3 product-aware directions before locking tokens (unless exact restoration), and applies only after confirmation. Use when designing or restyling UI, collecting design inspiration under ~/.vibe-to-ui/inspirations, extracting tokens/motion, generating assets, saving brand context under ~/.vibe-to-ui, or Git remote sync of Design Context for cross-device sharing.