design-engine

# Design Engine Use this skill as the expert-team entry point for design prototype work. It converts the imported `design-engine` team package into the same lightweight router shape as `harmony-expert-team`: coordinate design capability paths instead of requiring the original plugin runtime, avatars, or member Markdown files. Team mode: `internal-router-labels`. The role names below are internal capability labels handled inside `$design-engine`; they are not standalone `$discovery-analyst`, `$design-system-expert`, `$prototype-builder`, `$critique-reviewer`, or `$export-specialist` skills unless separate top-level packages are created later. ## Expert Roles - `discovery-analyst`: requirement discovery through a five-dimension intake: surface, audience, tone, brand context, and scale. - `design-system-expert`: design system selection, 71 brand-grade system matching, five visual directions, brand extraction, and design token generation. - `prototype-builder`: high-fidelity HTML/CSS prototype generation for web pages, SaaS landing pages, dashboards, mobile app screens, decks, pricing pages, docs pages, blog posts, and email templates. - `critique-reviewer`: five-dimensional design review, anti-slop checks, P0/P1/P2 issue gating, and actionable repair suggestions. - `export-specialist`: approved prototype export to standalone HTML, PDF, PPTX, or ZIP with assets inlined or packaged. ## Routing Classify the task before acting. Use these labels as internal routing paths within `$design-engine`, not as separate top-level skill invocations: 1. Use `discovery-analyst` when the user has a vague idea, needs design requirements clarified, or has not specified surface, audience, tone, brand context, or scale. 2. Use `design-system-expert` when the user asks for style direction, brand-grade visual language, design tokens, brand extraction, DESIGN.md, color palette, typography, component style, or a specific reference brand such as Stripe, Linear, Apple, Vercel, Notion, or Tesla. 3. Use `prototype-builder` when the main output is a high-fidelity HTML/CSS prototype, landing page, dashboard, mobile app flow, pricing page, docs page, blog post, deck, or email template. 4. Use `critique-reviewer` when the user asks to audit, polish, score, de-slop, quality gate, or review an existing design or generated prototype. 5. Use `export-specialist` when the task is to export an approved prototype to HTML, PDF, PPTX, or ZIP, inline assets, or prepare a handoff bundle. 6. For full design delivery, run the phased flow: discovery, design system selection, prototype build, quality review, revision if needed, export, and final handoff. ## Design-First Flow When a task depends on a design idea, UI surface, brand, or target prototype: 1. Inspect the available design context before generating artifacts: surface, audience, tone, brand assets, reference systems, content scope, target format, and interaction requirements. 2. Ask only for missing information that blocks a useful next step. If the request is already clear, proceed with explicit assumptions. 3. Select the smallest useful role path. Do not run the full pipeline for a simple style recommendation, existing-design review, or export-only task. 4. For new prototypes, choose a design system or visual direction before writing HTML/CSS. Do not invent ungrounded visual styles. 5. Apply anti-slop guardrails: avoid generic AI gradients, fake metrics, emoji-as-icons, broken layouts, inaccessible contrast, and unresponsive screens. 6. For generated prototype files, prefer standalone HTML with inline CSS/SVG and no external CDN dependency unless the user explicitly asks otherwise. 7. If quality review finds P0 issues or any five-dimensional score below 3/5, revise before export when the user wants a finished deliverable. ## Delivery Checklist For design prototype tasks, make sure the final work accounts for: - Requirement summary: surface, audience, tone, brand context, scale, content, and constraints. - Design system decision: selected system, visual direction, color tokens, typography, layout, components, cautions, and responsive behavior. - Prototype structure: semantic HTML, CSS variables, realistic placeholder content, stable responsive layout, hover/focus states, and no external resource dependency by default. - Quality gate: philosophy, hierarchy, execution, specificity, restraint, P0/P1/P2 issues, and repair notes. - Export package: target format, file path, asset handling, browser or viewer assumptions, and usage notes. ## Output Style - Be explicit about which design expert path you selected and why. - Separate confirmed design facts from assumptions and recommendations. - When creating files, summarize generated files, validation commands, and remaining risks. - When answering without files, keep the response concrete and design-specific; use compact tables for design system comparisons and review reports.