create-design

# Create Design Use this skill to begin a normal project-agent/human collaboration loop with additional collaborators and evidence gates. The project agent remains the coordinator and implementation owner. Human judgment remains authoritative for product intent, taste, workflow priority, and unresolved ambiguity. ## Runtime Entry Point Start a design session with: ```bash skills/create-design/run.sh "redesign PDF Lab labeling UX" ``` Dry-run artifact generation: ```bash skills/create-design/run.sh --dry-run "redesign PDF Lab labeling UX" ``` The runtime creates `.create-design/runs/<timestamp>-<slug>/` containing: - `request.json` — normalized request and mode. - `best-practices-routing.json` — applicable skill routing. - `collaboration-plan.json` — ordered collaborator loop and evidence gates. The runtime starts the session artifact trail; it does not replace the project agent, `plan-iterate`, reviewers, or deterministic validation. ## Collaboration Model Treat the process as: ```text project agent ↔ human project agent ↔ memory ↔ dogpile ↔ ask/scillm ↔ interview ↔ ux-lab ``` Role boundaries: - **Project agent**: owns plan state, code edits, artifacts, validation, and handoff. - **Human**: owns product intent, acceptance tradeoffs, and subjective design judgment. - **Memory**: recalls prior lessons before work and stores final decisions after work. - **Dogpile**: discovers fresh external references when needed. - **Ask/scillm**: provide designer, researcher, VLM, and reviewer collaborators. - **Interview**: gives the human a larger HTML/TUI review surface for images and structured choices. - **Ux-lab**: implements approved design direction in the React workbench; it is not the design authority. ## Required Loop 1. Run `memory recall` for prior UX lessons, accepted/rejected patterns, personas, and related screenshots. 2. Apply `best-practices-design` to classify the surface and select applicable best-practices skills. 3. Use `dogpile` only when fresh external references, competitor examples, or current design precedents are needed. 4. Use `ask` or `scillm` for interactive designer/researcher/reviewer collaborators. 5. Create a design brief and, when needed, disposable mockups before production React. 6. Launch `interview --mode html` when the human needs image comparison, mockup review, or multi-question feedback. 7. Implement in `ux-lab` only after the design direction is sufficiently accepted. 8. Verify production UI with fresh browser screenshots/CDP and applicable deterministic checks. 9. Run `review-design` or an ask/scillm reviewer gate over replayable artifacts. 10. Store accepted decisions, rejected alternatives, reviewer verdicts, and artifact paths back to `memory`. ## Best-Practices Routing Always route design work through `best-practices-design`, then load applicable specialized skills: | Condition | Skills | | --- | --- | | Product UX, workflow, page purpose, IA | `best-practices-design` | | Frozen screenshot/mockup/external design implementation | `best-practices-codex-design` | | React component or route implementation | `best-practices-react` | | Visual polish, typography, motion, hit areas | `make-interfaces-feel-better` | | D3/SVG charts, graphs, data visualizations | `best-practices-d3` | | Architecture maps, workflow visuals, proof sheets, infographics | `best-practices-infographic` | | Skill/workflow contract design | `best-practices-skills` | If no specialized skill applies, record the non-applicability rationale in the design brief. ## Interview Auto-Launch Policy Use `interview` instead of plain chat when: - multiple mockups or screenshots must be compared; - the human needs to inspect images; - the question has more than one independent decision; - user feedback needs structured options plus free-form override; - the agent is tempted to infer taste or workflow judgment; - reviewer output conflicts with human-visible artifacts. Ask directly in chat only for small binary choices or short clarifications. ## Plan-Iterate Integration Use `plan-iterate` when the design work must produce durable files, code, runtime behavior, or acceptance evidence. A design phase should record: - compact skill context with all collaborators and role boundaries; - implementation, validation, and review plans for each round; - mockup/image artifacts and interview responses when applicable; - screenshot/CDP artifacts for production UI; - reviewer receipts and deterministic validation logs; - memory keys or progress-context mirrors for repeated reviews. Do not mark a design phase accepted from model prose or human chat alone. The controller needs deterministic artifacts appropriate to the surface. ## Failure Rules Stop solo iteration and escalate when: - the same visual/design blocker survives two focused loops; - the human disproves an agent's design-quality claim with a screenshot or counterexample; - a dashboard-theater concern remains unresolved; - real data/artifact sources are missing for a production route; - reviewers disagree on a material product or visual issue. Escalation means using `dogpile`, `ask`, `scillm`, or `interview` with the replayable artifacts, not continuing unbounded local patching. ## Final Handoff Requirements For a finished design workflow, report only what is backed by artifacts: - design request/session path; - memory recall and learn artifacts or explicit skip reason; - dogpile report path or not-applicable rationale; - mockup paths and interview response path if used; - ux-lab files changed, manifest updates, and validation commands; - screenshot/CDP paths and reviewer verdicts; - unresolved caveats. If any required proof is missing, mark the result `pending` or `blocked`, not complete.