Design Tools Claude 스킬

AI Image Generation

Generates high-quality AI images, UI mockups, and diagrams directly from text descriptions using the FAL AI model ecosystem.

Frontend Design

Creates distinctive, production-grade frontend interfaces with a focus on high-quality, non-generic design aesthetics.

Stitch to React Component Generator

Converts Stitch design files into production-ready, modular React components using Vite, Tailwind CSS, and AST-based validation.

Frontend UI Animator

Enhances Next.js and Tailwind projects with purposeful, performant UI animations and smooth motion design.

Brand Identity Architect

Orchestrates a panel of five legendary creative directors to generate comprehensive, professional brand identity systems.

Excalidraw Canvas Skill

Programmatically creates, edits, and refines professional Excalidraw diagrams with real-time canvas synchronization and visual feedback.

Twig Component Generator

Generates production-ready Symfony UX Twig components including boilerplate PHP classes and associated templates.

React Performance Optimization

Optimizes React application performance by implementing efficient rendering patterns, virtualization, and state management best practices.

Figma Design Ops Specialist

Converts design requirements and system documentation into comprehensive, Figma-ready implementation specifications using a multi-agent panel.

CSS Architecture & Styling Guide

Provides comprehensive guidance on CSS methodologies, naming conventions, and modern layout patterns for building scalable frontend interfaces.

React Design Patterns & Best Practices

Optimizes React application development through standardized hooks, composition patterns, and performance-tuned implementation strategies.

Apple HIG Designer

Generates pixel-perfect, HIG-compliant interfaces for iOS and macOS applications using Apple’s official design language.

Professional Infographics

Generates publication-quality infographics and data visualizations with automated research and smart iterative refinement.

Framer Motion

Builds fluid, production-ready animations and interactive UI components for React applications using declarative syntax.

Frontend UI/UX Architect

Crafts high-fidelity, designer-grade frontend interfaces with a focus on distinct aesthetics and production-ready code.

UI/UX Pro Max

Accelerates the creation of professional, accessible user interfaces with automated design systems and multi-stack implementation patterns.

UI Cloner Iterator

Refines UI implementations through five structured comparison passes against design specifications to achieve high-fidelity results.

UI Cloner Fidelity Auditor

Ensures high-fidelity UI replication by performing an exhaustive quality audit on design prompts before code generation.

Figma Design Implementation

Translates Figma designs into production-ready code with pixel-perfect visual fidelity using the Figma MCP workflow.

UI Mockup & Next.js Prototyping

Creates high-fidelity HTML/CSS/JS prototypes and UI mockups optimized for seamless transition to Next.js components.

UI Cloner & Site Replication Protocol

Clones and adapts existing website designs into high-fidelity implementation blueprints using a four-phase forensic audit protocol.

Forensic Site DNA Audit

Performs a clinical forensic analysis of websites to extract high-fidelity design tokens, architecture, and layout patterns.

UI Cloner Synthesis

Synthesizes analyzed site data and brand requirements into a high-fidelity developer prompt for precise frontend replication.

UI Cloner Brand Interviewer

Facilitates a comprehensive 12-point brand discovery interview to define site identity, design preferences, and technical requirements.

Design System Architect

Generates production-grade design token sets and performs comprehensive visual consistency audits to eliminate UI debt and generic AI patterns.

Figma Design Integration

Translates Figma designs into production-ready React and Tailwind CSS code while ensuring visual parity and design system consistency.

Phase 5 Design System Architect

Develops consistent, platform-independent component libraries and design tokens for all major UI frameworks.

Animated HTML Presentations

Generates high-quality, animation-rich HTML presentations with zero dependencies and automatic PowerPoint conversion.

SAP Prototype Generator

Generates professional SAP-style UI prototype images directly from Markdown table definitions.

Mini App UI/UX Designer

Streamlines the UI/UX and technical design process for mini-apps by generating comprehensive design documentation and ASCII wireframes.