디자인 스킬

Turn a system description into a dark-themed architecture diagram in a single HTML file. It uses SVG, a scalable graphics format, to show components, connections, cloud boundaries, and security flows in a browser.

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

• Explaining frontend, backend, and database connections
• Mapping cloud regions and subnets
• Visualizing microservice connections

Create browser-based art and animations with p5.js, including visuals that respond to mouse input or sound. The skill guides concept development, coding, previewing, and exporting finished work as images, videos, or vector graphics.

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

• Creating art from rules and randomness
• Building visuals that respond to mouse input
• Making animations that react to sound

Build HTML/CSS pages using visual specifications from 54 established websites, including Stripe, Linear, and Vercel. Templates provide colors, typography, spacing, component styles, and layouts that adapt to different screen sizes.

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

• Creating a landing page inspired by Stripe
• Designing a dashboard inspired by Linear
• Styling a documentation website

Create DESIGN.md files that combine exact design values with explanations for coding agents. Validate file structure and color contrast, compare versions, and export shared design settings to Tailwind or a standard design-token JSON format.

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

• Turning a style guide into a specification for agents
• Sharing consistent design settings across projects
• Checking color contrast and token references

Turn source content into infographics that explain comparisons, timelines, processes, and other structures. Choose from 21 layouts and 21 visual styles, then generate an image with your preferred language and format.

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

• Present differences in a comparison graphic
• Illustrate a process or tutorial
• Create a visual timeline

Create HTML landing pages, slide decks, and clickable prototypes using existing brand materials, screenshots, or product code. Explore layout and visual alternatives, then check the resulting files, interactions, and responsive behavior with available tools.

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

• Creating a landing page from brand materials
• Testing a product flow with a clickable prototype
• Designing a presentation as an HTML slide deck

Create original posters and static artwork by first defining a visual direction, then expressing it through color, shapes, spacing, and restrained text. Deliverables include PNG or PDF artwork and a Markdown document explaining the design philosophy.

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

• Creating an original poster around a theme
• Making abstract artwork with minimal text
• Documenting a visual direction alongside finished artwork

Apply Anthropic's brand colors and typography to visual materials. The skill specifies heading and body fonts, background-aware text colors, and accents for shapes, with fallback fonts when Poppins and Lora are unavailable.

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

• Styling materials with Anthropic's brand colors
• Unifying heading and body fonts
• Adjusting text colors for light and dark backgrounds

Create original generative art with p5.js, using particles, mathematical rules, and controlled randomness. Explore variations through interactive controls, reproduce results with a seed value, and save the artwork as a PNG.

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

• Creating original art with code
• Exploring particle motion and flow fields
• Comparing variations by changing seeds and parameters

Applies coordinated colors and fonts to slides, documents, reports, and HTML landing pages. Choose from ten preset themes using a visual showcase, or request a custom theme based on a description and review it before application.

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

• Giving a slide deck consistent colors and fonts
• Choosing a theme from a visual showcase
• Coordinating the appearance of reports and documents

Design new interfaces or reshape existing ones with colors, typography, and layouts grounded in the subject and audience. It guides planning, implementation, and critique, including interface wording, purposeful motion, mobile layouts, and accessibility.

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

• Plan the visual direction for a new website
• Redesign an interface that feels generic
• Choose colors, typefaces, and layout for an audience

Design new interfaces or reshape existing ones with colors, typography, and layouts grounded in the subject and audience. It guides planning, implementation, and critique, including interface wording, purposeful motion, mobile layouts, and accessibility.

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

• Plan the visual direction for a new website
• Redesign an interface that feels generic
• Choose colors, typefaces, and layout for an audience

Build accessible interfaces with shadcn/ui components and Tailwind CSS styling. Create forms, tables, and layouts that adapt to screen size, then coordinate colors, spacing, and dark mode across the application.

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

• Build forms with keyboard navigation
• Adapt layouts for phones and desktops
• Unify colors and dark mode

Organize colors, spacing, and typography into reusable design tokens, or shared style values. Generate CSS variables, define component states, check for hardcoded values, and create HTML presentations that follow the same brand rules.

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

• Standardize colors, spacing, and typography
• Document button states and variants
• Check code for hardcoded style values

Create logos, business card mockups, HTML presentations, banners, social images, and SVG icons. Define shared brand colors and typography, then carry those choices into visual assets and interface styling.

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

• Create logos and business card mockups
• Design social images for multiple platforms
• Build pitch decks in HTML

Create banners for social media, ads, website heroes, and print formats. Compare multiple visual directions built in HTML/CSS using supplied assets, CSS graphics, or optional generated imagery, with PNG exports when browser capture is available.

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

• Creating social media headers and covers
• Comparing display ad banner designs
• Designing a website hero visual

Search local design guidance to plan, build, review, or improve web, mobile, and desktop interfaces. Find suitable colors, font pairings, layouts, charts, and interaction patterns, with implementation advice matched to the project's technology.

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

• Choose colors and fonts for a new product
• Review forms and keyboard accessibility
• Fix layouts that break on small screens

Review a UI/UX plan before implementation, score its design dimensions, and identify missing decisions. Through discussion, the skill adds concrete improvements directly to the plan so the review produces an updated plan.

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

• Reviewing a UI/UX plan before implementation
• Finding missing design decisions
• Adding design critique directly to a plan

Define a new product's visual style through product discovery and research. Get recommendations for fonts, colors, layout, spacing, and motion, preview font and color combinations, and document the shared design rules in DESIGN.md.

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

• Defining the visual style for a new product
• Documenting shared brand and interface guidelines
• Previewing font and color combinations

Turn an English description or mermaid source into a diagram with source files, an Excalidraw editing file, and SVG and PNG images. Rendering works offline, and flowcharts and sequence diagrams support editing individual shapes and arrows.

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

• Turning a workflow description into a flowchart
• Visualizing a system architecture
• Preparing diagram images for documents and READMEs

Review a site's visual quality, find inconsistent styling, awkward spacing, unclear emphasis, repetitive AI-generated design patterns, and slow interactions. Fix the source code in focused commits and verify the changes with before-and-after screenshots.

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

• Finding inconsistent styling across a site
• Fixing spacing and visual emphasis
• Polishing a live site's appearance

Generate several AI design options, view them on a comparison board, and collect organized feedback. Use the results to explore visual directions and refine designs when a feature’s appearance is undecided or an existing interface needs improvement.

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

• Compare visual directions for a new interface
• Explore alternatives to an existing screen design
• Organize feedback on multiple design options

Review an iOS app’s appearance on a real iPhone using screenshots, Apple’s interface guidelines, and project design rules. Get scores for each design dimension and explanations of what would improve them.

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

• Reviewing an iOS app’s visuals on a real iPhone
• Checking screens against project design rules
• Identifying improvements from design scores

Create, implement, or review Paperclip capsule visuals that represent agents and their status. Apply the rules for each visual type, document settings for reproducible assets, and provide static alternatives for animated effects.

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

• Create capsule avatars for agents
• Implement heartbeat status indicators
• Prepare hero capsule graphics for marketing