3 min read
Step 2: Getting the Foundation
Add a popover that appears when you click the menu bar icon.
Where We Are
You have a menu bar icon. Now we need something to happen when you click it.
Add the Popover
When I click the menu bar icon, show a small popover window.
For now, just show placeholder text that says "ColorDrop" with a subtitle "Color picker coming soon".
Keep the popover small — maybe 200x150 points.Let Claude implement this. Build and run to verify.
Test It
Click your menu bar icon. A small popover should appear.
- If it works → great, continue
- If it doesn’t appear → describe what happens to Claude
- If it appears but looks wrong → describe what’s off
Refine the Basics
The popover probably works but might not feel quite right. Try some refinements:
If it’s too big or small:
Make the popover [smaller/larger]. Around [X] by [Y] points.If the text doesn’t look right:
Make the title text larger and bolder.
The subtitle should be smaller and grayed out.If you want it centered:
Center the text in the popover, both horizontally and vertically.Add Basic Structure
Let’s set up the layout we’ll need for the color display:
Update the popover to have this structure:
- At the top: a square showing a color (use a placeholder color like blue for now)
- Below that: three rows for hex, RGB, and HSL values (use placeholder text)
- Keep it clean and simpleThis creates the skeleton we’ll fill in with real functionality.
Checkpoint
By now you should have:
- Popover appears when clicking menu bar icon
- Basic layout structure (color preview + value rows)
- Clean, centered appearance
Stuck?
If the popover isn’t working or the layout looks wrong:
- First, describe the problem to Claude — “The popover doesn’t appear” or “The layout is broken”
- Compare to reference — Look at
reference/ColorDrop/Sources/ColorDrop/PopoverView.swiftto see one working approach - Ask Claude to compare — “My PopoverView looks like [paste code]. The reference looks like [paste reference]. What’s different?”
See Getting Unstuck for more debugging strategies.
What You Learned
- Iterating on UI through description
- “A bit bigger”, “center this”, “make it bolder” are valid prompts
- Building UI incrementally, not all at once