design-reverse-engineer_skill

Overview

This skill reverse-engineers the visual design (HTML/CSS/styling) of a target website and applies the captured design patterns to Split Lease's public pages. It captures colors, typography, spacing, layout and component styles, produces a design spec, and generates a concrete implementation plan that updates CSS variables and page styles without changing content or functionality. The skill is intended for external repositories only and will refuse to run inside the splitleasesharath GitHub account.

How this skill works

The skill uses Playwright MCP (via the mcp-tool-specialist subagent) to navigate the reference URL, take full-page screenshots, and snapshot the DOM. It extracts computed styles (colors, fonts, spacing, shadows), documents them in a design-capture markdown file, then maps those styles to Split Lease components and updates CSS variables and page-specific styles. Finally it verifies changes by running the dev server and performing screenshot comparisons while preserving all text and behavior.

When to use it

• You want Split Lease public pages to match the look and feel of another website.
• You can provide a reference URL to use as the design inspiration.
• You need a visual polish or redesign of public pages while preserving functionality.
• You want a documented design spec and an implementation plan for CSS updates.
• You need repeatable capture + verification using Playwright screenshots and DOM snapshots.

Best practices

• Confirm the repo is not the splitleasesharath GitHub account before running the workflow.
• Start by capturing the reference site and saving a timestamped design-capture markdown file.
• Update app/src/styles/variables.css first to centralize palette, typography, and spacing changes.
• Only change styles—do not modify text content, data structures, API calls, or page logic.
• Preserve responsive breakpoints and verify with visual diffs on local dev server.

Example use cases

• Match a marketing partner's aesthetic so landing pages feel consistent across brands.
• Refresh Split Lease public pages to align with a modern UI pattern found on a reference site.
• Extract a color palette and typography scale from a competitor and apply it globally via CSS variables.
• Document and apply component-level styles (buttons, cards, nav) from a design reference.
• Run automated screenshot comparisons to validate that styling changes did not alter content.