Framer AI AgentsDesign and publish professional sites with AI
Launched this week
KMRVID Skills
60 production skills connecting Figma AI to Claude Code
6 followers
60 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.
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): $179 ~~$229~~ (Save $50 / First 50 copies)
👉 https://gaspanik.gumroad.com/l/kmrvid-bundle/phlaunch
KMRVID Claude Skills (40 Skills): $149 ~~$179~~ (Save $30 / First 30 copies)
👉 https://gaspanik.gumroad.com/l/kmrvid-claudeskills/phlaunch
KMRVID Figma Skills (20 Skills): $59 ~~$79~~ (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.