Design To Code
by vibeeval · development · typescript, react, skill
Figma-to-code translation, design tokens, spacing/typography scales, responsive breakpoints, and design system bridge patterns.
Source: https://github.com/vibeeval/vibecosystem
Install
git clone https://github.com/vibeeval/vibecosystemTags: typescript, react, skill
⭐ 494 GitHub stars · Source: skillsdirectory
About development MCP servers and Claude skills
development MCP servers extend what AI agents can do inside Claude Code, Cursor, Copilot, Codex, and Windsurf. The Skiln directory indexes 16,000+ such integrations across 22 categories.
Design To Code is one of hundreds of development entries indexed on Skiln. Browse the full development category or the complete directory of Claude skills, MCP servers, agents, commands, and hooks.
Related development MCPs and skills
- Materials Selection by Tibsfox
Systematic materials selection for engineering design using performance indices, Ashby charts, multi-constraint optimization, and case-based reasoning. Covers the five-step Ashby method — function, objective, constraint, free variable, index — with worked examples for stiffness-limited beams, strength-limited ties, thermally shocked vessels, and minimum-cost components. Use when choosing among metals, polymers, ceramics, and composites under competing objectives.
- React State Management by lingxling
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
- React Ui Patterns by lingxling
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
- Ffmpeg Media by Tibsfox
FFmpeg media processing — video/audio conversion, trimming, encoding, filters, streaming. CLI and ffmpeg.wasm patterns.
- Martial Arts Body Discipline by Tibsfox
Martial arts as body discipline — the shared pedagogical structure across striking, grappling, and weapon arts (stance, distance, timing, ukemi, live partner work, graded ranking, and the ethical container the best schools enforce). Covers karate, judo, jiu-jitsu (Brazilian and traditional Japanese), aikido, kendo/kenjutsu, boxing, muay Thai, and wrestling at enough depth that an agent can place a user into a reasonable first-month practice and recognize the safety failures that matter most. ...
- Field Identification by Tibsfox
Identifying species in the field using dichotomous keys, gestalt recognition, diagnostic features, and habitat context. Covers the working identification protocol from first encounter through confidence-rated record, the vocabulary of field marks, the discipline of negative evidence, and the honest reporting of uncertain IDs. Use when the task is to name a living organism encountered in the field.
- Nutrient Metabolism by Tibsfox
Biochemical metabolism of macronutrients and key micronutrients — digestion, absorption, transport, utilization, and excretion — with emphasis on the pathways that matter for dietary-guideline debates (insulin response, lipoprotein metabolism, one-carbon metabolism, iron homeostasis). Use when a question asks what happens biochemically to a food after it is eaten, or when a claim about "metabolic effect" needs to be tested against mechanism.
- Incident Response by Tibsfox
Provides incident response best practices covering severity classification, on-call rotation, war room protocols, runbook templates, escalation policies, and blameless postmortems. Use when handling an incident, setting up on-call, writing a postmortem, creating a runbook, configuring PagerDuty or OpsGenie, or building incident management processes.
Frequently asked questions
How do I install Design To Code?
Add the install command above to your Claude Code, Cursor, or Windsurf MCP configuration. Most servers register via npx, a local command, or a Docker image. Refer to the source repository for environment variables and credential requirements.
Which clients support Design To Code?
Any MCP-compatible client works: Claude Desktop, Claude Code CLI, Cursor, Windsurf, Zed, and VS Code with the official MCP extension. OpenAI Codex and GitHub Copilot increasingly support MCP via adapter bridges.
Is Design To Code free?
The server itself is typically open source. Any upstream service (API keys, paid tiers, hosted infrastructure) may have its own pricing. Check the source repository for details.