Skip to main content
Glama
AgenticBridge

StyleTrace

StyleTrace

English | 繁體中文 | 日本語 | 한국어 | Français | Español

Node >=20 TypeScript Playwright MCP npm downloads

StyleTrace is an MCP server that analyzes references and returns a prompt-ready design brief for agents and reviewers. One use case is helping developers build websites without getting distracted by design decisions, then review generated output against the original style constraints.

StyleTrace reverse engineering comparison

Additional example using the same references with and without StyleTrace in the review flow:

StyleTrace with and without comparison

Why Use It

  • turn a few reference pages, screenshots, or HTML snippets into a prompt-ready design brief an agent can actually use

  • make website regeneration less generic by preserving the parts that feel distinctive

  • review generated HTML or screenshots against the extracted style constraints instead of relying on vague visual judgment

  • analyze only the exact URLs you give it, so the result stays predictable and reviewable

Related MCP server: mcp-mirage-brand-extract

Installation

Requirements:

  • Node.js >=20

  • Playwright Chromium

Install from npm:

npm install -g @agenticbridge/style-trace
npx playwright install chromium

Or run from a local clone:

npm install
npx playwright install chromium
npm run build

Usage

Connect it from your MCP client.

Published package:

{
  "mcpServers": {
    "style-trace": {
      "command": "npx",
      "args": ["-y", "@agenticbridge/style-trace"]
    }
  }
}

Local clone:

{
  "mcpServers": {
    "style-trace": {
      "command": "node",
      "args": ["/absolute/path/to/style-trace/dist/src/index.js"]
    }
  }
}

The server exposes two tools:

  • analyze_website_style

  • review_generated_style

analyze_website_style accepts exact website URLs:

{
  "urls": ["https://www.apple.com", "https://www.framer.com"],
  "targetArtifact": "landing-page",
  "fidelity": "high"
}

It also accepts mixed references:

{
  "references": [
    { "type": "url", "value": "https://www.apple.com/iphone/" },
    { "type": "image", "value": "https://example-cdn.com/reference/hero-shot.png" },
    { "type": "screenshot", "value": "https://example-cdn.com/reference/hero-capture.png" },
    { "type": "html", "value": "<main><section><h1>Hero</h1></section></main>" }
  ],
  "targetArtifact": "prototype",
  "fidelity": "medium",
  "designIntent": "preserve the hero hierarchy and chrome discipline",
  "evidenceMode": "inline"
}

urls remains supported for website-only input. Use references when you want to mix website, image, screenshot, and bounded HTML sources in one request.

The result now includes prompt-ready fields such as visualVocabulary, styleInvariants, styleRisks, softGuesses, compositionBlueprint, variationAxes, blendModes, promptReadyBrief, reviewContract, and originalityBoundary.

review_generated_style checks generated HTML or a generated image URL against a StyleTrace result:

{
  "styleResult": { "...": "StyleTrace analyze_website_style output" },
  "generatedHtml": "<!doctype html><html>...</html>",
  "viewportWidth": 1440,
  "viewportHeight": 900
}

It returns matched invariants, violated constraints, drift notes, and review confidence.

How It Works

analyze_website_style visits exactly the public website URLs you provide with Playwright, and it can also analyze direct public image URLs, screenshot references, and bounded HTML snippets. It extracts narrow, reviewable signals such as module structure, hero treatment, CTA patterns, proof modules, imagery, forms, breakpoints, and signature motifs, then compiles them into a prompt-ready design brief with hard constraints, drift risks, composition structure, and review checks. It does not crawl additional pages, and it does not try to invent a new design system or make speculative recommendations.

review_generated_style runs the generated artifact back through the same lens and compares it to the extracted style contract. The goal is to make style review explicit: what matched, what drifted, and what likely became generic.

Limits

  • public http and https URLs only

  • image and screenshot references must point to direct public image assets such as .png, .jpg, .webp, .gif, .avif, or .svg

  • HTML references are bounded snippets, not full browsing sessions

  • image-only or screenshot-only references produce weaker inference for typography, navigation, forms, motion, and breakpoints than live website references

  • no auth flows or private-network targets

  • stdio transport only

  • no persistence, queueing, or web UI

Contributing and Testing

Run the local checks:

npm run typecheck
npm run build
npm test

For a real MCP transport smoke test:

npm run test:mcp-cli

For the full review artifact flow with source captures, with MCP vs without MCP LLM regeneration, and a composite diff board:

built-in comparison set:

npm run test:e2e -- --instance apple-pixel-samsung
npm run test:e2e -- --instance figma-framer-webflow

Or run it against your own public URLs:

bash scripts/test-mcp-cli.sh https://www.apple.com https://www.framer.com

License

MIT

Available Tools

2 tools
analyze_website_styleAnalyze website styleA
Read-only

Analyze exact public website URLs, public image URLs, or a mix of both and extract a compact design grammar. StyleTrace analyzes only the references you provide. Evidence can be omitted, exported to a sidecar file, or inlined.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlsNoOne or more exact public http/https URLs to analyze. StyleTrace analyzes only the URLs you provide and does not crawl additional pages automatically.
fidelityNoOptional fidelity target for downstream synthesis output. Does not change raw evidence capture.
referencesNoMixed references to analyze. Use type=url for websites, type=image or type=screenshot for public image URLs, and type=html for bounded raw HTML snippets.
designIntentNoOptional downstream generation intent used only to shape prompt-ready guidance.
evidenceModeNoHow evidence should be returned. Defaults to omit. Use file to export evidence to a sidecar JSON instead of embedding it in structuredContent.
targetArtifactNoOptional target artifact to shape synthesis output for downstream agents. Does not change raw evidence capture.

Output Schema

ParametersJSON Schema
NameRequiredDescription
sitesYes
guidelineYes
synthesisYes
blendModesYes
styleRisksYes
softGuessesYes
variationAxesYes
reviewContractYes
styleInvariantsYes
promptReadyBriefYes
visualVocabularyYes
originalityBoundaryYes
compositionBlueprintYes
evidenceArtifactPathNo

TDQS

A4.3/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

The readOnlyHint annotation already marks this as a safe read operation, and the description complements it by adding key behavioral details: it does not crawl additional pages, analyzes only provided references, and can omit evidence, export to a sidecar file, or inline it. No contradiction with annotations; the added context goes beyond what annotations provide.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is three compact sentences, each earning its place. It front-loads the core action and output, then adds important constraints and evidence-mode flexibility without waste or redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the six-parameter schema with 100% coverage, an output schema, and readOnly annotations, the description is complete enough for correct invocation. It clearly states what the tool does, what inputs it accepts, and key behavioral constraints (no crawling, evidence modes). No critical information is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents all six parameters fully, including enums and per-parameter descriptions. The tool description repeats the idea of URLs/images and evidence modes but does not add meaning beyond the schema's own parameter descriptions. Baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb ('Analyze') with a clear resource ('exact public website URLs, public image URLs, or a mix') and states the produced output ('compact design grammar'). It also distinguishes itself by noting StyleTrace analyzes only provided references, which differentiates it from the sibling tool 'review_generated_style'.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear usage context: analyze exact public URLs or image URLs to extract design grammar. It also communicates an important constraint ('analyzes only the references you provide') and hints at evidence-mode choices. However, it does not explicitly mention when to prefer this tool over the sibling 'review_generated_style' or state exclusions such as private/internal URLs.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

review_generated_styleReview generated styleA
Read-only

Review generated HTML or a generated image URL against a StyleTrace result, checking invariant matches, drift, and likely style violations.

ParametersJSON Schema
NameRequiredDescriptionDefault
styleResultYes
generatedHtmlNo
viewportWidthNo
viewportHeightNo
generatedImageUrlNo

Output Schema

ParametersJSON Schema
NameRequiredDescription
modeYes
viewportYes
confidenceYes
driftNotesYes
artifactTypeYes
matchedInvariantsYes
violatedConstraintsYes

TDQS

A3.7/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already signal readOnlyHint=true, so the agent knows this is a safe read-only operation. The description adds that the tool checks invariant matches, drift, and violations, which is useful context, but it does not disclose return formatting, limitations, or operational behavior beyond what the output schema and annotations already imply. No contradiction with annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single front-loaded sentence conveys the core action, target, reference, and review criteria with zero filler. Every word contributes meaning, making it appropriately sized and easy to parse.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Despite the tool's high complexity (5 parameters, a massive required styleResult object, output schema), the description offers no workflow guidance—such as first obtaining a StyleTrace via analyze_website_style—and no hints about viewport usage or input exclusivity. The output schema may cover return values, but operational context is under-specified for an agent to use this tool reliably.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters2/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 0%, so the description must compensate. It only broadly maps generated HTML/image URL and styleResult, but does not explain the viewportWidth/viewportHeight parameters, the enormous required styleResult structure, or the relationship between generatedHtml and generatedImageUrl (e.g., whether one is required). This is insufficient for a tool with 5 parameters and a deeply nested schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description uses a specific verb ('review') and clearly identifies the target resources (generated HTML or image URL), the reference ('StyleTrace result'), and the criteria (invariant matches, drift, likely style violations). This distinguishes it from the sibling analyze_website_style, which would likely produce the StyleTrace rather than consume it.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description clearly implies when to use the tool: after a StyleTrace result exists and when a generated artifact needs validation. It doesn't explicitly state when not to use it or name alternatives, but the 'against a StyleTrace result' framing provides clear contextual separation from the analysis sibling.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 2 tool updatesv0.5.2
    • First observedanalyze_website_style
    • First observedreview_generated_style

TDQS

A4.1/5.0
Disambiguation5/5

The two tools have clearly distinct purposes: one extracts design grammar from references, the other verifies generated output against an extracted style. There is no overlap or ambiguity between them.

Naming Consistency5/5

Both tool names follow the same verb_noun pattern in snake_case: 'analyze_website_style' and 'review_generated_style'. The naming is consistent and predictable.

Tool Count3/5

With only 2 tools, the set is on the thin side. For a server focused on style analysis and review, this minimal set covers the core workflow but feels slightly sparse compared to typical servers.

Completeness5/5

The two tools provide a complete lifecycle for the intended domain: analyze a style from references, then review generated output against that style. There are no obvious gaps in the stated workflow.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/AgenticBridge/style-trace'

If you have feedback or need assistance with the MCP directory API, please join our Discord server