Ui Design Brain
Generate production-grade UI from 60+ documented component patterns
What You Can Do
You can generate production-ready web interfaces, dashboards, forms, and navigation structures grounded in actual design system best practices. This skill provides access to 60+ documented UI component patterns sourced from industry standards, ensuring your designs follow modern conventions for restraint, typography hierarchy, color strategy, and spacing. Every interface Claude generates will feel polished and professional—not templated.
Features
real design system knowledge from component.gallery, not generic templates
typography hierarchy rules, spacing (8px grid), color strategy, and layout principles
WCAG AA accessibility, modern minimal aesthetics, SaaS design conventions
Claude selects the right patterns for pages, dashboards, forms, and navigation
emphasis on white space, fewer elements, and one confident accent color
generates code aligned with modern web component frameworks
contrast compliance and semantic structure guidance included
8px grid system and gap guidance for grouping and visual breathing room
Example Output
Example 1: SaaS Dashboard Header
Modern nav with logo + search + user menu. Neutral warm off-white background, sans-serif body font, one accent color (slate-blue) for active states. Breathing room above content. WCAG AA contrast verified.
Example 2: Form with Real Patterns
Text inputs with clear labels, radio groups for selection, CTA button in accent color. Spacing follows 8px grid. Validation states inherit from documented patterns. Error messaging uses accessible contrast ratios.
Example 3: Data Table Component
Clean rows with generous padding, sortable headers in distinctive weight, action icons right-aligned. Hover states subtle. No decorative gridlines—white space creates structure.
What's Included
- SKILL.md: Core instruction file with design philosophy and usage rules
- components.md: Full reference library of 60+ UI patterns with best practices and usage guidance
- Design system framework: Spacing grid, typography rules, color strategy, and layout principles
- Accessibility checklist: WCAG AA contrast requirements and semantic structure standards
- Component selection guide: Logic for matching user requests to the right patterns
Who It's For
- Product designers — Generate high-fidelity UI mockups grounded in design system rules
- Frontend developers — Build component-based interfaces with production conventions baked in
- Startup founders — Rapidly prototype SaaS dashboards and landing pages with professional polish
- Design system maintainers — Ensure Claude respects documented patterns and best practices
- UX-minded engineers — Create accessible, modern interfaces without design expertise
Best For
- Generating SaaS dashboards, admin panels, and settings pages
- Building form layouts with proper validation and accessibility
- Creating navigation structures and information architecture
- Designing modals, drawers, popovers, and overlay patterns
- Prototyping landing pages and marketing sites with refined aesthetics
- Building data tables and complex component systems with best practices
You might also like
You can architect enterprise-scale knowledge bases by analyzing support ticket patterns and customer segment needs to identify high-value content opportunities. Claude helps you map customer journey stages to content positioning, create tiered content models based on business impact, and establish governance workflows that optimize for first-contact resolution and support cost reduction. You'll translate fragmented support data into coherent content strategies with measurable KPIs.
You can consolidate fragmented customer research—surveys, interviews, support tickets, behavioral data—into stage-based journey maps that identify moments of truth and experience gaps. The skill helps you weight insights by impact, pinpoint where customers struggle most, and build executive-ready maps that justify CX investment decisions with specific evidence rather than assumptions.
You can analyze support ticket patterns to uncover content gaps, map customer journeys to identify missing information, audit existing articles for consistency and completeness, and establish content governance frameworks. Claude helps you prioritize content creation based on support volume impact, restructure your knowledge base architecture for better findability, and measure whether your content strategy actually reduces support workload.
You can systematically evaluate your design system's health using structured frameworks that assess component consistency, design token usage, documentation completeness, and developer adoption. The skill generates prioritized gap analysis reports that quantify issues—like duplicate components, token sprawl, or implementation friction—and translates findings into executive-ready roadmaps with business cases for remediation. You'll move beyond subjective design assessments to data-backed improvement strategies.
by calesthio
Design production-ready UI components that serve as foundations for scalable design systems. You define clear component APIs, TypeScript/JSDoc prop interfaces, comprehensive variant systems (states, sizes, themes, interactions), and full accessibility markup including ARIA labels and semantic HTML. Claude generates complete Storybook stories and documentation to enable seamless developer handoff and cross-team component consumption.
by az9713
Convert raw Voice of Customer data—surveys, reviews, support tickets, social media—into structured journey maps that pinpoint exactly where customers experience friction, delight, or abandonment. You'll categorize touchpoints by journey stage, quantify sentiment at each interaction, and surface actionable insights about pain points and moments of truth that drive strategic improvements.
You can architect complete design systems leveraging Tailwind v4's CSS-first approach, including semantic color tokens, component variants, responsive patterns, and native dark mode. This skill helps you build reusable component libraries with proper theming infrastructure, accessibility standards, and migration strategies from Tailwind v3 to v4.
by calesthio
Analyze your user group dynamics and member behaviors to identify engagement gaps and at-risk participants. Design targeted retention and activation strategies tailored to different member segments, with clear metrics for measuring success. Create actionable quarterly roadmaps that balance educational value, networking opportunities, and sponsor relationships while maintaining consistent participation across your community.