skills.rest
SpaceZephyr
SpaceZephyrCOMMUNITY
Explore all skills by this author →
GitHub

web-prototype

Clone live web pages into editable Next.js and Tailwind CSS prototypes.

14|4|Updated Mar 31, 2026
Search Tags:#next.js#design tokens#tailwind css#frontend development#ui replication#web prototyping#page cloning
One-click install
npx skills add https://github.com/SpaceZephyr/allSkills --skill web-prototype-spacezephyr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-prototype
Source: https://github.com/SpaceZephyr/allSkills/tree/main/pm-url2proto
Command: npx skills add https://github.com/SpaceZephyr/allSkills --skill web-prototype-spacezephyr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Manually recreating web page UIs for prototyping is time-consuming and rarely achieves pixel-perfect fidelity to the original design. This Skill automates the entire process, turning any live web page URL or screenshot into a fully editable local project in minutes.

Core Features & Use Cases

  • Multi-strategy page capture: Uses Chrome automation as the primary method, with WebFetch and accessibility tree + visual knowledge as fallbacks, to reliably extract structure, styles, and components from any web page.
  • Complete Next.js project generation: Produces a runnable Next.js + Tailwind CSS project with mapped semantic design tokens, pre-built component structure, and TypeScript type safety.
  • Integrated design documentation system: Auto-generates Markdown design docs for every feature change, accessible via a non-intrusive squeeze-style side panel in the prototype.
  • Use Case: If you want to build a custom dashboard similar to Vercel's, share the dashboard URL with Claude, and get a fully editable local prototype with matching layout, colors, and components to iterate on.

Quick Start

Share a live web page URL or screenshot with Claude, and it will generate a pixel-perfect local Next.js + Tailwind CSS prototype project you can run and modify immediately.

Frequently Asked Questions about web-prototype

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

FAQPage Schema
How do I turn a live web page into a local Next.js prototype?▼

You can clone a web page into a Next.js prototype by sharing its URL or screenshot. The Skill uses multi-strategy page capture to extract styles, then generates a complete Next.js and Tailwind CSS project with semantic design tokens.

How does pixel-perfect UI replication handle dynamic web page styles?▼

Pixel-perfect UI replication extracts styles via Chrome automation, with WebFetch and accessibility tree parsing as fallbacks. It maps captured layout and components into semantic Tailwind CSS design tokens for accurate reproduction.

Can I modify a generated Next.js prototype project after initial UI cloning?▼

Yes, you can modify generated Next.js prototype projects. The Skill supports extending prototypes with new pages and features, applying TypeScript type safety validation while auto-generating Markdown design documentation for all changes.

Does the generated web prototype include design documentation?▼

Yes, the generated web prototype includes an integrated design documentation system. It auto-generates Markdown design docs for every feature change, accessible through a non-intrusive squeeze-style side panel within the Next.js application.

What are the limitations of using Chrome automation for page cloning?▼

Chrome automation for page cloning may fail on restricted or dynamically rendered pages. When this happens, the Skill falls back to WebFetch and accessibility tree parsing with visual knowledge to extract structure and styles.

Related Skills

Explore More Software Engineering Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
zephyrwang6zephyrwang6
14

web-prototype

Clone live web pages into local Next.js and Tailwind CSS prototypes.

Community
Advanced
idealjsidealjs
5

create-component-nextjs-page

Create Next.js MDX/TSX component demo pages with variants and visual regression tests.

Official
Intermediate
ProyectoG007ProyectoG007

frontend-design-ultimate

Generate React, Tailwind CSS, and shadcn/ui static websites from natural language descriptions.

Community
Advanced