FORMA

The agent-first design engine you need. Your agent writes JSON, Forma renders the pixels. One set of tokens, one local CLI, the same PNG every time. No browser, no account, no network.

INSTALL FORMA ↓

YOUR BRAND, NOT THE MODEL'S

No more AI images that ignore your conventions. Every frame draws from your colors, your type and your logo, so whatever your agent makes already looks like you made it.

JSON IN, PNG OUT

{
  "id": "post", "width": 1080, "height": 1080,
  "background": "$gradients.brand",
  "children": [
    { "type": "rect", "id": "card",
      "fill": { "color": "$colors.paper" } },
    { "type": "ellipse", "id": "sun",
      "fill": { "color": "$colors.ink" } },
    { "type": "text", "id": "headline",
      "text": "DESIGN\nAS CODE",
      "font": "$typography.heading" }
  ]
}

$ forma render post → forma/output/post.png

NOT ENOUGH? LET YOUR AGENT GET CREATIVE

Some visuals are grown, not composed. Your agent writes a small sandboxed script and Forma turns it into an image, with no input from you: flow fields, topographic maps, terrains, starfields, halftones, particle bursts, film grain. Frames use the result like any other image.

-- forma/artworks/flow.lua
return {
  width = 1080, height = 1080, seed = 7,
  draw = function(canvas, tokens, random, noise)
    canvas:clear("$colors.ink")
    for line = 1, 600 do
      local x, y = random(0, 1080), random(0, 1080)
      local segments = { { "move", x, y } }
      for step = 1, 40 do
        local angle = noise(x / 300, y / 300) * math.pi * 4
        x = x + math.cos(angle) * 8
        y = y + math.sin(angle) * 8
        segments[#segments + 1] = { "line", x, y }
      end
      canvas:path { segments = segments, opacity = 0.7,
        stroke = { color = "$colors.paper", width = 2 } }
    end
  end,
}

$ forma generate flow → forma/assets/artworks/flow.png

BRING YOUR OWN IMAGES

Photos, screenshots and product shots live in forma/assets/images. PNG, JPEG or WebP, fitted with cover, contain or fill, and layered under your type and logo.

{
  "id": "offsite", "width": 1200, "height": 800,
  "children": [
    { "type": "image", "id": "photo",
      "src": "images/ridge.jpg", "fit": "cover" },
    { "type": "rect", "id": "shade",
      "fill": "$gradients.shade" },
    { "type": "text", "id": "title",
      "text": "OFFSITE\nAUTUMN 26",
      "font": "$typography.heading" },
    { "type": "svg", "id": "logo",
      "src": "svg/logo.svg", "color": "$colors.paper" }
  ]
}

$ forma render offsite → forma/output/offsite.png

FEATURES

  1. FRAMES AS JSON

    Seven layer types: rect, ellipse, line, text, image, svg and group. Fills, strokes, linear and radial gradients, clipping and masks.

  2. SHARED TOKENS

    One tokens.json for every frame. Reference $colors.primary; references are typed and cycle-checked.

  3. BUILT FOR AGENTS

    validate, inspect and schema with stable --json output. Errors carry a code, a JSON path and the layer id.

  4. REPRODUCIBLE

    Same inputs, same bytes. Checked-in fonts render the same on every machine, so renders can run in CI.

  5. LIVES IN YOUR REPO

    A forma/ folder next to your code. Plain files you can diff, review and commit.

  6. FONTS

    Project, system or Fontsource fonts. forma fonts add Inter installs static files with their license.

  7. ICONS

    Search and add Lucide icons, recolored through currentColor with a token.

  8. ARTWORKS

    Sandboxed Lua scripts draw patterns, particles and noise into images that frames use like any asset.

  9. DESKTOP VIEWER

    A read-only macOS app that follows the project live while agents work. Copy any frame as SVG into Figma.

INSTALL

Paste this into Claude Code, Codex, Cursor or any coding agent.

Install Forma, a headless CLI that renders designs from JSON frames and design tokens to PNG.

1. Check the machine is an Apple silicon Mac; Forma does not support other platforms yet.
2. Install the CLI with Homebrew: brew install namzug16/tap/forma
   If Homebrew is missing, use: curl -fsSL https://raw.githubusercontent.com/namzug16/forma/master/install.sh | sh
3. Confirm it works: forma version
4. Install the Forma agent skill: npx skills add namzug16/forma
5. In this repo, run forma init, then forma render example, and show me forma/output/example.png.

Apple silicon Macs. Windows and Linux are coming soon.

01 — INSTALL THE CLI

brew install namzug16/tap/forma

or, without Homebrew, to ~/.local/bin

curl -fsSL https://raw.githubusercontent.com/namzug16/forma/master/install.sh | sh

02 — ADD THE AGENT SKILL

npx skills add namzug16/forma

03 — RENDER YOUR FIRST FRAME

forma init
forma render example

FINISH IT IN FIGMA

Your agent gets you most of the way there. Render the frame as SVG, with text as outlines, paste it into Figma, and every layer is yours to move, restyle and ship.

$ forma render launch

forma/output/launch.png (1080×1080)

$ forma render launch --format svg --clipboard

clipboard (1080×1080)

⌘V in Figma