Standout
Anti-slop design taste for AI coding agents - so AI-built and vibe-coded sites stop looking generic or AI-generated.
Community: Submitted by a user or imported; check the owner before granting accessOnlineNo sign-inGlobalFreeRead-only
What it can do
- 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,
- List Directions: Browse the full 'pick a vibe' menu: all 14 named art directions (9 light-base, 5 dark-base) with their taglines, vibe tags, and what each is best for. Use when the user wants to SEE t
- Get App Theme: Get a LOCKED design-token system for application UI (dashboards, admin panels, SaaS tools): every color role contrast-checked, exactly two radii, a five-step type scale, spacing, elevat
What data it sees
Do you need an account
No: the server works without sign-in
Anti-slop design taste for AI coding agents - so AI-built and vibe-coded sites stop looking generic or AI-generated.
Standout gives your agent 14 hand-built art directions, production section code, premium components, motion recipes, and a brutal design critic that scores any page 0-100 across 8 categories, with WCAG contrast and mobile layout computed from the real rendered page. Every URL critique also mints a shareable public score report.
Start free, in-chat: connect without a key and ask your agent to call get_free_trial_key - it self-provisions a 25-call trial without leaving the conversation.
We eat our own cooking: our homepage is held to the same critic. It blocked us at 83/100 until we fixed everything it found - live report: https://standoutmcp.io/report/8mRd51xQhFMS
Works with Claude Code, Cursor, Codex, Windsurf, claude.ai, ChatGPT, PayMeGPT and any MCP client. Keys and docs at https://standoutmcp.io
Server tool list (25)
Raw names from tools/list. Only developers need these.
| 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 14 directions: 9 with light base palettes and 5 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. |
| list_directions | Browse the full 'pick a vibe' menu: all 14 named art directions (9 light-base, 5 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. |
| get_app_theme | Get a LOCKED design-token system for application UI (dashboards, admin panels, SaaS tools): every color role contrast-checked, exactly two radii, a five-step type scale, spacing, elevation and motion tokens, plus a Tailwind v4 semantic mapping, the theme's usage law, and the app-UI slop rulebook. This is how a vibe-coded app stops looking AI-generated: install the theme once and every view the agent builds matches. Call with NO theme to browse the menu (free); call with a theme id to receive the full system. Themes share brand DNA with the website directions, so a client's site and app stay on one identity. |
| get_component_code | Get FINISHED application-UI components (React + Tailwind, zero dependencies) written against a Standout app theme's semantic tokens: app shell with sidebar/topbar, stat row with mono tabular metrics, data table with layout-matched loading skeletons + instructive empty state + inline retryable error, and a settings form with inline validation, sticky save bar and a two-step danger zone. States are built in, so the agent wires data and content instead of inventing structure. Install the theme first via get_app_theme. |
| critique_ui | Deterministic critique for APPLICATION UI (dashboards, admin panels, SaaS views): runs the app-UI slop rulebook against React/JSX/HTML source (radius chaos, card-in-card, gray-on-gray text, raw palette classes, missing empty/loading/error states, clickable divs, killed focus rings) and, when a Standout app theme is installed, a theme-conformance pass (foreign colors, missing semantic token classes). Returns a 0-100 UI score with a ship verdict and a prioritized fix list. Use after building every view; re-run until the score clears 85. For marketing/landing PAGES use critique_design instead. |
| 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 — and saves an unlisted SHAREABLE SCORE REPORT (score + category breakdown + screenshots) whose link you should give to the user. Always prefer passing the published URL over raw source for these reasons. |
| make_it_standout | THE master tool — one call to transform any site. Pass a url (or raw source, or just a business description) and Standout: (1) classifies the site type and locks the context, (2) scores it out of 100 across 8 categories with a client-ready bar at 85, (3) audits it for exact, prioritized fix patches, (4) gives it a creative spine + a reference-backed direction, (5) lays out the full-page composition, and (6) returns an LLM-ready prompt you can paste straight into Claude Code / Cursor / ChatGPT / Codex to apply everything, plus the MCP workflow and a re-audit checklist. Use this when the user just wants their page made client-ready and shouldn't have to know which individual Standout tool to call. |
| client_report | Generate a CLIENT-READY design audit report for an agency to send to its client: a Standout Score, what's holding the page back, what to fix and why it matters, a client-safe summary, and the page screenshots — all in plain language with NO internal jargon. Pass url for the current page; optionally pass after_url (or after_source) for a rebuilt version to get a true before/after with both screenshots and the score improvement. |
| 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. |
| 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. |
| 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. |
| get_showpiece | The tier ABOVE the design directions: finished showpiece skeletons for scene-led, art-directed pages - world hero with environment bleed, VIDEO world hero (looping cinematic clip + liquid-glass chrome + word-by-word blur reveals), type-scene interlock (mega type behind a cutout subject), monochrome flood, scene-pinned glass annotations, ghost mega-type band - each with the scene/video-generation prompts that make the world bespoke to THIS business, contrast scrims, mobile behavior and reduced-motion built in. Call with no technique to browse the menu (free); call with a technique id for the full skeleton. Use when the brief says wow, cinematic, premium beyond a normal landing page. |
| get_motion_recipes | Production-ready motion for any stack: CSS/vanilla-JS recipes (staggered entrances, scroll reveals, marquees, grain, parallax) PLUS finished shader-grade ambient pieces - WebGL gradient mesh, image ripple displacement, live halftone, velocity-reactive type rail, scroll-scrubbed zoom portal - palette-keyed to Standout directions. Request by ids or describe what you need; pass direction for palette-filled shader code. |
| get_premium_components | Standout-original premium primitives: luxury hero backgrounds, Framer-style dials/gauges, shader/glass cards, soft section transitions, proof rails, pricing plates, and headline motion. Returns copy-paste HTML/CSS/vanilla JS snippets with reduced-motion fallbacks. Use when the user asks for premium, luxury, beautiful, wavy, Framer-like, glass, 3D controls, or high-end motion. |
| assemble_premium_page | Assemble a coherent premium build kit from Standout-original primitives: type scale, spacing rhythm, hero background, card/surface, dial or metric, section transition, text motion, and proof/pricing. Use before building a luxury/high-end/Framer-like page so the agent has real components instead of generic advice. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| build_from_reference_v2 | Reference Intelligence Layer — build from a site you like without cloning it. Pass a public reference_url plus what YOU are building and optional favorite_bits such as 'hero animation', 'pricing card', or 'color mood'. Standout captures server-readable HTML/CSS signals, extracts Reference DNA, names what to borrow, names what to avoid, gives a similarity-risk guardrail, then returns a reference-backed original build direction. This is the right tool when the user says 'I like this site but don't want to steal it.' |
| critique_similarity | Originality guardrail — compare a built page/source/description against a reference site and flag shared recognizable fingerprints. Use after build_from_reference_v2, before showing or publishing, to avoid producing a design that is visually too close to the inspiration. |
| get_free_trial_key | Self-provision a free Standout trial key (25 calls, no signup) without leaving the conversation. Call this when no license key is configured or your Standout calls return a license error. Returns the key plus the exact reconnect instructions to hand your user. Free and unmetered; issuance is capped per network, so never call it when you already have a working key. |