WirefoldHow to make a button gray without opening your editor
· Jesus Mendoza
Learn how to change a button color in your React or Next.js app without opening your editor: point at it, describe the change, review the diff and apply.
On your pricing page, the "Upgrade" button on the Pro card is bright blue and competes with the Team card beside it. You want it gray, like a secondary action. In code it is a small edit, and you would rather not interrupt your work to find it.
This tutorial makes that one change with Wirefold, a macOS app where you point at an element in your running app, describe the edit, and review it as a diff before anything touches your files. For the full picture, read how Wirefold works.
Before you start
You need a Mac with macOS 15 or later on Apple Silicon, a Vite and React or Next.js project, Git 2.38 or newer, and an API key from your model provider. Wirefold uses your own key and adds no markup on it.
Assume the button is a shared Button component with a variant prop, and the Pro card passes variant="primary". Your project will differ, which is one reason the review step matters.
Step 1: Point
Open the project in Wirefold and start your dev server. In the preview, go to the pricing page and click the Pro card's "Upgrade" button. Wirefold passes the agent that element as context, so you do not have to describe which button you mean.
Step 2: Run
Type the change in plain language:
Make this button gray, like a secondary action. Keep the label text readable.
Then run it. The agent reads the relevant parts of your project, finds where the button is defined, and works in a Git sandbox, a separate copy of your project. Your own files stay as they were.
Ask for the outcome and point to your conventions. "Like a secondary action" invites the agent to reuse what you have. "Make it #808080" invites a hard-coded color your design system does not know about.
Step 3: Review
When the agent finishes, you get a diff against your code. A request this small should produce a small diff.
Here is an illustrative diff, assuming your project has a secondary variant. Your real diff will look different:
- <Button variant="primary">Upgrade</Button>
+ <Button variant="secondary">Upgrade</Button>One instance changed, through a variant that already exists, and the Button component is untouched, so every other button keeps its color.
Other results are possible, and each tells you something.
If the diff adds a gray class to the button, check that the gray comes from your palette. A gray from your Tailwind config is fine. A random hex value means you should ask again and mention the palette.
If the diff edits the Button component itself, read it carefully. A change to the shared component can turn every primary button in the app gray. Unless you want that, reply with "Only change this instance, leave the Button component alone."
If files unrelated to pricing show up, discard the attempt.
Read the diff as you would a teammate's pull request.
Step 4: Apply
When the diff looks right, press Apply. Your code changes at that moment. Wirefold uses Git 2.38 or newer here, to bring the change into your project and keep your unfinished work safe.
Check the preview. If the gray is close, send a follow-up such as "a little darker, and keep the text white" and review the new diff. If you dislike the attempt, discard it. Nothing was written to your project, so there is nothing to undo.
What stays your job
You choose gray, and you decide whether a gray Upgrade button suits your pricing page. The agent makes the edit.
- Wirefold works with Vite with React and with Next.js. Other frameworks are not supported.
- It runs on macOS 15 or later on Apple Silicon. There are no Intel Mac, Windows, or Linux builds.
- 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 using it on private code.
- If no one else reviews your work, do not Apply to a shared branch.
Try it on a real button
Pick a button you have been meaning to restyle, point at it, and read the diff before you Apply.
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.