Standout

io.standoutmcp由 standoutmcp.io 發布官方發布者v1.0.2更新於 Oct 24, 2026

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

已驗證Streamable HTTP可網頁執行網頁搜尋與抓取開發者工具媒體與設計

概覽

AI 產生的概覽

為 AI 程式設計助理提供設計品味:藝術方向、有參考依據的模式、成品區塊與元件程式碼,以及對現有網頁的評分評論。

可以做什麼
選擇並取得網站或應用程式介面的藝術方向、應用程式主題、首屏概念與素材包,含可瀏覽的方向選單與展示級骨架。取得成品程式碼:頁面區塊、React 與 Tailwind 應用程式元件、高階基礎元件、動效配方以及組裝好的高階頁面套件。檢索精選的公開產品參考庫、使用者流程與相似參考,並根據需求簡報或參考網址綜合出建置方向。評論現有頁面與應用程式介面原始碼、為渲染結果評分、產生可直接交付客戶的稽核報告,並比對成品與靈感來源的相似度。監控線上網站的設計評分,並列出或移除監控項目。
適用情境
適合助理在建置或改版網站、應用程式介面時,使用者希望獲得一致且不落俗套的視覺風格;也適合現有頁面需要具體評論、評分或面向客戶的稽核。同樣適用於使用者指定某個喜歡的網站作為參考的建置情境。
執行需求
遠端 streamable HTTP 端點。Authorization 標頭中可選攜帶 bearer 權杖;未提供時助理可自行申請 25 次呼叫的免費試用金鑰。網站監控等付費功能需要授權金鑰。需要能存取該端點及被引用的公開網站。
安裝前請注意
試用金鑰限 25 次呼叫;獎勵呼叫需要使用者的電子郵件地址,該地址會傳送給服務方。網站監控屬付費層級並會寄送郵件提醒。相關工具會把頁面網址與原始碼傳送給服務方用於擷取、評分與截圖,參考類工具會擷取公開網站。請將 Authorization 權杖視為機密。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Standout,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Web executable,透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式,或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南,先向你展示發布者、端點和登入方式,經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/io.standoutmcp%2Fstandout/install.md,並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前,先告訴我它的發布者、端點和登入方式,等我確認。不要把 API 金鑰寫進命令或我會提交的檔案;問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。

{
  "mcpServers": {
    "standout": {
      "type": "http",
      "url": "https://standoutmcp.io/api/mcp"
    }
  }
}

工具

30

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.

輸入參數tonevibeaudienceboldnessbusinessindustrycurrent_site_url

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.

輸入參數toneresponse_format

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.

輸入參數themeresponse_format

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.

輸入參數themecomponent

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.

輸入參數viewthemesource必填

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.

輸入參數urlsourcedirectiondescription

polish_and_prove

THE PRIMARY STANDOUT WORKFLOW. Use this when a user wants an AI-built website made client-ready without choosing individual design tools. First call: pass url (best), source, or business. Standout captures the baseline, scores the real phone and desktop render, chooses a coherent direction, and returns the exact implementation contract for the coding agent. The agent MUST apply the fixes in the repository. Final call: pass the original url/source plus after_url/after_source. Standout compares both versions and produces a client-safe before-and-after report and share link. Do not stop after returning advice; the completed outcome is fix, rerender, prove.

輸入參數urlgoalvibesourceaudiencebusinessafter_urlreferenceagency_nameafter_source

make_it_standout

Detailed transformation plan for power users. For the complete inspect, fix, rerender, and client-proof workflow, prefer polish_and_prove. This tool classifies and scores a site, returns exact fix patches, chooses a creative spine and direction, and emits a paste-ready implementation prompt.

輸入參數urlgoalvibesourceaudiencebusinessreference

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. Pass agency_name to WHITE-LABEL it: the report text and the shareable public report page both read 'Prepared by {agency}', ready to send to the client as your own.

輸入參數urlsourcebusinessafter_urlagency_nameafter_source

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.

輸入參數business必填sectionsdirectionsignature_move

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.

輸入參數business必填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.

輸入參數querydirection

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.

輸入參數directiontechnique

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.

輸入參數idsquerydirection

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.

輸入參數tonetypelimitquerycategorydirectionintensitysite_typeresponse_format

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.

輸入參數tonequerycategorydirectionintensitysite_typeresponse_format

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.

輸入參數typelimitquerycategorydirectionresponse_format

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.

輸入參數reference_id必填response_format

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.

輸入參數limitreference_id必填response_format

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.

輸入參數limitquerycategorydirectionresponse_format

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.

輸入參數flow_id必填response_format

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.

輸入參數vibequeryaudiencebusiness必填industrydirectionreference_idsresponse_format

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.

輸入參數vibeaudiencebusiness必填industrydirectionreference_idreference_urlresponse_format

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.'

輸入參數vibeaudiencebusiness必填industrydirectionfavorite_bitsreference_url必填response_format

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.

輸入參數favorite_bitsreference_url必填response_formatcandidate_sourcecandidate_description

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.

無需輸入參數。

unlock_bonus_calls

Unlock 10 bonus calls on this trial key, one time only, in exchange for the user's email address. Call this when the trial limit is reached and the USER has chosen the free-bonus option and given you their email in this conversation. NEVER guess, invent, or reuse an email the user did not explicitly provide for this. The key on this connection is upgraded in place, nothing to reconfigure. Free and unmetered.

輸入參數email必填

watch_site

Watch a live site's design score (Pro). Standout re-audits the URL about once a day and emails an alert when the design regresses: a drop of more than 5 points, or falling below the 85 client-ready bar. Use it right after shipping a client site so a broken deploy is caught before the client sees it. Up to 10 active watches per license.

輸入參數url必填email

unwatch_site

Stop watching a site's design score. Pass the same URL that was given to watch_site. Unmetered.

輸入參數url必填

list_watches

List this license's active site watches with their last known scores and check times. Unmetered.

無需輸入參數。

版本歷史

1
  1. v1.0.2最新Sep 16, 2026

評分

已滿足適用檢查項的 83%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分

    請宣告包含 README 的 GitHub 儲存庫,或在 OAuth 受保護資源後設資料中提供 resource_documentation。

  • 授權條款不適用

    託管服務按其提供方的條款使用,因此這裡不要求授權條款。此檢查項不計入百分比。