Design To Code

Bridge design tools and code generation, enabling seamless translation of design files into production-ready UI code across multiple frameworks.

by @arustydev 8 skills

Install

npx skillmds@latest add plugin:arustydev/design-to-code

One command, no setup. In Claude Code it lands as a managed plugin you can enable, disable or remove with /plugin. On any other agent it installs the 8 skills into that agent's own folder.

Or inside Claude Code

In the Plugins tab, add this marketplace:

skillmds/skillmd
/plugin install arustydev-design-to-code@skillmd

Adds the marketplace once; later plugins need the second line only.

Or install by hand

Download the plugin and unzip its skills/ folder into your agent's skills directory. Works with every agent, no CLI needed.

Download plugin Paths per agent

Just the markdown? SKILL.md files only.

This plugin

skills: 8
authors: 1

Published by a registry member. Review its skills before installing.

Skills in this plugin

▌
Design To React · arustydev
Convert design specifications from Figma, Sketch, or Penpot to React components with CSS modules or styled-components

8 repo stars
▌
Design To Flutter · arustydev
Convert design specifications from Figma, Sketch, or Penpot to Flutter widgets with proper theming

8 repo stars
▌
Design To Swiftui · arustydev
Convert design specifications from Figma, Sketch, or Penpot to SwiftUI view code with proper modifiers and theme integration

8 repo stars
▌
Asset Optimization · arustydev
Optimize design assets for production deployment with format-specific compression, resolution scaling, and bundle optimization

8 repo stars
▌
Design To Tailwind · arustydev
Convert design specifications from Figma, Sketch, or Penpot to HTML with Tailwind CSS utility classes

8 repo stars
▌
Accessibility Audit · arustydev
Audit design components and generated code for WCAG 2.1 compliance including color contrast, touch targets, and screen reader compatibility

8 repo stars
▌
Design System Management · arustydev
Manage design system tokens including CRUD operations, multi-format export, version tracking, and synchronization with design files

8 repo stars
▌
Design Tokens Extraction · arustydev
Extract design tokens (colors, typography, spacing, shadows) from Figma, Sketch, and Penpot design files via MCP servers and normalize to W3C format

8 repo stars