Tines The single, secure environment for agents, apps, and automations.
Launching today
KMRVID Skills
58 production skills connecting Figma AI to Claude Code
3 followers
58 production skills connecting Figma AI to Claude Code
3 followers
Stop generic AI slop and broken design handoffs. KMRVID Skills provides 58 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.
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 (18 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.
🎁 Product Hunt Launch Offer (Limited Copies)
We’ve tailored 3 packages depending on your workflow:
All-in-One Complete Bundle (58 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 (18 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! 🚀
🌐 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
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