Vibe Coding with Kiro

Your first vibe code

Time to put Kiro to work. In this section you will make three real changes to the admin dashboard using nothing but natural language prompts.

Before you begin

On the previous page you already made your first change — switching the app's color theme to purple. Now you will build on that momentum with three more exercises.

Make sure:

  • The admin project is open in Kiro
  • The development server is running (pnpm dev in Kiro's terminal)
  • Your browser is open to http://localhost:5173
  • You are signed in to the admin demo app (use the demo credentials on the login page)
  • Kiro's AI Chat panel is in Vibe mode

Exercise 1: Change the page title

Let's start with something simple — changing the title that appears on the dashboard.

  1. In the AI Chat panel, paste this prompt:
Try this prompt

Change the main heading on the dashboard page from "Hi, Admin!" to "Welcome, Designer!"

  1. Press Enter (or click Send)
  2. Kiro will show you the proposed changes. Review the diff — you will see the old text highlighted in red and the new text in green
  3. Click Accept to apply the changes
  4. Switch to your browser and refresh the page — you should see the updated title

Exercise 2: Change the sidebar color

Now let's change the visual style of a specific component. Since you already changed the overall color theme, this time you will target the sidebar directly.

  1. In the AI Chat panel, paste this prompt:
Try this prompt

Change the background color of the sidebar to a deep navy blue (#1e293b).

  1. Review the proposed changes
  2. Click Accept
  3. Check your browser — the sidebar should now have a deep navy blue background

If the color does not look right, you can follow up with another prompt:

Try this prompt

Actually, make the sidebar background color #0f172a instead.

Kiro remembers the context of your conversation, so you can iterate on changes naturally.

Exercise 3: Add a component

For the final exercise, let's ask Kiro to add something entirely new.

  1. In the AI Chat panel, paste this prompt:
Try this prompt

Add a welcome banner at the top of the dashboard page. It should have a light blue background, rounded corners, and display the text "Workshop Demo - Built with Kiro" in bold. Add a dismiss button on the right side that hides the banner when clicked.

  1. This is a bigger change, so Kiro may modify multiple files or create new components. Review each change carefully
  2. Click Accept to apply all changes
  3. Check your browser — you should see the new banner at the top of the dashboard

If something goes wrong

If the result does not look right, you can always undo with Cmd + Z in Kiro. You can also tell the AI: "Undo the last change" or "Revert the banner changes." Mistakes are part of the process.

What just happened?

In these three exercises, you:

  1. Modified existing text — the simplest kind of change
  2. Changed a style — adjusted the visual appearance of a component
  3. Created a new feature — added an interactive component that did not exist before

Each of these changes involved editing real code files. The AI handled the syntax, file locations, and implementation details — you just described what you wanted.

This is the core of vibe coding: you design, the AI implements.

Previous
Open the project in Kiro
Next
Prompting tips