baoyu-design-prototyping

name	baoyu-design-prototyping
description	Create and verify high-fidelity HTML prototypes, wireframes, interaction explorations, and design-system previews. Use when the requested deliverable is a prototype or HTML design artifact rather than production application code or a raster image.

Baoyu Design Prototyping

This is a project-local, Codex-safe adaptation of JimLiu/baoyu-design. It preserves the upstream HTML design methodology while keeping this project's source stack, image pipeline, and approval gates authoritative.

Route First

Classify the requested artifact before writing:

• wireframe: rapid structural exploration with 3-5 distinct approaches.
• prototype: high-fidelity, interactive HTML for a concrete flow or screen family.
• design-system: token, component, and state preview bound to the project design contract.
• implementation: stop using this Skill and route to frontend-development plus the selected production UI Profile.
• raster: stop using this Skill and route to the project image orchestration workflow.

Run scripts/util-select-agent-profiles.sh with --artifact wireframe|prototype|design-system when available. Load only the matching reference:

• Every artifact: references/html-craft-standards.md
• Wireframe or high-fidelity prototype: references/html-prototype-workflow.md
• Design-system authoring or preview: references/design-system-binding.md
• Every HTML deliverable: references/browser-verification.md

Hard Boundaries

• Write prototypes only under docs/design/prototypes/<slug>/; never scatter them in the repository root.
• Read existing code, docs/design/DESIGN.md, tokens, components, copy, and states before inventing a new visual language.
• Existing brand and design-system rules outrank upstream examples and automatic suggestions.
• Prototype HTML is review material, not production implementation. Do not replace the project's framework, build tools, dependencies, or source structure.
• Do not use HTML, SVG, canvas, or screenshots as substitutes for required raster assets. Formal README images still use the project image pipeline and Codex-native imagegen.
• Prefer self-contained HTML/CSS/JavaScript or existing project dependencies. External CDN/runtime dependencies require explicit approval and must be documented.
• Do not invoke upstream installers, provider hooks, Figma/Canva publishing, external AI APIs, paid services, or global configuration.
• Ask one focused confirmation round for scope, fidelity, design context, reference products, and variation count; do not repeat choices already recorded in the project design contract.
• Preserve all prototype variants until the user chooses. Record approval separately; never infer approval from file existence.

Completion

Serve the prototype over localhost, inspect desktop and mobile layouts, exercise primary interactions and error states, check the browser console, and record the result in prototype-manifest.json. Only a user-reviewed artifact may be marked approved; implementation remains a separate task and gate.