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 create authentic, platform-specific content variations that maintain consistent brand messaging across social channels, email, forums, and community spaces. The system helps you balance promotional advocacy with genuine community value, track which messaging resonates most with different audience segments, and build scalable content workflows that preserve your credibility as a trusted ambassador rather than treating you as a broadcast channel.
You can transform raw customer feedback—reviews, survey comments, support tickets, and interview transcripts—into structured journey maps that reveal where customers encounter friction, how sentiment shifts across touchpoints, and which experience gaps drive churn or loyalty. By segmenting customers by journey type and analyzing sentiment transitions across stages, you'll uncover the specific moments that matter most to CX improvement ROI.
You can systematically analyze large volumes of unstructured customer feedback across multiple channels—surveys, support tickets, reviews, social media, interviews—to identify meaningful patterns and separate signal from noise. The framework guides you to quantify business impact by linking feedback themes to retention, revenue, and satisfaction outcomes, then craft actionable recommendations that resonate with product, operations, and executive stakeholders. You'll create coherent insight narratives that drive organizational change and track sentiment evolution over time to measure VoC program effectiveness.
Process large volumes of unstructured customer feedback across multiple channels to identify recurring themes, sentiment patterns, and business impact. Claude synthesizes hundreds of feedback entries simultaneously, revealing subtle patterns humans might miss, and translates raw customer voice into executive-ready insights with clear strategic recommendations for product prioritization and experience enhancement.
You can rapidly assess the emotional tone, underlying concerns, and urgency level of community comments and messages, then generate tailored responses that address specific sentiment patterns. This skill helps you navigate complex situations—from frustrated customers to mixed sentiment threads—while keeping your brand voice consistent and tensions low.
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.
This skill performs three-part audits of your knowledge base: gap analysis that correlates missing content with support ticket patterns, consistency checking that flags conflicting or outdated information across articles, and comprehension assessment that evaluates readability and clarity for your user population. You'll receive a prioritized remediation plan that quantifies which content gaps generate the most support load, so you can focus content creation efforts where they matter most.
Transform raw NPS and CSAT feedback data into structured root cause analyses that drive measurable experience improvements. You'll detect recurring themes across hundreds of comments, calculate the percentage of detractors citing specific issues, correlate feedback to customer segments, and receive prioritized intervention recommendations ranked by scope and fixability. This skill bridges the gap between data collection and strategic action.