2 min read
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 cardAdd 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 failsTest 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