skills.rest
Noegnesis
NoegnesisCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

clone-design

Recreates a UI design from a screenshot or URL into HTML/CSS scaffold.

Updated May 18, 2026
Search Tags:#html#design system#tailwind#responsive layout#ui cloning#css scaffold
One-click install
npx skills add https://github.com/Noegnesis/noesis --skill clone-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clone-design
Source: https://github.com/Noegnesis/noesis/tree/main/skills/clone-design
Command: npx skills add https://github.com/Noegnesis/noesis --skill clone-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It turns a screenshot or reference site into a usable UI scaffold so you can start building without guessing the layout, spacing, and visual hierarchy.

Core Features & Use Cases

  • Design-language extraction: Identifies layout primitives, color palette, typography, spacing rhythm, and distinctive UI details from the provided reference.
  • Starter scaffold generation: Produces working HTML/CSS (defaulting to Tailwind) that matches the reference’s system, not generic filler content.
  • Practical customization guardrails: Outputs a clear checklist of what to edit (copy, colors, assets, responsiveness, and TODOs for complex interactions).

Quick Start

Run /clone-design, then provide a screenshot path or a URL to the page you want to imitate and ask to recreate the look and layout.

Frequently Asked Questions about clone-design

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

FAQPage Schema
How do I convert a UI screenshot into a working HTML and CSS scaffold?▼

To convert a UI screenshot into a working HTML and CSS scaffold, provide the image path or URL to recreate the look. The system extracts layout, palette, typography, and spacing primitives to generate semantic, responsive-ready markup.

Can I generate a Tailwind starter template from a reference website URL?▼

Yes, you can generate a Tailwind starter template from a reference website URL. The process extracts the visual hierarchy and design system from the reference link to produce working HTML/CSS that matches the layout without using generic filler content.

What is the best way to clone a website's responsive layout and design system?▼

The best way to clone a website's responsive layout and design system is to extract its foundational primitives, including color palette and spacing rhythm. This recreates the site's visual structure into a semantic HTML scaffold defaulting to Tailwind.

Does the generated UI scaffold require manual editing before deployment?▼

Yes, the generated UI scaffold requires manual editing before deployment. The process outputs a clear customization checklist detailing what to edit, including copy, colors, assets, and complex interactions, to prevent shipping unedited drafts.

How does extracting design primitives like spacing and typography from an image work?▼

Extracting design primitives like spacing and typography from an image works by identifying layout structures, color palettes, and distinctive UI details from the visual reference. These extracted elements are then translated into semantic markup and a responsive-ready starter scaffold.

Related Skills

Explore More Design & Creative Skills→
ValyayValyay

figma-audit

Compare live UI screenshots against Figma references and report visual discrepancies.

Community
Advanced
ToniIAPro73ToniIAPro73
2

Creador de Páginas de Blog

Convert Markdown blog drafts into semantic HTML/CSS pages using a base layout template.

Community
Basic
neuron-oneneuron-one
25

screen-coder

Convert UI design screenshots into responsive HTML/CSS code.

Community
Advanced
ToqsickToqsick

ui-factory

Orchestrate the full UI-Factory chain from color system to dashboard.

Community
Advanced