pantheon-ai/website-theme-porter

Port the visual theme and styling from a live website to a React/Tailwind CSS project. Extracts colours, typography, spacing, and component styles — via agent-browser automation, manual inspection, curl/wget, or direct source reading — writes structured documentation and all artifacts under .context/artifacts/{website}/ with timestamps, applies findings as Tailwind v4 CSS tokens, then verifies by visually diffing the original site against the local or deployed version. Use when cloning a brand, replicating a design system, matching a reference site, migrating visual identity, copying a style guide, or porting a theme from any live URL into a React codebase.

1.44x

Quality

94%

Does it follow best practices?

Impact

98%

1.44x

Average score across 5 eval scenarios

Securityby

Advisory

Suggest reviewing before use

Document Extracted Colours for a SaaS Dashboard

Name: pantheon-ai/website-theme-porter
Rating: 0.956 (1 reviews)
Author: pantheon-ai

A product team wants to port the visual theme of a SaaS dashboard into their React codebase. Stage 1 extraction is complete. The raw data has been saved at .context/artifacts/saas-dashboard/2026-03-13/tokens-computed.json.

Based on the extracted data below, produce colours.md inside .context/artifacts/saas-dashboard/2026-03-13/theme/.

Extracted computed values:

{
  "body":   { "bg": "rgb(248, 250, 252)", "color": "rgb(15, 23, 42)" },
  "h1":     { "color": "rgb(15, 23, 42)" },
  "btn_primary": { "bg": "rgb(99, 102, 241)", "color": "rgb(255, 255, 255)" },
  "btn_secondary": { "bg": "rgb(241, 245, 249)", "color": "rgb(51, 65, 85)" },
  "nav":    { "bg": "rgb(15, 23, 42)", "color": "rgb(248, 250, 252)" },
  "tag":    { "bg": "rgb(224, 231, 255)", "color": "rgb(67, 56, 202)" },
  "input":  { "bg": "rgb(255, 255, 255)", "border": "rgb(203, 213, 225)" },
  "card":   { "bg": "rgb(255, 255, 255)", "border": "rgb(226, 232, 240)" },
  "sidebar": { "bg": "rgb(241, 245, 249)" }
}

In addition to colours.md, note any colour assignment decisions or tie-breaking rationale in a decisions.md file in the same directory — this will help the team understand how ambiguous colours were assigned.