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.
95
94%
Does it follow best practices?
Impact
98%
1.44xAverage score across 5 eval scenarios
Advisory
Suggest reviewing before use
Evaluation results
100%
46%Theme Extraction Setup
Artifact storage conventions
Correct base path
0%
100%
Slug format
50%
100%
Date subdirectory
100%
100%
No /tmp usage
100%
100%
No docs/ usage
100%
100%
Screenshots under ARTIFACTS
0%
100%
theme/ subdirectory
0%
100%
overview.md location
16%
100%
Extraction method noted
100%
100%
Source URL noted
100%
100%
100%
27%Token Extraction from a Legacy Site
Hardcoded CSS fallback extraction
No-token-system note
100%
100%
Extraction method noted
100%
100%
Colour table format
40%
100%
RGB to Hex conversion
100%
100%
RGB to HSL conversion
0%
100%
Primary token assigned
58%
100%
Background token assigned
37%
100%
Foreground token assigned
62%
100%
Muted token assigned
100%
100%
Correct artifacts path
100%
100%
95%
26%Apply Brand Theme to React Project
Tailwind v4 CSS token authoring
No hsl() in @theme inline
0%
100%
hsl() used in :root
0%
100%
Tailwind import present
100%
100%
radius token defined
100%
100%
@layer base body styles
0%
100%
Font loaded in index.html
100%
100%
Font preconnect
100%
100%
No arbitrary values in Button
100%
66%
Semantic tokens in Button
100%
100%
All tokens mapped in @theme inline
100%
100%
100%
20%Document Extracted Colours for a SaaS Dashboard
Token Decision Tree assignment
Correct output path
100%
100%
Colour table format
50%
100%
Primary = CTA button
83%
100%
Secondary = secondary button
70%
100%
Accent = tag/highlight
80%
100%
Muted = sidebar
75%
100%
Border token
70%
100%
Background token
80%
100%
Foreground token
80%
100%
Tie-breaking documented
100%
100%
99%
31%Extract Design Tokens from a React App
SPA extraction script
Uses agent-browser
100%
100%
ARTIFACTS path defined
50%
100%
mkdir -p ARTIFACTS
100%
100%
SPA scroll step
0%
100%
Wait networkidle after scroll
0%
100%
CSS vars extraction
100%
100%
Computed styles extraction
100%
90%
Screenshots under ARTIFACTS
100%
100%
wait --load networkidle on open
87%
100%
Full-page and mobile screenshots
50%
100%
- Evaluated
- Agent
- Claude Code
- Model
- Claude Sonnet 4.6