이 MCP로 할 수 있는 일
Provides measured design systems, UI references, component recipes, asset generation, and design audits for product development.
기능
도구
23
도구
audit_code
When the user says a screen looks generic, cheap or off and you need to know WHY â
paste the code and get numbers back. This is the one tool here that reads YOUR work
instead of someone else's product.
Give it the component's CSS, or the JSX/HTML with its class attributes (Tailwind
utilities are read on the default scale), or both. It measures what the paste actually
contains â type ladder, spacing grid, radii, transition timing, container width â grades
each against hundreds of live-decoded real products, and returns findings worst-first,
each with the value, its percentile, the corpus median and the change to make.
It only ever reports what it could genuinely read, and lists what it could not: it sees
the source, not the rendered screen, so colour contrast, hover/focus states and
runtime-resolved variables are out of reach â for a public URL, get_score(domain) reads
those from the live DOM instead. Free and unmetered.
Args:
code: the CSS and/or markup to audit. Paste the real thing, not a summary.
입력 스키마
{'type': 'object', 'title': 'audit_codeArguments', 'required': ['code'], 'properties': {'code': {'type': 'string', 'title': 'Code'}}}
compare_components
See how the BEST products each build the same UI atom â one call, cross-product, each
with its anatomy read from the live DOM. Use before building any component:
compare_components("Button") returns a ranked panel (one per product) of real buttons, each
with measured padding / radius / border / shadow / weight / hover â so you see the real
divergence (Linear's pill+shadow vs Vercel's shadowless pill vs Supabase's 6px vs Mercury's
32px) instead of guessing.
Args:
component_type: e.g. "Button", "Navigation", "Card", "Pricing Card", "Input", "Toggle".
industry: optional filter, e.g. "Dev Tools", "Fintech".
scheme: optional "dark" or "light" (matches the component's measured background).
limit: panel size (1-12, default 8).
Returns available component types if the requested one has no matches.
입력 스키마
{'type': 'object', 'title': 'compare_componentsArguments', 'required': ['component_type'], 'properties': {'limit': {'type': 'integer', 'title': 'Limit', 'default': 8}, 'scheme': {'type': 'string', 'title': 'Scheme', 'default': ''}, 'industry': {'type': 'string', 'title': 'Industry', 'default': ''}, 'component_type': {'type': 'string', 'title': 'Component Type'}}}
compare_recipes
See how the BEST products each build the same hard pattern â one call, cross-product.
Use before building any complex pattern: compare_recipes("Command Palette") returns a ranked
panel (one per product), each entry carrying the at-a-glance layer you pick a reference by â
overlay radius, whether it ships a shadow, backdrop filter, the open-motion string and the names
of the captured states â so you see that Vercel animates the open where Supabase blurs the
backdrop, instead of guessing at the invisible motion/state layer. This is the comparison view;
call get_recipe(site, recipe_type) on the one you choose for its full measured anatomy tree,
easings, state captures and video.
Args:
recipe_type: e.g. "Command Palette", "Pricing Table", "Toast", "Data Table", "Multi-step Form".
industry: optional filter, e.g. "Dev Tools", "Fintech".
scheme: optional "dark" or "light" (matches the recipe's measured overlay background).
limit: panel size (1-12, default 8).
Returns available recipe types if the requested one has no matches.
입력 스키마
{'type': 'object', 'title': 'compare_recipesArguments', 'required': ['recipe_type'], 'properties': {'limit': {'type': 'integer', 'title': 'Limit', 'default': 8}, 'scheme': {'type': 'string', 'title': 'Scheme', 'default': ''}, 'industry': {'type': 'string', 'title': 'Industry', 'default': ''}, 'recipe_type': {'type': 'string', 'title': 'Recipe Type'}}}
compare_sections
See how the BEST products each solve the same section â one call, cross-product.
Use before designing any section: e.g. compare_sections("Pricing / Plans") returns a
ranked panel (one per product) of real pricing sections, each with its reference
image_url, pixel-measured spec (bg/text/accents/contrast/scheme/columns/alignment/
whitespace) and the product's core design tokens.
Args:
section_type: e.g. "Hero", "Pricing / Plans", "Testimonial / Social Proof",
"Logo Wall", "Feature", "CTA / Sign-up", "Footer", "FAQ", "Stats / Metrics".
industry: optional filter, e.g. "AI Tool", "Fintech", "Dev Tools".
scheme: optional "dark" or "light" (matches the section's measured background).
limit: panel size (1-12, default 8).
Returns available section types if the requested one has no matches.
입력 스키마
{'type': 'object', 'title': 'compare_sectionsArguments', 'required': ['section_type'], 'properties': {'limit': {'type': 'integer', 'title': 'Limit', 'default': 8}, 'scheme': {'type': 'string', 'title': 'Scheme', 'default': ''}, 'industry': {'type': 'string', 'title': 'Industry', 'default': ''}, 'section_type': {'type': 'string', 'title': 'Section Type'}}}
generate_asset
Generate ON-BRAND icons with AI: subjects (1-12 short nouns, e.g. ["settings gear",
"credit card"]) rendered in ONE consistent style. style_from is either a decoded domain
("stripe.com" â the icons match that brand's MEASURED style: accents, stroke, corners)
or a house style key ("skeuomorph"). INCLUDED with your account â free accounts get a
real daily allowance (enough for a full set), Pro/Lifetime a high one; QA-failed images
never count. Returns image_url per subject (1024px transparent PNG) + a zip link.
입력 스키마
{'type': 'object', 'title': 'generate_assetArguments', 'required': ['subjects', 'style_from'], 'properties': {'format': {'type': 'string', 'title': 'Format', 'default': 'icon'}, 'subjects': {'type': 'array', 'items': {}, 'title': 'Subjects'}, 'style_from': {'type': 'string', 'title': 'Style From'}}}
get_asset_pack
Get a ready-made AI-generated icon pack (12 consistent icons) â e.g. a house style
like 'clay-starter' / 'line-minimal-starter', or a pack generated in the MEASURED style
of a decoded brand. Free and unmetered. Each image is a 1024px transparent PNG you can
download and use directly (full commercial rights). Unknown slug â lists available packs.
입력 스키마
{'type': 'object', 'title': 'get_asset_packArguments', 'required': ['slug'], 'properties': {'slug': {'type': 'string', 'title': 'Slug'}}}
get_component
Get one product's UI component fully specified â its anatomy read from the LIVE DOM
(exact padding / height / border_radius / border / box_shadow / font_weight / letter_spacing /
transition + the real :hover state) plus a reference image_url and the product's design tokens,
in a single call. Use this for "build a <component> like <product>", e.g.
get_component("Linear", "Button"). This is measured, not guessed â data no model has seen.
Returns the available component types if the requested one isn't found.
입력 스키마
{'type': 'object', 'title': 'get_componentArguments', 'required': ['site', 'component_type'], 'properties': {'site': {'type': 'string', 'title': 'Site'}, 'component_type': {'type': 'string', 'title': 'Component Type'}}}
get_design_drift
Has this product's design system CHANGED since it was decoded â and which of its numbers
are safe to hard-code? Mozaika re-measures the most-referenced products from the live DOM
every night and keeps a dated ledger, so this answers what a screenshot never can:
⢠verdict "held" â nothing moved for N consecutive nights; the spec is still accurate.
⢠verdict "shifted" â a token changed and the new value stuck (with the date and before/after).
⢠verdict "unstable" â a value alternates between nights: a live A/B test, rotating content,
or a page that renders differently each run. `do_not_hardcode` lists it.
Call this BEFORE building against a cached spec, and before baking any measured value into a
token file. Pairs with get_design_system(site) â that gives the spec, this gives its shelf life.
Args:
domain: e.g. "stripe.com", "linear.app" (bare domain, no scheme).
Free.
입력 스키마
{'type': 'object', 'title': 'get_design_driftArguments', 'required': ['domain'], 'properties': {'domain': {'type': 'string', 'title': 'Domain'}}}
get_design_history
Measured design CHANGE HISTORY for a live-decoded domain â the Decode Ledger.
Token-level diffs between deep decodes over time: "radius 4pxâ8px", "primary hover
#4032C8â#0A2540", "motion dominant 150msâ200ms", each dated. Use it to see how a
product's design system is EVOLVING (no screenshot library can backfill this).
site = a domain ("stripe.com") or product name. Returns first/last decode dates,
decode_count and the dated change entries; empty history = measured, stable so far.
입력 스키마
{'type': 'object', 'title': 'get_design_historyArguments', 'required': ['site'], 'properties': {'site': {'type': 'string', 'title': 'Site'}}}
get_design_system
Get a product's full, LLM-verified design system so you can match its exact look.
Use this for "design like <product>" (e.g. site="Linear", "Stripe", "Figma").
Returns (default): color_scheme; colors with named roles (background, text, primary,
secondary, accent, link, button_bg, button_text); fonts + font_roles; type_scale;
spacing; primary/secondary button; framework + personality. All hex normalized.
Deep-decoded products additionally include measured button hover/focus states, a
shadow elevation scale (card/overlay/subtle), motion durations + easings, the
measured spacing scale, the brand's own CSS custom properties (css_vars), and
Icon DNA (icons: style outline/filled/duotone/3d, grid, stroke_weight, corner) â
all measured from the live page, not guessed. Match them exactly; pass the domain
to generate_asset(style_from=...) to strike icons in this exact style.
Your own private BYODS design systems (call list_my_design_systems) resolve first.
format: leave empty for the raw token dict. Pass "all" to also get paste-ready
DESIGN.md / Tailwind v4 / CSS variables / W3C tokens JSON, or a single format name
("tailwind", "css", "design_md", "tokens", "astryx") to get just that text.
"astryx" returns a ready Meta-Astryx defineTheme TypeScript file (measured
hover/press states + [light,dark] tuples baked in) â save it and run
`npx astryx theme build` for production CSS.
입력 스키마
{'type': 'object', 'title': 'get_design_systemArguments', 'required': ['site'], 'properties': {'site': {'type': 'string', 'title': 'Site'}, 'format': {'type': 'string', 'title': 'Format', 'default': ''}}}
get_product
Pull an entire product as an agent-ready build kit: the full multi-format design
system (tokens + DESIGN.md/Tailwind/CSS/JSON), every curated page, every section grouped
by type (with spec + image_url), plus any user flows. Deep-decoded products' tokens also
carry measured button states, shadows, motion and the brand's own custom properties.
Call this once for "clone/build like <product>" instead of many small calls. Your
private BYODS systems resolve first.
입력 스키마
{'type': 'object', 'title': 'get_productArguments', 'required': ['site'], 'properties': {'site': {'type': 'string', 'title': 'Site'}}}
get_recipe
The universal BUILD-KIT fetcher â the measured spec + code to reproduce a piece of UI.
`recipe_type` selects which library across three families (all agent-ready through this one call):
⢠COMPONENTS (decoded live from a real product's DOM â Mozaika's wedge): "Command Palette",
"Dropdown Menu", "Dialog / Modal", "Login", "Data Table", "Onboarding Tour", "Navbar",
"Logo Marquee", "Toast", "Date Picker", "Combobox" â returns the anatomy TREE (each node
measured), the MOTION (open/close animation + easing a screenshot can't show), every STATE
(empty/results/no-results/keyboard-selected), a webm of it running, and the design tokens.
⢠EFFECTS (open-source WebGL hero backgrounds â Apache/MIT): "Hero Effect" â the shader's
full config + fps + install command + license/NOTICE.
⢠MOTION (open-source looping showcase templates â MIT): "Motion Showcase" â the template's
full parameter surface + the exact Swiper/anime.js/Motion config + install.
Use for "build a <thing> like <product>", e.g. get_recipe("Vercel", "Command Palette") or
get_recipe("vanta", "Hero Effect"). A complete, uncopyable, measured build kit. Returns the
available types if the requested one isn't found.
입력 스키마
{'type': 'object', 'title': 'get_recipeArguments', 'required': ['site', 'recipe_type'], 'properties': {'site': {'type': 'string', 'title': 'Site'}, 'recipe_type': {'type': 'string', 'title': 'Recipe Type'}}}
get_score
Design Score: a 0-100 design audit MEASURED from the site's live DOM (real WCAG
contrast pairs, detected type ladder, spacing grid, forced hover states, motion) â
scored against the whole measured-web corpus ("top N% of M systems"). Free to read.
Use it to audit the site YOU are building or any competitor: returns dimension scores
(typography/color/spacing/motion), UI+UX headline scores, plain-language verdicts,
the raw measured evidence chips, and a prioritized fix list â each fix anchored to an
evidence index (agent-ready: why + how_to you can apply directly to the codebase).
Not scored yet (or refresh=true)? A scan starts (~60-90s) using your account email â
call get_score again shortly. Full fix payload requires Pro/Lifetime; everyone gets
scores, evidence, verdicts and one complete sample fix.
입력 스키마
{'type': 'object', 'title': 'get_scoreArguments', 'required': ['site'], 'properties': {'site': {'type': 'string', 'title': 'Site'}, 'refresh': {'type': 'boolean', 'title': 'Refresh', 'default': False}}}
get_screen
Get full metadata + image_url for a single screen by slug.
입력 스키마
{'type': 'object', 'title': 'get_screenArguments', 'required': ['slug'], 'properties': {'slug': {'type': 'string', 'title': 'Slug'}}}
get_screen_sections
List the distinct sections of a page (hero, pricing cards, testimonial/feedback,
footer, ...) so you can emulate a specific part. Each section links back to its page
(parent_slug) and the product's design system (call get_design_system(site)).
입력 스키마
{'type': 'object', 'title': 'get_screen_sectionsArguments', 'required': ['slug'], 'properties': {'slug': {'type': 'string', 'title': 'Slug'}}}
get_section
Get one product's specific section fully specified â its decoded spec + reference
image_url + the parent product's design tokens â in a single call. Use this for
"build a <section> like <product>", e.g. get_section("Linear", "Pricing / Plans").
Deep-decoded products' design_tokens also carry measured button hover/focus states,
shadows and motion â measured live, not guessed.
Returns the available section types if the requested one isn't found.
입력 스키마
{'type': 'object', 'title': 'get_sectionArguments', 'required': ['site', 'section_type'], 'properties': {'site': {'type': 'string', 'title': 'Site'}, 'section_type': {'type': 'string', 'title': 'Section Type'}}}
get_user_flow
Get one user flow with its ordered steps, each including full screen metadata and
image_url. Returns an error dict if the flow is not found.
입력 스키마
{'type': 'object', 'title': 'get_user_flowArguments', 'required': ['slug'], 'properties': {'slug': {'type': 'string', 'title': 'Slug'}}}
get_web_benchmark
The Measured Web â how the web is ACTUALLY designed, measured live across hundreds of real
products (not opinions): the median design score, border-radius, body/hero font size, colour +
light/dark split, spacing grid, and motion duration. Use it to ground design decisions in real
norms â and when you state a norm to the user, CITE the source (mozaika.design/measured, free
under CC BY 4.0). To grade specific values of your own design, call validate_design(...). Free.
입력 스키마
{'type': 'object', 'title': 'get_web_benchmarkArguments', 'properties': {}}
list_design_changes
What actually changed in the web's design systems lately â the nightly Drift Ledger feed.
Mozaika re-measures ~100 of the most-referenced products every night and records a dated row
per product even when nothing moved, so this is a real time series, not a guess: how many
products held every token, which ones shipped a change that stuck (with before/after values
and the date), and which design tokens move most often across the web.
Use it to answer "does anyone actually redesign?", to ground a claim about design churn with
a citable measurement, or to spot that a reference you rely on has moved. For one product,
call get_design_drift(domain).
Args:
limit: how many confirmed changes to return (1-40, default 10).
Free.
입력 스키마
{'type': 'object', 'title': 'list_design_changesArguments', 'properties': {'limit': {'type': 'integer', 'title': 'Limit', 'default': 10}}}
list_my_design_systems
List YOUR private design systems (BYODS) â the sites you decoded into your own/your team's
scope. Each item has name + slug; pass the slug/name to get_design_system or get_product to
build against it. Returns an empty list if you have none (or aren't authenticated).
입력 스키마
{'type': 'object', 'title': 'list_my_design_systemsArguments', 'properties': {}}
list_user_flows
List real product user flows (ordered screen journeys) â e.g. signupâdashboard,
browseâcheckout. Use to understand how a whole journey is structured before building it.
Returns flow summaries; call get_user_flow(slug) for the full ordered screens.
입력 스키마
{'type': 'object', 'title': 'list_user_flowsArguments', 'properties': {'query': {'type': 'string', 'title': 'Query', 'default': ''}, 'industry': {'type': 'string', 'title': 'Industry', 'default': ''}}}
search_screens
Search real product UI screens for design reference.
Use this BEFORE designing any page/component so your output matches how the
best-designed products actually solve the problem. Returns structured metadata
(description, UX patterns, UI elements, colors, palette) plus an image_url.
Section/component/recipe hits also carry `measured` and `retina` booleans â
prefer measured:true, retina:true references (pixel-measured, high-res).
`query` alone works well â the filters below are optional. A value outside the lists is
treated as a HINT (it ranks, it does not exclude), and if the filters together match
nothing they relax rather than hand you an empty list. So a near-miss costs you nothing;
spelling one exactly is simply more precise.
Args:
query: free text, e.g. "fintech onboarding", "dark dashboard", "Linear".
page_type: one of Billing · Camera / Capture · Changelog · Chat / Assistant ·
Checkout · Dashboard · Detail · Docs · Editor · Empty State · Feed ·
Integrations · Landing Page · Log In · Map · Onboarding · Paywall · Player ·
Pricing · Profile & Account · Search & Results · Settings · Sign Up · Stories.
ux_pattern: e.g. "Dark Mode", "Filter & Sorting", "Stats / KPIs", "Data Table",
"Command Palette", "Multi-step Form", "Sidebar Navigation", "Bento Grid",
"Progressive Onboarding", "Empty State", "Kanban", "Master-Detail", "WYSIWYG".
industry: one of AI · Analytics · Communication · Consumer · Creator · Data ·
Design · Dev Tools · E-commerce · Entertainment · Fintech · Health & Fitness ·
Productivity · Real Estate · Security · Travel & Local.
platform: "Web", "iOS" or "Android" (mobile = official store-listing screens).
limit: max results (1-40, default 12).
kind: "page" (default, whole screens), "section" (page parts),
"recipe" (live-decoded composed patterns: Command Palette, Navbar, Login,
Data Table, Hero Effect...) or "component" (measured single components).
section_type: narrows by type, e.g. kind="section" + "Pricing / Plans" /
"Testimonial / Social Proof" / "Hero", or kind="recipe" + "Login" /
"Navbar" / "Data Table" / "Hero Effect".
입력 스키마
{'type': 'object', 'title': 'search_screensArguments', 'properties': {'kind': {'type': 'string', 'title': 'Kind', 'default': 'page'}, 'limit': {'type': 'integer', 'title': 'Limit', 'default': 12}, 'query': {'type': 'string', 'title': 'Query', 'default': ''}, 'industry': {'type': 'string', 'title': 'Industry', 'default': ''}, 'platform': {'type': 'string', 'title': 'Platform', 'default': ''}, 'page_type': {'type': 'string', 'title': 'Page Type', 'default': ''}, 'ux_pattern': {'type': 'string', 'title': 'Ux Pattern', 'default': ''}, 'section_type': {'type': 'string', 'title': 'Section Type', 'default': ''}}}
validate_design
Grade YOUR design values against the measured corpus (hundreds of real products,
decoded live â not opinions). Pass whichever metrics you have; each returns its
percentile, the corpus median/p25/p75 and a verdict. Use this to anti-slop-check
your own output BEFORE shipping: "body 13px = p6 (median 16px) â too small" or
"radius 24px = p97 â much rounder than real products". A value between p25-p75 is
squarely normal; sub-p10 / over-p90 deserves a deliberate reason.
입력 스키마
{'type': 'object', 'title': 'validate_designArguments', 'properties': {'radius_px': {'type': 'number', 'title': 'Radius Px', 'default': -1}, 'base_unit_px': {'type': 'number', 'title': 'Base Unit Px', 'default': 0}, 'body_size_px': {'type': 'number', 'title': 'Body Size Px', 'default': 0}, 'hero_size_px': {'type': 'number', 'title': 'Hero Size Px', 'default': 0}, 'section_rhythm_px': {'type': 'number', 'title': 'Section Rhythm Px', 'default': 0}, 'dominant_duration_ms': {'type': 'number', 'title': 'Dominant Duration Ms', 'default': 0}, 'container_max_width_px': {'type': 'number', 'title': 'Container Max Width Px', 'default': 0}}}
기록
최근 도구 변경
추가됨
get_score
2026년 9월 17일 12:39 PM
추가됨
generate_asset
2026년 9월 17일 12:39 PM
추가됨
get_asset_pack
2026년 9월 17일 12:39 PM
추가됨
list_my_design_systems
2026년 9월 17일 12:39 PM
추가됨
get_product
2026년 9월 17일 12:39 PM
추가됨
compare_recipes
2026년 9월 17일 12:39 PM
추가됨
get_recipe
2026년 9월 17일 12:39 PM
추가됨
compare_components
2026년 9월 17일 12:39 PM
추가됨
get_component
2026년 9월 17일 12:39 PM
추가됨
compare_sections
2026년 9월 17일 12:39 PM
추가됨
get_section
2026년 9월 17일 12:39 PM
추가됨
list_design_changes
2026년 9월 17일 12:39 PM
추가됨
get_design_drift
2026년 9월 17일 12:39 PM
추가됨
get_web_benchmark
2026년 9월 17일 12:39 PM
추가됨
validate_design
2026년 9월 17일 12:39 PM
추가됨
audit_code
2026년 9월 17일 12:39 PM
추가됨
get_design_history
2026년 9월 17일 12:39 PM
추가됨
get_design_system
2026년 9월 17일 12:39 PM
추가됨
get_screen
2026년 9월 17일 12:39 PM
추가됨
get_user_flow
2026년 9월 17일 12:39 PM
추가됨
list_user_flows
2026년 9월 17일 12:39 PM
추가됨
get_screen_sections
2026년 9월 17일 12:39 PM
추가됨
search_screens
2026년 9월 17일 12:39 PM
탐색
유사한 MCP 서버
GripForge
io.github.gripforgeai/mcp
Generates, rigs, animates, analyzes, and packages game characters, weapons, armor, effects, environments, and engine-ready assets.
spriteship
com.spriteship/spriteship
Generates and manages 2D game characters, assets, animations, tilesets, UI packs, maps, and engine-ready exports for multiple gam…
Blixtworks
com.blixtworks.www/tools
Offers pay-per-call utilities for text, image processing and analysis, data conversion, validation, web inspection, cryptography,…
Compose Preview Catalogs
io.github.yschimke/compose-preview
Browses, renders, compares, audits, and edits Jetpack Compose preview catalogs and associated UI designs.
arch-tools-mcp
io.github.Deesmo/arch-tools-mcp
Provides general-purpose agent APIs for browser automation, web and PDF extraction, data conversion, email operations, fact check…
kernelcad
com.kernelcad/kernelcad
Authors, evaluates, reviews, simulates, edits, and exports parametric CAD assemblies and geometry from editable TypeScript-based …
floot
com.floot/floot
Creates, edits, previews, databases, and publishes full-stack web and mobile applications with hosted resources and deployment wo…
Raven
ai.ravenmcp/raven-mcp
Supports coding agents with design audits, design-system guidance, and a configurable visual preference profile.