Skip to main content
Glama

housestyle-mcp

An MCP server that stops AI-built interfaces from looking AI-built.

Agents are good at producing working UI and bad at producing UI that looks like somebody decided something. The result has a recognisable fingerprint: Inter on a Tailwind blue, a purple-to-pink gradient, one border radius everywhere, and a type scale where the headline is barely larger than the body text.

This server gives an agent the tools to notice that and fix it.

No API key. Colour and type maths runs locally; font data comes from Google Fonts' public metadata endpoint. Nothing to configure, nothing to sign up for.

Install

npx housestyle-mcp

Claude Code

claude mcp add housestyle -- npx -y housestyle-mcp

Claude Desktop / any MCP client

{
  "mcpServers": {
    "housestyle": {
      "command": "npx",
      "args": ["-y", "housestyle-mcp"]
    }
  }
}

Related MCP server: GridProof

Tools

audit_css

Paste a stylesheet, token block, or Tailwind config. Returns the generic-design tells it found, why each one matters, and what to do instead.

## Design audit — 4 high, 3 medium, 1 low

### 1. !! framework-default-blue

**Found:** `#3b82f6 (Tailwind blue-500)`

**Why it matters:** A framework's stock blue signals that the palette was
inherited, not chosen. It is the single fastest way for an interface to look
like every other generated interface.

**Fix:** Choose a hue the product actually argues for and build the ramp from
it. build_palette generates a perceptually even ramp from any seed.

Ten rules, all deterministic: default font stacks, framework blues, the AI gradient, uniform radius, uniform shadow, flat type scale, emoji used as icons, wholesale centring, missing measure limit, and pure black on pure white.

A clean audit is not a claim that the design is good — only that it does not carry the usual fingerprints.

suggest_fonts / suggest_pairing

Reads the live Google Fonts catalogue (~1,950 families) and ranks for a role and mood — editorial, technical, warm, brutalist, elegant, neutral.

The ranking is deliberately not "most popular". Popularity is what produces the anonymous look, so the top of the charts is penalised, the long tail is penalised for being untested, and the middle is preferred. Inter, Roboto, Poppins and thirteen other signature defaults are excluded unless you ask for them. Script-specific families are filtered out for Latin interfaces.

suggest_pairing pairs across a category boundary, because the change of category is what makes a pairing read as deliberate. Returns ready-to-paste @import URLs and CSS custom properties.

check_contrast

WCAG 2.2 ratio with AA/AAA verdicts, plus the APCA Lc value.

Both are reported because WCAG 2.x systematically misjudges dark themes — it will pass light-on-dark pairs that are genuinely hard to read. Where the two disagree on a dark background, trust APCA.

build_palette

An 11-step ramp from one seed colour, computed in OKLCH.

OKLCH rather than HSL because HSL lightness is not perceptual: at a fixed HSL lightness, yellow reads far brighter than blue, so an HSL ramp produces steps that look unevenly spaced. Chroma is tapered toward both ends and every step is fitted back into the sRGB gamut, so no step silently clips. Contrast against white and black is computed for each step.

build_type_scale

A fluid modular scale emitted as clamp(), so sizes interpolate with the viewport instead of stepping at breakpoints.

The narrow end uses a gentler ratio than the wide end, because a single ratio applied at 360px overshoots and headlines wrap badly. Body size stays fixed — only display sizes scale.

Design

  • Zero runtime dependencies beyond the MCP SDK. The colour maths is fixed by specification, so it is written out rather than pulled from a package that could drift or carry a supply chain.

  • Nothing to break. The only network call is the Google Fonts metadata endpoint, cached for an hour, and every other tool is pure computation.

Development

npm install
npm run build
npm test

Licence

MIT

Available Tools

6 tools
audit_cssA

Audit CSS for the tells that make an interface look machine-generated: framework-default blues, Inter/Roboto stacks, purple-pink gradients, flat type scales, uniform radius and shadow, centred everything. Returns findings with the reasoning and a concrete fix. Run this before calling any UI finished.

ParametersJSON Schema
NameRequiredDescriptionDefault
cssYesStylesheet text, a design-token block, or a Tailwind config. Paste the real thing rather than a summary.

TDQS

A4.3/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It discloses that the tool returns findings with reasoning and a concrete fix, and implies a non-mutating audit role. It could explicitly state that it does not modify the CSS, but nothing is misleading.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences with no filler. The concrete tells are front-loaded, followed by the output behavior and when to run it. Every sentence earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a one-parameter tool with no output schema, the description fully covers what to pass, what will be checked, what the return looks like, and when to use it. No critical information is missing for selecting and invoking the tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema already documents the single parameter at 100% coverage, including accepted forms (stylesheet text, design-token block, Tailwind config) and the instruction to paste the real thing. The tool description adds no additional parameter-level meaning, so the baseline of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb ('Audit'), a clear resource ('CSS'), and enumerates concrete tells it detects. It clearly differentiates from sibling tools by evaluating existing CSS rather than generating palettes, fonts, or type scales.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives an explicit workflow instruction: 'Run this before calling any UI finished', which tells the agent when to invoke it. It does not explicitly contrast with sibling tools, but the evaluative role is evident from the description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

build_paletteA

Build a perceptually even colour ramp from one seed colour, in OKLCH. Returns 11 steps with contrast against white and black already computed, plus the CSS custom properties. Use this instead of hand-picking hex values, which produces unevenly spaced ramps.

ParametersJSON Schema
NameRequiredDescriptionDefault
nameNoToken name for the generated custom properties. Defaults to 'accent'.
seedYesSeed colour as #rgb, #rrggbb, or rgb(r, g, b).

TDQS

A4.3/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses key behavior: the output is 11 steps, contrast against white and black is precomputed, and CSS custom properties are included. It does not discuss side effects or edge cases, but the operation is described as a pure return, so nothing is misleading.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three tight, substantive sentences: what it does, what it returns, and when to use it. There is no filler and no repetition of schema fields.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple two-parameter generator, the description covers the operation, color space, number of steps, contrast behavior, output artifacts, and the alternative to avoid. The explicit return summary compensates for the lack of an output schema.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the baseline is 3. The description reinforces that a seed colour drives generation, but it does not add format or default details beyond what the schema already provides.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description names the exact operation ('Build a perceptually even colour ramp') and method ('from one seed colour, in OKLCH'). It clearly identifies this as the palette-generation tool among siblings and even contrasts it with hand-picking hex values.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It gives explicit context: use this instead of hand-picking hex values, which produce uneven ramps. However, it does not explicitly mention sibling-tool exclusions such as suggest_pairing or check_contrast.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

build_type_scaleA

Build a fluid modular type scale as clamp() values that interpolate with the viewport instead of stepping at breakpoints. The narrow end uses a gentler ratio so headlines stay readable on a phone.

ParametersJSON Schema
NameRequiredDescriptionDefault
ratioNoScale ratio. Defaults to perfect-fourth.
base_remNoBody size in rem. Defaults to 1.
steps_upNoSteps above body, 0-8. Defaults to 5.
steps_downNoSteps below body, 0-2. Defaults to 2.
max_viewport_pxNoViewport where the scale stops growing. Defaults to 1440.
min_viewport_pxNoViewport where the scale stops shrinking. Defaults to 360.

TDQS

A4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden, and it delivers key behavioral details: values are generated as clamp() functions, they interpolate continuously with viewport size rather than stepping at breakpoints, and the narrow end deliberately uses a gentler ratio for readability. It does not state whether the tool writes files or returns raw code, but for a build/generation tool the output is reasonably characterized as 'clamp() values.'

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two tightly written sentences deliver the core purpose, output format, behavioral model, and a design rationale without any filler. The most critical information — what is built and in what form — is front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a six-parameter tool with no output schema, the description gives enough to invoke it correctly: it names the output form (clamp() values) and explains the scaling behavior. It stops short of describing the exact return structure (e.g., custom properties vs. raw strings), which is a minor gap, but an agent can safely call it with defaults and understand what it will produce.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema covers all six parameters and their defaults, so the description does not need to repeat parameter mechanics. It does add useful context by explaining why the ratio behaves gently at the narrow end and why the scale is viewport-interpolated, but it does not enrich understanding of specific parameters like base_rem or steps_up beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description opens with a specific verb and resource: 'Build a fluid modular type scale as clamp() values.' It further clarifies the output and behavior ('interpolate with the viewport instead of stepping at breakpoints'), distinguishing it from a static breakpoint-based type scale and from sibling tools like suggest_fonts or build_palette.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The intended use case is implied through 'fluid modular type scale' and 'interpolate with the viewport' — an agent can infer this is for responsive typography. However, it never explicitly states when not to use it or names an alternative sibling, so the routing decision is left to inference rather than direct guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

check_contrastA

Score a foreground/background pair for readability. Reports the WCAG 2.2 ratio with AA/AAA verdicts and the APCA Lc value, which is the better guide for dark themes where WCAG 2.x passes pairs that are hard to read.

ParametersJSON Schema
NameRequiredDescriptionDefault
backgroundYesBackground colour in the same formats.
foregroundYesText colour as #rgb, #rrggbb, or rgb(r, g, b).

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden and discloses what the tool returns (WCAG 2.2 ratio, AA/AAA verdicts, APCA Lc) plus a limitation of WCAG 2.x on dark themes. It omits minor details like how large-text exceptions are handled, but is otherwise transparent.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two well-structured sentences with no filler. The action and resource are front-loaded, and the APCA caveat is placed after the primary output description where it adds useful context.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a two-parameter check with no output schema, the description names both output families and provides a meaningful usage caveat. The main gap is not specifying whether AA/AAA verdicts assume normal text, large text, or both, but this is minor for a simple scoring tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, and both parameters are already described clearly in the schema, including accepted color formats via 'same formats'. The description adds little beyond the pair concept already implied by the parameter names.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Uses a precise verb ('Score') and object ('foreground/background pair'), then names the concrete metrics returned. This clearly distinguishes it from generation-oriented siblings like suggest_pairing and build_palette.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Provides clear context: the tool is for evaluating a specific color pair, and the APCA note gives actionable guidance for dark themes. It does not explicitly name sibling alternatives or exclusions, but the intended use is unambiguous.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

suggest_fontsA

Suggest Google Fonts for a role and mood, drawn from the live catalogue of ~1,950 families. Deliberately skips the overused defaults (Inter, Roboto, Poppins and similar) that make generated UI look generated.

ParametersJSON Schema
NameRequiredDescriptionDefault
moodNoVisual direction to aim for. Defaults to neutral.
roleNoWhere the face will be used. Defaults to body.
limitNoHow many to return, 1-20. Defaults to 6.
include_defaultsNoSet true to allow Inter and the other signature defaults back into the results. Defaults to false.

TDQS

A3.7/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the transparency burden. It discloses meaningful behavior: results come from the live catalogue of ~1,950 families and defaults are deliberately excluded unless opted in. It does not discuss output shape, determinism, or network/auth expectations, but for a read-only suggestion tool the main behavioral traits are surfaced.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, no filler; the primary action and scope are front-loaded, and the default-exclusion behavior earns its place as meaningful nuance.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple tool with fully documented optional parameters, the description covers the source and filtering behavior, but with no output schema it leaves the return shape unmentioned and gives no guidance about sibling tools. It is adequate for a basic call, but an agent evaluating whether this is the right tool over suggest_pairing still has to infer from context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage and clear descriptions for role, mood, limit, and include_defaults, so the baseline is 3. The description's default-exclusion sentence reinforces include_defaults but adds no new parameter semantics beyond what the schema already states; role and mood are merely echoed in the purpose sentence.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description names the action ('Suggest'), the resource ('Google Fonts'), and the selection lens (role and mood), plus the live catalogue scope. It is distinguishable from the sibling suggest_pairing by focusing on individual faces rather than pairings, though it does not explicitly name the alternative.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies a use case: picking a single font for a role/mood while avoiding default-looking UI fonts. It does not state when to prefer a sibling like suggest_pairing, audit_css, or check_contrast, and includes no when-not-to-use guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

suggest_pairingA

Suggest display-and-body font pairings for a mood, pairing across a category boundary so the contrast reads as deliberate. Returns ready-to-use @import URLs and CSS stacks.

ParametersJSON Schema
NameRequiredDescriptionDefault
moodNoVisual direction to aim for. Defaults to neutral.

TDQS

A4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full behavioral burden. It discloses the return format ('ready-to-use @import URLs and CSS stacks') and the underlying design principle ('the contrast reads as deliberate'), which is meaningful context. It does not mention whether multiple pairings are returned or address edge cases, but the core behavior is transparent.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The single sentence packs the action, the design rationale, and the output format in one economical sentence without repeating schema fields. Every clause earns its place, and the key verb-resource pair is front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple one-parameter tool with no output schema, the description covers the purpose and the return value, and the schema covers the parameter. What is missing is an explicit statement of result count or the default behavior, but that is a minor gap. The description is adequately complete for an agent to invoke it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%: the single 'mood' parameter already has an enum and description. The tool description only repeats the notion of 'a mood' without adding syntax, defaults, or interpretation details. Baseline 3 is appropriate because the schema does the heavy lifting and the description adds only a slight purpose linkage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description opens with a specific verb and resource: 'Suggest display-and-body font pairings for a mood.' It further specifies the design intent ('pairing across a category boundary so the contrast reads as deliberate') and the concrete deliverable ('Returns ready-to-use @import URLs and CSS stacks'). This clearly distinguishes it from the sibling suggest_fonts, which presumably suggests individual fonts rather than pairings.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description gives a clear condition for use ('for a mood') but never states when to prefer this tool over suggest_fonts or when not to use it. The agent has to infer that pairings are the target output from the name and description; there is no explicit alternative routing or exclusion. This is implied usage at best.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 6 tool updatesv1.0.1
    • First observedaudit_css
    • First observedbuild_palette
    • First observedbuild_type_scale
    • First observedcheck_contrast
    • First observedsuggest_fonts
    • First observedsuggest_pairing

TDQS

A4.2/5.0

Scored across 6 tools

Disambiguation5/5

Each tool targets a distinct design concern: font selection, pairing, contrast, palette building, type scaling, and CSS auditing. No two tools overlap in purpose, making misselection unlikely.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern (suggest_, audit_, check_, build_, build_), with clear and predictable semantics.

Tool Count5/5

Six tools form a well-scoped set for a design/typography assistant, covering the key aspects without redundancy or bloat.

Completeness5/5

The set covers the full workflow: font suggestion, pairing, contrast checking, palette generation, type scaling, and a final CSS audit. No obvious dead ends for the stated purpose.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    A
    maintenance
    Enables AI agents to perform WCAG 2.2 accessibility audits, including contrast ratio checks for color pairs and text-over-image, generate EU legal accessibility declarations, and produce aria-live monitoring snippets, all through local, multilingual tools.
    23
    1
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    Design review for UI code, inside your coding agent. Reviews React, Vue, Svelte, CSS and SwiftUI against 313 rules and returns scored findings with file:line fixes your agent can apply and verify.
    MIT