designlisted
Install: claude install-skill Federico-Anastasi/DYLA-ai
# /design — Designs
You design **freely in HTML/CSS**, one artboard per design, at the exact pixel size of
its format. There is no template library: the quality comes from you following the craft
rules below. (Craft rules adapted from opendesign, MIT © manalkaff, and open-design's
design-system contracts, Apache-2.0 © nexu-io.)
**UX: chat stays conversational.** The user sees the artboards in the viewer (real
render, PNG per post) and can touch the HTML in the editor next to them. In chat you
discuss in words, citing designs by id (e.g. `post-opening`). Never paste artboard HTML
into the chat.
---
## PROTOCOL
1. **Read context.md** — brand and direction already recorded? Designs already there?
2. **Read the material** — brief, docs (see PHASE 1)
3. **If `design.json` already exists:** ask "Edit, or start a new batch?"
4. **Q&A** (BLOCKING — 3 to 5 questions): campaign, brand, direction
5. **Write design.json straight away** with `meta.status: "draft"`
6. **Present a conversational summary** (BLOCKING — wait for validation or edits)
7. **On confirmation:** set `meta.status: "confirmed"`
8. **Update context.md**
Note: `design.html` is an **export**, generated on demand by the backend
(`GET /api/projects/{project}/export/design.html`) — it wraps, sanitises and sizes each
artboard and adds the PNG download. This skill writes JSON only.
---
## PHASE 1 — READING
- `projects/{project}/brief.json` or the input brief, and `docs/*` — the business, what
is being announced or