디자인 스킬

Give navigation, controls, and feature cards a consistent icon style using Iconify Solar Duotone Bold. It guides icon sizing, clear labels, two-tone opacity, and contrast so icons fit the surrounding interface.

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

• Unify icons across navigation elements
• Pair control icons with clear labels
• Align icon sizes in feature cards

Transform an article, case study, or brand story into a connected scrolling page. Choose scroll-controlled video, a real-time Three.js scene, or HTML with charts and typography, then organize the narrative into five to seven clear stages.

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

• Turn a long article into a visual scrolling journey
• Present a product story through a connected 3D scene
• Explain report findings with scrolling charts and text

Choose a visual direction for landing pages using WebGL, a browser graphics technology. Balance brand style with readable copy, clear calls to action, mobile performance, accessibility, and implementation effort, then define fallbacks and build priorities.

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

• Choosing a visual direction for a WebGL landing page
• Planning a launch page around a 3D product model
• Improving mobile performance and reducing motion

Design a dark interface with matte-black surfaces, emerald accents, framed cards, and restrained glow. Apply consistent styling across navigation, typography, charts, and motion to create a calm, technical dashboard.

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

• Designing a dark analytics dashboard
• Unifying cards and navigation styles
• Highlighting status and chart data in green

Design a dark monochrome interface around an exploded 3D wireframe, an outline view of separated parts. Coordinate annotations, connector lines, typography, and small metric displays to explain product structures or system states.

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

• Designing a product teardown interface
• Creating a system diagnostics dashboard
• Presenting structural specifications with annotations

Add word-by-word reveal animations to headlines and short copy, with each word fading in and rising once as it enters view. Includes implementation examples that account for screen readers, reduced motion, and disabled JavaScript.

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

• Animating portfolio headlines
• Revealing hero copy as it enters view
• Adding subtle motion to section introductions

Create web controls that resemble physical materials using gradients, layered shadows, reflective edges, and subtle texture. The skill covers raised and pressed states, plus embossed labels and icons for buttons, cards, switches, and other controls.

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

• Give buttons a physical pressed appearance
• Add depth to cards and panels
• Style controls with plastic or metal surfaces

Design a two-panel page that gives visuals and supporting information distinct roles. This skill guides framing, spacing, typography, compact labels, and responsive stacking for product pages, portfolios, showcases, and technical presentations.

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

• Product pages pairing visuals with specifications
• Portfolios with separate artwork and commentary
• Concept presentations with a technical visual style

Create buttons, cards, and panels with diagonally cut corners. It provides CSS shapes, border treatments, and sizing guidance to keep the geometry consistent while preserving readable labels, usable touch targets, and visible keyboard focus.

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

• Creating sci-fi-style controls
• Unifying diagonal corners across cards and panels
• Adding gradient borders to clipped shapes

Create a warm beige light-mode interface with layered neutral surfaces, thin borders, and orderly information grids. Apply a consistent style across page backgrounds, hero sections, cards, buttons, status indicators, and subtle motion.

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

• Creating a warm beige product presentation page
• Organizing process explanations into consistent grid sections
• Unifying the appearance of cards, buttons, and page backgrounds

Design SaaS interfaces with warm paper tones, orange accents, rounded forms, and layered product illustrations. Apply a consistent visual direction across onboarding, cards, buttons, and motion, with adjustable warmth, softness, and visual detail.

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

• Design a warm, paper-toned signup screen
• Unify forms, cards, and button styling
• Pair onboarding forms with product illustrations

Create fluid animations where rounded shapes merge as they approach and separate as they move apart. SVG filters combine blur with a cutoff effect to form soft, connected shapes for backgrounds, loaders, or cursor effects.

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

• Adding fluid shapes to a page background
• Creating a merging-blob loading indicator
• Building a soft cursor effect

Design appointment-based service websites with calm photography, spacious layouts, and clear treatment comparisons. Carry the same visual style through location, practitioner, and time selection, including booking confirmation, validation errors, retries, and preserved choices.

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

• Creating or redesigning a salon or spa website
• Presenting treatments with prices and durations
• Designing booking steps for locations, practitioners, and times

Shape a high-contrast interface with dark molded panels, inset shadows, and tactile controls that resemble physical objects. Apply a consistent visual system across page framing, cards, buttons, and small status displays, using one restrained accent color.

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

• Designing a dark interface with tactile depth
• Giving cards and controls a consistent material feel
• Using a brand color for status and active indicators

Design a light interface using warm paper tones within dark outer framing. Coordinate typography, panels, navigation, and motion with fine borders, corner brackets, subtle diagonal textures, and a restrained accent color for active states.

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

• Designing a warm, light interface for a technical product
• Framing a paper-toned screen against a dark background
• Coordinating app mockups and transcript panels

Add subtle two-digit number markers to process steps, feature groups, cards, or editorial sections. Use consistent placement, spacing, and understated typography to provide visual structure while keeping headings and calls to action prominent.

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

• Add subtle numbers to process steps
• Give feature cards consistent corner markers
• Place number markers beside section headings

Create structured web layouts with thin borders, L-shaped corner marks, and subtle diagonal backgrounds. Align sections, headings, controls, and media to a shared grid, with consistent spacing and a single-column layout on narrow screens.

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

• Design a web page with clearly framed sections
• Align headings, controls, and media to a shared grid
• Add subtle diagonal textures and corner marks

Build product pages that reveal interfaces and explanations as visitors scroll. Uses GSAP ScrollTrigger to coordinate pinned scenes, gradual reveals, and section transitions while keeping the product story and interface readable.

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

• Explain a product workflow through scrolling
• Reveal interface features in stages
• Connect product sections with coordinated transitions

Design image-led pages with large photographs, visible grid guides, and carefully positioned text and buttons. Coordinate typography, transparent cards, shading, and subtle motion so the image remains prominent while supporting information stays readable.

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

• Designing a large photographic hero section
• Positioning headlines and buttons over images
• Coordinating cards and navigation around photography

Design enterprise AI and automation product pages that explain permissions, approvals, audit records, and recovery from failures. Organize verified metrics and case studies, accessible workflow details, and demo or waitlist forms that clarify what happens next.

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

• Redesigning an enterprise AI product page
• Explaining permissions and approval workflows
• Presenting verified security controls and case studies

Design a clean agency-style page using nested containers: a light outer frame, dark inset sections, and rounded inner cards. Coordinate pricing, service groups, and action areas through clear hierarchy, generous spacing, and restrained accent colors.

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

• Designing a clean agency or service introduction page
• Highlighting pricing inside a dark inset section
• Organizing service groups with nested cards

Design portfolio websites that lead with project work, then introduce the studio and its services. Use distinct editorial chapters, project-specific colors, restrained animation, and a clear contact section to organize the visitor’s journey.

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

• Redesigning a creative studio’s portfolio
• Presenting photography or artwork through project chapters
• Connecting case studies to services and contact

Design a cohesive dark navy interface with layered blue light, a framed hero area, compact navigation, floating network labels, and clear action buttons. Includes styling examples and guidance for slow animation that keeps text readable.

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

• Designing a futuristic page with layered blue light
• Unifying navigation, buttons, and section frames
• Adding subtle network labels and slow background motion

Design a dark navy interface with bold cobalt feature blocks, readable white text, thin framing lines, and localized blue glow. Apply a consistent visual direction to hero banners, action cards, navigation, link groups, and footer areas.

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

• Unifying a dark website around deep navy and cobalt
• Highlighting a hero banner or action area with blue gradients
• Organizing link groups with thin frames and numeric labels