Hey Product Hunt! Karthik here, the maker of Designxcode.

I've been building this as a side project and I'm excited to share it with you all.

The problem I kept hitting: Every team I've worked with had the same story - design systems that started strong and slowly fell apart. Tokens drifting between Figma and code. Components that existed in designs but never got built. Handoffs that were more like hand-waves. The worst part? Nobody noticed until things were visibly broken in production.

So I built Designxcode - an MCP server that connects directly to Claude AI and lets you audit, sync, and fix your entire design system through natural language.

You can literally ask Claude "How healthy is our design system?" and get a scored breakdown of what's drifting, what's missing, and what needs fixing. Then ask it to generate a PR to fix everything.

Here's everything packed into one MCP server — 13 tools, 4 resources, 1 prompt:

🧠 1 Prompt:

use-design-system - A ready-made prompt that tells Claude to load and follow your design system before generating any UI code

🔍 Audit & Analyze

audit_system_health - Score your design system 0-100 with a full breakdown of what's drifting
audit_component_parity - Find what exists in Figma but is missing in code (and vice versa)
detect_unused_tokens - Scan your repo and find tokens nobody's actually using
get_design_context - Pull your entire Figma design system into Claude's context

🎨 Extract & Export

extract_tokens - Pull every design token and variable from Figma (W3C, Style Dictionary, or raw)
extract_styles - Get typography, fills, effects, and grid styles with resolved values
export_assets - Export SVG/PNG/JPG/PDF assets from Figma components

🔄 Sync & Generate

sync_tokens_to_code - Generate token files for CSS, SCSS, Tailwind, Swift, Kotlin, or JSON
generate_coded_components - Turn Figma components into production React/HTML with all variants and props
implement_design - Convert an entire Figma frame into production code, matching every token
generate_theme_config - Extract light/dark and custom theme configs from Figma variable modes

🚀 Ship & Configure

generate_sync_pr - Auto-create a GitHub PR with all token and component changes
set_design_rules - Define your team's design rules and constraints that persist across sessions

📦 4 Resources (auto-available context for Claude):

designsystem://tokens/{fileKey} - Live token mappings
designsystem://components/{fileKey} - Component inventory with props and variants
designsystem://patterns/{fileKey} - Auto-inferred usage patterns from your layouts
designsystem://rules/{fileKey} - Your team's custom design rules

No plugins to install, no new UI to learn. Just connect the MCP server and start talking to Claude about your design system.

What makes this different:

It's AI-native - built on the Model Context Protocol, not bolted-on AI
It treats Figma as the source of truth (as it should be)
It generates tokens for 6 platforms (CSS, SCSS, Tailwind, Swift, Kotlin, JSON)
It doesn't just report problems - it fixes them with auto-generated PRs

It's completely free and open source. I built this because I think every team deserves a healthy design system, not just the ones with dedicated platform teams.

Would love your feedback, questions, and feature ideas. I'm here all day!