[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81198":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":16,"stars30d":17,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":26,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":13,"starSnapshotCount":13,"syncStatus":16,"lastSyncTime":30,"discoverSource":31},81198,"budge","millionco\u002Fbudge","millionco","Tweak UI without going back-and-forth with AI","https:\u002F\u002Fbudge.design",null,"JavaScript",31,0,26,1,2,5,41.5,"MIT License",false,"main",true,[5,24,25],"design","react","2026-05-23 04:54:11","2026-06-06 13:40:34","# budge\n\n[![version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fbudge?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fbudge)\n[![downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Fbudge.svg?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fbudge)\n\nTweak UI without going back-and-forth with AI.\n\nbudge is a floating control bar that appears the moment your agent makes a visual change, so you can fine-tune the value with the arrow keys and copy back a clean prompt — no re-explaining \"a little less padding\".\n\n### [Try out a demo! →](https:\u002F\u002Fbudge.design)\n\n## Quick Start\n\nDrop the script on the page and you're done. The IIFE is inert until budge detects a visual change or a manual selection.\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fwww.budge.design\u002Fbudge.iife.js\">\u003C\u002Fscript>\n```\n\n## How It Works\n\nbudge watches the DOM for a single numeric `class` or `style` mutation, then opens a floating bar pinned to the changed element:\n\n1. Your agent makes a single-property CSS or Tailwind change.\n2. budge mounts on the changed element.\n3. Press **↑↓** to fine-tune, **←→** to switch related properties, **T** to snap to design tokens.\n4. **Enter** copies a clean prompt back to your agent. **Esc** reverts.\n\nThe copied prompt is plain edit instructions — paste it and your agent persists the value:\n\n```txt\nSet `padding` to `var(--spacing-md)`\n```\n\nYou can also press **⌘E** to enter manual selection (powered by React Grab) and open budge on any element.\n\n## Manual Installation\n\n#### Next.js (App Router)\n\nAdd to `app\u002Flayout.tsx`:\n\n```tsx\nimport Script from \"next\u002Fscript\";\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Chtml lang=\"en\">\n      \u003Cbody>\n        {children}\n        \u003CScript src=\"https:\u002F\u002Fwww.budge.design\u002Fbudge.iife.js\" strategy=\"afterInteractive\" \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n```\n\n#### Remix \u002F React Router\n\nAdd to `app\u002Froot.tsx`:\n\n```tsx\nexport default function Root() {\n  return (\n    \u003Chtml lang=\"en\">\n      \u003Cbody>\n        \u003COutlet \u002F>\n        \u003Cscript src=\"https:\u002F\u002Fwww.budge.design\u002Fbudge.iife.js\" \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n```\n\n#### Astro\n\nAdd to your base layout (e.g. `src\u002Flayouts\u002FLayout.astro`):\n\n```astro\n\u003Chtml lang=\"en\">\n  \u003Cbody>\n    \u003Cslot \u002F>\n    \u003Cscript src=\"https:\u002F\u002Fwww.budge.design\u002Fbudge.iife.js\" is:inline>\u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n#### SvelteKit\n\nAdd to `src\u002Fapp.html`:\n\n```html\n\u003Cbody data-sveltekit-preload-data=\"hover\">\n  %sveltekit.body%\n  \u003Cscript src=\"https:\u002F\u002Fwww.budge.design\u002Fbudge.iife.js\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n```\n\n#### Nuxt\n\nAdd to `nuxt.config.ts`:\n\n```ts\nexport default defineNuxtConfig({\n  app: {\n    head: {\n      script: [{ src: \"https:\u002F\u002Fwww.budge.design\u002Fbudge.iife.js\", defer: true }],\n    },\n  },\n});\n```\n\n#### Vite \u002F Plain HTML\n\n```html\n\u003Cbody>\n  \u003Cdiv id=\"app\">\u003C\u002Fdiv>\n  \u003Cscript src=\"https:\u002F\u002Fwww.budge.design\u002Fbudge.iife.js\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n```\n\n## Slides (Manual Fallback)\n\nWhen auto-detect can't infer the change, you can hand budge a `slides` array via a hidden config element. Each slide describes one property:\n\n```tsx\n\u003Cdiv\n  data-budge={JSON.stringify({\n    slides: [\n      { label: \"padding-top\",   property: \"padding-top\",   min: 0, max: 64, value: 16, original: 8,  unit: \"px\" },\n      { label: \"padding-bottom\", property: \"padding-bottom\", min: 0, max: 64, value: 8,  original: 8,  unit: \"px\" },\n    ],\n  })}\n  hidden\n\u002F>\n```\n\n| Property | Type | Description |\n|---|---|---|\n| `label` | string | Display name shown above the bar |\n| `property` | string | CSS property applied to `[data-budge-target]` |\n| `min` \u002F `max` | number | Numeric range for stepping |\n| `value` | number | Current value (your new value) |\n| `original` | number | Value before the change |\n| `unit` | string | `\"px\"`, `\"%\"`, `\"em\"`, etc. |\n| `type?` | `\"color\"` | Only set for color properties |\n| `scale?` | `\"spacing\" \\| \"radius\" \\| \"text\" \\| \"color\" \\| null` | Override auto-detected token scale |\n| `tokens?` | `BudgeToken[]` | Explicit tokens (overrides CSS-var discovery) |\n\n## Design Tokens\n\nIf your project defines tokens as CSS custom properties (`--spacing-md`, `--radius-lg`, …) on `:root` or via Tailwind v4's `@theme`, budge snaps **↑↓** through the scale and emits `var(--spacing-md)` in the copied prompt instead of raw pixels. Press **T** to toggle. Works with Tailwind v4, Shadcn, or any plain CSS variables.\n\n## Repo Layout\n\n```\n.\n├── packages\u002Fbudge\u002F      # the IIFE runtime (isolet-js → dist\u002Fbudge.iife.js)\n├── apps\u002Fwebsite\u002F        # budge.design — Next.js site + deployed IIFE\n└── skills\u002Fbudge\u002F        # agent skill (SKILL.md + references)\n```\n\n## Resources & Contributing Back\n\nWant to try it out? Check out [the demo](https:\u002F\u002Fbudge.design).\n\nLooking to contribute back? Check out the [Contributing Guide](https:\u002F\u002Fgithub.com\u002Fmillionco\u002Fbudge\u002Fblob\u002Fmain\u002FCONTRIBUTING.md).\n\nFind a bug? Head over to our [issue tracker](https:\u002F\u002Fgithub.com\u002Fmillionco\u002Fbudge\u002Fissues) and we'll do our best to help. We love pull requests, too!\n\n[**Start contributing on GitHub**](https:\u002F\u002Fgithub.com\u002Fmillionco\u002Fbudge\u002Fblob\u002Fmain\u002FCONTRIBUTING.md)\n\n### License\n\nbudge is MIT-licensed open-source software © Million Software, Inc.\n","budge 是一个用于即时调整用户界面设计而无需与AI反复沟通的工具。其核心功能在于提供了一个浮动控制条，当检测到视觉变化时会自动出现，允许用户通过箭头键微调数值，并生成干净的指令提示以便复制回AI助手，从而避免了繁琐的描述过程。该工具基于JavaScript开发，支持React等现代前端框架。适用于需要频繁进行UI微调的设计场景，如网站布局优化、响应式设计调整等，特别适合设计师和开发者协作时使用。","2026-06-17 04:02:03","CREATED_QUERY"]