skills.rest
gzbomerif-sketch
gzbomerif-sketchCOMMUNITY
Explore all skills by this author →
GitHub

Landing Page Steal

Replicate landing page designs into React code using Playwright MCP.

Updated Aug 27, 2026
Search Tags:#automation#reference#screenshot#web-design#landing-page#playwright-mcp#ui-implementation
One-click install
npx skills add https://github.com/gzbomerif-sketch/sylcroad-live --skill landing-page-steal-gzbomerif-sketch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Landing Page Steal
Source: https://github.com/gzbomerif-sketch/sylcroad-live/tree/main/Skills
Command: npx skills add https://github.com/gzbomerif-sketch/sylcroad-live --skill landing-page-steal-gzbomerif-sketch

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright-mcp, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the replication of an existing landing page into a specified code file using Playwright MCP, reducing manual recreation time and helping maintain fidelity to the reference.

Core Features & Use Cases

  • Reference capture: Open a URL or image of a landing page and analyze its layout, color palette, typography, and interactions.
  • Automated implementation: Generate code for the target file that closely mirrors the reference design.
  • Iterative refinement: Compare against the reference and refine to reach high fidelity.

Quick Start

Provide a reference URL or image and specify the target file; the Skill will generate the implementation in that file.

Frequently Asked Questions about Landing Page Steal

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

FAQPage Schema
How do I replicate a landing page design into code automatically?▼

Landing page replication automates the process of converting an existing design into functional code by analyzing layout, colors, and typography from a reference URL or image, then generating matching React and Tailwind CSS implementation in your target file.

Can I use Playwright to capture and rebuild landing pages?▼

Yes. Playwright MCP enables automated reference capture of landing pages—opening URLs, analyzing design elements, and generating code that mirrors the reference with high fidelity across layout, color palette, and interactions.

How do I ensure my replicated UI follows accessibility and responsive design standards?▼

The Skill generates React components using Shadcn UI primitives with built-in ARIA labels, WCAG AA contrast compliance, and Tailwind CSS responsive patterns, satisfying accessibility and mobile-first requirements automatically.

What's the best way to maintain UI consistency when building multiple pages from references?▼

By using Shadcn principles and modular Tailwind CSS components across implementations, you maintain consistent design tokens, spacing, and interaction patterns across all pages replicated from different reference sources.

Can I refine the generated code to better match my reference design?▼

Yes. The Skill supports iterative refinement—compare the generated output against your reference, identify gaps, and regenerate or adjust the target file until the implementation reaches your desired fidelity.

Do I need React and Tailwind CSS knowledge to use this Skill?▼

Familiarity with React, Tailwind CSS, and Shadcn UI patterns helps you evaluate and customize the generated code, but the Skill handles code generation automatically from the reference design you provide.

Related Skills

Explore More Design & Creative Skills→
WiseWolfPTWiseWolfPT

Landing Page Steal

Copy a landing page design from a URL or image into a codebase page using Playwright MCP.

Community
Advanced
dylantarredylantarre
38

framer

Export design tokens as CSS variables for Framer prototypes.

Community
Advanced
Mischio95Mischio95
1

tailwind-design-system

Define Tailwind CSS design tokens as CSS variables with shadcn/ui wrappers.

Community
Advanced
InnerScopeHearingInnerScopeHearing

wcag-audit-patterns

Audit web content for WCAG 2.2 compliance with automated testing and remediation guidance.

Official
Intermediate