millionco

millionco / budge

Public

Tweak UI without going back-and-forth with AI

budge.design budge design react
16
0
89% credibility
Found May 23, 2026 at 17 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
JavaScript
AI Summary

Budge is a floating control bar that appears when your AI coding assistant makes visual changes to your webpage. It lets you fine-tune CSS values like padding, colors, and font sizes using arrow keys, then copies a clean prompt back to your AI so it remembers your adjustments. The tool works automatically during development and supports design tokens for consistent styling.

How It Works

1
🤖 You're working with an AI coding assistant

You ask your AI helper to make a visual change to your webpage, like adjusting spacing or colors.

2
✨ A floating control bar appears

The moment your AI makes a visual change, a small bar pops up right on the changed element.

3
⬆️ You fine-tune with arrow keys

Press up or down arrows to nudge the value higher or lower. Hold Shift for bigger jumps.

4
Choose your adjustment style
📐
Snap to design tokens

Press T to cycle through your project's standard spacing, colors, and sizes.

⌨️
Type exact values

Just start typing numbers to enter a precise value directly.

5
📋 Copy the clean prompt

Press Enter to copy a simple instruction like 'Set padding to var(--spacing-md)' to your clipboard.

🎉 Your AI remembers the change

Paste the prompt back to your assistant and it applies your fine-tuned value permanently.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 17 to 16 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is budge?

Budge is a JavaScript tool that drops a floating control bar onto your page whenever your AI coding agent makes a visual change. Instead of going back-and-forth ("a little less padding"), you just press up/down arrows to fine-tune the value, then hit Enter to copy a clean prompt like `Set padding to var(--spacing-md)` back to your agent. It watches the DOM for CSS mutations and pins itself to whatever element changed, supporting numeric values, colors, and design tokens defined as CSS custom properties. Works as a single script tag across Next.js, Remix, Astro, SvelteKit, and plain HTML.

Why is it gaining traction?

The friction here is real: AI coding agents are great at making rough visual changes but bad at nailing exact values. Budge intercepts that last 10% by letting you directly manipulate what the agent produced and then feeding a precise instruction back. The arrow-key stepping with sound feedback (synthesized keyboard clicks) makes it feel tactile and fast. Design token integration means if you're using Tailwind v4 or shadcn, the copied prompt uses `var(--spacing-md)` instead of raw pixels, keeping your design system intact.

Who should use this?

Frontend developers who use Claude Code, Codex, or Cursor for UI tasks and want to avoid the ping-pong of vague instructions. Teams with design token systems (Tailwind v4, CSS variables) will get the most out of it since budge snaps through your defined scale. It's less useful for backend work or projects without a design system.

Verdict

Budge solves a specific, annoying workflow problem with an elegant interface. The demo at budge.design is polished and the documentation is clear. However, the 16-star count and 0.9% credibility score reflect a very young project—use it in production at your own risk, but it is worth watching.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.