88 tagged design to code, measured the same way as everything else here.
Browse within: nextjs 36react-native 36stitch 36codegen 26design-tools 22figma 16design-system 12android 6design 6ios 6
Skill Claude CodeCodex
Upgrade @figma/plugin-typings and absorb what the new version exposes. Diffs the .d.ts between the installed and the target version (that package ships no changelog), sorts the changes into breakage / new API / silently-added fields, maps each onto the sandbox handlers, the hand-written Zod mirrors in shared, and the…
Skill Claude CodeCodex
Upgrade @modelcontextprotocol/server (the MCP TypeScript SDK v2) and prove the wire contract survived. The SDK is a runtime dependency whose breakage lands on the wire, not in the type checker — so this sorts each release by which SDK source files it touched (Figwright uses only the server + stdio slice of a…
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
Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic design system document. Run this before framework conversion skills.
Skill Claude CodeCodex
Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing.
Skill Claude CodeCodex
Master entry point for all Stitch design workflows. Routes from user request → design spec → prompt assembly → screen generation → iteration (edit, variants, design systems) → design system extraction → framework conversion (Next.js, Svelte, HTML, React Native, or SwiftUI) → optional quality pass.
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.
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…
Core-Mate/Pixel-Perfect-Web-Replica
Skill Claude CodeCodex
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 CodeCodexCursor
Entry point for Figma → iOS UIKit/Swift code in this repo. Three-phase workflow: phase 1 runs figma-ios-preload-data to produce a unified data package; phase 2 (this playbook) consumes it via linked specialized skills (MK tokens, iOS 12, node conventions, SnapKit layout) to emit baseline UI code — visual/layout…
Skill Claude CodeCodexCursor
A skill that turns Figma design-node data into Swift code for iOS UICollectionView screens. UICollectionView is an iOS component for displaying scrolling grids or lists of reusable cells.
Skill Claude CodeCodexCursor
A guide for deciding whether a Figma vector should be drawn with iOS code or downloaded as an image asset. It keeps text, components, icons, and list-like content as separate, editable elements when needed.
Skill Claude CodeCodex
Extract a semantic design brief from an existing Pencil (.pen) file and persist it as design.md at the project root. Documents the visual language (atmosphere, palette roles, geometry, depth, typography) plus token vocabulary and scale parity - so every subsequent /pencil-design and /pencil-to-code pass shares the…
Skill Claude CodeCodex
Run a complete design-quality audit over any repository that contains Pencil (.pen) files. Enforces the plugin's universal 4px-grid scale, variable-first tokens, and component-reuse heuristics across both design and companion code - framework-agnostic, stack-agnostic. Delegates to the pencil-auditor subagent, which…
Skill Claude CodeCodex
Author Pencil (.pen) designs that are compliant by construction with the plugin's four house rules (variable-first tokens, component extraction at the second repetition, universal 4px-grid scale, grep-able viewport frame naming). Captures a semantic design brief before composition so on-scale choices match intent.…
Skill Claude CodeCodex
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
Use when the user wants to design UI screens, generate design variants, or work with Google Stitch for any visual/UI design task. Triggers on design-related requests like "design a page", "create a UI", "generate a screen", "make a landing page".
Skill Claude CodeCodex
Set up Google Stitch, Figma, and NanoBanana MCP servers for Claude Code.
Skill Claude CodeCodex
A visual checking and correction workflow that compares a running app screen with its Figma source using captures, overlays, difference maps, and pixel measurements. An overlay places two images together so mismatches are easier to see.
Skill Claude CodeCodex
A workflow for turning Figma designs into native Android or iOS screens. Figma is a design tool; native output means Android Jetpack Compose or XML, and iOS SwiftUI or UIKit code that runs on those platforms.
Skill Claude CodeCodex
A workflow for applying only the changed parts of a Figma design to code on a design branch. A design branch is a separate code version used for review before changes are merged.
Skill Claude CodeCodex
Extract UI designs from screenshots and iteratively refine implementations to match a reference image pixel-perfectly using comparison and fix suggestions.