Exercise 3.1: Design Review Simulation

Goal: Refine a page through 5+ iterative prompts using visual context — just like giving feedback in a design review.

Setup

1. Open the project you built in Exercise 2.1 (or create a new dashboard: @solar /initiate Review Sim)
2. If starting fresh, create a dashboard: "create a dashboard with 4 stat cards and a bar chart showing monthly revenue"
3. Turn on the </> Share with Agent toggle in the Simple Browser toolbar (top-right corner)
4. Take a "before" screenshot of the page — you'll need it for your submission

Required Iterations

Complete at least 5 refinements, covering each of these categories:

1. Layout or Spacing Change

Use #browser to show @solar the current layout, then ask for a spacing or alignment fix.

Example: #browser the stat cards are too cramped — add more space between them and make them equal width

2. Component or Data Change

Add, remove, or swap a component on the page.

Example: add a search field and a status dropdown filter above the data table

3. Element-Level Change (using ↖ Add Element to Chat)

Click the ↖ pointer icon in the Simple Browser toolbar, click on a specific element, then describe the change.

Example: Click on the chart → change this to a line chart with a smooth curve

4. Responsive Layout Fix

Ask @solar to make the page work better on smaller screens.

Example: make this page responsive — cards should stack on mobile and the chart should be full width

5. Visual Polish

Fix typography, icons, colors, or any other visual detail to make the page demo-ready.

Example: make the page title larger, add a subtitle showing today's date, and add an Export button aligned right

6+ More (optional)

Continue refining until you're satisfied. Most pages need 5–8 iterations to reach presentation quality.

Self-Check Before Submitting

• Did you turn on the </> Share with Agent toggle?
• Did you use #browser in at least one prompt?
• Did you use ↖ Add element to chat in at least one prompt?
• Is there a visible improvement between your before and after screenshots?
• Does the page look good at both desktop and mobile widths?

Deliverable

Upload via Microsoft Forms:

• Before screenshot (after initial creation, before refinements)
• After screenshot (after 5+ refinements)
• List of the 5+ prompts you used (copy-paste from Copilot Chat)

Success Criteria

• Visible, meaningful improvement between before and after
• At least 5 distinct refinement prompts
• At least one prompt used #browser for visual context
• At least one prompt used ↖ Add element to chat for element-level feedback
• Page is responsive (looks reasonable when the browser panel is narrow)