# Pencil Design To Code

Use this reference when implementation must follow Pencil data.

## Source Priority

Use this priority order:

1. requirement artifacts for behavior
2. Pencil data for presentation
3. screenshots only as a visual check

Do not infer behavior from appearance alone.

## Read From Pencil

When MCP is available, read:

- active `.pen` file
- target page frame
- child section hierarchy
- text content
- layout direction
- gap and padding
- width and height strategy
- fills, strokes, corners, and major visual grouping

Prefer structural reads over screenshots.

## Map Pencil To Frontend

Use these default mappings:

- vertical frame -> column flex container
- horizontal frame -> row flex container
- gap -> `gap-*` or arbitrary gap utilities
- padding -> `p-*` or directional padding utilities
- fill -> background utilities or custom CSS values
- text nodes -> semantic headings, paragraphs, labels, buttons

When the project uses Tailwind:

- preserve layout and spacing first
- preserve typography second
- preserve decorative effects third

## Implementation Discipline

When coding from Pencil:

- keep section order aligned with Pencil
- keep content hierarchy aligned with Pencil
- keep major CTA placement aligned with Pencil
- extract reusable blocks only when the grouping is stable
- do not flatten the layout so aggressively that the design structure disappears

## Verification

Before treating the code as complete:

- compare major sections against Pencil
- compare headline and CTA hierarchy against Pencil
- compare panel grouping against Pencil
- note any intentional deviations