For Claude Code and Figma’s Design Agent
78 skills that take a project from first brief to finished code
One bundle with both editions: 48 skills for Claude Code to set up projects, build mockups, sync tokens with Figma, clean up Tailwind and polish Astro code, and 30 custom skills for Figma’s Design Agent to pin down requirements, generate pages and clean up structure. Each skill is a plain SKILL.md you can read, adapt and learn from.
78
Skills in total
48 + 30
Claude Code + Figma Design Agent
README with dependencies and free lifetime updates
Two editions in one bundle
Use the one that matches your tool, or both. Many skills exist in both editions under the same or a matching name; the comparison table shows how they differ.
Claude Code
KMRVID Claude Skills
48 skills for Claude Code across 6 categories: setup and pipelines, mockups, Figma integration, Tailwind, finishing and pipeline design. Built for Astro, Vite or React with Tailwind CSS v4.
- Skills
- 48
- Includes
- README (PDF) + free lifetime updates
$137one-time purchase
Figma Design Agent
KMRVID Figma Skills
30 custom skills you register in Figma’s Design Agent across 5 categories: plan and design, clean up, audit, hand off to code and working with the agent. Each is a single SKILL.md.
- Skills
- 30
- Includes
- README (PDF) + free lifetime updates
$87one-time purchase
Workflows that work well together
Run skills one at a time, or chain them. The pipeline skills (mockup-pipeline, lp-pipeline, full-pipeline, figma-pipeline) chain the steps for you.
Figma Design Agent edition
Run inside Figma, on the frames you select on the canvas.
From requirements to a Figma layout
- brief-me
- create-multi-pattern
Interview for a BRIEF, then generate several structurally different layouts to compare. Use create-single-page for a no-questions, one-pass run.
Clean up a messy Figma frame in one go
- figma-systematize
- figma-enhance
Layer names, tokens and components in a single pass, then a further audit of the whole page. Or pick the steps yourself with hey-optimize-me.
Check a design before handing it to code
- figma-audit
- figma-contrast-check
- coding-prompter
Score how well AI can implement the frame, check contrast, then generate the implementation prompt for your coding agent.
Keep the Figma agent on track
- hey-be-careful
- figma-systematize
Run hey-be-careful first and the agent follows six working rules for the rest of the chat: ask when unclear, follow skill steps in order, verify results and more. If the agent stops following instructions, run it, then call other skills such as figma-systematize.
Claude Code edition
Run in Claude Code, on your code and on Figma URLs.
Build a UI in code and polish it
- create-mockup
- mobile-polish
- visual-polish
- click-to-fix
Build from scratch without Figma, add mobile navigation, let the agent self-correct from screenshots, then fix details by clicking in the browser.
Turn a Figma design into working code
- figma-audit
- figma-workflow
Audit first, fix low-scoring spots in Figma, then implement, review and optimize through sub-agents.
Keep code and Figma tokens in sync
- tailwind-to-figma
- figma-to-tailwind
Push Tailwind @theme tokens into Figma Variables, or pull Figma Variables back into @theme, depending on which side is the master.
Raise code quality after implementation
- tailwind-review
- astro-doctor
Tidy Tailwind classes and accessibility structure, then optimize component granularity. Either one works on its own.
Pricing
KMRVID Skills Bundle
All 78 skills for $199. Buying the two editions separately costs $224, so the bundle saves you $25.
- 48 skills for Claude Code and 30 for Figma’s Design Agent
- A README (PDF) with a skill reference, dependency list, ready-made combinations and install steps
- Free lifetime updates
- Plain-text SKILL.md files you can read and adapt
Tested on real projects, but agents and tool versions move quickly, so results can vary in your setup. One-to-one troubleshooting is not offered. If something breaks, pass the SKILL.md and the error log to your agent.
Claude Code
KMRVID Claude Skills
Only the Claude Code edition, if you do not work in Figma’s Design Agent.
- Skills
- 48
- Includes
- README (PDF) + free lifetime updates
$137one-time purchase
Figma Design Agent
KMRVID Figma Skills
Only the Figma Design Agent edition, if you do not use Claude Code.
- Skills
- 30
- Includes
- README (PDF) + free lifetime updates
$87one-time purchase
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
Where do the skills run?▾
The Claude edition runs in Claude Code (CLI, Desktop and the VS Code extension) on macOS, Linux and Windows (WSL or PowerShell). The Figma edition runs in Figma’s Design Agent through its custom-skill registration feature. Using the Claude edition in another agent such as Cursor or Codex means adapting the Claude-specific parts.
Do I need both editions?▾
No. Pick the edition that matches your tool, or take the bundle if you work in both. The editions overlap in places, and a few skills reference each other as optional companions.
Are the skills in English?▾
Yes. Instructions, questions and reports are in English. A few skills that encode Japanese-specific conventions, such as create-jp-lp, keep their rule text in Japanese so the agent does not misread it. Their questions and reports are still in English.
Does it include video lessons?▾
No. The package contains the skills and a README (PDF) with a skill reference, the dependency list, ready-made combinations and install steps.
What happens when a skill changes?▾
Updates are free for the lifetime of the package. The changelog lists what changed and which skills it touched.
Can I try something before buying?▾
Some of the skills are free on Figma Community, and some are open source on GitHub. A selection of the Claude Code skills is also on Agensi: some are free, and every paid skill has 3 free trial runs. See the creator page on Agensi.
Can I buy a single skill?▾
Yes. A selection of the Claude Code skills is sold individually on Agensi. Some are free, and every paid skill has 3 free trial runs. The Figma edition is not sold there. See the creator page on Agensi for what is available. This package includes all 48 Claude Code skills together.
Is support available?▾
One-to-one troubleshooting is not offered. If something breaks, pass the SKILL.md and the error log to your agent; the skills are plain text and easy to adapt.
All 78 skills for $199
Claude Code and Figma’s Design Agent, one purchase, free lifetime updates.
Buy on Gumroad