62 tagged design-to-code, measured the same way as everything else here.
Browse within: figma 41stitch 37claude-code-plugin 36nextjs 36react-native 36codegen 26cursor 22design-tools 22design-system 8android 6ios 6
Skill Claude CodeCodex
Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a…
jpoindexter/design-md-extractor
Skill Claude CodeCodex
Extract and document the visual style of public websites as reusable DESIGN.md files. Use when the user asks to analyze a website's design system, extract styles, create design tokens, produce DESIGN.md, generate an agent-readable style guide, or build from a website's visual language.
Skill Claude CodeCodex
Use this skill whenever the user wants to use AI agents to work with Penpot design files via the Penpot MCP Server. Triggers include: using Penpot through an AI agent, design files, design systems, design tokens, Penpot MCP, design-to-code, generating UI from design, auditing a design system, creating…
Skill Claude CodeCodex
Parse Figma design prompt, enrich via MCP, explore codebase, generate design spec, and invoke brainstorming.
Core-Mate/Pixel-Perfect-Web-Replica
Skill Codex
Recreate public frontend pages locally with high visual fidelity. Use when the user asks Codex or Claude Code to pixel-perfect clone, mirror, study, sandbox, reproduce, or locally run a public website/page; capture its static assets; preserve layout, scroll animations, media, typography, and interactions; compare…
Skill Claude CodeCodex
Use when the user uploads a screenshot of a hero section or landing page (or a URL/description of one) and wants a copy-paste-ready developer prompt to recreate it exactly in a tool like Lovable, Bolt, Replit, or Cursor. Produces prompts with exact hex colors, Tailwind classes, animation timing tuples, and component…
Skill Cursor
Maps Figma node hierarchy (FRAME/GROUP/INSTANCE) to UIKit UIView containers, preserving parent-child relationships, addSubview order, and coordinate system. Decides which nodes become UIView containers vs leaf views, and how to read relative/absolute coordinates from the data package. Use when generating UIKit code…
Skill Claude Code needs its repo
Orchestrates end-to-end Figma-to-React conversion pipeline with enforced TDD, automated pixel-diff visual QA, E2E testing, and app-type awareness (web apps, Chrome extensions, PWAs). Keywords: Figma to React, design tokens, autonomous component generation, Figma conversion, Tailwind config, component library, TDD…
Skill Codex
Use when converting approved design sources, handoff packages, mockups, visual contracts, or UI blueprints into implementation code and visual parity evidence; also when visual implementation feels rough, stretched, under-specified, or needs section-level high-fidelity repair.
Skill Claude CodeCodex
Extract UI designs from screenshots and iteratively refine implementations to match a reference image pixel-perfectly using comparison and fix suggestions.
Skill Claude CodeCodex
Validates UI/UX designs with UXLoom — models user journeys as state machines and proves what screens are missing (unreachable states, dead ends, empty/loading/error coverage, WCAG contrast, touch targets, localization overflow) before code exists. Use when designing screens or user flows, validating AI-generated UI…
alexconner-79/high-plains-drifter
Skill Claude CodeCodex
Align a design to your real Storybook components instead of reconstructing it. Use when turning a Figma frame into React built from an existing component library (Build mode), or when pulling scrappy exploratory code into line with the library once a direction feels right (Align mode). Triggers include "build this…
Skill Claude CodeCodex
Help the operator use the repo-owned Codex bundle and starter JSON to install ShadcnBrief from a local checkout.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: