Frontman Quickstart: Change a Button Color in 5 Minutes

Written by Danni Friedland on

Last updated:

tutorialgetting-started

By the end of this tutorial, you will have installed Frontman, connected an AI provider, clicked a button in your running app, changed its color with a plain English instruction, and seen the source code update. Total time: about five minutes.

Prerequisites

Step 1: Install Frontman

Run the install command for your framework:

Next.js:

Terminal window
npx frontman@latest init --framework nextjs

Vite (React, Vue, or Svelte):

Terminal window
npx frontman@latest init --framework vite

Astro:

Terminal window
npx frontman@latest init --framework astro

This adds Frontman as a dev dependency and creates a one-line plugin entry in your framework config. You can check the diff — it touches one config file.

Step 2: Restart Your Dev Server

Stop your dev server and start it again:

Terminal window
npm run dev

You should see Frontman connected in the terminal output. If you do not, check that the plugin line was added to your framework config — the init command prints the exact location.

Step 3: Connect an AI Provider

Open your app in the browser. You will see the Frontman overlay in the bottom-right corner. Click it to open the settings panel.

Choose your AI provider:

If you already have an account with any of these providers, this step takes about thirty seconds.

Step 4: Change a Button Color

Find any button in your app. Click it. The Frontman selection overlay appears, showing you the component name, file path, and current styles.

Now type:

Make this button use our primary color

Frontman reads your project’s design tokens, finds the primary color value, traces the button back to its source file, and applies the change. Hot-reload fires. The button updates in the browser.

Check your terminal or editor — the source file has changed:

<button className="bg-gray-600 text-white px-4 py-2 rounded">
<button className="bg-primary text-white px-4 py-2 rounded">
  Get Started
</button>

The diff is in your working tree. Run git diff to see it. This is a normal code change — your team reviews it like any other PR.

Step 5: Iterate or Commit

If the result is not quite right, describe what is off:

Use the darker shade — primary-700

Frontman applies the correction. Keep iterating until it looks right, then commit the change.

What Just Happened

You clicked a live UI element, described a change in plain English, and Frontman:

  1. Identified which component renders that element
  2. Read its current styles (including resolved token values)
  3. Found the source file and line number
  4. Applied the edit using your project’s conventions
  5. Hot-reload showed you the result

No IDE. No file paths. No Tailwind class lookup. The change is real source code that goes through your normal review process.

Next Steps