디자인 스킬

Create website reference images, inspect their text, spacing, colors, and layout, then build the frontend to match. Section-specific images guide landing pages, portfolios, and redesigns, with attention to readable content and uncluttered first screens.

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

• Building a landing page from generated design references
• Redesigning a portfolio website
• Refining a hero section for small laptop screens

Create HTML visuals that appear directly inside an Orca chat reply. Use charts, diagrams, tables, reports, or mockups to explain an answer visually, with styles, scripts, and data included in each page.

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

• Comparing numbers with an inline chart
• Explaining relationships with a diagram
• Displaying a table or report in chat

Analyze a Figma file and turn its pages, screens, components, instances, and design tokens—shared design values—into an interactive graph. Open the dashboard to explore the file's structure and relationships.

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

• Review the structure of a Figma file
• Explore components, variants, and instances
• Inspect how shared design values are used

Turn plain-language descriptions, Mermaid diagrams, or repository evidence into interactive standalone HTML diagrams. Create system maps, workflows, timelines, database relationships, and everyday process diagrams, with automated validation, light and dark themes, and image, SVG, or WebM export.

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

• Mapping a system from repository evidence
• Explaining approval steps or travel plans
• Visualizing database tables and relationships

Discover available skills and combine one to three of them into a single creative piece. Use it for an unexpected presentation, visual artifact, or interactive web experience, drawing on known interests or seasonal themes.

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

• Find inspiration through an unexpected creative piece
• Try a creative combination of available skills
• Request a playful interactive web experience

Build web pages and interface components with a clear visual direction and working code. Shape typography, colors, layouts, and animation around the intended audience and purpose, with support for HTML/CSS/JS, React, and Vue implementations.

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

• Build a landing page with a clear visual identity
• Refine a dashboard’s layout and typography
• Create React components with coordinated colors and motion

Create character, scene, and product images from structured descriptions of style, composition, lighting, and color. Guide generation with reference images and aspect ratio settings, using a Python script connected to a supported image generation service.

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

• Creating characters with specified clothing, era, and appearance
• Visualizing scenes with a chosen mood, weather, and lighting
• Producing product images with specified materials and viewing angles

Design and improve website and app interfaces, from typography, spacing, and color to task flows. Review usability, accessibility, responsive layouts, and performance, or refine interface text, error states, and reusable design elements.

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

• Planning the structure and appearance of a new interface
• Improving typography, spacing, and color in existing screens
• Reviewing accessibility and layouts across screen sizes

Style documents and other artifacts with Anthropic's brand colors and fonts. The skill specifies heading and body typography, readable text colors for different backgrounds, and accent colors for shapes, with fallback fonts when needed.

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

• Matching presentation colors to Anthropic's brand
• Applying consistent heading and body fonts
• Choosing text colors for light and dark backgrounds

Create original posters and static artwork by first defining a visual direction for color, shape, space, and typography. Receive a Markdown design philosophy alongside a PNG or PDF artwork that communicates primarily through visuals.

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

• Create an original poster
• Express a theme through abstract artwork
• Develop a visual direction and finished artwork

Give slides, documents, reports, and HTML landing pages consistent colors and fonts. Choose from ten preset themes using a visual showcase, or create a custom theme from a description and review it before application.

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

• Making colors and fonts consistent across slides
• Choosing a theme for documents or reports
• Styling an HTML landing page

Create a JSON theme preset for Ruflo Console Theme Studio from a visual brief. Adjust six colors, animation speed, and decorative layers while keeping text readable and success, warning, and failure states visually distinct.

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

• Creating a console palette that matches a preferred mood
• Reducing decorative motion for a calmer display
• Designing a cyberpunk theme with stars and a globe

Review multi-step forms to find information users must enter more than once. Suggest automatic filling, reuse options, and preserving data between steps, while explaining relevant accessibility requirements and exceptions for security or validity.

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

• Checking repeated fields during checkout
• Reviewing signup and onboarding forms
• Reusing information in support flows

Review images, icons, and illustrations for cultural meanings that may confuse international audiences. Suggest neutral alternatives or locale-based replacements with a shared default, and flag embedded text and other visuals that need localization review.

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

• Reviewing images for an international launch
• Checking gestures and culturally specific symbols
• Switching images by language or region

Review help links, chat controls, phone numbers, and FAQ entry points across related pages. Compare their relative positions and order under matching layout conditions, then identify changes that make support easier to find throughout a task.

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

• Reviewing help placement throughout checkout
• Aligning support links across onboarding steps
• Checking help entry points during account recovery

Review CSS color definitions and convert palettes to oklch(), a color format designed around human perception. Use consistent lightness steps to build color scales, dark-mode palettes, and interaction states, with guidance for wide-gamut displays.

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

• Organizing reusable CSS color definitions
• Building color scales with consistent perceived lightness
• Designing dark-mode and hover colors

Check text, input borders, meaningful icons, and other interface elements for sufficient color contrast. Guide color adjustments against WCAG accessibility thresholds and verify readability across default, hover, focus, active, and visited states.

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

• Checking text against background colors
• Reviewing input borders and meaningful icons
• Checking contrast during hover and keyboard focus

Build an interactive page that explains a process as a machine viewed from an angle. A tested simulation keeps movement, numbers, and explanations consistent, while controls let readers step through operations and explore failures.

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

• Explain a cache or queue through an interactive machine
• Show what fails when one process step breaks
• Create a standalone visual explanation page

Create animated lesson diagrams, sliders that update figures, and interactive panels that explain how systems work. It also builds moving dot patterns for page headers, with rules for readability, themes, and reduced motion.

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

• Animate a process in a lesson
• Explore a formula with a slider
• Show a system's behavior through one control

Create static SVG diagrams, scalable images for lessons, READMEs, and manuals. It uses real system names, nine diagram types, and consistent colors and arrows, with checks for readable labels, accessible descriptions, and valid markup.

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

• Add a diagram of system interactions to a README
• Explain state transitions in a manual
• Illustrate data flow from logs or specifications

Apply shared visual and writing rules to course pages, figures, and manuals. Check colors, fonts, labels, layouts, plain technical English, dark themes, keyboard focus, touch targets, and reduced-motion behavior against defined reference values.

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

• Applying consistent colors and fonts to course pages
• Checking dark theme colors and text readability
• Standardizing figure labels and card layouts

Builds and improves web interfaces, covering layout, styling, motion, and usability. It records design rules before implementation, uses supplied references or design research, and checks the result in real browsers for visual consistency, accessibility, and performance.

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

• Building a landing page from a screenshot or website reference
• Improving an existing dashboard’s layout and visual design
• Adding animation and interaction feedback

Create and revise posters, social graphics, web pages, and app screens on a Design canvas. Apply brand colors, fonts, and shared components, organize multiple artboards, and make targeted changes to existing designs.

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

• Design a menu poster
• Create a graphic for a social post
• Design web and app screens

Build and revise a design system from brand materials or code. Organize colors, typography, spacing, components, and assets into structured files, with usage guidelines and previews, using the supported Design System artifact format.

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

• Organizing design rules from existing code and brand materials
• Documenting colors, typography, and spacing
• Collecting logos, icons, and component previews