DYLA-ai: Skill for Claude Code

/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 promoted
• projects/{project}/context.md — brand tokens and direction may already be there
• projects/{project}/design.json — if it exists
• knowledge/ — brand or copy guidelines, if present

---

PHASE 2 — Q&A (BLOCKING)

Ask in a ```questions block. The format is EXACTLY this — a JSON array of objects with id (integer), q (the question) and options (1-4 plain strings; the UI always adds a free-text field, do not declare it). No other fields, no wrapper object:

```questions
[
  {
    "id": 1,
    "q": "What are these posts announcing?",
    "options": ["The opening", "A promotion", "An event"],
    "hint": "or describe the campaign in a line"
  },
  {
    "id": 2,
    "q": "Brand: I found teal #2a6f6f in the mockup theme — use it as primary?",
    "options": ["Yes, teal", "No — I will give you the palette"],
    "hint": "paste hex codes if you have them"
  },
  {
    "id": 3,
    "q": "Direction: what should these feel like?",
    "options": ["Clean and warm (local business)", "Bold poster (loud type, high contrast)", "Editorial (serif, calm, premium)"],
    "hint": "one adjective of yours beats three of mine"
  }
]
```