FacetDocs

Design with your AI, in a real design app

Facet is a design app for the Mac that your AI assistant can work in. Ask Claude, ChatGPT or Cursor for a screen, a component or a change, and watch it appear on the canvas: real layers with auto layout, text styles, color variables and components, that you can keep editing by hand. Every change is one undo step, with the assistant's name on it.

1. InstallDownload, drag to Applications, open. No account.2. Start a designOpen the sample or a new file.3. Connect your AIOne click for Claude, ChatGPT, Cursor or VS Code.

What your assistant writes

Behind every request, your assistant writes a short description in Facet's build language, and Facet turns it into layers, measures them, checks them and says what did not work. You can write it too.

raag-today.json≈ 788 tokens
{
  "phone": {
    "name": "Today",
    "children": [
      {
        "row": [
          {
            "draw": [
              {"path": "M20 2v14", "stroke": "@ink", "weight": 2},
              {
                "circle": [20, 30, 14],
                "fill": {"linear": ["@saffron", "@rose"], "angle": 160}
              }
            ],
            "size": [40, 46],
            "name": "Mark"
          },
          {
            "column": [
              {"title": "Raag"},
              {"deva": "आज का रियाज़", "color": "@mute"}
            ]
          },
          {"space": "fill"},
          {"icon": "lucide:settings-2", "size": 22}
        ],
        "gap": 12,
        "align": "center",
        "width": "fill"
      },
      {
        "stack": [
          {
            "draw": [
              {
                "circle": [150, 150, 144],
                "fill": {"radial": ["#FFFFFF00", "@rose/10%"]},
                "stroke": "none"
              },
              {
                "circle": [150, 150, 120],
                "stroke": "#1A142333",
                "dash": [2, 6]
              },
              {
                "arc": [150, 150, 120, 270, 315],
                "stroke": {"linear": ["@saffron", "@rose"], "angle": 45},
                "weight": 14
              }
            ],
            "size": 300
          },
          {
            "ring": [
              {
                "each": ["रात", "सुबह", "दोपहर", "शाम"],
                "do": {"deva": "{.}", "color": "@mute"}
              }
            ],
            "r": 86
          },
          {
            "column": [
              {"deva-xl": "यमन"},
              {"small": "Yaman's hour", "color": "@mute"}
            ],
            "align": "center"
          }
        ],
        "width": "fill"
      },
      {
        "type": "paragraph",
        "width": "fill",
        "runs": [
          "It's evening, so Yaman. Every note is shuddha except ",
          {"swara": {"note": "तीव्र म", "tone": "@rose"}},
          ": sing it a touch sharp, and land on ",
          {"swara": "नि"},
          " and ",
          {"swara": "ग"},
          " more than on ",
          {"swara": {"note": "सा", "tone": "@mute"}},
          "."
        ]
      },
      {
        "row": [
          {"sticker": {"label": "12 दिन लगातार", "turn": -4}},
          {
            "sticker": {
              "label": "Tanpura in C♯",
              "tone": "#E3E7FA",
              "turn": 3
            }
          },
          {"sticker": {"label": "40 min", "tone": "#F9D7DD", "turn": -2}}
        ],
        "gap": 10,
        "align": "center"
      }
    ]
  }
}
What raag-today.json builds

A whole phone screen in one call: a header, a dial drawn from shapes, a sentence with chips in it and tilted stickers. Everything named here (phone, swara, deva, @saffron) comes from a kit sent once per file.

Built by the docs build with the real CLI · built after raag-kit.json.

Why it is short

Every key costs a model tokens and every call costs a round trip, so the language removes structure instead of abbreviating words.

≈ 788tokens for the whole screen above, its kit sent once before
9×fewer tokens to read a design back with source than tree --full
1 callfor a component set with its properties, states and behavior
  • Say it once. Colors, type and reusable parts live in the file's kit and are named everywhere after.
  • Intent, not arithmetic. Rows, columns and stacks place things; at names a place, an anchor or an angle. See Layout.
  • Read what you write. [source](update.md) prints any layer in the language, ready to edit and send back with --sync.
  • Checked, not hoped for. Every write verifies what it asked for and reports what it could not do, by layer, with the fix. See Checks.

Where to go next

Your first designThe sample, your AI, or the command line.The languageNodes, names and the shapes a build takes.ComponentsSets, properties, variants and instances.For agentsThe loop that costs the fewest tokens.