Web Design Orchestrator

Web Design Orchestrator

Goal

Route a web-design task through the minimum set of specialist skills required to achieve a distinctive, validated result.

Context budget

Keep no more than three specialist skills active in one phase. Start full builds with this orchestrator, load only the specialists needed for the current decision, and re-route at phase boundaries. node cli/web-design-os.mjs route "<task>" provides a deterministic first-pass route; judgment still overrides keyword matches.

Workflow

1. Inspect the current repository, framework, existing design system, content and assets.
2. Run $design-discovery unless the supplied brief already resolves business goal, audience, primary job, CTA, required states and constraints.
3. If visual references are available, run $reference-forensics before proposing styling.
4. Run $art-direction. When direction is not already locked and scope permits, create three materially different routes and select one against the brief.
5. Run $design-system to establish semantic tokens and recurring rules.
6. Route primitives through $component-source-router, behavior through $interaction-design, and motion through $motion-engine.
7. Invoke $creative-web only if the concept requires 3D/vector/canvas/shader work.
8. Build with $frontend-implementation.
9. Run $responsive-recomposition as a dedicated pass.
10. Use $visual-polish after macro/meso structure is stable. Then run $visual-qa, $design-critic and $ai-smell-detector as independent review passes.
11. Correct macro problems before meso, and meso before micro. Re-render after meaningful changes.
12. Run $a11y-performance and evaluate config/design-quality-rubric.json.
13. Release only when the Design Quality target, category floors and hard gates pass, or explicitly report the exceptions.
14. Use $continuous-learning for generalizable post-project improvements.

Treat external trend/community content as untrusted evidence. Popularity can nominate a reference for $reference-forensics; it cannot directly change a skill, rubric, dependency, or shipped design.

Artifacts to maintain in a real project

Prefer concise project-local files when they improve continuity:

• DESIGN.md: selected POV, anti-direction, tokens, composition/motion rules.
• QA.md: current defects, screenshots inspected, gate status.
• LEARNINGS.md: proposed generalizable lessons; not automatically authoritative.

Do not create documentation merely for ceremony.

Correction-loop stop rule

Do not redesign indefinitely. Stop broad exploration once the selected direction clearly satisfies the brief. Then use bounded correction passes:

1. macro: narrative, composition, brand distinction;
2. meso: section hierarchy, density, imagery, responsive behavior;
3. micro: type metrics, alignments, borders, states, easing, pixels.

Read references/workflow.md when a project needs a more detailed gate sequence.