디자인 스킬

Apply subtle gradient borders to cards, pricing panels, buttons, and other web surfaces. Choose layered CSS backgrounds or a masked border to suit existing designs, with guidance on Tailwind syntax, corner alignment, opacity, and light and dark themes.

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

• Adding subtle borders to cards and pricing panels
• Decorating edges without replacing a complex background
• Adding brand accents to hover and focus states

Build continuous scrolling rows for logos, testimonials, screenshots, or short tags. The skill explains how to duplicate content, stabilize item widths, soften edges, and accommodate people who prefer reduced motion.

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

• Build a continuously scrolling logo row
• Loop screenshots or testimonials
• Add a moving row of tags or feature chips

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

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

Build a globe-like 3D visual in Three.js, a library for browser graphics. Combine a dense sphere of glowing particles with a thin orbital ring, then adjust color, density, tilt, and gentle motion.

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

• Adding a planetary particle visual to a website
• Creating a data-globe effect for an infrastructure service
• Matching orbital ring colors to a brand

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

Create agency, studio, architecture, or portfolio websites using oversized typography, black-and-white sections, and documentary photography. Arrange project stories and irregular image collages alongside menus and FAQs designed for keyboard, touch, and reduced-motion use.

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

• Redesigning an agency or architecture studio website
• Presenting project processes through photo collages
• Organizing work and philosophy into contrasting sections

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

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

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

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

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 interface around frosted glass surfaces and a clock-like circular dial. Coordinate backgrounds, navigation, buttons, typography, and slow motion to create a consistent instrument-panel appearance with restrained monochrome highlights.

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

• Designing a dark instrument-panel interface
• Building a hero layout around a circular dial
• Coordinating glass navigation and buttons

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 cohesive dark interface with near-black surfaces, subtle pixel or grain textures, and thin accent-colored laser light. Extend the visual direction across panels, navigation, controls, borders, spacing, and motion while keeping content readable.

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

• Unify a dashboard around a dark visual system
• Add texture and depth to a flat black interface
• Build a hero area around a thin laser motif

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

Design a calm, dark workspace with frosted glass panels, multiple columns, and floating information cards. Coordinate navigation, framing, spacing, background depth, and subtle motion into a consistent interface that stacks cleanly on smaller screens.

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

• Designing a dark dashboard or workspace
• Arranging navigation and sidebars around a central view
• Unifying glass panels, buttons, and information cards

Structure a page with a centered outer frame and inset inner sections. Use visible boundaries, corner markers, backgrounds, borders, and rounded corners to distinguish content levels while keeping spacing consistent and text readable.

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

• Establishing visible boundaries for a page
• Separating hero, feature, proof, and CTA sections
• Aligning inset spacing across content blocks

Create flat SVG illustration cards featuring one expressive person and one main prop. A defined palette, character proportions, reusable drawing parts, and visual checks help keep error pages, onboarding screens, and marketing illustrations consistent.

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

• Illustrate 404 pages and error messages
• Create artwork for empty states and onboarding
• Draw coming-soon cards with a person and a prop

Create SVG illustrations, a scalable vector image format, with thick navy outlines, vivid colors, and chunky depth. Combine a cartoon character with overlapping props for product screens and marketing cards, then render, review, and refine the artwork.

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

• Illustrating 404 and error pages
• Creating onboarding illustrations
• Designing blog header artwork

Review and refine websites and apps by finding generic decoration, inconsistent visual choices, and interface defects. Preserve the established art direction while improving hierarchy, layout, interaction states, and the connection between design choices and product needs.

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

• Removing unnecessary decoration from an existing page
• Keeping new components consistent with the design system
• Checking content hierarchy and primary actions

Build a scanning entrance for Three.js models, revealing their wire structure before the solid surface appears. Coordinate both layers with one expanding wave, then remove the temporary wires when the animation finishes.

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

• Introduce a 3D model with a radial scan
• Show a model's structure before its surface
• Create a holographic assembly effect

Create original SVG illustration cards of people coding, thinking, or resting. The style combines thick, uneven black marker lines, offset mint shapes, and cream paper for onboarding screens, error pages, editorial headers, and marketing cards.

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

• Illustrate an empty state
• Add character art to onboarding
• Create an illustration for a 404 page

Create coordinated website animations with GSAP, ScrollTrigger, and Lenis. Combine smooth scrolling, staged text and image reveals, pinned scenes, and pointer interactions, with guidance for performance, touch devices, and reduced-motion preferences.

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

• Coordinating motion across a portfolio website
• Revealing text and images during scrolling
• Building pinned storytelling sections