디자인 스킬

Review visual design choices before creating or styling web pages, components, apps, dashboards, or interactive reports. It flags repetitive colors, typography, layouts, and motion patterns to avoid, while keeping explicit user requests and other specified styles in control.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Review design choices before creating a web page
• Check repetitive card layouts in a dashboard
• Review typography and color choices in components

Plan a presentation around what the audience needs to understand or decide. Develop its outline, titles, evidence, and visual choices, with guidance tailored to live talks or decks people will read on their own.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Outline a five-minute progress update
• Clarify the decision needed in a board presentation
• Plan a customer demo around onboarding questions

Create and edit Canva designs for presentations, campaigns, flyers, and social posts. Generate standalone images, remove backgrounds, recover editable layers from flat graphics, and use available brand templates or resize existing designs.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a flyer or presentation in Canva
• Make campaign artwork from a brand template
• Resize a design for social posts and stories

Build an interactive app prototype in React with working clicks, form validation, animated transitions, and navigation across multiple steps. Manage changing screen state so users can try realistic flows and see how the interface responds.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Prototype a form with input validation
• Try navigation across multiple steps
• Review hover effects and animated transitions

Create an HTML slide presentation with a clear narrative, readable typography, and layouts suited to the audience and brand. Static slide content supports direct text editing in the editor, while the presentation component provides navigation and PDF printing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create slides for an internal presentation
• Build a deck that follows a brand or design system
• Present figures using tables, images, and quotations

Create polished interface designs using existing components and brand references. The workflow clarifies assumptions, shares early drafts, explores multiple variations, and checks the results so users can compare options and refine their preferred direction.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing screens that match an existing product
• Comparing layout, color, and typography options
• Refining designs through early feedback

Present design alternatives side by side, grouped into rounds with the newest round at the top. Stable IDs and links let users refer to specific options, compare earlier work, and request further variations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Comparing several design alternatives
• Refining a specific option by its ID
• Reviewing new proposals alongside earlier rounds

Explore design ideas with three to five distinct rough options using wireframes, simple screen layouts, and storyboards. Compare structure and flow, then develop selected options while keeping earlier rounds available for reference.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Comparing several screen layout options
• Exploring user flows with storyboards
• Developing variations of a preferred design

Inspect Figma screens to gather details for implementation, including component variants, spacing, shared design settings, and image assets. It helps an agent understand layouts and design libraries before turning a design into code.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Gathering implementation details from a Figma screen
• Checking component variants and spacing
• Extracting image assets for implementation

Create maps from real geographic data for presentations, documents, graphics, and websites. Use d3-geo for static maps suitable for export, or Leaflet with OpenStreetMap tiles for street maps that users can pan and zoom.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add a world map to a presentation
• Create a regional map for a report
• Build a street map that users can pan and zoom

Add controls for adjusting a design’s colors, layout, feature settings, or headline text. Use specified values or let the agent choose a few high-impact ones, keeping the Tweaks panel compact and hidden when disabled.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add controls for adjusting key colors
• Make layout variants selectable
• Add a control for changing headline text

Create a 3D object with three.js, inspect it from every angle in an interactive viewer, and download it as OBJ + MTL or GLB for use in other 3D applications.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a 3D object and inspect it from every angle
• Export a model for further editing in Blender
• Review an object's silhouette and materials

Build a design system from product code, Figma designs, and brand materials. Organize colors, typography, assets, and writing guidelines, then create reusable React components and interactive screen examples that follow the source designs.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Organize brand assets and design guidelines
• Create reusable React components from existing designs
• Recreate product screens as an interactive UI kit

Prepare a design handoff package for a developer using Claude Code. It documents screen layouts, visual details, interactions, and state requirements in a README.md, alongside reference files for implementation in the target app.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Handing HTML prototypes to a developer
• Documenting precise visual details for implementation
• Explaining screen interactions and state requirements

Create diagrams in Artifacts that explain data flow, system interactions, and differences between options. Guides diagram structure and inline SVG, a vector image format embedded in HTML, with readable labels and support for light and dark themes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Illustrating data flow and component interactions
• Comparing system designs side by side
• Explaining changes before and after a migration

Design a single-page, print-ready flier as a self-contained HTML file. Organize a prominent headline and essential details, optionally add tear-off contact slips, and check that the layout fits one printed page.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a single-page event flier
• Group dates, locations, and costs for quick reading
• Add tear-off phone number slips

Import an existing React component library into Claude Design, including its styles, usage references, and previews. This lets the design agent build screens and prototypes using the same components already maintained in the source project.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Importing an existing React design system into Claude Design
• Creating prototypes with existing components and styles
• Syncing component changes after an initial import

Design distinctive web interfaces when no existing brand guidelines apply. The skill helps define a visual direction and carry it through typography, color, layout, backgrounds, and animation in HTML, with implementation detail matched to the chosen style.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing a web page without existing brand guidelines
• Coordinating typography, color, and spacing
• Creating distinctive layouts and page animations

Guide the design of HTML pages for Artifacts, from documents to interactive tools. Shape typography, colors, and layouts around the subject while accounting for mobile screens, light and dark themes, and viewer restrictions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Turning a Markdown document into a designed HTML page
• Designing a landing page around its subject
• Making an Artifact readable on mobile screens

Plan the visual and narrative direction of HyperFrames videos, including colors, fonts, composition, narration, and scene rhythm. The skill helps apply existing design specifications, choose a style, and check whether the finished work follows that direction.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Match a video's appearance to existing design specifications
• Choose colors and fonts to suit a mood
• Plan scene rhythm and narration pacing

Turn written descriptions or Mermaid code into diagrams showing processes, interactions, and data relationships. Choose a color theme and save both SVG files, which stay sharp when enlarged, and high-resolution PNG images.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Illustrating workflows and decision trees
• Diagramming API interactions
• Visualizing database relationships

Apply Disney's 12 animation principles to Lottie vector animations exported from After Effects. Use guidance on keyframes, motion paths, and playback controls to shape anticipation, timing, secondary actions, and interactive movement.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding anticipation and squash-and-stretch to an animation
• Adjusting playback speed and frame ranges
• Coordinating main and secondary animations

Build prompts for FLUX image generation and editing, with guidance on model selection, lighting, composition, text, and precise colors. It also covers structured scene descriptions using JSON and editing with multiple reference images.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Writing prompts for image generation
• Specifying brand colors and text
• Editing with multiple reference images

Create a reusable design guide covering colors, typography, layout, and motion. Extract styles from existing sources or start from scratch, then turn the guide into instructions or code for supported video, slide, and design tools.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating a design guide from a desired mood
• Extracting visual rules from a website or brand PDF
• Applying one style to videos, slides, and designs