Session 8: The Complete Shipping Cycle

Duration: 2 hours
Prerequisites: Sessions 1-7 completed
You'll need: Full environment ready (Claude Code, Figma MCP, GitHub Desktop)

---

Part 1: The Full Workflow (15 min)

The Shipping Cycle

Every feature you ship follows this cycle:

Design → Implement → Iterate → Ship

Design: Work in Figma or start with a prompt
Implement: Claude generates the code
Iterate: Refine via prompts or Figma until right
Ship: Commit, push, create PR

Time Target

Once proficient, a complete cycle takes 30-40 minutes for a typical component or feature.

• Design/implement: 10-15 minutes
• Iterate: 15-20 minutes
• Ship: 5 minutes

Today you'll complete 3 cycles to build muscle memory.

The Hybrid Approach

You'll practice both paths:

• Cycle 1: Start in Figma (Path 1)
• Cycle 2: Start with a prompt (Path 2)
• Cycle 3: Mix both paths as needed

By the end, you'll have an intuition for when to use each.

---

Part 2: Cycle 1 — Figma-First (45 min)

The Feature: Notification Banner

You're adding a notification banner that appears at the top of the dashboard to show system messages.

Step 1: Design in Figma (10 min)

Open the Leigher Figma file.

Create a simple notification banner:

• Full width, fixed at top
• Icon on left (info, warning, or error)
• Message text
• Dismiss button on right
• Subtle background color based on type

Design it using your existing patterns. Don't overthink it—you'll refine.

Step 2: Implement via MCP (5 min)

Select the banner in Figma.

Ask Claude:

Implement this notification banner from Figma. 
It should support three variants: info (blue), warning (yellow), and error (red).
Create it as a reusable component.

Check the browser. The banner should appear.

Step 3: Iterate (15 min)

Look at the result. What's not right?

Common refinements:

"The icon needs more space from the left edge"
"The dismiss button should be more subtle—use a ghost style"
"The text should be centered vertically"
"Add a subtle border to the bottom"
"The transition when dismissing should be smoother"

Keep refining until it matches your Figma design.

Step 4: Ship (10 min)

In GitHub Desktop:

1. Create a branch: feature/notification-banner
2. Review the changes
3. Commit: "Add notification banner component"
4. Push
5. Create PR

PR description:

Adds a notification banner component with three variants (info, warning, error).
- Appears at top of dashboard
- Dismissible
- Uses design system colors

Cycle 1 Complete ✓

---

Part 3: Cycle 2 — Prompt-First (35 min)

The Feature: Empty State

You're adding an empty state for when the user has no surfaces yet.

Step 1: Start with a Prompt (5 min)

No Figma design this time. Start directly with Claude:

Create an empty state component for when the user has no surfaces.
It should have:
- An illustration or icon at the top
- A headline: "No surfaces yet"
- A description explaining what surfaces are
- A primary CTA button: "Create your first surface"

Use our existing patterns and tokens.

Check the browser.

Step 2: Evaluate and Decide (5 min)

Look at what Claude generated.

If it's close: Continue with prompts.
If the layout is wrong: Go to Figma to explore.

For this exercise, let's say it's close but needs refinement.

Step 3: Iterate via Prompts (15 min)

Refine through conversation:

"The illustration should be smaller—about 120px wide"

"Add more vertical space between the elements"

"The description is too long. Make it one sentence."

"The button looks too heavy. Add more padding around it so it doesn't feel cramped."

"Add a subtle background color to the entire empty state container—use the soft primary variant."

Keep going until it looks polished.

Step 4: Ship (10 min)

1. Create branch: feature/empty-state
2. Commit: "Add empty state for surfaces"
3. Push
4. Create PR

Cycle 2 Complete ✓

---

Part 4: Cycle 3 — Hybrid (25 min)

The Feature: Stats Cards

You're adding a row of stats cards to the dashboard showing key metrics (total surfaces, active segments, etc.).

Step 1: Start with Structure (5 min)

Ask Claude for a starting point:

Create a stats section for the dashboard with 4 stat cards in a row.
Each card shows:
- A label (e.g., "Total Surfaces")
- A value (e.g., "12")
- An optional trend indicator (up/down percentage)

Use a grid layout that stacks on mobile.

Check the browser. You have a foundation.

Step 2: Go to Figma for Layout (10 min)

The structure is there but the proportions feel off. Time to explore in Figma.

Open Figma. Create a few variations:

• Different card sizes
• Different spacing between cards
• Icon vs. no icon
• Value size and weight options

Pick the variation you like best.

Step 3: Update via MCP (5 min)

Select your preferred design in Figma.

Update the stats cards to match this layout from Figma.
Keep the existing data structure, just update the visual styling.

Step 4: Final Polish via Prompts (5 min)

Small refinements:

"Add a subtle divider between the label and value"
"The trend indicator should be green for positive, red for negative"
"Add a hover state that slightly elevates the card"

Step 5: Ship (5 min)

1. Create branch: feature/stats-cards
2. Commit: "Add stats cards to dashboard"
3. Push
4. Create PR

Cycle 3 Complete ✓

---

Reflection

What You Just Did

• Cycle 1: Started in Figma, implemented via MCP, refined via prompts
• Cycle 2: Started with a prompt, iterated entirely via conversation
• Cycle 3: Mixed both—prompt for structure, Figma for exploration, prompts for polish

Three different approaches. All valid. The skill is knowing when to use each.

Timing Check

How long did each cycle take?

• If over 60 minutes: Normal for first time. It gets faster.
• If 30-45 minutes: You're on track.
• If under 30 minutes: You're ready to ship real features.

What Slowed You Down?

Common bottlenecks:

• Figma → MCP not working — Check connection, restart if needed
• Too much iteration — Know when to stop
• Git confusion — Review Session 7, or use Claude to help with Git
• Not sure what you want — Spend more time in Figma first

---

Session 8 Checklist

• [ ] Completed Cycle 1 (Figma-first)
• [ ] Completed Cycle 2 (Prompt-first)
• [ ] Completed Cycle 3 (Hybrid)
• [ ] Created 3 PRs on GitHub
• [ ] Understand when to use each approach
• [ ] Have a sense of your timing per cycle

---

What's Next

Session 9: Shipping Your First Real Feature

Practice is over. Session 9 is real. You'll design, implement, and ship an actual feature to the Leigher codebase—with real review and real merge.

---

Session 8 of 10 • The Shipping AI Designer Course
Next: Session 9 — Shipping Your First Real Feature