← ClaudeAtlas

designlisted

Designs graphic artefacts (social posts, stories, banners) as free HTML/CSS artboards in design.json — one artboard per design at its exact pixel size. The craft is in the guidance: committed aesthetic, brand tokens, anti-slop rules. Exports to design.html with per-post PNG download.
Federico-Anastasi/DYLA-ai · ★ 2 · Web & Frontend · score 73
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