web-stylebook-mcp
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
| prompts | {
"listChanged": true
} |
| resources | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| recommend_design_directionA | Given product context, return scored style candidates with reason codes, rejected styles with reasons, secondary pairings, assumptions and confidence. Evidence-provider: the host model makes the final pick. Call before writing UI. The "tone" field (named "tone", not "tones") is an ARRAY of zero or more of: calm, technical, trustworthy, premium, editorial, playful, bold, experimental. Each candidate.score already includes soft penalties (density/motion/tone fit) that are not itemized in scoreBreakdown. |
| compare_design_directionsA | Compare 2-4 directions across product fit, repeated-use suitability, density, trust, distinctiveness, accessibility risk, motion and maintenance. Returns each direction's favorable conditions and likely failure mode — never a single winner. |
| get_design_principle_planA | Select a small set of practical visual-design principles for intent and iteration, semantic hierarchy, adaptive layout and density, typography and localization, tokens and themes, accessible interaction, and complete states and recovery. Filter by design concerns, surface, phase, or explicit ids. Returns placement guidance, application steps, verification checks, cautions, related principles, and deterministic relevance scores. |
| get_ux_principle_planA | Select a small, evidence-labeled set of UX principles for a target outcome, surface, design phase, or explicit principle ids. Returns design questions, application steps, verification checks, cautions, references, and relevance scores. Treat the result as decision prompts rather than universal laws. |
| get_ui_state_planA | For a surface (data-table, form, checkout, chat, developer-console), return required / recommended / domain-specific states with triggers, must-show, must-not, accessibility and motion guidance, plus an implementation order. Covers the non-happy-path. |
| compose_design_tokensA | Compile a starting set of role-based design tokens (color, typography, spacing, radius, motion, density) for a style in json / css-variables / tailwind / typescript, with light/dark/both modes, accent override, and WCAG contrast warnings. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
| design-product | Choose a visual direction, compose a brief, plan screens, and cover UI states. |
| design-screen | Plan hierarchy, components, states, responsive and motion for a single screen. |
| complete-ui-states | Find missing states for a surface and implement them. |
| redesign-with-style | Keep structure, change the visual direction, verify fidelity. |
| audit-design-direction | Check style fidelity, anti-patterns, state coverage, accessibility and motion. |
| audit-design-principles | Check whether layout and visual-design principles were applied, verified, or turned into rigid recipes. |
| audit-ux-principles | Check whether relevant UX principles were applied, verified, or overgeneralized. |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
| manifest | Server + catalog manifest |
| styles | Compact list of visual directions |
| motion | Compact list of motion patterns |
| components | Component vocabulary |
| design-principles | Practical visual-design principles with placement and verification guidance |
| principles | Curated UX principles with attribution and evidence labels |
| state-surfaces | UI state surfaces |
| products | Product archetypes |
| anti-patterns | Common anti-patterns |
| verification | Verification checklist |
| brutalist-grid | Full detail for one style |
| editorial-silence | Full detail for one style |
| kinetic-pop | Full detail for one style |
| cyberpunk-glitch | Full detail for one style |
| swiss-poster | Full detail for one style |
| quiet-utility | Full detail for one style |
| platform-core | Full detail for one style |
| runtime-signal | Full detail for one style |
| holographic-fluid | Full detail for one style |
| neon-drift | Full detail for one style |
| glass-orbit | Full detail for one style |
| terminal-core | Full detail for one style |
| midnight-noir | Full detail for one style |
| console-launch | Full detail for one style |
| bento-bloom | Full detail for one style |
| earth-atelier | Full detail for one style |
| liquid-metal | Full detail for one style |
| aurora-gradient | Full detail for one style |
| zen-minimalism | Full detail for one style |
| mono-type | Full detail for one style |
| duotone-bold | Full detail for one style |
| mesh-gradient | Full detail for one style |
| framer-motion | Full detail for one style |
| claymorphism | Full detail for one style |
| neumorphism | Full detail for one style |
| soft-pastel | Full detail for one style |
| notion-style | Full detail for one style |
| retro-pixel | Full detail for one style |
| y2k-retro | Full detail for one style |
| risograph-print | Full detail for one style |
| paper-cut | Full detail for one style |
| macos-liquid-glass | Full detail for one style |
| fusion-neon-swiss | Full detail for one style |
| fusion-product-swiss | Full detail for one style |
| fusion-bento-noir | Full detail for one style |
| fusion-editorial-terminal | Full detail for one style |
| fusion-holo-glass | Full detail for one style |
| fusion-kinetic-brutal | Full detail for one style |
| fusion-cyber-console | Full detail for one style |
| fusion-grain-mono | Full detail for one style |
| fusion-clay-aurora | Full detail for one style |
| fusion-floppy-exe | Full detail for one style |
| fusion-noir-metal | Full detail for one style |
| fusion-strict-console | Full detail for one style |
| fusion-quiet-manifesto | Full detail for one style |
| fusion-pure-noir | Full detail for one style |
| fusion-soft-inflate | Full detail for one style |
| fusion-studio-pixel | Full detail for one style |
| fade-in | Full detail for one motion pattern |
| fade-up | Full detail for one motion pattern |
| slide-in | Full detail for one motion pattern |
| scale-in | Full detail for one motion pattern |
| blur-reveal | Full detail for one motion pattern |
| stagger | Full detail for one motion pattern |
| pulse | Full detail for one motion pattern |
| bounce | Full detail for one motion pattern |
| shake | Full detail for one motion pattern |
| wiggle | Full detail for one motion pattern |
| glow | Full detail for one motion pattern |
| ripple | Full detail for one motion pattern |
| hover-lift | Full detail for one motion pattern |
| press | Full detail for one motion pattern |
| tilt | Full detail for one motion pattern |
| modal-pop | Full detail for one motion pattern |
| toast-slide | Full detail for one motion pattern |
| accordion | Full detail for one motion pattern |
| crossfade | Full detail for one motion pattern |
| skeleton-shimmer | Full detail for one motion pattern |
| spinner | Full detail for one motion pattern |
| progress-bar | Full detail for one motion pattern |
| loading-dots | Full detail for one motion pattern |
| scroll-reveal | Full detail for one motion pattern |
| parallax | Full detail for one motion pattern |
| marquee | Full detail for one motion pattern |
| orbit | Full detail for one motion pattern |
| floating | Full detail for one motion pattern |
| gradient-drift | Full detail for one motion pattern |
| hover | Full detail for one component term |
| focus | Full detail for one component term |
| active-pressed | Full detail for one component term |
| disabled | Full detail for one component term |
| dropdown-select | Full detail for one component term |
| checkbox | Full detail for one component term |
| radio-button | Full detail for one component term |
| toggle-switch | Full detail for one component term |
| slider | Full detail for one component term |
| tabs | Full detail for one component term |
| breadcrumb | Full detail for one component term |
| pagination | Full detail for one component term |
| modal-dialog | Full detail for one component term |
TDQS
Scored across 6 tools
Each tool targets a distinct aspect of design guidance: direction recommendation, direction comparison, design principles, UX principles, UI state planning, and token composition. No two tools overlap in purpose.
All tool names follow a verb_noun pattern (recommend, compare, get, compose) with consistent use of snake_case and predictable object naming (e.g., get_design_principle_plan, get_ux_principle_plan).
6 tools is well-scoped for a design guidance server. Each tool covers a necessary function without redundancy or excessive specialization.
The set covers core design activities: direction selection, comparison, principles (design/UX), state planning, and token generation. A minor gap is the lack of a tool to apply or test tokens on actual components, but the scope is reasonable.