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 leverage Claude to perform comprehensive taxonomy audits that identify term inconsistencies, semantic gaps, and governance breakdowns across your knowledge management infrastructure. This skill enables you to develop and enforce governance policies, map compliance requirements to classification schemes, and plan taxonomy migrations with confidence that stakeholder alignment and regulatory needs are addressed.
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
You can upload raw NPS/CSAT survey data and receive automated sentiment analysis, root cause identification, and segmented customer insights. The skill extracts satisfaction drivers, flags emerging issues, and produces executive-ready reports with supporting evidence—enabling you to move beyond topline scores to understand the 'why' behind customer sentiment and specific improvement levers.
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.
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.
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.