WirefoldWirefold: edit your React or Next.js UI by pointing at it
Wirefold is a macOS app for visual code editing with AI. You point at an element in your running React or Next.js app, describe the change in plain language, and read the result as a diff before it reaches your code.
The problem with small UI changes
A card in your app has a loud blue "Upgrade" button that should be gray, and the plan name sits too close to the subtitle. Neither fix is hard. The cost is the route: find the component, find the class, work out whether the project uses a variant prop or raw Tailwind classes, save, check the browser, repeat. For a developer, a ten-second tweak pulls attention away from whatever they were building.
Designers meet the same wall from the other side. The problem is visible, but the file belongs to someone else, so it turns into a ticket with a screenshot and red arrows. A developer picks it up a day later, and the next round of feedback starts the cycle again. Small adjustments are cheap to make and expensive to hand off. Wirefold shortens that route.
Point
Open your project in Wirefold. It supports Vite with React and Next.js. Start the dev server, open the running app in the preview, and click the element you want to change.
Clicking replaces the part of a request that is hardest to write, such as "the second button in the middle card of the pricing section". Wirefold passes the agent the element you selected as context, so the request itself can stay short.
Describe
Type what you want in plain language and run it. For example: "Make this button gray, like a secondary action. Add 8px more padding around the card content." The agent reads the relevant parts of your project and works out where the element is defined.
Say what outcome you want and refer to your own conventions ("like a secondary action") rather than raw values. That gives the agent a reason to reuse what your project already has.
Sandbox
The agent does not edit your working tree. It works in a Git sandbox, a separate copy of your project, and tries its changes there. Your files stay exactly as they were until you press Apply.
If the agent goes somewhere you dislike, you discard the attempt and there is nothing to clean up. You also review a real diff against your real code, so you do not have to rely on the agent's own summary.
Review the diff
Read the diff as you would a teammate's pull request. Three checks cover most cases.
Scope: a button color request should produce changes near that button. Edits to checkout logic or unrelated components are a reason to push back or discard.
Method: does the gray come from your existing secondary variant, or from a one-off hex value? Does the padding use your spacing scale or a magic number? A change can look right in the browser and still fight your design system.
Side effects: a shared Button component appears in many places. If the agent edited the component instead of one instance, every button in the app changed. The diff shows that at once, and the preview might not.
Apply
Your code changes only when you press Apply. If the result is close but not right, send a follow-up such as "a bit less padding, keep the button text white" and review the new diff. Wirefold uses Git 2.38 or newer when you press Apply, to bring the change into your project and keep your unfinished work safe.
Another case: hover and empty states
States are easy to forget in a handoff. Say a list of saved projects has rows with no hover feedback, and new users see blank space where the list would be.
For the hover state, point at a row and ask for a subtle background change and a pointer cursor. Expect a small diff, and check that the color comes from your palette and that it applies to the row, not every element sharing the class.
For the empty state, point at the empty area and ask for a short "No projects yet" message with a create button styled like your primary button. This diff is larger because the agent adds a condition and some markup, so read it closely. Check that the condition tests the right thing, that the button calls the handler your existing create button uses, and that the markup reuses your Button component.
In both cases you decide what the states should be, and the agent makes the edit. For a step-by-step version of a single change, see the tutorial on how to make a button gray without opening your editor.
Who it is for
React and Next.js developers can skip the file hunt for small visual edits and still review a normal diff. Designers can describe a change against the real running UI. Teams can handle small fixes without a handoff. If nobody reviews your work, do not Apply to a shared branch, because the diff only protects you when someone reads it.
Limits
- It needs macOS 15 or later on Apple Silicon. There is no Intel Mac, Windows, or Linux build.
- It works with Vite with React and with Next.js. Other frameworks are not supported.
- It needs Git 2.38 or newer. Wirefold uses it when you press Apply.
- You bring your own model API key, and Wirefold adds no markup on it. You pay your provider directly for usage.
- Your model provider receives your prompts, the relevant parts of your code and captured application data such as screenshots. Wirefold does not redact it automatically. Check your provider's terms before you use Wirefold on private code.
- Models make mistakes, so every change appears as a diff and nothing is written until you press Apply.
Pricing and trial
Wirefold costs USD 12 per month, billed monthly, cancel anytime. The 7-day trial is for new accounts. It requires creating an account, and it does not ask for a card. When the trial or a subscription ends, your existing work, Review and Apply remain available.
Pick the smallest annoying thing in your UI and point at it.