Design to code

Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

warpdotdev/warp

网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 /…

Jane-xiaoer/claude-skill-web-clone

Rebuilds existing web pages as editable local code that matches their content, assets, responsive layout and interactions, including Framer sites and animated pages.

JCodesMore/ai-website-cloner-template

Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

warpdotdev/warp

Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.

heygen-com/hyperframes

Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.

scalar/scalar

Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.

warpdotdev/warp

Maps published Figma components to their code implementations with Code Connect, using the Figma MCP suggestion and mapping tools.

warpdotdev/warp

Pixel-perfect Figma to React conversion using coderio. An agent skill from MigoXLab/coderio.

MigoXLab/coderio

Guides Jetpack Compose and Compose Multiplatform work across Android, Desktop, iOS and web, plus Android TV, Material 3 motion, paging, navigation and design-to-code.

aldefy/compose-skill

Builds or updates full Figma screens from code or a description by reusing the file's published design system components, variables and styles.

warpdotdev/warp

Universal media renderer with no fixed template — any custom layout, size or style becomes pixel-perfect images (PNG/JPEG/WebP), vector SVG, paged PDFs or animations (WebP/GIF).

tsingliuwin/autoclaw

Grounds AI-built interfaces in real reference images and a saved personal taste profile, so UI work avoids the generic defaults of typical generated apps.

codeswithroh/tastemaker

Extracts the design of a screenshot, website URL or Figma file into a design.md of tokens, components, layout and brand rules, or copies one element into element.md.

uxKero/anydesign

Turn any input (a website URL, a text brief, existing footage, a music track) into a finished, pixel-perfect MP4 — fully local, byte-stable across renders.

cosmicstack-labs/lazy-frames

Analyzes a screenshot, website or Figma file and writes a `design.md` with its token system, component inventory and reconstruction notes, or an `element.md` for one element.

avelikiy/great_cto

Guides an agent through turning a Figma node into production UI with the repo's own components, then checks the result visually before finishing.

cursor/plugins

Image-to-code replication pipeline. An agent skill from Yu-369/VibeCurb.

Yu-369/VibeCurb

Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes.

julianromli/ai-skills

Turns a piece of Craig's content (an email, a YouTube script, an essay, or pasted text) into a polished image carousel publishable to both LinkedIn and Instagram from one set of 1080x1350 slides.

TheCraigHewitt/skills

Generate framework-aware code from a Figma design. An agent skill from awdr74100/figwright.

awdr74100/figwright

Guides writing correct, performant Compose and Compose Multiplatform UI across Android, desktop, iOS and web, from state and animation to design-to-code and crash fixes.

rcosteira79/android-skills

A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.

MaxHan7/frontend-ui-standards-skill

A skill your agent uses when reviewing or fixing a UI built with pxlkit (@pxlkit/ui-kit) for canonical API usage, accessibility and pixel-perfect quality.

Joangeldelarosa/pxlkit

Authoritative guide for implementing stunning, accessible, performant UI.

JuliusBrussee/skills

Have any video reviewed by a real human, through iterative pingfusi review rounds.

alex-durango/pingfusi

Inspects Figma designs through the figma CLI and Figma's MCP server to read variants, spacing, tokens and layouts and to extract assets for implementation.

asgeirtj/system_prompts_leaks

A skill your agent uses when user provides a URL and wants to replicate or clone a website's UI, design, or visual style for their own product.

ragnar-pwninskjold/tech-snacks

Design-to-code workflow for Figma designs. An agent skill from epam/ai-dial-chat.

epam/ai-dial-chat

Fix or polish an existing website clone/draft using pingfusi review rounds.

alex-durango/pingfusi

Turns Stitch screens into a React, Vite and TypeScript dashboard with TanStack Query data fetching, DESIGN.md tokens as CSS variables and optional read-only Web3 data.

google-labs-code/stitch-skills

Frontend component patterns, composition, design token integration, barrel file organization, error handling, and Figma-to-code workflow.

TheSoftwareHouse/copilot-collections

Use when you need to convert / rewrite existing HTML (from a file or url) into Jaspr code.

rodydavis/signals.dart

Produces an implementation-ready spec from a finished design, covering layout, tokens, states, responsive behavior, edge cases, motion and accessibility, so engineers do not have to guess.

getcrew44/crew44

Teaches an agent on MiniMax M3 to ground visual claims in attached images, screenshots, mockups and clips, and to re-read results after a visual change.

madebyaris/advance-minimax-m3-cursor-rules

Turn Figma designs into CDS React (cds-web) or React Native (cds-mobile) code.

coinbase/cds

Generates complete, accessible, token-driven UI component code for a chosen framework such as React with Tailwind, SwiftUI, Vue, Flutter or Jetpack Compose.

plugin87/ux-ui-agent-skills

Vibe Coding 流水线第 4 步:视觉设计准则。design.md 是【用户提供】的网站视觉设计系统 (Google DESIGN.md / awesome-design-md 格式),本 skill 不画图、不生成视觉,而是 【承接 + 结构化 + 校验】用户提供的视觉来源,固化成标准 design.md,作为下游 vibe-prototype 出图与 vibe-implement…

idiotLeoLYJ/Daliu-Awesome-Skills

Bridge Figma MCP output to Stellar Lab code conventions. An agent skill from stellar/laboratory.

stellar/laboratory

Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.

XiaomiMiMo/MiMo-Code

Clone, copy, or replicate a website/page pixel-perfect using pingfusi.

alex-durango/pingfusi

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation).

tech-leads-club/agent-skills

Vibe Coding 流水线第五步:依据 design.md(视觉准则)与 interaction.md,为每个页面在 Stitch 画布生成原型, 经 stitch-mcp 拉取 HTML 与截图存入 prototypes/,并与交互文档做双向对齐校验。

idiotLeoLYJ/Daliu-Awesome-Skills

Recreate a UI screenshot, mockup, or design image as production-quality React + TypeScript + Tailwind code with near-pixel-perfect visual fidelity.

buildfastwithai/gen-ai-experiments

Identify an asymmetric win by refusing a small promise that would eliminate disproportionate complexity.

EpicenterHQ/epicenter

Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols.

xenitV1/claude-code-maestro

Clone any website's landing page with pixel-perfect fidelity.

SylphAI-Inc/skills

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation).

davila7/claude-code-templates