Design Tools Habilidades de Claude

Beautiful Mermaid Diagram Renderer

Generates high-resolution SVG and PNG diagrams from Mermaid syntax with professional themes and 4K output.

GPT Image 1.5 - AI Image Generator

Generates and edits high-quality images directly within Claude Code using OpenAI's GPT Image 1.5 model.

Modern React Artifact Builder

Streamlines the creation of production-grade, multi-component React artifacts for Claude.ai using shadcn/ui and Tailwind CSS.

MotionEyes Visual Analysis

Analyzes UI motion and visual changes by comparing frame sequences to detect regressions and verify animation fidelity.

Baseline UI

Enforces professional frontend standards and opinionated design patterns to prevent AI-generated interface slop.

Shadcn UI Component Integration

Streamlines the discovery, installation, and customization of accessible shadcn/ui components within React and Tailwind CSS projects.

Interface Design

Builds sophisticated, intent-driven user interfaces for dashboards, SaaS applications, and administrative tools with a focus on craft and consistency.

UI Implementer

Implements production-grade UI components directly from Figma designs and screenshots with automated design fidelity validation.

shadcn/ui Design System

Integrates and manages accessible, high-performance UI components using the shadcn/ui framework and CLI for production-grade frontend development.

Canvas Design

Generates museum-quality visual art and design documents guided by custom-crafted aesthetic philosophies.

Accessible Color Palette Generator

Generates complete, WCAG-compliant 11-shade color scales and semantic design tokens from a single brand hex code.

Icon Design System

Streamlines the selection and implementation of semantically appropriate icons using Lucide, Heroicons, and Phosphor for modern web projects.

Tailwind UI Patterns

Generates production-grade, responsive, and accessible Tailwind CSS components using standardized design patterns.

Gemini Image Generation

Generates and edits high-resolution website assets and infographics using Gemini 3 Native Image Generation directly within Claude Code.

Web Accessibility Specialist

Builds and audits WCAG 2.1 AA compliant web interfaces using semantic HTML and robust ARIA patterns.

Responsive Images

Implements high-performance responsive image strategies including modern formats, art direction, and Core Web Vitals optimization.

Favicon Generator

Generates production-grade favicon sets and web manifests from logos, text, or brand colors to ensure professional site branding.

Frontend Design Pro

Generates agency-quality frontend interfaces across eleven distinct design aesthetics while integrating authentic high-resolution imagery and sophisticated motion design.

Frontend Design Pro

Creates high-end, production-ready frontend interfaces across 11 distinct aesthetics using professional typography and curated visual assets.

Professional UI Architect

Generates accessible, high-quality UI components and feedback forms following strict design constraints and accessibility standards.

Mermaid Diagram Generator

Generates interactive Mermaid diagrams from architecture descriptions and opens them directly in the browser for instant visualization.

Drag-and-Drop Interface Implementation

Builds accessible, high-performance drag-and-drop and sortable interfaces using React and TypeScript.

Timelines & Activity Feeds

Implements chronological UI components including vertical timelines, activity feeds, Gantt charts, and calendar interfaces with full accessibility support.

User Research & Insights

Guides the systematic discovery of user needs through proven research methodologies, interview protocols, and persona frameworks.

Navigation & Routing Implementation

Implements comprehensive navigation patterns and multi-stack routing configurations for frontend and backend applications.

Component System Assembly

Integrates modular AI-generated components into production-ready applications with validated design tokens and framework-specific scaffolding.

Design Tokens & Theming System

Implements a robust design token system and theming framework for consistent, accessible, and customizable UI styling across applications.

User Feedback & Notifications

Implements professional notification systems, modals, and progress indicators using UI/UX best practices and accessibility standards.

AI Chat Interface Builder

Builds sophisticated, production-ready AI chat interfaces with streaming responses, context management, and multi-modal support.

Building Tables & Data Grids

Constructs high-performance, accessible data grids and tables optimized for everything from simple displays to enterprise-level datasets.