Polish and Share

Style your app, add a Copy Results button, and take a screenshot to share what you built.

🛠
What you're building today
A polished, styled Comms Gut Check app with a working Copy Results button — running on your computer, with a screenshot ready to share.

Before you start

Step 1: Style the app

Paste this prompt into Claude Code exactly as written. It will give your app a polished, product-quality look — the kind of thing worth screenshotting.

Prompt for Claude Code
Restyle the page so it looks like a real product. Here's exactly what I want:

The top section — the headline, subtitle, and text input — should sit inside a full-width panel with a deep navy-to-blue gradient background (start at #1E293B, end at #1e3a6e). All text in that section should be white. The headline "The Comms Gut Check" should be large, bold, and centered. Add a short subtitle below it in a lighter blue-gray. The text input should have a white background with rounded corners and no visible border — it should look clean against the dark gradient. The Submit button should be bright blue (#2563EB) with white text, bold, and rounded.

Below that, the five result sections should each appear as their own white card with a light gray border, rounded corners, and a soft shadow. The section name should be bold navy at the top of each card. Cards should be stacked vertically, centered, and not too wide — comfortable to read.

Keep the "Analyzing your communication…" loading message visible while the response is processing.

The whole page should look good on both desktop and mobile.

Step 2: Add a "Copy results" button

Tell Claude Code to add a button that copies the full output to the clipboard so users can paste it into a doc or email.

Prompt for Claude Code
Add a "Copy results" button below the five feedback sections. It should only appear once the results have loaded. When clicked, it copies everything — all five sections with their labels — so it can be pasted straight into a document or email. After copying, change the button text to "Copied!" for a moment, then reset it back to "Copy results". Style it differently from the Submit button so it reads as a secondary action — an outline rather than a filled button.

Step 3: Verify everything works

  1. Refresh your browser. The page should look polished — styled headline, clean text area, visible button.
  2. Paste a piece of communication and click Submit. Verify all five sections appear in styled cards.
  3. Click "Copy results." Open a blank doc or email and paste — verify the full five-section output is there.
If anything looks off visually — spacing wrong, sections overlapping, button not styled correctly — tell Claude Code exactly what you see: "The submit button has no padding and the text is too small. Please fix the button styling." Be specific and it will fix it.

Step 4: Take a screenshot to share

Open your app in the browser, paste a piece of text, and get your results on screen. Then take a screenshot — that's what you'll share on LinkedIn, Slack, or wherever you want to show what you built.

📸 How to take a screenshot

On a Mac: Press Cmd + Shift + 4, then drag to select the part of your screen you want to capture. The screenshot saves automatically to your Desktop.

On Windows: Press Windows key + Shift + S to open the Snipping Tool, then drag to select your browser window. The screenshot copies to your clipboard — paste it directly into Slack, an email, or a doc.

When your app is running on your computer and you've got a screenshot in hand, you've built your first AI-powered web app.

🔧 What you've built so far
  • ✓ Claude Code installed and running · project folder + project description created
  • ✓ Working first page with headline, text box, and Submit button
  • ✓ App connected to Claude — paste text, get a response in the browser
  • ✓ Structured five-section critique output
  • → Styled, finished app with Copy results button ← you are here