claude

design-to-code

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

8 on GitHubby Adam Smithv0.1.5MITupdated 4 months ago
/

Plugin design-to-code from marketplace arustydev in aRustyDev/agents. Commands read from the repo's manifest — 1 month ago.

This plugin runs code on your machine — its hooks fire automatically on events like tool use and it starts local MCP servers. The exact commands are listed below; read them before installing.

What it installs

Skills (8)

  • accessibility-audit

    Audit design components and generated code for WCAG 2.1 compliance including color contrast, touch targets, and screen reader compatibility

  • asset-optimization

    Optimize design assets for production deployment with format-specific compression, resolution scaling, and bundle optimization

  • design-system-management

    Manage design system tokens including CRUD operations, multi-format export, version tracking, and synchronization with design files

  • design-to-flutter

    Convert design specifications from Figma, Sketch, or Penpot to Flutter widgets with proper theming

  • design-to-react

    Convert design specifications from Figma, Sketch, or Penpot to React components with CSS modules or styled-components

  • design-to-swiftui

    Convert design specifications from Figma, Sketch, or Penpot to SwiftUI view code with proper modifiers and theme integration

  • design-to-tailwind

    Convert design specifications from Figma, Sketch, or Penpot to HTML with Tailwind CSS utility classes

  • design-tokens-extraction

    Extract design tokens (colors, typography, spacing, shadows) from Figma, Sketch, and Penpot design files via MCP servers and normalize to W3C format

Slash commands (6)

  • /design-to-code:README
  • /design-to-code:compare-design

    Compare design files with generated code to detect drift and inconsistencies

  • /design-to-code:export-assets

    Export and optimize images, icons, and other assets from design files for target platforms

  • /design-to-code:extract-tokens

    Extract design tokens from Figma, Sketch, or Penpot design files

  • /design-to-code:generate-component

    Convert a design component to framework-specific code (SwiftUI, React, Flutter, Tailwind)

  • /design-to-code:sync-design-system

    Synchronize design tokens between design files and codebase, detecting drift and applying updates

Subagents (4)

  • README
  • asset-pipeline

    Batch process design assets across multiple platforms with parallel optimization and format conversion

  • design-system-architect

    Create comprehensive design systems from design files, orchestrating token extraction, component generation, and documentation

  • design-translator

    Multi-step design to code workflow agent. Orchestrates design file reading, token extraction, and code generation across multiple frameworks.

MCP servers (4)

  • sketch

    runs: npx -y mcp-remote http://localhost:31126/mcp --allow-http

  • penpot-plugin

    runs: npx -y mcp-remote http://localhost:4401/mcp --allow-http

  • penpot

    runs: uvx penpot-mcp

  • iconify

    runs: npx -y iconify-mcp-server@latest

Hooks (1)

  • PostToolUse

    bash -c 'FILE="$TOOL_INPUT_FILE_PATH"; case "$FILE" in *design-tokens*.json|*tokens.json) python3 -c "import json,sys; data=json.load(open(sys.argv[1])); tokens=[k for k in data if not k.startswith(ch

View source on GitHub docs.arusty.dev

More from aRustyDev/agents

All 7 plugins →

blog-workflow

claude

Multi-phase blog content creation with personas, templates, and iterative review. Supports tutorials, deep dives, research summaries, and development journals.

5 skills · 30 commands · 3 agents · hooks

8

swiftui-dev

claude

Comprehensive SwiftUI development support for UI testing, integration testing, data-driven apps, and interactive development practices.

7 skills · 5 commands · 2 agents · 9 MCP servers

8

browser-extension-dev

claude

Comprehensive end-to-end support for building, testing, and deploying cross-browser extensions across Firefox, Chrome, and Safari with modern patterns, WASM integration, and best practices.

9 skills · 3 commands · 4 agents · 4 MCP servers · hooks

8

job-hunting

claude

Comprehensive job hunting toolkit — analyze job descriptions, extract resume bullets from career history, identify skill gaps, tailor applications, and research employers with salary data.

7 skills · 9 commands

8

homebrew-dev

claude

Homebrew formula development toolkit — research packages, generate formulas from JSON schema, validate with brew audit/style, and batch-create formulas for a custom tap.

1 skill · 3 commands · 1 agent · 2 MCP servers · hooks

8

Similar plugins

hyperframes

claudecodex

Recommended: all published HyperFrames skills in one versioned bundle. Create and render videos from HTML: the contract, film, captions, overlays, motion and look references, the CLI, the registry, media, Figma, slideshows and Remotion ports.

22 skills

heygen-com/hyperframes 83,516

figma

claude

Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and development workflows.

18 skills · 1 MCP server

anthropics/claude-plugins-official 47,076

daisyui-blueprint

claude

daisyUI Blueprint MCP server - (Needs paid license)

saadeghi/daisyui 42,821

Figma

claude

Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and development workflows.

18 skills · 1 MCP server

anthropics/knowledge-work-plugins 35,601

show-me

claude

Explain the current topic with concise diagrams, code-shape sketches, and focused HTML artifacts

1 skill

humanlayer/skills 5,762

designlang

claude

Thirteen slash commands wrapping the designlang CLI: /extract (full design language → DTCG, Tailwind, Figma), /site (crawl a whole site → one canonical design system + consistency grade), /grade (shareable HTML report card + SVG badge), /battle (head-to-head graded comparison), /remix (restyle in 6 vocabularies — brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial), /pack (one downloadable design-system bundle), /theme-swap (OKLCH-correct recolour around a new brand primary), /brand (full editorial brand-guidelines book — 13 chapters, hand-off-ready), /pair (fuse two designs across configurable axes — colours from one site, typography from another), /studio (live token-editor with component preview + export), /verify (rebuild from tokens and pixel-diff vs live for a fidelity score), /fidelity (score a clone vs the original — visual pixel-diff + motion fidelity — with a ranked correction plan), /gallery (build a shareable static gallery of measured clones).

2 skills · 14 commands

Manavarya09/design-extract 5,068

Maintain design-to-code?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins7 plugins