explaingit

millionco/budge

★ 20JavaScriptAudience · vibe coderComplexity · 2/5LicenseSetup · easy

TLDR

Budge attaches a floating control bar to any CSS-changed element so you can nudge values live with arrow keys and copy the result as a plain-English instruction straight back into your AI chat, no more repeated describe-and-wait loops.

Mindmap

mindmap
  root((budge))
    What it does
      Detects CSS changes
      Arrow key nudging
      Copies AI instruction
    Features
      Design token snapping
      Manual keyboard trigger
      Live preview
    Frameworks supported
      Next.js
      Remix
      SvelteKit
      Plain HTML
    Setup
      Single script tag
      MIT license
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Fine-tune CSS values live with arrow keys after an AI assistant makes a change, instead of writing another message describing the adjustment.

USE CASE 2

Snap through named Tailwind or CSS design tokens like --spacing-md to keep adjustments consistent with your project's design system.

USE CASE 3

Trigger the control bar on any page element with a keyboard shortcut to adjust properties on demand, even without an AI change.

USE CASE 4

Copy a plain-English instruction of your nudged adjustment directly to clipboard and paste it straight back into your AI chat to apply it permanently.

Tech stack

JavaScriptCSSTailwindNext.js

Getting it running

Difficulty · easy Time to first run · 5min

Add a single script tag to your HTML or framework layout file, no build step, npm install, or configuration required.

MIT license, use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Budge is a small JavaScript tool that makes it easier to fine-tune visual details in a web interface after an AI coding assistant has made a change. The problem it solves is the back-and-forth that happens when you ask an AI to adjust something like padding or font size: you look at the result, decide it is slightly off, then have to describe the adjustment again in words. Budge skips that loop. When an AI agent makes a single CSS or Tailwind change to an element, Budge automatically detects it and shows a floating control bar attached to that element. You can then press the arrow keys to increase or decrease the value, see the change live, and when you are happy, press Enter. Budge copies a plain-English instruction back to your clipboard that you can paste directly into your AI chat. You can also trigger the control bar manually on any element using a keyboard shortcut. If your project uses design tokens, which are named values like --spacing-md defined in CSS variables or Tailwind, Budge can snap through those named values instead of raw pixel numbers and will include the token name rather than the pixel value in the copied instruction. Installation is a single script tag added to your page. The README includes copy-paste setup instructions for Next.js, Remix, Astro, SvelteKit, Nuxt, and plain HTML projects. For cases where auto-detection does not pick up the change, you can pass the relevant property information manually using a small data attribute on a hidden element. The repository includes the runtime JavaScript package, the project website built in Next.js, and a Claude Code agent skill. The license is MIT.

Copy-paste prompts

Prompt 1
Add Budge to my Next.js project with a single script tag so I can nudge CSS padding values with arrow keys after my AI assistant makes a change. Show me exactly where to add it.
Prompt 2
My Tailwind spacing tokens are --spacing-sm, --spacing-md, and --spacing-lg. Configure Budge to snap through these named tokens when I adjust padding on a card component instead of showing raw pixel numbers.
Prompt 3
I'm using Budge in a Remix app and the auto-detection isn't picking up my CSS change. Show me how to use the data attribute fallback to pass the property information manually.
Prompt 4
Explain what the plain-English clipboard instruction Budge copies looks like after I nudge a font-size, and how I paste it back into Claude to make the change permanent in my codebase.
Prompt 5
Set up the Budge Claude Code agent skill so that every CSS or Tailwind change my AI assistant makes automatically activates the Budge control bar for live fine-tuning.
Open on GitHub → Explain another repo

← millionco on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.