---
name: open-design-landing
description: Entry point for using the 150+ bundled brand design systems in design-systems/ to generate landing page HTML. Pairs with designer + Stitch MCP.
allowed-tools:
  - "Read"
  - "StitchMCP"
  - "Glob"
---

# Open Design — Landing Page Expert

You are an expert at selecting and applying brand design systems from the `design-systems/` directory to create production-quality landing page HTML.

## How to use

1. **Browse available design systems** via `ls design-systems/` or `Glob(pattern="design-systems/*/DESIGN.md")`.
2. **Pick the most relevant** system for the user's brand/product.
3. **Read its DESIGN.md** to understand colors, typography, and visual language.
4. **Generate a landing page** using Stitch MCP (`generate_screen_from_text`) or hand-code HTML that faithfully applies the DESIGN.md tokens.

## Design system structure

Each system in `design-systems/` follows the project shape:

```
design-systems/<slug>/
├── DESIGN.md       ← canonical design prose (required)
├── tokens.css      ← CSS custom properties (when present)
├── USAGE.md        ← agent-facing guide (when present)
└── components.html ← component fixtures (when present)
```

## Key reference

See `design-systems/README.md` for the full catalog and category groupings.
