디자인 스킬

Build subtle animated petals, snow, confetti, or other decorative particles within a single page section. Adjust their movement and density while preserving readable content, limiting device workload, and providing static alternatives for readers who reduce motion.

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

• Adding gentle petals or snow to a page section
• Animating small brand fragments behind content
• Limiting decorative animation on mobile devices

Design reading interfaces that resemble archival books, pairing serif text and aged paper surfaces with a dark catalog frame. Organize chapters, notes, and metadata through index navigation, with adjustable texture, page depth, and visual density.

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

• Design a book-like reader for literary content
• Create an archive or manuscript viewing interface
• Organize research material with indexes and annotations

Prepare detailed 3D materials that remain clear in close-up views. The skill guides texture resolution, physically based material maps, surface mapping, filtering, and progressive loading while checking download size and GPU memory use.

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

• Prepare wood, stone, and fabric materials for close-up views
• Fix texture seams, grain direction, and normal map orientation
• Preserve floor and foliage detail at oblique or distant views

Create or integrate detailed 3D models with smooth outlines and believable edges for close-up views. Prepare lower-detail versions for distant viewing, prioritize loading, and measure rendering costs in the actual scene.

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

• Creating a detailed 3D model for close-up views
• Replacing visibly faceted curves with smoother geometry
• Preparing detailed architectural assets for rendering

Create realistic metal surfaces in Three.js by combining structured reflections, studio lighting, scratches, fingerprints, and beveled edges. Includes polished, brushed, and aged finishes for objects such as tools, rings, and metal product parts.

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

• Fixing metal that looks like gray plastic
• Creating polished or brushed metal finishes
• Adding patina and worn edges

Turn HTML files or live reference pages into articles with reusable prompts for recreating animations and interactions. Includes source inspection, screenshots, optional video capture, and checks that article text and media render correctly.

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

• Extracting reusable interaction prompts from HTML
• Writing screenshot-backed articles about web animations
• Recording live page motion and collecting reference frames

Build woven fabric in Three.js with visible threads, realistic sheen, seams, and thick hems. The skill covers folds that preserve texture proportions, light passing through thin cloth, and variations in dye and wear.

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

• Creating backlit curtains
• Differentiating linen, silk, and wool
• Adding hems and stitches for close-up views

Analyze a reference video's layout, typography, motion, and interactions to create a detailed prompt for rebuilding or adapting the experience. Include asset requirements, implementation choices, mobile behavior, and alternatives for users who prefer reduced motion.

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

• Turn a reference video into a detailed build prompt
• Describe scroll effects and transitions precisely
• Plan image and video assets for a recreation

Create wood surfaces in Three.js using a single material with code-generated grain, pores, end grain, and finishes. Coordinate color, roughness, and surface relief to improve close-up detail and reduce visible repetition across boards.

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

• Creating wood grain for furniture, floors, and tool handles
• Adding pores and end-grain detail for close-up views
• Adjusting oil, wax, and lacquer finishes

Collect five UI references into a dated, article-ready bundle with local images, full-page and section captures, motion studies, and detailed AI-builder prompts. Check previous collections for duplicates and document fallback reasons when video capture is unavailable.

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

• Collecting daily landing-page design references
• Studying page animations and interactions
• Writing detailed prompts for AI website builders

Create original brand campaign visuals from a supplied reference. Adjust how closely concepts share its visual language, develop distinct brands within one family, and check names, composition, and differences from signature reference elements.

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

• Develop original campaign visuals from a reference image
• Create distinct brands with a shared visual direction
• Bring an existing concept closer to its reference

Build detailed paper surfaces in Three.js for sheets, labels, cards, or shoji panels. Reproduce visible fibres, torn edges, layered thickness, curled corners, ink bleeding, aged edges, and backlit translucency, with additional detail for close-up views.

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

• Creating backlit washi shoji panels
• Adding torn edges and thickness to cards or labels
• Showing paper fibres in close-up views

Add underwater sunbeams to a Three.js scene, with rippling light patterns, a shimmering surface viewed from below, and matching illumination on fish. The beams shift against objects as the camera moves, giving the water depth.

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

• Add sunbeams to an underwater scene
• Render a rippling water surface from below
• Light swimming fish as they cross beams

Apply purpose-based checks while building an interface, or audit an existing project with prioritized findings. Reviews visual choices, content, working interactions, and evidence for claims while requiring a clear design direction.

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

• Applying design checks while building a new interface
• Auditing an existing site with prioritized findings
• Reviewing whether visual choices serve a clear purpose

Build or review website and app interfaces with choices grounded in the product’s identity and purpose. Covers colors, layouts, decoration, dashboard content, and working controls, with concrete guidance for replacing repetitive design patterns.

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

• Reviewing a landing page for repetitive layouts
• Choosing colors and decoration that fit a brand
• Reworking dashboard charts, tables, and empty states

Build and refine layouts that rearrange across phone, tablet, and desktop widths. The skill addresses grids, text sizes, spacing, overflow, touch controls, and navigation so content remains readable and controls remain usable as the screen changes.

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

• Fixing layouts that break on narrow screens
• Adjusting grids for tablet and small laptop widths
• Improving touch targets and tap interactions

Review and improve UI accessibility, including color contrast, keyboard operation, visible focus, and clear status messages. A contrast checker supports color checks, while guidance also covers text zoom and form fields obscured by mobile keyboards.

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

• Checking contrast between text and background colors
• Improving keyboard navigation and visible focus
• Clarifying empty, loading, and error states

Generate Preline theme CSS from a brand color or a desired mood using bundled local scripts. Preview output before saving, create light and dark themes, and review or fix theme tokens, the named values that define styling.

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

• Matching a Preline theme to a brand color
• Turning a visual mood into theme colors
• Previewing CSS before saving a file

Turn content into AntV Infographic syntax, a text format for describing infographics. The skill organizes titles, items, relationships, and metrics, then selects a suitable template for sequences, lists, comparisons, hierarchies, or charts.

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

• Turn procedural text into sequence syntax
• Structure a two-sided comparison
• Describe hierarchical information

Build working web pages, application interfaces, and components with a clear visual direction. Shape typography, color, layout, and animation around the intended audience and purpose, producing coordinated design and code in HTML, CSS, JavaScript, React, or Vue.

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

• Building a landing page with a clear visual style
• Designing and implementing a dashboard
• Refining typography, colors, and spacing in an existing interface

Create original generative art with p5.js, using code to produce patterns and motion. Receive a written artistic concept and an interactive HTML viewer with adjustable parameters, reproducible random variations, seed navigation, and PNG downloads.

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

• Create art from particle motion and flow fields
• Explore patterns by adjusting sliders
• Reproduce a favorite variation with the same seed

Turn data into template-based HTML charts, HTML or PDF presentations, and full-page HTML reports. Selects chart structures to match the data and keeps colors, labels, and visual proportions consistent across each delivery.

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

• Creating charts for articles
• Visualizing business metrics for weekly updates
• Preparing HTML or PDF presentations

Create simple, cute square character images using rounded shapes, two character colors, and a solid background. The skill can use product context to propose three design directions and generate six separate candidates for comparison.

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

• Create a product mascot
• Compare three character design directions
• Simplify an animal or object into a recognizable character

Adapts existing designs for phones, tablets, desktops, print, and email. Adjusts layouts, navigation, content priorities, and touch controls to suit each context, with guidance for responsive sizing and verification across devices and input methods.

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

• Adapting a desktop interface for mobile use
• Adjusting tablet layouts for portrait and landscape
• Expanding a mobile design for desktop screens