Roast | The Taste Layer for AI Agents

roast. design.

WHY

Intercept. Validate. Correct. The Taste Layer for AI Agents mapping primitive HTML into sophisticated design systems before a single broken pixel renders. Carefully designed.

WHO

Crafted by a design veteran with 10+ years of experience building world-class products. Because a taste layer must be built on real human design intuition to teach AI agents how to build beautifully.

Roast a URL

Enter any live URL to run a real-time aesthetic evaluation against the Taste Engine.

— 01/Modes

One
endpoint,
three
response
modes.

Agents get terse, actionable diffs. Designers get scores and narrative. Both run against the same eval engine.

MODE: "DIFF"

Actionable Diff

MODE: "SCORE"

Scored Summary

MODE: "PROFILE"

Design Profile

eval_output.json

// request { "input": { "type": "url", "value": "https://acme.com" }, "mode": "diff" }

// response { "verdict": "needs_work", "fixes": [ { "element": "hero CTA", "issue": "low contrast", "current": "#999 on #fff", "fix": "use #111", "severity": "critical" } ], "reference": { "brand": "Linear", "similarity": 0.82 } }

Native to
your stack.

Validates and fixes visual outputs in the background.

02 / Taste Engine

Inject typography
& contrast tokens.

Stop accepting default browser styles. Roast maps primitive AI HTML into sophisticated design systems with perfect contrast ratios and spacing mathematics.

← Raw AI output

Enter youremail and password to continue to the application dashboard area.

CLICK SUBMIT

Roast corrected →

Welcome back.

Enter your details below to continue.

Continue →

contrast: 7.2:1 • spacing: 8px grid

03 / The Corpus

Indexed against perfection.

50,000+ validated UI patterns from the world’s most precise interfaces. Every pixel a reference point.

50k+

DESIGN.md files and design library shots. 100% consistent structure across colors, typography, spacing, and components.

Evaluation dimensions derived from the corpus. The rubric writes itself from 50k+ product assets.

<5ms

Nearest-brand similarity search. Every verdict returns the closest corpus match as a reference.

Typography

Scale, weight, tracking discipline

Aa Bb

Inter Display / 900

Line-height: 1.15; Letter-spacing: -0.04em;

Color

Contrast, palette coherence, tokens

brand-orange

surface-dark

content-light

Spacing

Grid alignment, rhythm, density

gap: 24px

Components

Pattern discipline, consistency

CTA primary

Layout

Grid systems, placement hierarchy

Composition

Visual balance, layout structure

— MCP Server

Native to
your agent.

One JSON block. Roast connects to Cursor, Claude Code, Windsurf — any MCP client. Six tools for evaluation, corpus search, and brand guidelines.

mcp config

{
  "mcpServers": {
    "roast": {
      "type": "http",
      "url": "https://roast.felixobinna.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

roast_url Evaluate any live URL to receive actionable visual feedback.

roast_image Evaluate base64 screenshot directly from your active window.

roast_figma Evaluate Figma frame + node map against implementation.

roast_tokens Evaluate design token payload for contrast and spacing.

search_corpus Find similar brands in corpus to align your aesthetic direction.

brand_guidelines Fetch DESIGN.md for a brand to guide token implementation.

Roast a URL

Oneendpoint,threeresponsemodes.

Actionable Diff

Scored Summary

Design Profile

Actionable Diff

Native toyour stack.

Inject typography& contrast tokens.

Indexed against perfection.

Native toyour agent.

Ship designthat doesn't looklike AI.

One
endpoint,
three
response
modes.

Native to
your stack.

Inject typography
& contrast tokens.

Native to
your agent.

Ship design
that doesn't look
like AI.