skills.rest
TETRA2000
TETRA2000COMMUNITY
Explore all skills by this author →
Website𝕏@TETRA2000GitHub

duplicate-page

Duplicate live web pages into React and Tailwind code via Figma.

Updated Mar 15, 2026
Search Tags:#react#figma#tailwind#design-to-code#fidelity#duplicate#page-reproduction
One-click install
npx skills add https://github.com/TETRA2000/figma-web-studio --skill duplicate-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: duplicate-page
Source: https://github.com/TETRA2000/figma-web-studio/tree/main/.claude/skills/duplicate-page
Command: npx skills add https://github.com/TETRA2000/figma-web-studio --skill duplicate-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Duplicate a live web page into a production-ready React + Tailwind page by capturing its structure with Figma, enabling high-fidelity reproductions for development and demos.

Core Features & Use Cases

  • Faithful page reproduction using Figma's capture engine to extract DOM structure, colors, typography, and layout.
  • Optional per-section code extraction into reusable React components and automatic routing scaffolding.
  • Experimental workflow with explicit caveats; best for tasks where pixel-perfect fidelity is required and manual adjustments may be needed.

Quick Start

Provide the URL and target route, then follow prompts to create a React + Tailwind page mirroring the original site.

Frequently Asked Questions about duplicate-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I duplicate a live web page into React and Tailwind code?▼

You can duplicate a live web page into React and Tailwind code by capturing its structure with Figma, then using per-section extraction to generate a production-ready page. The workflow requires a Figma MCP server and Playwright for automated reconnaissance.

Can I reproduce a web page from Figma into React with high fidelity?▼

Yes, you can reproduce a web page from Figma into React with high fidelity. The skill leverages Figma's capture engine to extract DOM structure, colors, typography, and layout, ensuring a faithful reproduction suitable for marketing and product pages.

Does page reproduction with Figma require Playwright to work?▼

Playwright is required for page reproduction with Figma to execute the automated reconnaissance workflow. This step gathers the necessary live site data before the design extraction and React component generation can begin.

Can I extract reusable React components when cloning a web page?▼

Yes, you can extract reusable React components when cloning a web page. The skill offers optional per-section code extraction to break down the duplicated layout into modular components, along with automatic routing scaffolding.

What are the limitations of cloning a web page with Figma and React?▼

Cloning a web page with Figma and React is an experimental workflow where pixel-perfect fidelity may require manual adjustments. It is best suited for marketing, product, and demo pages rather than complex dynamic web applications.

What do I need to start cloning a web page into a React route?▼

To start cloning a web page into a React route, you need to provide the target URL and the intended project route. You also need a configured Figma MCP server and Playwright to support the automated reconnaissance and design extraction workflow.

Related Skills

Explore More Design & Creative Skills→
cano721cano721

figma-implement-design

Translate Figma designs into UI code using the Figma MCP server.

Community
Advanced
raduceucaraduceuca

figma-to-code

Convert Figma frames into React components with Tailwind CSS.

Community
Intermediate
YanCheng-goYanCheng-go
3

figma-to-code

Translate Figma designs into React and Tailwind components.

Community
Advanced
idontcarlidontcarl

figma-implement-design

Convert Figma designs into UI code with design-token integration.

Community
Advanced