Build the input form and deploy it live

Create a new GitHub repository

Set up your project home in GitHub before writing any code.

• Open GitHub Desktop on your computer.
• Click File in the top menu bar, then click New Repository.
• Name the repository "copy-grader" — use a hyphen, not a space.
• Set the local path to your Desktop or Documents folder so you can find it easily.
• Check the box that says "Initialize this repository with a README".
• Click Create Repository.
• When the repository is created, click Publish Repository in the top bar.
• In the dialog that appears, keep it Private for now and click Publish.
• You now have an empty project folder connected to GitHub.

Open Claude Code in your project folder

Navigate to the project folder in your terminal and open Claude Code.

• Open your terminal. On Mac: press Cmd + Space, type "Terminal", press Enter. On Windows: press the Windows key, type "PowerShell", press Enter.
• Type this command and press Enter: cd ~/Desktop/copy-grader (if you saved to Documents, use cd ~/Documents/copy-grader instead).
• If that does not work, in GitHub Desktop right-click your repository name and click "Open in Terminal" or "Open in Command Prompt".
• Once you are in the folder, type: claude and press Enter.
• Claude Code will open in your terminal with a > prompt waiting for your input.
• If you see "command not found: claude", Claude Code is not installed. Visit claude.ai/code and follow the install steps, then restart your terminal.
• Keep Claude Code open in this terminal tab. You will use it for the rest of the session.

Scaffold the Next.js app with Claude Code

Use Claude Code to create the full app structure in one prompt.

• In Claude Code, paste this exact prompt and press Enter:
• "Create a Next.js 14 app with Tailwind CSS in the current folder. The app has a single page at the root route (/) with a form containing four labelled inputs: (1) Headline — single line text input with placeholder 'Your main headline', (2) Subheadline — textarea with 3 rows and placeholder 'One or two sentences about who this is for', (3) CTA button text — single line text input with placeholder 'e.g. Get started free', (4) Feature bullets — textarea with 5 rows with placeholder 'Paste one bullet per line'. Add a submit button labelled 'Grade my copy →'. Add a page title 'Landing Page Copy Grader' and a subtitle 'Paste your copy. Get an honest score and specific rewrites.' Style with Tailwind: white background, slate-900 text, emerald-600 accent for the button. Use TypeScript. Do not wire up any API yet — just the form UI."
• Claude Code will create multiple files. Watch the output and wait until it stops before doing anything else.
• You will see files being created: package.json, app/page.tsx, app/layout.tsx, tailwind.config.ts, and others.
• If Claude Code asks you any questions or shows a permission prompt, type y and press Enter to approve.
• Do not interrupt Claude Code while it is generating. Wait for it to finish completely.

Install dependencies and run the app locally

Install the project packages and check everything works before deploying.

• In your terminal (a new tab — keep Claude Code open in the first tab), run: npm install
• Wait for npm install to finish. You will see a progress bar and then "added X packages".
• Once install is complete, run: npm run dev
• Open a browser and go to: http://localhost:3000
• You should see the form with all four fields, the title, subtitle, and the green submit button.
• Click through the form. Tab between fields. Make sure all labels are visible and correct.
• Try submitting the form — nothing should happen yet (no API connected), but it should not crash either.
• If the page loads but looks unstyled (plain HTML), Tailwind is not set up correctly. Paste the page.tsx contents into Claude Code and ask it to fix the Tailwind configuration.

Polish the form UI

Make the form look clean and professional before deploying. Back in Claude Code, paste this improvement prompt.

• In your Claude Code terminal tab, paste: "Improve the form UI: (1) Add helper text below each field — under Headline add 'The first thing visitors read. Should name a specific benefit.', under Subheadline add 'Who it is for and what happens when they use it.', under CTA add '3–6 words. Describes the action, not the product.', under Bullets add 'Paste each feature bullet on its own line.'. (2) Set max-width to max-w-2xl and center the layout with mx-auto. (3) Add py-12 padding top and bottom. (4) Make the submit button full width. (5) Add a loading state: when the form submits, the button text changes to 'Grading...' and the button is disabled to prevent double clicks."
• Wait for Claude Code to finish updating the files.
• Save your changes (Claude Code handles this automatically) and check localhost:3000 again.
• The helper text under each field is important — it teaches your users what good copy looks like while they are filling in the form.
• The loading state is important — without it, users will click the submit button multiple times thinking nothing is happening.
• You do not need to spend more than 10 minutes on polish today. The goal is deployed and live.

Commit to GitHub and deploy to Vercel

Get the form live at a real URL so you can share it.

• Stop the local dev server with Ctrl + C in the npm terminal tab.
• Open GitHub Desktop. You should see all the new files listed under "Changes".
• In the Summary box at the bottom left, type: "Day 2: form UI complete".
• Click Commit to main.
• Click Push origin to upload to GitHub.
• Now go to vercel.com and sign in.
• Click Add New → Project.
• Find your copy-grader repository and click Import.
• Leave all settings as default — Vercel auto-detects Next.js.
• Click Deploy.
• Wait about 90 seconds. Vercel will give you a live URL like copy-grader-abc123.vercel.app.
• Visit that URL. Your form should look exactly like your localhost:3000 version.
• Copy the URL and send it to one person today — a friend, a community post, or a DM — with a note that you are building this in 7 days.