Design Tools Claude 스킬

Design Wizard

Orchestrates an interactive end-to-end frontend design process to generate distinctive, production-ready user interfaces.

Image Enhancer

Transforms low-quality images and screenshots into professional-grade visuals by enhancing resolution, sharpness, and clarity.

Moodboard Creator

Synthesizes design inspiration into cohesive visual moodboards to establish a clear UI/UX direction before implementation.

Inspiration Analyzer

Analyzes live websites to extract design elements including color palettes, typography, and UI patterns for frontend development inspiration.

Color Curator

Browses trending palettes, extracts hex codes, and generates professional color configurations for frontend projects.

Artifacts Builder

Builds complex, production-grade React artifacts for Claude.ai using modern frontend stacks like shadcn/ui and Tailwind CSS.

Theme Factory

Styles artifacts like presentations, documents, and HTML pages using professional color palettes and curated typography pairings.

Canvas Design Studio

Generates sophisticated visual art and design philosophies directly within Claude Code to create museum-quality posters and documents.

Scientific Slide Deck Generator

Generates visually stunning, research-backed scientific presentations and conference slides with automated image generation and citation management.

LaTeX Research Posters

Generates professional, publication-quality scientific research posters using specialized LaTeX frameworks and AI-powered schematics.

Frontend UI/UX Designer

Crafts high-impact, production-grade frontend interfaces with a focus on bold aesthetics and professional design intuition.

shadcn/ui Component Integration

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

Generate Image

Generates and edits high-quality photorealistic images, artistic illustrations, and visual concept art using advanced AI models like FLUX and Gemini.

Stitch UI Prompt Optimizer

Transforms vague UI concepts into structured, design-system-aware prompts for high-quality interface generation.

Frontend Design Review & Creator

Reviews and builds production-grade frontend interfaces focused on design system compliance, accessibility, and high-quality craft.

Web Interface Guidelines Auditor

Audits frontend code for compliance with modern accessibility, UX, and design standards based on Vercel's web interface guidelines.

Frontend Dark Theme UI (TypeScript)

Builds high-performance, dark-themed React interfaces featuring glassmorphism, fluid animations, and a refined aesthetic.

React Flow Node Creator

Generates standardized React Flow node components with TypeScript types, Zustand state integration, and interactive handles.

Remotion Video Development

Streamlines programmatic video creation in React by applying best practices for animations, compositions, and media processing.

AI Elements UI Builder

Generates and integrates AI-native chat interface components using shadcn/ui patterns and Vercel AI SDK conventions.

React Rerender Memoization

Optimizes React application performance by extracting expensive computations into standalone memoized components.

Interface Design Engineering

Crafts high-fidelity, purpose-driven user interfaces for complex applications while avoiding generic, template-driven AI design patterns.

OpenSCAD 3D Modeler

Generates, validates, and exports customizable 3D models for 3D printing and CAD workflows using OpenSCAD.

Frontend Design Pro

Generates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics through bold design thinking and polished code.

UI Styling & Component Design

Builds accessible, professional user interfaces using shadcn/ui, Tailwind CSS, and sophisticated visual design patterns.

Aesthetic UI & UX Design

Creates visually stunning and functional user interfaces using proven design principles, systematic workflows, and AI-driven image iteration.

Frontend Development & React Guidelines

Standardizes modern React application development with production-ready patterns for data fetching, routing, and UI styling.

Panda CSS Framework

Streamlines the creation of type-safe, high-performance styling using Panda CSS's atomic CSS-in-JS engine.

Ark UI Components

Implements accessible, headless React UI components using Ark UI's primitive patterns and data-attribute styling.

Vue JSX Best Practices

Implements idiomatic Vue JSX syntax and patterns while preventing common React-style attribute errors.