# framesmith

> framesmith — vicmaster-framesmith. Use this tool when you need to generate visual representations of HTML/CSS designs as PNG images, solving the problem of rendering complex scene graphs for AI-assisted design and development. It takes HTML/CSS scene graphs as input and produces PNG images as output, utilizing headless Chromium for rendering. Ideal for use cases where automated design rendering and version control via git are required.

Canonical page: https://skillsregistry.net/skills/vicmaster-framesmith  
JSON: https://api.skillsregistry.net/v1/skills/vicmaster-framesmith

## Description

Open-source MCP server that gives AI assistants a visual design canvas, rendering HTML/CSS scene graphs to PNG via headless Chromium.

## Trust

- **Trust score (0–1):** 0.63
- **Verification tier:** scanned
- **Last scanned:** 2026-09-03

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** container
- **Runtime environment:** vm
- **Category:** other
- **Updated:** 2026-09-20

## Source

- **Source listing:** [GitHub](https://github.com/vicmaster/framesmith)

## Use it

Resolve this record through the SkillsRegistry MCP server (no auth, read-only):

```
claude mcp add --transport http --scope user skillsregistry https://api.skillsregistry.net/mcp
```

```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_skill",
    "arguments": {
      "slug": "vicmaster-framesmith"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/vicmaster-framesmith` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/vicmaster-framesmith/pull`

---
SkillsRegistry indexes agent skills from public registries and GitHub. Skills we have analysed are scanned with Circle-IR and scored on six dimensions; each listing states its scan coverage. More: https://skillsregistry.net/llms.txt