# Recipe A — Landing site builder

# Recipe A — Landing site builder

**Outcome:** `index.html` + `logo.png` + `hero.png` + `ambient.mp3` + a
`brand.json` color/typography brief — enough for a one-page launch site you
can drop on Vercel / Fly / Railway.

**Approx cost:** ~$0.17 per run.

## Script

```bash
#!/bin/bash
set -euo pipefail

THEME="${1:-a minimalist coffee shop called Black Crow in Portland}"

# 1. Logo
LOGO=$(visa-cli generate image \
    "logo for $THEME, vector style, single color, 1:1" \
    --json --yes \
    | jq -r '.urls[0] // .filePath')

# 2. Hero image
HERO=$(visa-cli generate image \
    "hero photograph of $THEME, golden hour, 16:9" \
    --quality high --json --yes \
    | jq -r '.urls[0] // .filePath')

# 3. Brand brief (palette + typography) via LLM
echo "Pick a 5-color hex palette and 2 Google Fonts for: $THEME.
Return strict JSON: {\"palette\":[\"#hex\",...],\"headingFont\":\"...\",\"bodyFont\":\"...\"}" \
  | visa-cli run-llm --model or-claude-haiku --json --yes - \
  | jq -r '.text' > brand.json

# 4. HTML copy
echo "Write a 300-word landing page in semantic HTML for $THEME.
Hero image src is $HERO, logo src is $LOGO.
Embed colors from this brief as CSS vars: $(cat brand.json)" \
  | visa-cli run-llm --model or-claude-sonnet --json --yes - \
  | jq -r '.text' > index.html

# 5. Ambient audio for embedded autoplay
AMBIENT=$(visa-cli generate music \
    "warm acoustic instrumental, $THEME ambience, 60s loop" \
    --instrumental --json --yes \
    | jq -r '.urls[0] // .filePath')

echo "Site assembled:"
echo "  index.html  (HTML + inline brand vars)"
echo "  logo:    $LOGO"
echo "  hero:    $HERO"
echo "  ambient: $AMBIENT"
echo "  brand.json"
```

## Cost breakdown

| Step | Tool | Approx |
|---|---|---|
| Logo | `fal-flux-pro` | $0.04 |
| Hero | `fal-flux-pro-ultra` | $0.06 |
| Brand brief | `or-claude-haiku` | $0.01 |
| Copy | `or-claude-sonnet` | $0.04 |
| Ambient | `fal-ace-step-music` | $0.02 |
| **Total** | | **~$0.17** |

## Variations

- **Different brand voice** — change the system prompt: pipe through
  `--system @./prompts/brand-voice.md` on the LLM step.
- **Multi-page site** — loop the LLM step with different page-specific
  prompts and collect HTML for each.
- **No music** — drop the last step.