io.standoutmcp/standout

Official14 tools

Standout

Anti-slop design taste for AI coding agents: art directions, section code, 0-100 page critic.

Audits UI design quality, contrast ratios, and mobile responsiveness for AI coding agents.

Captured live from the server via tools/list.

get_design_direction

Get a complete, distinctive, reference-backed art direction for a website: palette with exact hex roles, type pairing, layout DNA, hero spec, component treatments, imagery rules, matched motion recipes, and public-product reference evidence. Use FIRST, before building, so the site has a coherent direction instead of defaults. The catalog holds 12 directions: 8 with light base palettes and 4 dark — pass tone to constrain. If you only know the business name, call it anyway: the response will give you a few quick questions to ask the user, then call again with their answers as vibe/audience. REDESIGNS: if the business has an existing website, pass its URL as current_site_url — Standout fetches it server-side and returns a content inventory (services, prices, hours, contacts) plus a redesign protocol, so no questions are needed.

Parameters (7)

businessstring
What the business is, e.g. 'dive shop in Fiji running charters'. If omitted, the response returns a few quick intake questions to ask the user instead of erroring.
industrystring
Industry, e.g. restaurant, law firm, saas, gym
vibestring
Desired feel, e.g. premium, playful, technical, warm
audiencestring
Who the site must convince
tonestring
Base palette tone. Pass when the client asks for a light or dark site; matching stays inside that pool (8 light / 4 dark directions)
boldnessstring
How adventurous the signature concept should be: safe (conservative/trust-first businesses like clinics, accountants, law firms), elevated (default), bold, or experimental. A 'safe' request never receives a bold concept. Until round-2 primitives ship, higher dials still fall back to the strongest buildable concept instead of promising unbuildable interactions.
current_site_urlstring
The business's EXISTING website URL, for redesigns. Standout fetches it and returns the content to preserve + the redesign protocol

list_directions

Browse the full 'pick a vibe' menu: all 12 named art directions (8 light-base, 4 dark-base) with their taglines, vibe tags, and what each is best for. Use when the user wants to SEE the available directions and choose one themselves, rather than have get_design_direction auto-pick from the business. Pick an id from the menu and pass it as the `direction` argument to get_section_code, get_asset_pack, get_hero_concept, or synthesize_direction_from_references. Browsing the menu does not consume a metered call.

Parameters (2)

tonestring
Optionally show only light-base (8) or dark-base (4) directions
response_formatstring
Return a human-skimmable markdown menu (default) or a structured JSON array

critique_design

Brutal, specific design critique of an existing page: automatic AI-slop detection (banned gradients, centered-hero defaults, h-screen bugs, cliche copy) plus a prioritized fix list with exact values. When you pass a URL, the response also includes LIVE SCREENSHOTS of the rendered page at phone (390px) and desktop (1440px) widths — look at them and fix what fails visually. Always prefer passing the published URL over raw source for this reason.

Parameters (4)

urlstring
Public URL of the page to critique
sourcestring
Raw HTML/CSS/JSX of the page
descriptionstring
Description of the current design if no source available
directionstring
Direction pack id the page implements (e.g. ink-and-paper). ALWAYS pass this when the page was built from get_design_direction so the critique respects the design system instead of fighting it.

get_section_code

Finished, art-directed HTML/CSS page sections for a design direction: nav, hero, offer, image band, story, and footer — composed by a designer, seeded to this business (accent + expression already applied). Use AFTER get_design_direction: assemble the sections and replace only the content (copy + images), never the composition. This is what makes the result look like a $10k site instead of a template.

Parameters (4)

businessstringrequired
The business, e.g. 'barbershop in Suva' - seeds the expression so same-direction sites stay distinct
directionstring
Direction pack id from get_design_direction (e.g. ink-and-paper, harvest-table, aurora-glass)
sectionsarray
Optional filter: section ids or kinds (nav, hero, offer, imageband, story, footer). Omit for the full set
signature_movestring
The signature move id from get_design_direction's Signature Concept (e.g. editorial_dossier, field_report_layout). Pass it so the sections are ORDERED and FRAMED to that concept - the output then leads with the Creative Spine, Memorable Move, and hard Differentiation Rules.

get_hero_concept

Get a complete hero section concept: headline + subline copy (no marketing cliches), CTA labels, exact background treatment, and copy-paste ambient motion CSS matched to the design direction.

Parameters (2)

businessstringrequired
The business this hero sells
directionstring
Direction pack id from get_design_direction (e.g. coastal-film)

get_asset_pack

Ready-to-paste CSS for a direction: custom properties (palette + fonts), button/card/nav treatments, grain texture, Google Fonts import, and the matched motion recipe list.

Parameters (2)

directionstring
Direction pack id (e.g. terminal-grade)
querystring
Or describe the business/vibe and the best pack is chosen

get_motion_recipes

Production-ready motion and texture snippets (plain CSS/vanilla JS, framework-agnostic): staggered entrances, scroll reveals, marquees, aurora drift, grain, spotlight borders, counters, parallax and more. Request by ids or describe what you need.

Parameters (2)

idsarray
Recipe ids, e.g. ['fade-rise-stagger','grain-overlay']
querystring
Or describe the desired motion, e.g. 'premium dark portfolio hovers'

search_references

Search Standout's curated reference library: real public-product style, screen, and component patterns with source URLs, color roles, layout notes, component rules, do/don't constraints, and agent implementation notes. Use before or during a build when you need evidence-backed visual patterns.

Parameters (6)

querystring
Search terms like 'developer tool pricing', 'api key dashboard', 'restaurant booking', or 'dark command center'
typestring
Optional reference type filter
directionstring
Optional StandOut direction id, e.g. terminal-grade, coastal-film, harvest-table
categorystring
Optional category filter, e.g. pricing, onboarding, developer tool, restaurant
limitinteger
Number of references to return, max 12
response_formatstring
Return markdown or structured JSON

get_reference

Get the full structured payload for one reference: source URL, categories, tags, colors, typography, layout pattern, component rules, imagery, motion, do/don't constraints, and agent implementation notes.

Parameters (2)

reference_idstringrequired
Reference id from search_references
response_formatstring
Return markdown or structured JSON

get_similar_references

Find references similar to a known reference by shared tags, categories, use cases, and StandOut direction ids. Use after finding one strong reference to broaden the evidence set.

Parameters (3)

reference_idstringrequired
Reference id from search_references
limitinteger
Number of similar references to return, max 12
response_formatstring
Return markdown or structured JSON

search_flows

Search reference-backed user journeys such as API key onboarding, pricing selection, hospitality booking, marketplace search, quickstart activation, and portfolio inquiry. Use when the page is part of a multi-step task, not just a visual screen.

Parameters (5)

querystring
Search terms like 'api key onboarding', 'pricing', 'booking', 'marketplace', or 'quickstart'
directionstring
Optional StandOut direction id
categorystring
Optional category filter, e.g. onboarding, pricing, booking
limitinteger
Number of flows to return, max 12
response_formatstring
Return markdown or structured JSON

get_flow

Get the full step-by-step payload for one user journey: problem, steps, user actions, system responses, related direction ids, and agent implementation notes.

Parameters (2)

flow_idstringrequired
Flow id from search_flows
response_formatstring
Return markdown or structured JSON

synthesize_direction_from_references

Turn a business brief plus optional reference ids into a reference-backed build direction. Returns the chosen StandOut direction, matching public-product references, relevant flow patterns, a synthesized build plan, implementation lock, and next tool calls. Use when you want the agent to build from evidence instead of vibes.

Parameters (8)

businessstringrequired
What the website/app is for
industrystring
Industry or category, e.g. developer tool, restaurant, law firm
vibestring
Desired feel, e.g. premium, technical, warm, playful
audiencestring
Who the page must convince
directionstring
Optional StandOut direction id to force, e.g. terminal-grade
querystring
Optional reference search query. Defaults to business/industry/vibe/audience
reference_idsarray
Optional exact reference ids from search_references
response_formatstring
Return markdown or structured JSON

build_from_reference

Reference-first build — 'show me what you like, I'll build it.' Give a reference you LIKE (a public site URL via reference_url, and/or a curated library id via reference_id from search_references) plus what YOU are building, and get back a matching StandOut direction, a reference-backed build plan, and the next call for section code. This is the front door for building from an EXAMPLE instead of a text brief: Standout reads the URL server-side for its semantic signal (title, headings, copy) and folds it into the direction match. Note: pixel-level palette/type extraction from an image is not yet supported (that is the Phase 2 vision pass) — for now it matches on the page's text/structure plus the curated library. Pass reference_id to anchor on an exact curated reference.

Parameters (8)

businessstringrequired
What YOU are building (not the reference), e.g. 'booking site for a Fiji dive shop'
reference_urlstring
Public URL of a site whose style you like. Standout reads it server-side for its semantic signal.
reference_idstring
Or a curated reference id from search_references to anchor the match on
industrystring
Industry or category, e.g. developer tool, restaurant, law firm
vibestring
Desired feel, e.g. premium, technical, warm, playful
audiencestring
Who the page must convince
directionstring
Optional StandOut direction id to force, e.g. terminal-grade
response_formatstring
Return markdown or structured JSON

Install

claude_desktop_config.json

{
  "mcpServers": {
    "standout": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://standoutmcp.io/api/mcp"
      ]
    }
  }
}

Desktop config is stdio-only; this bridges via mcp-remote. Native remote: Settings > Connectors.