SkillHey.
Submit a skill

Figma & Prototyping Skills for Claude Code, Codex & AI Agents

These skills help an agent turn ideas into clickable prototypes and work with Figma files. They cover generating and comparing UI variants, reading a Figma file's structure and building prototypes.

10 skills

Start here

Exploded technical illustration of a hard disk drive, with its cover, head assembly, platters, enclosure and circuit board.
Free
Web & UI

Variant: UI Alternatives

Build multiple component variants in the real page and compare their tradeoffs.

12.1KStars468Forks
Repository last pushed
Jakub Krehel
Author-provided banner showing five game scenes. Its 74-skill label reflects an earlier edition; the reviewed catalog contains 76 specialized skills plus a router.
Free
UI & UX design

Playable Level Design

Turn player movement metrics into blockouts, encounter pacing, gated routes, and a reachable critical path.

8.8KStars894Forks
Repository last pushed
Abhishek Barali

Prototyping Variants

Emil Kowalski

Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.

  • prototyping
  • ui design
57KStars3.3KForks
Repository last pushed
Hexclave authentication interface
Free & paid options
Web & UI

Hexclave — Compare UI Variants

Prepare comparable interface variants so the user can preview and choose a direction.

6.9KStars526Forks
Repository last pushed
hexclave

Explore Figma & Prototyping skills

6 skills
RecommendedNewest first
Exploded technical illustration of a hard disk drive, with its cover, head assembly, platters, enclosure and circuit board.
Free
Web & UI

Build Design

Implement UI from Figma or an image with the project’s existing components and tokens.

12.1KStars468Forks
Repository last pushed
Jakub Krehel
Official Matt Pocock Skills banner with the text AI Skills for Real Engineers and a portrait of Matt Pocock.
Free
UI & UX design

prototype

Build a disposable prototype to answer an unresolved design or behavior question.

322.4KStars27KForks
Repository last pushed
Matt Pocock
Understand Anything codebase graph
Free
UI & UX design

Understand Anything: Figma Design Graph

Analyze a Figma file into a graph of screens, components, instances and design tokens.

92.3KStars7.9KForks
Repository last pushed
Egonex-AI

design-artifact

Plannotator

Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look generically AI-generated.

  • html
  • prototyping
4.2KStars285Forks
Repository last pushed
Superdesign Skill — Superdesign skill demo
Pricing not specified
Web & UI

Superdesign Skill

Design and redesign interfaces, presentations, and graphics on the Superdesign canvas, then continue toward implementation from the selected design.

980Stars77Forks
Repository last pushed
Superdesign

Huashu Design

alchaincyf

Create high-fidelity HTML prototypes, presentations, animations and visualizations with explicit design-direction review.

  • web-design
  • prototyping
29.3KStars3.1KForks
Repository last pushed

Related topics

Design 165 skillsUI/UX Design 73 skillsFrontend Design 31 skillsIcon & Illustration 30 skillsAccessibility 28 skillsWebsite Design 26 skillsDesign System 21 skills

How to choose Figma & Prototyping skills

Use a variants skill to explore options, a Figma graph skill to understand an existing file, and a prototype skill when you need something people can click.

  • Generate UI variants to compare side by side
  • Map the structure of a Figma file
  • Build a quick clickable prototype