Regeneration vs. Manual Edits: When to Choose

1. What We Are Learning

Today, we will learn how to distinguish between situations that require full regeneration vs. minor manual edits.

Think of this as developing your strategic intuition. You'll learn a framework for deciding whether it's faster to ask the AI to rebuild a section from scratch or to just jump into the code and make a quick fix yourself.

2. Why This Matters

Making the right choice here saves you an immense amount of time and frustration.

• Regenerating code is powerful for big, structural tasks, but can be overkill for small changes and might erase previous manual tweaks.
• Manual editing is precise and fast for small tweaks, but trying to fix a fundamental layout issue manually can lead you down a "rabbit hole" of frustrating, time-consuming adjustments.

In design terms, this is like deciding whether to completely redesign a screen in Figma or to simply select a component and tweak its color property in the design panel. One is for major revisions, the other is for minor refinements. Choosing the wrong one is inefficient. The goal is to get the best result with the least effort.

3. A Framework for Deciding: Agent vs. Assistant

A great way to think about how to use AI is to assign it different roles depending on the task. A popular mental model divides AI support into three levels: Tutor, Assistant, and Agent. For our workflow, we'll focus on two: the Agent and the Assistant.

Let's apply this model to our workflow.

When to Use AI as an Agent (Full Regeneration)

Think of the "Agent" as a junior developer you delegate a whole task to. You give it a clear brief (your Figma design) and expect a complete piece of work back (the HTML and CSS).

Use full regeneration for:

• Initial Scaffolding: Generating a brand new section of your page for the first time from a Figma frame. This is the primary use case.
• Major Structural Changes: You need to change a two-column layout to a three-column layout, re-order entire sections, or fundamentally alter the page's hierarchy. These are architectural changes.
• Correcting "Pattern-Level Mistakes": The AI generated code with a fundamental flaw. For example, it used absolute positioning instead of Auto Layout (Flexbox), or it used non-semantic <div> tags for everything instead of <header>, <section>, etc. Trying to fix this manually is often more work than regenerating with a better prompt.

The primary goal of AI generation is to get the HTML structure right. Small style imperfections can be fixed later.

When to Use AI as an Assistant (or Just You!) (Minor Manual Edits)

Think of the "Assistant" as a tool for quick, small tasks. You're still in the driver's seat, just speeding things up. Often, it's even faster to just do it yourself without AI.

Use minor manual edits for:

• Content Updates: Changing text inside a heading or paragraph. Swapping an image by changing the src attribute in an <img> tag.
• Stylistic Tweaks: Changing a hex code for a color, adjusting font-size, or tweaking a padding or margin value by a few pixels.
• Fixing Small Visual Bugs: An element is off by 2px, or a border is the wrong thickness. These are often single-line CSS changes.

This is especially important to avoid what's known as "rabbit-hole edits"—small issues that can cause a loop of frustrating problems if you try to solve them with a full AI regeneration.

4. What Could Go Wrong

• The Over-Regeneration Trap:

  • Problem: You use the AI "Agent" to regenerate a whole section just to change a headline's text. In the process, you might accidentally wipe out a small, manual CSS tweak you made earlier to fix an alignment issue.
  • Solution: Before regenerating, ask yourself: "Is this a structural change?" If not, a manual edit is safer and faster.

• The Manual "Rabbit Hole":

  • Problem: The AI generates a broken layout. You spend 30 minutes trying to manually fix the CSS, getting more and more frustrated as you tweak divs and flex properties.
  • Solution: Step back and identify the problem. Is it a "pattern-level mistake"? If the fundamental structure is wrong, stop editing. It's far more efficient to fix your Figma design (e.g., apply Auto Layout correctly) and regenerate. Fixing a bad plan is always easier than fixing bad code.

This iterative loop of Plan -> Code -> Review is a core concept in working effectively with AI.

5. Mini Exercise

Let's test your new decision-making framework. Imagine you have a section on your page with three pricing cards, arranged horizontally. You get two pieces of feedback from your stakeholder:

1. "In the 'Pro' plan card, can we change the button text from 'Sign Up' to 'Start Trial'?"
2. "This looks great! But can we actually add a fourth 'Enterprise' plan card to the layout?"

Your task: For each piece of feedback, decide if it calls for Full Regeneration or a Minor Manual Edit. Explain your reasoning.

• Feedback #1 (Change button text):

  • Your Decision:
  • Your Reasoning:

• Feedback #2 (Add a fourth card):

  • Your Decision:
  • Your Reasoning:

Take a moment to think, then check your answers below.

Answer Key:

• Feedback #1 is a Minor Manual Edit. Changing text is a simple content update. You can open index.html, find the button, and change the text in seconds. Regenerating the whole section would be massive overkill.

• Feedback #2 calls for Full Regeneration. Adding a fourth card is a major structural change. It affects the grid layout, spacing, and responsive behavior. The most efficient and reliable way to handle this is:

  1. Go back to your Figma file.
  2. Update the Auto Layout container to include the fourth card.
  3. Use the AI "Agent" to regenerate the entire section. This ensures the new layout is structurally sound and responsive, just like the original was. Trying to manually "squeeze in" another card with CSS would likely lead you right into a rabbit hole.

6. Checklist Before Moving Ahead

Please confirm you can do the following:

• I can explain the difference between using AI as an "Agent" (for regeneration) and an "Assistant" (for small edits).
• I know that full regeneration is best for initial scaffolding and major structural changes.
• I know that minor manual edits are best for content updates and small stylistic tweaks.
• I understand the concept of a "pattern-level mistake" and know that it's a trigger to regenerate rather than fix manually.
• I understand the risk of getting stuck in a "rabbit hole" if I try to manually fix a major structural problem.

Conclusion

You've now added a crucial layer of strategy to your workflow. By thinking in terms of "Agent" vs. "Assistant," you can make smart, efficient decisions that let you leverage the speed of AI without sacrificing control. You know when to delegate the heavy lifting and when to make the surgical fix yourself.

In our next lesson, we'll prepare for the inevitable: what to do when things go wrong. We will learn to identify a failed deployment in the Vercel dashboard and use AI to help interpret deployment error logs and suggest solutions. This will give you the confidence to not only build and update your site, but also to debug it when a change causes an unexpected issue.