Skills for Figma’s Design Agent
30 custom skills that take a frame from brief to handoff
KMRVID Figma Skills adds a disciplined pipeline to Figma’s Design Agent: pin down requirements, generate pages, clean up structure (layers, tokens, components), check accessibility, and hand a coding agent a prompt it can actually use. Each skill is a single SKILL.md that you register with Figma’s custom-skill feature.
30
Skills, each a single self-contained SKILL.md
5
Categories, by stage of the work
README with usage notes and free lifetime updates
Built for the Design Agent, not ported as-is
Many of these skills have a counterpart in the Claude Code edition. These are the differences.
Works on your canvas selection
No Figma URL to paste. Select a frame or section, then call the skill from the chat.
Runs through the Plugin API
Everything happens through Figma’s own script-execution tool. No external MCP tools are involved.
One self-contained file
Register a single SKILL.md and it works. No reference files to carry along.
Questions and reports in English
Confirmation tables, questions and reports are all shown in English.
create-multi-pattern, hey-polish-me and create-jp-lp can use cognitive-ui-design as an optional companion. That skill is in the Claude Skills package and the bundle, not in this Figma-only edition.
The 30 skills
All 30 skills were verified on Figma’s actual runtime as of September 2026. Figma’s Design Agent is currently in beta, so behavior can vary.
Plan and design
14 skillsPin down requirements and generate pages and sections
brief-me
A business-requirements interview before design work begins. The BRIEF is output in the chat.
design-brief-me
A design-settings interview (page type, type scale, base size). Paste its DESIGN_BRIEF with the BRIEF to skip every downstream question.
hey-brief-me
A picker that runs either or both interviews in a fixed order.
- Required
- brief-medesign-brief-me
figma-typescale
Generates a type scale (Original 8-step, or Tailwind 13-step) from a base size and ratio.
create-single-page
A no-questions page generator driven by a pasted BRIEF. Chain it for unattended runs.
- Optional
- brief-medesign-brief-mefigma-typescale
create-multi-pattern
Generates several structurally different layouts to compare. A BRIEF makes the screens more refined.
- Optional
- cognitive-ui-design (In KMRVID Claude Skills)figma-japanese-web-guideline
create-jp-lp
A Japanese commercial landing-page frame, using industry and appeal-genre conventions. Its rule text stays in Japanese.
- Optional
- cognitive-ui-design (In KMRVID Claude Skills)figma-japanese-web-guideline
rewrite-me
Rewrites text nodes to match a BRIEF without touching layout, color or structure.
- Optional
- figma-layer-rename
hey-polish-me
Analyzes a finished frame and writes an improvement proposal, leaving the original untouched.
Free version on Figma Community- Optional
- cognitive-ui-design (In KMRVID Claude Skills)create-multi-patternrewrite-mecreate-jp-lp
japanese-lp-seasoning
Full-bleed, carousels, banner sliders and vertical text, as static looks.
figma-japanese-web-guideline
Corrects the defaults AI falls into on Japanese typography. Its rule text stays in Japanese.
figma-mobile-convert
Generates a 390px mobile frame from a desktop frame.
- Optional
- figma-systematize
If the frame is not yet organized, it recommends running figma-systematize first.
figma-i18n-translator
Duplicates a frame per language to catch layout breaks early.
Free version on Figma CommunityClean up and systematize
7 skillsTidy layers, variables and components
tidy-up
Restructures a frame into an auto-layout hierarchy with clean names and 4px-grid spacing.
Free version on Figma Community- Optional
- figma-tokenize
figma-layer-rename
Replaces auto-generated names such as Frame 12 with semantic ones, after confirmation.
Limited version on GitHubfigma-tokenize
Turns hardcoded colors, sizes and spacing into bound variables.
- Optional
- figma-layer-rename
figma-componentize
Finds repeated patterns and builds components and variants, with your confirmation at each step.
- Optional
- figma-tokenize
figma-systematize
Layer names → tokens → components in a single pass.
figma-enhance
Audits an already structured file for further improvements and applies what you approve.
hey-optimize-me
A picker for the five clean-up skills, run in a fixed order.
- Required
- tidy-upfigma-layer-renamefigma-tokenizefigma-componentizefigma-enhance
Calls only the tasks you select.
Audit and accessibility
5 skillsCheck AI-implementation readiness and accessibility
figma-audit
Scores AI-implementation readiness across 4 dimensions and outputs a compact report.
Free version on Figma Communityfigma-component-audit
Scores a component on 5 dimensions (variants, properties, naming, auto-layout, tokens).
figma-contrast-check
WCAG AA/AAA contrast per text node, with confirmation-gated auto-fix.
- Optional
- figma-layer-rename
figma-alt-suggest
Looks at each image and proposes alt text as Dev Mode annotations.
Limited version on Figma Communityfigma-annotate
Writes native Dev Mode annotations that carry implementation intent.
Hand off to code
2 skillsPass a finished design to a coding agent
coding-prompter
Builds an implementation prompt for a coding agent from a finished frame.
Free version on Figma Communityfigma-design-md
Two-way sync between a Figma file and a DESIGN.md (Google design.md spec).
Free version on Figma CommunityWorking with the agent
2 skillsKeep the agent’s own work steady
agent-handoff
Summarizes the whole conversation so you can continue in a fresh chat.
Free version on Figma Communityhey-be-careful
A set of working rules for the agent: ask when unclear, verify, report specifically.
Free version on Figma CommunityGet started in 3 steps
01
Register the SKILL.md
Use Figma’s custom-skill registration feature in the Design Agent and register the skill you want.
02
Select the target
Select the frame or section on the canvas. Several skills also support multi-selection, and some need no selection at all (the interview and generation skills, slot-table-maker, agent-handoff and hey-be-careful).
03
Run it from the chat
The skill confirms with you at its own checkpoints before changing anything.
Skills that restructure a file (tidy-up, figma-componentize, figma-systematize and the like) change your canvas. Duplicate the frame or file first on anything important. Each skill checks its own work with screenshots and node checks and asks before big steps, but a copy is the safest undo.
Flows that work well together
From requirements to a layout
- brief-me
- create-multi-pattern
Pin down requirements, then generate several structurally different layouts. Swap in create-single-page for a no-questions run.
Clean up a messy frame in one go
- figma-systematize
Layer names, tokens and components in one pass. Or pick the steps yourself with hey-optimize-me.
Check before you hand off
- figma-audit
- figma-contrast-check
- coding-prompter
Score AI-implementation readiness, check WCAG contrast, then build the implementation prompt for a coding agent.
Rewrite the copy to a brief
- brief-me
- rewrite-me
Rewrites the text nodes in a selected frame to match the BRIEF without touching layout or structure.
Pricing
KMRVID Figma Skills
All 30 skills, the README (PDF) and free lifetime updates for $87.
- 30 custom skills for Figma’s Design Agent
- A README (PDF) with a skill reference and usage notes
- Free lifetime updates
- Plain-text SKILL.md files you can read and adapt
Want the Claude Code side too?
Claude Code
KMRVID Claude Skills
Skills for Claude Code: setup and pipelines, mockups, Figma integration, Tailwind and finishing.
- Skills
- 48
- Includes
- README (PDF) + free lifetime updates
$137one-time purchase
Claude Code + Figma Design Agent
KMRVID Skills Bundle
Both editions together. Cheaper than buying them separately.
- Skills
- 78
- Includes
- README (PDF) + free lifetime updates
$199one-time purchase
The bundle saves you $25 compared with buying the two editions separately.
About the creator
Masaaki Komori
Independent UI/UX designer and frontend engineer since 2001. Author of numerous web design books in Japan, Figma instructor, and design system consultant specializing in AI-augmented workflows and design tokens. Also ranked among the top 500 all-time most viewed and downloaded creators globally on Unsplash.
FAQ
Frequently asked questions
Do I need Claude Code to use these?▾
No. These skills run inside Figma’s Design Agent and do not need Claude Code. If you also build in code with Claude Code, the Claude edition covers that side.
Will the skills change my Figma file?▾
Skills that restructure a file change your canvas. Duplicate the frame or file first on anything important. Each skill asks before big steps.
Are the skills in English?▾
Yes. A few that encode Japanese-specific conventions, such as create-jp-lp and figma-japanese-web-guideline, keep their rule text in Japanese so the agent does not misread it. Their questions and reports are in English.
Can I try something before buying?▾
Some of these skills are free on Figma Community, and some are open source on GitHub. They are marked on the skill cards above.
Does it include video lessons?▾
No. The package contains the skills and a README (PDF).