스킬 찾기

Design, implement, and review interface animation, from button feedback to drag gestures. When measurement tools are available, analyze recordings to reconstruct timing, easing—how speed changes—and spring motion, then produce code and an implementation specification.

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

• Adding motion to buttons, menus, and dialogs
• Recreating an interface animation from a recording
• Investigating sluggish or jerky motion

Plan or improve motion graphics by refining the message, typography, scene transitions, pacing, and timeline. It helps connect movement to meaning while leaving artifact creation and export to the active task's production workflow.

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

• Planning a short product film
• Improving animated text readability
• Connecting scenes through a recurring visual motif

Build interactive web motion from videos or image sequences, controlled by scrolling, pointer movement, dragging, or state changes. It covers media preparation, timeline compilation, playback controllers, delivery format selection, and checks on the target page.

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

• Linking video playback to page scrolling
• Switching animated states with drag gestures
• Preparing existing video or image sequences for the web

Find and adapt animations for web pages and components using 160 examples with HTML, CSS, JavaScript, and adjustable parameters. Covers text, interaction, basic, and advanced effects, with guidance on accessibility and fitting code into existing projects.

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

• Adding a ripple effect to button clicks
• Giving a heading a typewriter animation
• Revealing elements as the page scrolls

Plan artistic animations and explainer scenes using 35 style recipes, nine explanation patterns, storyboards, and reusable Canvas drawing code. Build motion within the host environment’s timeline, using its available tools for assets and export.

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

• Plan storyboards for an explainer
• Choose an artistic animation style
• Build repeatable Canvas motion

Implement purposeful animations for existing interfaces or an agreed UI brief. It selects motion based on purpose and usage frequency, then handles timing, interrupted interactions, exits, and reduced-motion preferences while reusing the project’s tools and design values.

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

• Adding opening and closing motion to modals or drawers
• Implementing button and toggle feedback
• Handling animations interrupted by repeated actions

Build a creative studio website with classical illustrations, cobalt colors, serif headings, and cinematic scrolling. Adapt the supplied HTML template to a brand while retaining chapter navigation, service sections, FAQs, and mobile layouts.

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

• Create an architecture studio website
• Build a classical art portfolio
• Present studio services and FAQs

Create three square social media cards with connected headlines, consistent branding, and distinct cinematic colors. The result is a single HTML layout that presents the cards together while keeping each panel readable on its own.

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

• Designing a three-card Instagram carousel
• Creating a branded series for LinkedIn
• Preparing connected cards for an X thread

Create a desktop landing page wireframe, a simple layout made of grey boxes, with numbered markers and a matching specification panel. The result shows page structure alongside short implementation and user experience notes.

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

• Planning a desktop landing page layout
• Sharing implementation notes with developers
• Reviewing navigation, hero, and feature placement

Build a website prototype as a single HTML file using a supplied template and section layouts. Suitable for landing pages, pricing pages, and documentation indexes, with colors adapted to an existing design system.

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

• Prototyping a product landing page
• Creating a pricing comparison page
• Designing a documentation index

Create a pre-launch landing page with a brand logo, product message, and email signup form. Follow DESIGN.md for colors, fonts, and layout, producing a single HTML file with mobile layouts and form validation.

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

• Create an email waitlist page before a product launch
• Build a signup page for beta participants
• Collect interest in an early access program

Build a single HTML visualizer for particles, fractals, simulations, or data. It moves heavy calculations into a Web Worker, a background browser process, and draws on a canvas while targeting smooth 60fps rendering.

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

• Prototyping a particle or physics simulation
• Visualizing Mandelbrot or Julia fractals
• Building an audio or data visualizer

Design new web pages, review existing interfaces, or analyze references from URLs and screenshots. The skill guides page structure, colors, typography, and interaction states while respecting an existing project's design system and implementation boundaries.

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

• Designing a new landing page
• Prioritizing improvements to an existing interface
• Analyzing a reference page or screenshot

Apply a code rewrite plan one step at a time through small, reviewable edits. Keep changes within assigned files, check risk restrictions, and record each step’s files, change summary, rationale, and completion status.

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

• Applying a code migration plan in small steps
• Keeping localized changes easy to review
• Recording reasons for completed or skipped steps

Review accumulated code edits through a patch and a readable file-by-file summary. An interactive choice screen captures acceptance, rejection, or partial approval, records the decision, and rolls back rejected changes within the planned scope.

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

• Reviewing accumulated changes from a code migration
• Approving or rejecting edits file by file
• Recording a review decision for handoff

Extract a Figma file into local project files containing its element hierarchy, reusable color and typography settings, and exportable assets. The structured snapshot supplies source data for later design mapping and implementation steps.

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

• Extract a Figma file's element hierarchy
• Collect color, typography, and spacing settings
• Prepare assets for later implementation steps

Prepare a structured plan for a code rewrite spanning multiple files. It records file responsibilities, ordered changes, and risk levels so later editing, diff review, and build testing can follow a clear, reviewable scope.

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

• Planning a code rewrite across multiple files
• Separating component changes from shared infrastructure
• Ordering changes by scope and risk

Add a live adjustment panel to an HTML page so viewers can explore colors, text sizes, spacing, themes, and motion. Changes appear immediately and are saved in the browser for the next visit.

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

• Fine-tune a landing page’s colors and spacing
• Demonstrate brand or design system variations
• Add adjustable appearance controls to a standalone demo

Audit a cloned or rebuilt website before handoff or deployment. Check visual differences, tracking scripts, leftover branding, unintended languages, placeholders, and external dependencies, then report evidence, severity, recommended fixes, and deployment readiness.

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

• Reviewing a website clone before deployment
• Finding leftover branding and unintended languages
• Checking tracking scripts and external dependencies

Turn weekly results, ongoing work, blockers, and key metrics into an HTML slide deck. Highlight the week’s important number, an anomaly, and the decision or named requests the operations and growth team should address.

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

• Preparing slides for a weekly team update
• Sharing KPI changes and an unusual result
• Explaining blockers and requesting help

Review a design across five areas: visual execution, fit to the user's problem, brand consistency, accessibility, and wording. It guides the agent to fix concrete defects and explain any issues that remain unresolved.

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

• Reviewing a design before delivery
• Checking consistency with brand guidelines
• Checking keyboard access and readable contrast

Build a single HTML dashboard for comparing metrics across social platforms. Include interactive charts, point details, selected-period comparisons, and light or dark themes, while adapting colors, typography, and components to an existing design guide.

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

• Reviewing metrics across multiple social platforms
• Comparing selected periods on charts
• Exploring chart points and related insights

Prototype a single-page website for SaaS, documentation, or knowledge products. Use warm off-white backgrounds, serif headings, fine dividers, generous spacing, and subtle motion to create a restrained layout with features and a signup or pricing section.

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

• Prototype a SaaS marketing page
• Explore a documentation page design
• Build an introduction page for a knowledge product

Turn unresolved requirements into a compact clarification form. Use choices and input fields to collect answers that affect design direction, content structure, or delivery format, so the workflow can proceed.

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

• Clarifying requirements that block production
• Confirming an unresolved audience
• Choosing a delivery format