- Category
- Developer Tools
- Rank
- No. 1550Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- millionco
- GitHub
- 36 stars
- Date
About
Tweak UI without going back-and-forth with AI. A visual interface for adjusting AI-generated design output directly.
What it does
Budge watches browser style changes and attaches a compact keyboard-controlled bar to the affected element. You can step values, move among related CSS properties, snap to project tokens, copy an edit instruction, or revert the preview. Manual element selection handles cases where automatic detection cannot identify the intended change.
Why it's ranked here
Budge solves a narrow but costly interaction loop with a concrete mechanism. It turns subjective nudges into exact CSS values or token references, then hands the agent a precise instruction. The browser script supports automatic detection, manual selection, and explicit configuration, making the idea practical rather than merely demonstrative.
What's good
The keyboard workflow is unusually direct: arrows adjust values and related properties, T toggles token snapping, Enter copies instructions, and Escape reverts. Token discovery understands spacing, color, text, and radius custom properties. Installation requires one browser script, with documented placement for several major web frameworks.
Tradeoffs
Automatic detection targets a single numeric class or style mutation and only watches a defined set of visual properties. It defaults to local development hosts unless explicitly enabled. Token discovery depends on expected custom-property prefixes. When inference fails, users must select an element manually or supply property ranges and original values through configuration.
How to use it well
Use Budge while pairing an AI coding agent with a locally running web interface, especially for spacing, typography, radius, color, opacity, and sizing adjustments. Keep design tokens in CSS custom properties to produce durable instructions. It does not persist source changes itself, replace the coding agent, or provide broad visual design generation.
Technical notes+
The runtime entry at packages/budge/src/budge.tsx uses createIsolet with React, observes DOM changes, snapshots computed styles, suppresses detection after recent page interaction, and defaults auto-detection to local hosts. packages/budge/src/widget.tsx implements token discovery, value formatting, Tailwind property-prefix mapping, prompt context, keyboard behavior, and preview state. packages/budge/isolet.config.mjs builds minified IIFE and ESM formats with autoMount: false. The root package.json defines a private pnpm workspace monorepo using Turbo, TypeScript, and Node 22 or newer. apps/website/app/layout.tsx mounts the site’s Budge and React Grab components alongside Vercel Analytics.
Observed
- License
- MIT
- Primary language
- TypeScript and TSX
- Packaging
- npm package plus browser-loadable IIFE; build configuration also emits ESM
- Interface
- In-page browser control bar with keyboard controls and copied text instructions
- Platform support
- Documented integration for Next.js, Remix or React Router, Astro, SvelteKit, Nuxt, Vite, and plain HTML
- Repository structure
- Private pnpm workspace monorepo containing a runtime package, Next.js website, and agent skill
- Runtime requirements
- Monorepo declares Node.js 22 or newer and pnpm 8 or newer
Read from README.md, package.json, packages/budge/isolet.config.mjs, packages/budge/src/budge.tsx, packages/budge/src/widget.tsx, vite.config.ts, apps/website/next.config.ts, apps/website/eslint.config.mjs, apps/website/postcss.config.mjs, apps/website/app/fonts.ts, apps/website/app/icon.tsx, apps/website/app/page.tsx, apps/website/lib/rrweb.ts, apps/website/lib/utils.ts, apps/website/app/layout.tsx.
What it can do
Adjust AI-generated UI designs visually
AI-generated design output → Modified UI design
Edit design elements without AI prompting
Design components and user modifications → Updated design elements
Refine layout positioning directly
UI layout and drag/drop adjustments → Repositioned layout elements
Modify design properties in real-time
Design attributes and property changes → Updated design with new properties
Fine-tune AI design output manually
Initial AI-generated design and manual tweaks → Polished final design
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.