Agent Plugins Marketplace
← All plugins

design-to-code

v1.2.0

Turn designs (screenshots or Figma frames) into production-quality code: React + Tailwind v4 on web, React Native + Expo on mobile — with skills for component best practices, design verification, and accessibility.

Claude CodeAgent Plugins8 Skills1 MCP serverStreamable HTTP

By Owen AyresLicense: MIT0 GitHub starsUpdated 2 weeks ago

Directory evidence

Runtimes
Claude Code and Agent Plugins
Parsed components
9 skill or MCP entries
Source updated
Sep 8, 2026
Manifest status
Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install design-to-code for Claude Code

Installs for the current user
claude plugin marketplace add IchenDEV/agent-plugin-mkt
claude plugin marketplace update agent-plugin-marketplace
claude plugin install design-to-code-3@agent-plugin-marketplace

Paste and run these commands in a terminal with Claude Code. They add and refresh the PluginsMP catalog, then install this plugin.

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually
git clone https://github.com/oayres/agent-plugins

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/design-to-code/.

Plugin files

plugins/design-to-code/
├── .claude-plugin/plugin.json
├── plugin.json
├── skills/design-to-code/SKILL.md
├── skills/design-verification/SKILL.md
├── skills/mobile-verification/SKILL.md
├── skills/nextjs-components/SKILL.md
├── skills/react-components/SKILL.md
├── skills/react-native-expo/SKILL.md
├── skills/tailwind-v4/SKILL.md
├── skills/web-accessibility/SKILL.md
└── .mcp.json

Included Skills8

design-to-codeskills/design-to-code/SKILL.md

Core workflow for turning designs into working code. Use proactively when the user shares a screenshot or mockup of UI, when they paste a Figma frame or Figma link, when they attach a design and ask to "build this" or "implement this screen", or when a request to write UI code includes a design image. Produces React components with Tailwind v4 by default on web, and React Native + Expo components on mobile. Uses the Figma MCP server when available, and falls back automatically to visual analysis of screenshots when it is not.

design-verificationskills/design-verification/SKILL.md

Verify that implemented web UI matches the source design. Use proactively after building or changing UI from a design, when the user says the implementation "looks wrong", when they ask for a design QA pass, or when comparing a screenshot of the running app against a mockup. Renders the component in a browser, captures screenshots, and compares against the design systematically (layout, spacing, typography, color, states, responsiveness).

mobile-verificationskills/mobile-verification/SKILL.md

Verify React Native / Expo UI against the source design on simulators and devices. Use proactively after building or changing mobile screens, when mobile UI "looks wrong", when the user asks for a QA pass on a React Native screen, or when checking safe areas, keyboard handling, touch targets, or platform parity. Runs the app in Expo, captures simulator/emulator screenshots on iOS and Android sizes, compares against the design, and checks mobile-specific concerns including accessibility.

nextjs-componentsskills/nextjs-components/SKILL.md

Next.js component and App Router best practices for building UI from designs. Use proactively when implementing designs in a Next.js project, when deciding between Server and Client Components, when adding routes, loading, or error states, or when wiring next/image, next/font, and metadata. Complements react-components, which covers framework-agnostic React patterns.

react-componentsskills/react-components/SKILL.md

React component best practices for building UI from designs. Use proactively when creating, reviewing, or refactoring React components, when designing a props API, when deciding where state lives, or when rendering lists, loading, and error states. Applies to any React 18+/19 codebase; for Next.js-specific concerns (server components, routing) also load nextjs-components.

react-native-exposkills/react-native-expo/SKILL.md

React Native and Expo best practices for building mobile UI from designs. Use proactively when implementing designs in a React Native or Expo project, when the project has expo or react-native dependencies, when translating web-style layouts to native components, or when handling safe areas, lists, navigation with Expo Router, platform differences, and mobile accessibility. Covers core components, StyleSheet vs NativeWind, images, and touch interactions. Triggers for any mobile screen implementation.

tailwind-v4skills/tailwind-v4/SKILL.md

Tailwind CSS v4 conventions for styling components generated from designs. Use proactively whenever writing or editing Tailwind classes, when configuring @theme tokens, when translating Figma variables into design tokens, or when migrating v3 syntax to v4. Covers CSS-first configuration, class organization, dark mode, responsive patterns, and state styling.

web-accessibilityskills/web-accessibility/SKILL.md

Web accessibility (WCAG 2.2 AA) practices for UI built from designs. Use proactively while writing any web UI, when auditing existing components, when the user mentions a11y, screen readers, WCAG, or accessibility review, or when a design's colors, focus states, or form labels look under-specified. Covers semantic HTML, keyboard support, focus management, ARIA usage, color contrast, forms, images, and motion.

MCP servers1

figmaStreamable HTTP
url
https://mcp.figma.com/mcp

Plugin manifests2

plugins/design-to-code/.claude-plugin/plugin.json
{
  "name": "design-to-code",
  "version": "1.2.0",
  "description": "Turn designs (screenshots or Figma frames) into production-quality code: React + Tailwind v4 on web, React Native + Expo on mobile — with skills for component best practices, design verification, and accessibility.",
  "author": {
    "name": "Owen Ayres",
    "url": "https://github.com/oayres"
  },
  "homepage": "https://github.com/oayres/agent-plugins/tree/main/plugins/design-to-code",
  "repository": "https://github.com/oayres/agent-plugins",
  "license": "MIT",
  "keywords": [
    "design-to-code",
    "figma",
    "react",
    "nextjs",
    "tailwind",
    "react-native",
    "expo",
    "accessibility",
    "design-verification"
  ],
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
plugins/design-to-code/plugin.json
{
  "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
  "name": "design-to-code",
  "version": "1.2.0",
  "description": "Turn designs (screenshots or Figma frames) into production-quality code: React + Tailwind v4 on web, React Native + Expo on mobile — with skills for component best practices, design verification, and accessibility.",
  "author": {
    "name": "Owen Ayres",
    "url": "https://github.com/oayres"
  },
  "homepage": "https://github.com/oayres/agent-plugins/tree/main/plugins/design-to-code",
  "repository": "https://github.com/oayres/agent-plugins",
  "license": "MIT",
  "keywords": [
    "design-to-code",
    "figma",
    "react",
    "nextjs",
    "tailwind",
    "react-native",
    "expo",
    "accessibility",
    "design-verification"
  ]
}

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[design-to-code on Agent Plugins Marketplace](https://pluginsmp.com/plugins/design-to-code-3)