budge
An agent skill to tweak UI without going back-and-forth with AI
- ↑↓ to fine-tune the value
- ←→ to switch between properties
- T to snap to design tokens
- Enter to copy the prompt to clipboard
Works in Claude Code, Codex, Cursor.
New: budge now auto-detects local style changes and opens itself when your agent nudges spacing, type, radius, or size.
Best viewed on desktop
Press T to snap to tokens
budge
font size
px
Reset
Copy
PromptSet font-size to px
usage
Install the skill and leave the script on the page. Ask your agent to make a visual change; on local dev, budge can detect the update and appear automatically.
$
tokens
If your project defines design tokens as CSS custom properties (
--spacing-md, --radius-lg, etc.), ↑↓ snaps through the scale and the copied prompt reads var(--spacing-md) instead of raw pixels. Works with Tailwind v4’s @theme, Shadcn, or any :root variables. Press T to toggle.| 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 |
| scale | "spacing" | "radius" | "text" | "color" | null? | Override auto-detected token scale |
| tokens | BudgeToken[]? | Explicit tokens (overrides CSS-var discovery) |