KMRVID Skills
78 production skills connecting Figma AI to Claude Code
6 followers
78 production skills connecting Figma AI to Claude Code
6 followers
Stop generic AI slop and broken design handoffs. KMRVID Skills provides 60 battle-tested custom skills across Figma Design Agent and Claude Code. Automate audits, tokens, Modern Tailwind CSS based frontend pipelines (React / Astro / Vanilla), and WCAG a11y. Built for production, open for learning.
Free Options
Launch Team
Customer.ioAutomate Messaging Everywhere — Startups Get 12 Months Free
Promoted
Hey Product Hunt community! 👋
I’m Masaaki, an independent UI/UX designer and frontend engineer since 2001.
Today, I’m thrilled to introduce KMRVID Skills — a complete 58-skill ecosystem designed to bridge the gap between Figma Design Agent and Claude Code.
🎁 Product Hunt Launch Offer (Limited Copies)
We’ve tailored 3 packages depending on your workflow:
All-in-One Complete Bundle (60 Skills): $129 (was $179) (Save $50 / First 50 copies)
👉 https://gaspanik.gumroad.com/l/kmrvid-bundle/phlaunch
KMRVID Claude Skills (40 Skills): $97 (was $127) (Save $30 / First 30 copies)
👉 https://gaspanik.gumroad.com/l/kmrvid-claudeskills/phlaunch
KMRVID Figma Skills (21 Skills): $47 (was $67) (Save $20 / First 30 copies)
👉 https://gaspanik.gumroad.com/l/kmrvid-figmaskills/phlaunch
(Use code PHLAUNCH at checkout or click the links above for automatic early-bird discounts)
I'd love to hear your thoughts, feedback, or any questions about integrating custom skills into your daily workflow! 🚀
Why I built this:
When working with AI design and coding agents, two major problems kept popping up:
Generic "AI Slop": Raw prompts constantly default to centered heroes, identical 2-column layouts, and predictable cream/terracotta palettes.
Broken Handoffs: Design agent outputs are full of messy auto-generated layers (Frame 1234), hardcoded values, and broken auto-layouts that downstream coding agents struggle to parse.
KMRVID Skills solves this by establishing an end-to-end, disciplined pipeline:
In Figma (20 Skills): Auto-audit node readiness, bind variables (Color/Type/Spacing), auto-fix WCAG contrast, and generate Dev Mode annotations directly via Plugin API.
In Claude Code (40 Skills): Zero-prompt project setup, cognitive-UI layout topologies (Z/F/I/Bottom-up), Tailwind-based frontend pipelines, and vision-based alt-text generation.
🌐 Live Demo & Open Source Preview
Want to see the generated code and live preview before buying?
Live Demo: https://kmrvid-skills-demo.gaspanik.workers.dev
GitHub Repository: https://github.com/gaspanik/kmrvid-skills-demo
GitHub Public Skills Preview: https://github.com/gaspanik?tab=repositories&q=-skill&type=public
Here is a quick look at the Claude Code side in action ⚡
Once your Figma tokens and components are structured, Claude Code automatically ingests the context, sets up the project pipeline, and builds clean, responsive Tailwind code with zero prompt fatigue:
📹 Watch the Claude Code Pipeline Demo: https://youtu.be/Ailv2KpV0FM
Let me know what you think or if you’d like to see specific framework workflows! 🛠️
---
Here’s an in-depth, 13-video walkthrough playlist covering the entire Figma workflow.
It's in Japanese audio, but you can see the exact UI actions in real-time, and auto-translated CC captions are available!
👉 https://www.youtube.com/playlist?list=PLJ_bPOBVpGbI
🚀 Day 2 Update: Added 2 New Figma-Native Skills to the Ecosystem!
Huge thanks to everyone who supported our launch yesterday! We are committed to constantly improving KMRVID Skills, and we just added 2 new custom skills to the Figma suite:
1️⃣ figma-mobile-convert (Desktop-to-Mobile Conversion)
Converts 1280–1440px desktop layouts directly into optimized 390px mobile frames.
Enforces desktop fidelity (keeps heading weights, background colors, and full-bleed image intent strictly consistent).
Auto-generates variant-based navigation components (Hamburger Open/Closed states, bottom tab bars).
Includes a pre-readiness audit before conversion.
2️⃣ figma-japanese-web-guideline (Japanese Web Typography & Anti-Slop)
Eliminates AI artifacts in CJK/Japanese typography directly inside Figma.
Enforces justified alignment for multi-line body text and prevents orphan characters.
Restricts generic AI patterns (harsh shadows, arbitrary gradient fills, unnecessary alternating backgrounds).
Guarantees readable font scales across mobile viewports.
Both skills are now live in the repository and bundle. More updates coming soon!
Curious about the full skill list & specs? Read the full documentation here:
Claude Code Skills (40 Skills): https://fragrant-edam-563.notion.site/KMRVID-Claude-Skills-README-en-3c65dae25dd28069b32fec9ace022915
Figma Skills (20 Skills): https://fragrant-edam-563.notion.site/KMRVID-Figma-Skills-README-en-3c65dae25dd280b98d58f2b970162aa5
Workflow Demonstration (4x Speed / No Audio)
This 16-minute workflow is condensed to 4x speed, showcasing the seamless pipeline of KMRVID skills in Figma.
Prompting the Agent: Selected the project brief and pasted the skill execution instructions into the Figma Design Agent.
figma-typescale: Automatically generated and bound Figma variables for consistent font size sizing.
create-single-page: Instantly scaffolded a new page frame based on the requirements.
figma-audit: Performed the first audit on the initial layout to check design system readiness.
figma-systematize: Executed the core "Systematize" skill to bulk-rename layers, bind variable tokens, and convert elements into reusable components.
figma-audit (Re-audit): Ran a final audit on the optimized layout to confirm a clean, production-ready structure.
Workflow Demonstration (3x Speed / No Audio)
This 7-minute workflow is condensed to 3x speed, showcasing the pipeline of KMRVID skills in Figma.
https://youtu.be/xHLKTstskx4
1. figma-alt-suggest: Detects every node with an IMAGE fill within the selected frame looks at the actual rendered content, and proposes a specific alt-text draft for each.
2. figma-annotate: Writes native Figma Dev Mode annotations (Development/Accessibility/Content preset categories) across the selection, passing a coding agent implementation intent the structure alone can’t convey.
Workflow Demonstration (5x Speed / No Audio)
This 6-minute workflow is condensed to 5x speed, showcasing the pipeline of KMRVID skills in Figma.
https://youtu.be/-6xx1Xe8jDk
figma-pipeline: Paste Figma Frame URL to figma-pipeline skill in Claude Code CLI.
Coding result: https://loopthread-figma-implementation.gaspanik.workers.dev/
Quick update for the community! 🚀
We’ve just published 4 free AI Skills directly to the Figma Community so you can try out our skill architecture inside Figma Design Agent right away:
1. ☀️ weather-audit: 4-dimension AI-readiness diagnostic scoring.
👉 https://www.figma.com/community/skill/89814/weather-audit
2. 🏷️ alt-suggest: Vision-based semantic alt text auto-gen for image layers.
👉 https://www.figma.com/community/skill/92022/alt-suggest
3. 🌐 i18n-translator: Duplicates the selected FRAME or SECTION once per target language and translates every text node inside each copy via the Plugin API.
👉 https://www.figma.com/community/skill/92859/i18n-translator
4. 📝 design-md: Bidirectional sync between DESIGN.md and a Figma file, conforming to the Google design.md spec.
👉 https://www.figma.com/community/skill/93189/design-md
Explore the full collection on Figma:
👉 https://www.figma.com/@masaakikomori
---
Looking for the full automation suite?
🎨 KMRVID Figma Skills (Optimization & Systematize Toolkit):
👉 https://gaspanik.gumroad.com/l/kmrvid-figmaskills/phlaunch
⚡️ Complete Design-to-Code All-in-One Bundle (Figma + 40 Claude Code Skills):
👉 https://gaspanik.gumroad.com/l/kmrvid-bundle/phlaunch
Just published a free Figma AI Skill to the Figma Community! ⚡️
Try it out directly inside Figma:
👉 https://www.figma.com/community/skill/89814/weather-audit
Looking to fully automate design tokens, componentization, and code handoff?
Check out the complete KMRVID Figma Skills toolkit: https://gaspanik.gumroad.com/l/kmrvid-figmaskills/phlaunch