Workshop - Workshop: Add Functionality, Styling & Updates

What will I walk away with?

• ✅ Confidence to make updates without breaking anything
• ✅ How to safely test new features and UI tweaks
• ✅ A clear process for fixing issues fast

---

Why this section matters a lot

In more traditional setups, even simple updates can feel painfully slow:

🔒 Blocked by dev availability – even for basic text or styling changes

🧱 Siloed workflows – founders share a vision, designers share Figma files, and developers rebuild from scratch. As the product evolves, designs and vision boards quickly fall out of sync—and need to be manually recreated

🖼️ Feedback by screenshot – bug reports with long descriptions and screenshots are slow to create and often lead to endless back-and-forth

These common patterns lead to delays, misalignment, and wasted effort.

That’s exactly why we recommend a different approach—one that eliminates these bottlenecks without sacrificing quality.

How our methods help

• ✅ Lovable – prompt-based updates let non-developers contribute ideas, content, and design tweaks in a format developers can build from directly
• ✅ GitHub – keeps the codebase synced and versioned so everyone’s working from the same source of truth
• ✅ Vercel – generates preview environments with built-in commenting so feedback is fast, contextual, and actionable

Together, these tools give you a safe, modern CI/CD workflow that empowers mixed teams to move faster—without stepping on each other’s work.

---

Safe Editing

Whether you're adding a new feature, tweaking the UI, or fixing an error—you should always follow a safe workflow that protects your live app.

Published with Lovable?

✅ Your changes don’t affect the live site until you click Publish

You can make changes freely, test them, and publish when ready.

⚠️ Note: You can only work on one set of changes at a time. If you need to test multiple ideas separately, consider switching to the GitHub + Vercel deployment method.

Published with Vercel + GitHub? (Recommended)

This setup gives you more flexibility, is ideal for working on multiple features at once, and a lot more.

⚠️ Any change made to the main GitHub branch goes live immediately.
To work safely, always use branches and previews.

How it works:

1. Enable branching in Vercel
2. Create a new branch in Vercel or GitHub (e.g. feature-dashboard)
3. Make changes in Lovable while working in that branch
4. Open a pull request (PR) in GitHub
   • Vercel creates a preview environment
   • You can share a link and get feedback using Vercel’s commenting tools
5. Merge to main when ready – your changes will go live

---

✅ Safe Change Workflow

Use this 6-step process every time—no matter what kind of update you're making:

1. Create your prompt (describe the change you want)
2. Branch off from main (in Lovable or GitHub)
3. Run the prompt or make the update
4. Test and refine until it looks and works right
5. Share with your team and gather feedback
6. Merge to the main branch to go live

---

Adding a New Features

Follow the Safe Change Workflow above.

Updating a Features/Functionality

Follow the Safe Change Workflow above.

Style & UI Tweaks of select component

Follow the Safe Change Workflow above. Instead of prompting you can:

• Use the Edit button in the Lovable side panel
• Select the component you want to change
• Adjust styling (text, layout, colors, spacing, etc.)

✨ Good to know: Styling tweaks made this way don’t use up any of your prompt credits.

Fixing Errors

Sometimes errors happen. Here’s how to handle them safely:

Option 1 - Auto fix

Lovable will often spot errors and offer to fix them automatically. Just click the auto fix prompt when shown.

Option 2 - Revert to a previous version

Use the version history to go back to a version before the error—then try again.

Option 3 - Copy error into ChatGPT and apply fix

Copy the error and paste it into ChatGPT. It can help you write a better prompt or identify what went wrong.

Option 4 - Ask Zebra Labs

Still stuck? Reach out or bring it to your next workshop session — we’ll fix it with you by diving into the code.

---

Want to go deeper?

Join the full £1 workshop and cover all 5 sessions with expert guidance.