스킬 찾기

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

Draft simple black-and-white screen layouts as standalone SVG files, with numbered explanations of each area. For multiple screens, create a flow overview and an optional static viewer page for browsing and zooming during review.

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

• Sketch a screen layout before implementation
• Review mobile and desktop screen structure
• Map a flow across multiple screens

Collect design tokens—reusable values for colors, typography, spacing, corners, and shadows—from source code, screenshots, or Figma exports. Organize them in a JSON file with source and usage references for later mapping to a design system.

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

• Collecting design values scattered across source files
• Preparing Figma design data for migration
• Extracting design settings from screenshots

Hand accepted artifacts to the environment where work will continue, such as a code agent, desktop app, GitHub, or Figma. Record each destination in the artifact manifest, a tracking record that preserves earlier export history.

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

• Hand reviewed artifacts to Cursor, Claude Code, or Codex
• Return edited artifacts to their source Figma file
• Send accepted artifacts to GitHub through a PR

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

Builds or updates a Figma design system library from an existing codebase. Helps keep reusable design components aligned with the components already shipped in a product, giving design teams a reference that reflects the implementation.

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

• Creating a Figma library from an existing codebase
• Updating a design library to match shipped components
• Aligning design references with implementation

Link Figma design components with their code counterparts through Code Connect, helping design-system updates flow into the codebase. This catalogue entry points agents toward the full upstream workflow.

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

• Linking Figma components to code components
• Reflecting design-system updates in code
• Introducing a Code Connect workflow

Run scripts through the Figma Plugin API, an interface for operating on designs. Use it to write to the canvas, inspect content, work with variables, and carry out design-system tasks.

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

• Writing to the Figma canvas with scripts
• Inspecting Figma canvas content
• Working with variables and design systems

Turn Figma designs into production-ready frontend code that closely matches the original visuals. Use it to hand design frames directly to a frontend agent and guide implementation toward a faithful reproduction of the design.

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

• Implementing a screen from a Figma design
• Handing Figma frames to a frontend agent
• Reproducing a design's appearance in code

Create project-specific rules for turning Figma designs into code. Bring design tokens, shared values such as colors and spacing, together with naming conventions and lint rules for automated checks in one reference.

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

• Defining rules for implementing Figma designs
• Documenting shared design values and naming conventions
• Consolidating automated checking rules in one reference

Create a blank Figma Design or FigJam file as the starting point for agent workflows. Use it to prepare a new workspace before building a design system or organizing workshop activities.

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

• Starting a blank Figma Design file
• Preparing a FigJam file for a workshop
• Beginning a scripted design-system workflow

Create or update Figma screens from code or written descriptions. Use design system components and design tokens, shared values for visual styling, to translate application pages into Figma designs.

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

• Turning application code into Figma screens
• Creating screens from written descriptions
• Updating screens with design system components

Analyze a Figma file and turn its pages, screens, components, instances, and design tokens—shared design values—into an interactive graph. Open the dashboard to explore the file's structure and relationships.

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

• Review the structure of a Figma file
• Explore components, variants, and instances
• Inspect how shared design values are used

Builds and improves web interfaces, covering layout, styling, motion, and usability. It records design rules before implementation, uses supplied references or design research, and checks the result in real browsers for visual consistency, accessibility, and performance.

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

• Building a landing page from a screenshot or website reference
• Improving an existing dashboard’s layout and visual design
• Adding animation and interaction feedback

Check the appearance and interaction states of web pages, terminal interfaces, and paginated documents. Uses captured images, light and dark themes, viewport comparisons, and independent reviews to produce evidence-backed verdicts for each checklist item.

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

• Checking a UI after implementation changes
• Comparing a page with a design reference
• Finding Japanese text clipping and awkward wrapping

Turn a talking-head or selfie recording into a vertical video about a Muse experience. Preserve the original narration while showing synchronized chat exchanges, actual work outputs, interface elements, and message sounds to create a shareable clip.

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

• Turning a Muse experience recording into a vertical clip
• Adding chat exchanges in sync with narration
• Showing actual pages and files alongside a creator's story

Inspect Figma screens to gather details for implementation, including component variants, spacing, shared design settings, and image assets. It helps an agent understand layouts and design libraries before turning a design into code.

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

• Gathering implementation details from a Figma screen
• Checking component variants and spacing
• Extracting image assets for implementation

Build a design system from product code, Figma designs, and brand materials. Organize colors, typography, assets, and writing guidelines, then create reusable React components and interactive screen examples that follow the source designs.

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

• Organize brand assets and design guidelines
• Create reusable React components from existing designs
• Recreate product screens as an interactive UI kit

Create a reusable design guide covering colors, typography, layout, and motion. Extract styles from existing sources or start from scratch, then turn the guide into instructions or code for supported video, slide, and design tools.

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

• Creating a design guide from a desired mood
• Extracting visual rules from a website or brand PDF
• Applying one style to videos, slides, and designs

Bring Figma logos, brand colors, and components into HyperFrames as local assets and editable HTML. Reconstruct animation from storyboard states, with additional motion import options when a compatible connector or native export is available.

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

• Import a Figma logo as a video asset
• Apply brand colors across imported components
• Turn a Figma frame into editable HTML

Turn a product URL, script, or brief into a launch or promotional video in HyperFrames. The workflow covers source capture, brand styling, storyboards, narration, music, and animated scenes, including tours that feature actual website screenshots.

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

• Create a SaaS or app launch video
• Introduce a new product feature
• Turn a supplied script into a promotional video

Create short animated graphics for titles, statistics, charts, logos, maps, or web content. The workflow sources assets when needed, designs and checks the animation, then exports an MP4 or transparent overlay after preview approval.

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

• Animating a short title or quote
• Showing a statistic with a count-up or chart
• Creating a logo reveal

Create navigable HyperFrames presentations with step-by-step reveals, clickable branches, and speaker notes. You can also turn an existing page into a deck while preserving its visual design, motion, and interactive behavior.

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

• Build a pitch deck with speaker notes
• Reveal key points one step at a time
• Open supporting slides through clickable areas

Create or edit custom HyperFrames videos, including multi-scene brand films, montages, title cards, and footage remixes. The workflow covers planning, design, media assembly, animation, checks, and a final preview for approval before rendering.

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

• Create a multi-scene brand video
• Reorder and trim existing footage
• Build a static title card or loop