---
name: qierkang-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."
license: "MIT"
metadata:
  decimalai-skill-id: "c1ae1f62-bcec-4a3f-a23b-e4927e623419"
  decimalai-version-id: "103c57f9-14f1-4bf9-b2e9-fbcc00584a97"
  decimalai-version: "3"
  decimalai-body-sha256: "3dfbe9032786c41f02fc9c63e98ecb41a9837fbcbb2ef7a0af698eeff3459e18"
  decimalai-name: "qierkang/baoyu-design-prototyping"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "design-media"
  decimalai-source: "https://app.decimal.ai/s/qierkang-baoyu-design-prototyping@3/SKILL.md"
---
# 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/架构与设计/原型/<slug>/`; never scatter them in the repository root.
- Read existing code, `docs/架构与设计/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.