# Design System Governance

This reference defines how the Lenovo Lexiang design-system assets work together. Use it when maintaining the skill, adding templates, adding components, refreshing icon usage, or checking whether a generated page can be reproduced accurately.

## Four-Layer Model

1. `standards/design-system-complete.html` is the full-site standard. It defines rules, tokens, page families, component categories, state requirements, and validation expectations.
2. `assets/icons/icon-board.html` is the icon layer. It registers 29 approved SVG files with categories, paths, locations, related components, snippets, and misuse guards.
3. `assets/component/leai-component.html` is the component layer. It defines 12 callable components with `PC-位置-功能` names, DOM/class expectations, states, interactions, and copyable snippets.
4. `assets/templates/*.html` files are the page-template layer. They define full-page composition, cross-component layout, route behavior, interaction chains, local-open fallbacks, and screenshot validation baselines.

Do not use these layers independently for high-fidelity work. Accurate pages need all four layers.

## Team Governance

For team usage, use `README.md`, `team-usage-workflow.md`, `acceptance-checklist.md`, and `release-and-governance.md` together.

The default team rule is:

1. PM and design use existing templates, components, and icons to create POC first.
2. The skill is not changed during initial POC exploration.
3. After PM, design, and engineering review, only reusable patterns are added back to the skill.
4. The design-system owner is responsible for merging official skill updates.

## Required Calling Order

When generating, reviewing, or updating a page:

1. Identify the page family in `standards/design-system-complete.html`.
2. Read the relevant foundation references: `pc-design-system.md`, `layout-rules.md`, `component-patterns.md`, `interaction-states.md`, and `content-voice.md`.
3. Choose icons from `assets/icons/icon-board.html`; do not invent or redraw icons if an approved SVG exists.
4. Choose reusable components from `assets/component/leai-component.html`.
5. Start from the closest page template in `assets/templates/`.
6. Check page-specific references such as `fullscreen-dialog-framework.md`, `shop-chat-page-template.md`, and `commerce-detail-and-home-rules.md`.
7. Verify against the template checklist and current live resource versions when production accuracy is required.

## Template Requirements

Every page template must include a header comment with:

- Source route or intended route.
- Capture date or baseline date.
- Inlined or linked CSS/JS versions when relevant.
- Role in the design system.
- Upstream references.
- Component dependencies.
- Icon dependencies.
- Validation checklist.
- Version note that tells the user whether it is current or an older baseline.

## Component Requirements

Every component added to `leai-component.html` should include:

- Component name in `PC-位置-功能` format.
- Applicable pages or templates.
- Required icons from `icon-board.html`.
- Required tokens from `pc-design-system.md`.
- DOM/class snippet.
- Default, hover, active, focus, disabled, loading, empty, and error states where applicable.
- Accessibility requirements.
- Prohibited uses.

## Icon Requirements

Every icon in `icon-board.html` should map to:

- File name.
- Category.
- Chinese label.
- Intended locations.
- Related components.
- Whether it should be used as `<img>` or CSS mask.
- Misuse guard when the icon is restricted to a specific control.

## Current Critical Templates

- `home-fullscreen-dialog-template.html`: root/home fullscreen `.lxfd`.
- `shop-chat-page-template.html`: `/shop-chat/`, `/b-chat/`, `/biz-chat/` assistant-commerce shell.
- `product-detail-page-template.html`: product detail inside the assistant-commerce shell.

## Recommended Expansion

Add templates or component sections for:

- Brand page.
- Member center.
- Cart and orders.
- Business customization.
- Business member benefits.
- Business store map/list.
- Enterprise solution.
- Enterprise materials center.
- Product comparison table.
- Transactional modal standard.

## Version Discipline

Templates are not automatically current. Before exact production reproduction, verify the live route and CSS/JS query strings. If production has moved forward, refresh the template or clearly mark it as an older baseline. Do not use an old template to reintroduce deprecated DOM, old portal home behavior, or previous card variants.

Follow `release-and-governance.md` for version numbers, release notes, online sync, and rollback. Any skill content update must bump the version before packaging or online sync; publishing changed content under an old version is invalid. Current stage label: `v0.11.1-stage`.