housestyle-mcp
Provides tools for auditing stylesheets for generic design patterns, generating color palettes in OKLCH, building fluid type scales with clamp(), and checking contrast ratios.
Provides tools for exploring and suggesting font pairings from the live Google Fonts catalogue, with ranking that avoids popular defaults, and returns @import URLs and CSS custom properties.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@housestyle-mcpaudit my stylesheet for generic AI design patterns"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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-mcpClaude Code
claude mcp add housestyle -- npx -y housestyle-mcpClaude 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 testLicence
MIT
Available Tools
6 toolsaudit_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.
| Name | Required | Description | Default |
|---|---|---|---|
| css | Yes | Stylesheet text, a design-token block, or a Tailwind config. Paste the real thing rather than a summary. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| name | No | Token name for the generated custom properties. Defaults to 'accent'. | |
| seed | Yes | Seed colour as #rgb, #rrggbb, or rgb(r, g, b). |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| ratio | No | Scale ratio. Defaults to perfect-fourth. | |
| base_rem | No | Body size in rem. Defaults to 1. | |
| steps_up | No | Steps above body, 0-8. Defaults to 5. | |
| steps_down | No | Steps below body, 0-2. Defaults to 2. | |
| max_viewport_px | No | Viewport where the scale stops growing. Defaults to 1440. | |
| min_viewport_px | No | Viewport where the scale stops shrinking. Defaults to 360. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| background | Yes | Background colour in the same formats. | |
| foreground | Yes | Text colour as #rgb, #rrggbb, or rgb(r, g, b). |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| mood | No | Visual direction to aim for. Defaults to neutral. | |
| role | No | Where the face will be used. Defaults to body. | |
| limit | No | How many to return, 1-20. Defaults to 6. | |
| include_defaults | No | Set true to allow Inter and the other signature defaults back into the results. Defaults to false. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| mood | No | Visual direction to aim for. Defaults to neutral. |
TDQS
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.
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.
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.
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.
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.
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.
6 tool updates
v1.0.1- First observed
audit_css - First observed
build_palette - First observed
build_type_scale - First observed
check_contrast - First observed
suggest_fonts - First observed
suggest_pairing
TDQS
Scored across 6 tools
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.
All tool names follow a consistent verb_noun pattern (suggest_, audit_, check_, build_, build_), with clear and predictable semantics.
Six tools form a well-scoped set for a design/typography assistant, covering the key aspects without redundancy or bloat.
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
Related MCP Connectors
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
AI-agent design tools: fonts, font recognition, palettes, color naming, contrast, code, SVG, CSS.
Design intelligence for coding agents: audits, design systems, and a taste profile agents consult.
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack
Related MCP Servers
- AlicenseAqualityDmaintenanceLets AI agents visually inspect web elements, test CSS edits in real-time, and iterate until pixel-perfect, functioning like browser DevTools for debugging UI issues.12 npm1MIT
- AlicenseAqualityAmaintenanceAudits spacing, gaps, and element sizes in AI-generated UIs and returns fix hints the agent applies. Tailwind-first, with accessibility fallback.440 npm2MIT
- AlicenseAqualityAmaintenanceEnables 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.231MIT
- AlicenseNot gradedqualityCmaintenanceDesign 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