HTML Replica Style Lock Generator

Problem

When recreating a web page, a common failure is producing HTML that only looks similar. The next generated page may then drift in color, typography, spacing, and component states. This skill is aimed at reverse-engineering a reusable visual baseline from a URL or screenshot before handing it to another page-generation skill.

How It Works

It turns the input page into three constrained artifacts:
- index.html: a single-file, semantic, editable high-fidelity baseline with embedded CSS and only high-confidence interactions.
- design-style-spec.md: a style lock specification for humans and AI, covering layout, color, typography, radius, shadow, component states, imagery, and responsive rules.
- design-tokens.json: structured design tokens with fields like colors, typography, spacing, components, responsive, and constraints for direct use by code or later skills.

The main steps include analyzing the layout system, extracting the visual design system, inferring components and interactions, planning the implementation strategy, and documenting design intent. The output also separates must-keep anchors, allowed variations, and forbidden drift, so downstream pages do not become generic templates.

Boundaries

This skill does not bulk-expand pages. When a screenshot is provided, it is treated as the highest-priority visual truth; if the URL differs, the screenshot wins. It is suitable for replication, abstraction, and style locking, not for inventing complex interactions or adding visual language absent from the source.