Skip to content

README.md

Latest commit

 

History

History
64 lines (45 loc) · 2.59 KB

README.md

File metadata and controls

64 lines (45 loc) · 2.59 KB

Chapter 06 — Code generation logic

Simple explanation

Code generation is the step where layout and mapping become real files: .tsx, .css, and shared tokens. Think of it as translating a blueprint into carpentry—measurements must match.

Neighbors: Chapter 05 — Prompts · Chapter 16 — Context, LLM I/O, files · Chapter 07 — Sandbox · Chapter 08 — Feedback loop

Deep technical breakdown

Layout → CSS: map layout intent (e.g. Figma auto-layout HORIZONTAL/VERTICAL, or DesignSpec layout fields) to flex-direction: row|column; spacing → gap; padding fields → padding. Use CSS flex first; use grid when two-dimensional alignment regions are detected (e.g. card grids).
Components → reuse: emit leaf Button imports from DS; for unknown primitives, generate local Stack/Box helpers.
Responsive: encode breakpoints when the design model provides them (e.g. separate frames Hero_mobile / Hero_desktop, or explicit responsive blocks in DesignSpec); otherwise default { sm:640, md:768, lg:1024 } and document assumptions.
Design tokens: emit tokens.css as CSS variables (--color-text-primary, --space-3, …) from Figma variables when present, or from DesignSpec tokens when intake is requirements-only; reference them from modules.

Mermaid diagram

flowchart TD
  lt[Layout_tree]
  mt[Mapped_tree]
  tok[Design_tokens]
  gen[Template_plus_LLM]
  out[Src_tree]

  lt --> gen
  mt --> gen
  tok --> gen
  gen --> out
Loading

Real example

Figma: horizontal auto-layout gap 24 → CSS module:

.row { display: flex; flex-direction: row; gap: 24px; align-items: center; }

React:

export function Hero() {
  return (
    <section className={styles.hero}>
      <div className={styles.row}>...</div>
    </section>
  );
}

Challenges and pitfalls

  • Pixel-perfect traps: sub-pixel differences between Figma and browser rounding cause endless tweaks—prefer tokenized spacing.
  • Text auto-size: Figma text with auto height vs fixed height maps poorly—pick one policy.

Tips and best practices

  • Generate data-figma-id attributes (dev-only) for traceability, stripped in prod build via env.
  • Unit-test a layout mapper table without LLM coverage.

What most people miss

Typography needs explicit line-height policy; Figma line heights do not always match web defaults—document conversion or you get subtle vertical drift.