awsm

A toolkit for design-minded agents.

ENID

Good code.Great taste.

Give your coding agent design context, real assets, and a second look at the UI.

Install AWSM
Your coding agent

Make this interface worth looking at.Make it worth looking at.

Context in. Better decisions out.
One local MCP entrypoint
awsm

23 tools. One local MCP.

Design intelligence, on your machine.

ASSETS & TYPOGRAPHYAa / Bb
localhost / Browser evidence
DESIGN → CODE → CHECK UI
Local-firstOpen sourceNo hosted service required
Follow the signal

From “make it work” to “look at that.”

Your agent writes the code. AWSM brings the design inputs and the rendered evidence.

  1. 01

    AI coding agent

    Bring the brief

  2. 02

    AWSM

    One local MCP

  3. 03

    Design intelligence

    Context + foundations

  4. 04

    Assets & typography

    Find the right material

  5. 05

    FigCraft handoff

    Inspect + export¹

  6. 06

    Code

    Your agent implements

  7. 07

    Visual QA

    Review the real browser

¹ Canvas inspection and exports use the separately configured native FigCraft MCP. AWSM handles the handoff, not canvas editing.

ONE TASK. DIFFERENT TOOLS. SAME AGENT.

Design this app’s components. Find the missing assets. Check the mobile render.

inspect_ui_project({ root: "." })

A useful loop, not a magic export.

Inspect the project. Choose the material. Implement with your agent. Review a running UI, then fix what the browser reveals.

AWSM supplies tools. Your agent makes the calls.

Less guessing. More making.

Pick a tool family. See the material your agent can actually work with.

02 / ASSETS & TYPOGRAPHY

Typography with actual font files.

Discover fonts, inspect available weights, and install WOFF2 files locally. Review license and glyph coverage before shipping.

Your supplied design reference
Your supplied design reference
google_font / find_icons / palette / check_contrast

23 typed tools / one connection. Assets, foundations, handoff, browser review, utilities, and an optional local MCP bridge.

Visual reference: Hero.png supplied by the project owner. Shown as design context, not as an AWSM-generated website.

The canvas is a starting point.

Keep text editable. Keep components real. Check the result where people will use it: in the browser.

LAYERS / FigCraft MCP
Frame
Text
Component
Artwork
SEMANTIC COMPONENTS
<main>
  <Hero />
  <Workflow />
</main>
BROWSER / SOURCE OF TRUTH

Check what shipped.

375 × 812 1440 × 900

DOM audit + screenshots + diff

  1. 01 / Native FigCraft MCP

    Inspect layers and export artwork. Configure FigCraft separately.

  2. 02 / AWSM handoff

    Classify layer data with prepare_web_handoff. Copy native exports with sync_figcraft_assets.

  3. 03 / Agent + browser

    Implement the UI, then run review_ui against localhost with project-local Playwright.

AWSM does not edit the FigCraft canvas, act as a Figma editor, or generate a complete website on its own. Visual QA provides evidence, not a WCAG certificate or a guarantee of pixel-perfect output.

Install FigCraft

Official ArtCraft download page. Install FigCraft and configure its MCP separately.

Bring your favorite coding agent.

Choose a client at setup. AWSM stays one local MCP connection.

--client opencode | claude | codex | antigravity | copilot | zed

Zed MCP setup uses --global.

Small setup. Big playground.

Node.js 18+ / npx / an MCP-compatible coding agent. Run inside your project.

PROJECT SETUP/OpenCode selected
npx -y github:rikoarik/figcraft-mcp-awsm setup \
  --client opencode \
  --source github:rikoarik/figcraft-mcp-awsm

Then restart your agent or reconnect MCPs. Look for “awsm” and the awsm-design skill.

Configuration: .opencode/opencode.json

 

01 connection

23 typed tools. No hosted service or VPS required.

01 default skill

awsm-design guides the workflow. Add 21 specialists with --all-skills.

Optional bridge

Explicitly configure trusted local stdio MCPs. Downstream servers stay separate.

Installs from GitHub, not an npm package named my-awsm-mcp. Review third-party source before running it.

Browser QA needs project-local Playwright + Chromium. Bridge child processes run with your local permissions; review trusted commands and tools.

Know what you’re connecting.

AWSM is an open-source local Model Context Protocol (MCP) server that gives coding agents UI design utilities, asset discovery, FigCraft-to-code handoff and browser-based visual QA through one MCP connection.

Connection
Local stdio. No hosted service or VPS required.
Toolkit
23 typed tools, the default awsm-design skill and 21 optional specialist skills via --all-skills.
Clients
OpenCode, Claude Code, Codex, Google Antigravity, GitHub Copilot CLI, Zed.
Runtime & license
Node.js 18+ for AWSM. MIT licensed; free to use. Author: rikoarik on GitHub.

A few useful answers.

What does MCP do in AWSM?

Model Context Protocol lets a coding agent call tools through a standard connection. AWSM provides one local stdio MCP entry for design utilities, asset discovery, handoff preparation and browser QA. It runs on your computer, not a required hosted service.

Read the source
Which coding agents can use AWSM?

AWSM includes setup for OpenCode, Claude Code, Codex, Google Antigravity, GitHub Copilot CLI and Zed. Zed uses user-level configuration and requires --global; the other documented clients default to project-local setup.

Read the source
What is included, and what do I need to run it?

AWSM includes 23 typed tools and the default awsm-design skill. The --all-skills option installs 21 additional specialist skills. AWSM requires Node.js 18 or newer and runs locally over stdio; no VPS is required.

Read the source
Does AWSM edit the FigCraft canvas?

No. AWSM prepares FigCraft-to-code handoff context; it does not edit the canvas. Native FigCraft MCP editing is a separate connection configured with the FigCraft app. Handoff is not a promise of one-click pixel-perfect export.

Read the source
What does browser QA actually check?

Browser QA uses locally installed Playwright and Chromium to inspect the rendered interface and collect screenshots, DOM checks and visual comparison evidence. It is not a WCAG certification or a guarantee that every accessibility issue has been found.

Read the source
Where does the installation command come from?

The command shown here uses the setup entry point in the public rikoarik/figcraft-mcp-awsm GitHub repository. Review the installation guide and MIT license before running it. This website never executes the command for you.

Read the source

Local tools.Independent taste.

Open source under MIT. Run it on your computer, read the code, change the tools, and keep your agent in charge.

View on GitHub
github.com/rikoarik/figcraft-mcp-awsmMIT

Fueled by curiosity.And the occasional coffee.

If AWSM helped you make something worth shipping, you can support the experiments behind it.

Trakteer a coffee

Optional support. AWSM stays open source under MIT. No donation is required to use it.