Step 2: Building the UI

Create the input and preview display.

Add the Preview Card

Ask Claude to add a preview card component:

Add a preview card that shows:
- The page title (large)
- The description (smaller, gray)
- The preview image (if available)
- The URL domain

Style it to look like a social media preview card.
Include a loading state for when we're fetching.

Style Improvements

Once the basic structure is there:

Make it look cleaner:
- Center everything on the page
- Add some padding and max-width
- Use a nice font (system fonts are fine)
- Add a subtle shadow to the preview card

Add States

Add visual states:
- Empty state: show placeholder text when no URL entered
- Loading state: show a spinner or skeleton while fetching
- Error state: show a friendly message if fetch fails

Test the Layout

Resize your browser window. The layout should work at different sizes.

If not:

Make the layout responsive. It should look good
on both desktop and mobile widths.

Checkpoint

• Input field styled nicely
• Preview card component exists
• Empty, loading, and error states
• Responsive layout

What You Learned

• Building UI incrementally
• Handling different states (empty, loading, error)
• Basic responsive design

Exercises

1. Paste the "Add the Preview Card" prompt, then the "Style Improvements" prompt, and compare the before/after — note which visual changes had the biggest impact.
2. Add the three visual states (empty, loading, error) and manually trigger each one to confirm the right message shows.
3. Resize your browser from desktop to mobile width; if anything breaks, send the "Make the layout responsive" prompt and re-test.