# Claude Design Handoff Prompt — Template

> Template populated at runtime by **Step 3.0 (Mockup Source Decision)** in
> [../references/ui-design-phase.md](../references/ui-design-phase.md) when the
> user picks the **handoff** branch. All `{{placeholders}}` are resolved from the
> PRD state file (`${paths.prd_dir}/sessions/YYYY-MM-DD-<slug>-state.md`),
> `baldart.config.yml`, and optional overlays.
>
> Render rules:
> - Conditional sections (marked `{{#if …}} … {{/if}}`) are emitted only when the
>   condition is true. Skip the entire section (including its heading) when false.
> - Lists (marked `{{#each …}}`) render one bullet per item; emit "—" if empty.
> - The rendered output is presented to the user inside a fenced markdown
>   code-block so they can copy-paste verbatim into Claude Design.

---

# Feature: {{feature_title}}

## 1. Obiettivo

{{feature_objective_one_sentence}}

## 2. User flow

{{user_flow_summary}}

{{#if primary_personas}}
**Personas target**:
{{#each primary_personas}}
- {{this.name}} — {{this.context}}
{{/each}}
{{/if}}

## 3. Schermate in scope

> **Vincolo di tracciabilità funzionale.** Inserisci SOLO controlli (bottoni,
> icone-azione, voci di menu, tab, toggle) legati a una funzione elencata qui
> sotto. Non aggiungere chrome interattivo "per completezza visiva": ogni
> affordance senza funzione diventa codice morto in implementazione. Se proponi
> un elemento interattivo non presente nelle azioni primarie, segnalalo in
> consegna come *proposta da validare*, non come requisito. Gli elementi
> puramente decorativi (icone di sezione, marchi) marcali esplicitamente come
> **decorativi**.

{{#each screens_in_scope}}
### {{this.name}}

- **Scopo**: {{this.purpose}}
- **Stati richiesti**: {{this.states_required}}  <!-- empty, loading, populated, error, success, ecc. -->
- **Azioni primarie**: {{this.primary_actions}}
- **Dati visualizzati**: {{this.data_shown}}
{{#if this.notes}}
- **Note**: {{this.notes}}
{{/if}}

{{/each}}
> **Nota per l'export.** Dai al canvas di questa feature un titolo che contenga il
> nome feature («{{feature_title}}»), e numera gli artboard in modo coerente con gli
> ID schermata qui sopra (es. schermata 3.1 → artboard `s31`). Scaricherò il bundle
> completo del workspace: questo mi permette di ritrovare esattamente le TUE schermate
> ed evitare ambiguità con le altre feature.

{{#if brand_voice}}
## 4. Brand & voice

- **Tono**: {{brand_voice.tone}}
- **Personalità**: {{brand_voice.personality}}
- **Do**: {{brand_voice.do}}
- **Don't**: {{brand_voice.dont}}
{{#if brand_voice.references}}
- **Riferimenti visivi**: {{brand_voice.references}}
{{/if}}
{{/if}}

{{#if has_design_system}}
## 5. Design system constraints

> Riusa SOLO i token e le primitive elencate. Se devi proporre qualcosa di nuovo,
> segnalalo esplicitamente nella consegna così posso aggiornare il registro.

### Token chiave

```
{{design_tokens_excerpt}}
```

### Primitive da riusare

{{#each registered_primitives}}
- **{{this.name}}** — {{this.purpose}} ({{this.path}})
{{/each}}

### Vincoli numerici (da `design-system-protocol.md`)

- Type scale: {{tokens.type_scale}}
- Spacing scale: {{tokens.spacing_scale}}
- Radius: {{tokens.radius_scale}}
- Contrast minimo: {{tokens.contrast_target}} (WCAG AA + APCA Lc ≥ {{tokens.apca_target}})
- Motion durations: {{tokens.motion_durations}}
{{/if}}

## 6. Stack target

- **Framework**: {{stack.framework}}
- **Output preferito**: {{output_format_preference}}  <!-- "HTML/CSS standalone" | "React component (Tailwind)" | "Figma frame" -->
{{#if stack.charting}}
- **Charting library**: {{stack.charting}}
{{/if}}
{{#if stack.animation}}
- **Animation library**: {{stack.animation}}
{{/if}}

## 7. Cosa restituirmi

Per ogni schermata elencata in § 3:

1. **PNG export** ad alta risoluzione (≥ 2x) di OGNI stato richiesto (es. `lista-ordini__empty.png`, `lista-ordini__populated.png`).
2. {{output_format_preference_block}}  <!-- "Codice HTML/CSS in un file unico" | "Codice React (.tsx) con import Tailwind" | "Link Figma alla frame" -->
3. **Mappa di tracciabilità** — per OGNI elemento interattivo o iconografico
   della schermata, una riga: `elemento → funzione che lo motiva` (l'azione
   primaria / il dato di § 3 che serve), oppure marcalo **decorativo** se non ha
   comportamento. Qualunque elemento che non riesci a tracciare a una funzione,
   elencalo separatamente come *orphan da decidere* — così posso scegliere se
   dargli una funzione, renderlo decorativo o rimuoverlo, invece di
   implementarlo a vuoto.
4. **Note inline** su:
   - Componenti nuovi (non presenti nel registry sopra) che hai introdotto e perché.
   - Token deviation: qualunque colore/spacing/radius fuori dalla palette sopra, con motivazione.
   - Decisioni di layout non ovvie (es. priority sort, hierarchy visiva, density).

Quando hai pronto, dimmi i **path locali** dei file (PNG/HTML/TSX) — li importerò in questa sessione PRD per analisi e validazione contro il design system.

---

<!-- baldart-handoff: do-not-edit-manually -->
<!-- Generated from claude-design-handoff-prompt.template.md by /prd Step 3.0 -->
