Expect

budge

the tiny design companion for your agent

“add space above X” or “make Y less subtle” gets you 90% of the way there. budge is for the last 10.

budge appears when your agent makes a change to your UI. Tweak the value (padding, margin, color) then copy the result back to your agent to lock it in. It works just like the budge feature in your favourite design tool.

Arrow keys ← → to navigate

budge

font size

00px

Reset

Copy

PromptSet font-size to 0012345678900123456789px

Usage

Load the script, mark your target element with data-budge-target, and provide a slide config. The bar appears automatically.

<script src="https://budge.dev/budge.iife.js"></script>

<h1 data-budge-target style="font-size: 16px">
  Hello world
</h1>

<div data-budge='{ "slides": [
  { "label": "font-size", "property": "font-size",
    "min": 8, "max": 72, "value": 16, "original": 14, "unit": "px" },
  { "label": "line-height", "property": "line-height",
    "min": 12, "max": 80, "value": 24, "original": 22, "unit": "px" }
] }' hidden></div>

Use ↑↓ to nudge the value, ←→ to switch between properties. Press Enter to copy a prompt to your clipboard, then paste it back to your agent. Press Escape to dismiss.

Slide options

Property	Type	Description
label	string	Display name shown above bar
property	string	CSS property to apply
min	number	Minimum numeric value
max	number	Maximum numeric value
value	number	Current value
original	number	Value before the change
unit	string	"px", "%", "em", etc.
type	"color"?	Only set for color properties