design MCP Server
Open-source MCP server that gives AI assistants a visual design canvas, rendering HTML/CSS scene graphs to PNG via headless Chromium.
Discovered via github-topic:mcp-server and last synced 2w ago.
1. Install the package
npx -y framesmith
2. Add to claude_desktop_config.json
{
"mcpServers": {
"framesmith": {
"command": "npx",
"args": [
"-y",
"framesmith"
]
}
}
}Config file location: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) / %APPDATA%\Claude\claude_desktop_config.json (Windows)
bool?
number?
string?
20
What it does
string?
string?
Type
string[]?
string?
string
string[]?
string?
20
Point the MCP server at an external viewer (skips starting an embedded one).
number?
number?
25
Purpose
number?
string?
string
Weight
string?
string
array?
15
Override the standalone viewer's port.
string
string
`"fast"` \
string
20
to `repo-*` — use the ones `init` returns), the on-disk layout, the workspace-layer token count, a workflow cheatsheet, the current gotchas, the `framesmith://guidelines` URI, and the viewer URL. If any canvas in the workspace has open point-and-tell comments, the result also carries `openFeedback: { total, note }` — a nudge to run `get_feedback` before doing anything else. It does **not** seed design tokens — set those at the workspace layer with `workspace_set_design_system`. The default `Foundations` project is just a canvas that visualizes the workspace tokens (which is where the design system actually lives).
Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo.
Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, UI mockups, product shots, or transparent-background cutouts. Use when the result should be an image asset rather than repo-native SVG, HTML/CSS, or canvas.
Challenges hacky fixes on non-trivial changes.
Apply UI design principles from Refactoring UI by Adam Wathan & Steve Schoger. Covers visual hierarchy (size, weight, color, spacing), layout systems (spacing scales, grids), typography (type scales, line-height, alignment), color (HSL palettes, shade systems, accessible contrast), depth (shadow elevation, overlap), images (text on images, user content, icons), and finishing touches (accent borders, empty states, fewer borders). Trigger on "UI design", "visual hierarchy", "spacing system", "type scale", "color palette", "shadow", "layout", "design system", "component design", "card design", "form design", "button design", "refactoring UI", "design tokens", "dark mode", "responsive design".
Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus or Claude.
Design engineering skill for AI Agents — build interfaces with craft-level quality
Learn how to use the absolute-spec Claude skill. Complete guide with installation instructions and examples.
Learn how to use the oasis-design-system Claude skill. Complete guide with installation instructions and examples.
Learn how to use the Typography Advisor Claude skill. Complete guide with installation instructions and examples.