framesmith

vicmaster/framesmith
★ 7 stars TypeScript Browser/Web Updated today
Open-source MCP server that gives AI assistants a visual design canvas, rendering HTML/CSS scene graphs to PNG via headless Chromium.
View on GitHub → 🔍 Audit Wallet Slippage →

Quick Install

Copy the config for your editor. Some servers may need additional setup — check the README.

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "framesmith": {
      "command": "npx",
      "args": [
        "-y",
        "vicmaster/framesmith"
      ]
    }
  }
}

README Excerpt

An open-source MCP server that turns your AI coding agent into a capable UI designer. It gives the agent a visual canvas, a library of vetted design patterns, and a quality bar it must clear before showing you anything — so you review a real, non-slop design in the browser and agree on it *before* any framework code is written.

Tools (20)

CardFRAMESMITH_CHROME_PATHFRAMESMITH_VIEWER_PORTFRAMESMITH_VIEWER_URLanimationapplyauthbreakpointscanvasIdcanvasId1canvasId2categoriesclichecolorconsistencycontentcssdirdryRunfadeIn

Topics

aicanvasclaudedesign-toolshtml-cssmcpmcp-servermodel-context-protocolpuppeteertypescript