CtrlK
BlogDocsLog inGet started
Tessl Logo

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

1.44x
Quality

94%

Does it follow best practices?

Impact

98%

1.44x

Average score across 5 eval scenarios

SecuritybySnyk

Advisory

Suggest reviewing before use

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-4/

{
  "context": "Tests whether the agent correctly applies the Token Decision Tree to assign ambiguous colours to the right semantic tokens, uses the correct colour table format, and places files in the correct artifact directory.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Correct output path",
      "description": "colours.md is placed inside .context/artifacts/saas-dashboard/2026-03-13/theme/ — not in docs/ or project root",
      "max_score": 10
    },
    {
      "name": "Colour table format",
      "description": "colours.md contains a table with Token, Hex, HSL, and Role columns",
      "max_score": 8
    },
    {
      "name": "Primary = CTA button",
      "description": "The primary CTA button colour (rgb(99, 102, 241) / #6366F1) is assigned to --primary",
      "max_score": 12
    },
    {
      "name": "Secondary = secondary button",
      "description": "The secondary button background (rgb(241, 245, 249)) is assigned to --secondary or --muted (not --primary or --accent)",
      "max_score": 10
    },
    {
      "name": "Accent = tag/highlight",
      "description": "The tag background colour (rgb(224, 231, 255)) is assigned to --accent (not --secondary, since it is decorative/highlight only)",
      "max_score": 10
    },
    {
      "name": "Muted = sidebar",
      "description": "The sidebar background (rgb(241, 245, 249)) or card bg is assigned to --muted",
      "max_score": 8
    },
    {
      "name": "Border token",
      "description": "The input border or card border colour (rgb(203, 213, 225) or rgb(226, 232, 240)) is assigned to --border",
      "max_score": 10
    },
    {
      "name": "Background token",
      "description": "The page/body background (rgb(248, 250, 252)) is assigned to --background",
      "max_score": 10
    },
    {
      "name": "Foreground token",
      "description": "The body text colour (rgb(15, 23, 42)) is assigned to --foreground",
      "max_score": 10
    },
    {
      "name": "Tie-breaking documented",
      "description": "decisions.md explains at least one assignment decision for an ambiguous colour (e.g. why sidebar is --muted vs --secondary, or why tag is --accent vs --secondary)",
      "max_score": 12
    }
  ]
}

evals

SKILL.md

tile.json