482 skills ・ Works with: Figma · sorted by popularity
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Guide HyperFrames video projects from setup and component selection through checks, previews, and rendering. Use command-line tools to inspect timelines, diagnose failures, compare frames, and choose local, batch, or cloud rendering for the finished composition.
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 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.
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.
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.