LENOVO LEXIANG · PC 5.0 DESIGN SYSTEM

# PC 5.0 设计规范
调用与发布说明

面向产品经理、设计师和研发的统一入口。所有高保真工作按“总规范 → Icon Board → 组件库 → 页面模板”四层顺序执行，当前基线包含 29 个正式 SVG、12 个可调用组件、3 个页面模板和 13 份专题资料。

下载规范 Skill 打开总规范 查看 Icon Board 查看组件库 选择页面模板

## 版本信息

版本 v0.11.1-stage
迁移日期 2026-07-31
Skill `lenovo-leai-pc-5.0-design`
规范 1 份
Icon 29 个
组件 12 个
模板 3 个
References 13 份

## PM 标准提示词

根据 XXXXXX 需求（自定义），使用 lenovo-leai-pc-5.0-design 规范 Skill，生成带产品功能交互 POC 页面。
调用边界

默认先在 Skill 目录外产出独立 POC。PM 和研发消费现有规范；设计师评审视觉与交互；只有经过评审且可复用的模式，才由设计系统负责人写回总规范、Icon、组件、模板和 references，并同步版本。

## 产品经理

PM
定义问题，复用体系

明确页面位置、任务流程、展示信息与验收目标，优先使用现有模板和组件完成 POC。

## 设计师

设
迭代 POC，治理复用

核对四层来源、完整状态和可访问性；评审通过后将稳定模式同步回设计系统。

## 研发

研
按规范实现

遵循模板结构、组件 DOM/class、正式资产和状态规则，不在业务代码中创造平行规范。

## 标准协作流程

01 明确需求

定义位置、用户流程、信息和验收目标。

02 选择四层资产

先规范，再 Icon、组件和最近模板。

03 独立 POC

保持 Skill 源文件不变，完成可操作页面。

04 联合评审

产品、设计、研发核对业务和实现风险。

05 治理发布

仅沉淀可复用内容，升版本并完整验收。

## 当前设计系统基线

29 Icon Board 正式 SVG
12 PC-位置-功能 组件
3 可直接打开的页面模板
13 有效专题 references

## 四层有效入口

01 · 规范层

### 完整设计规范

品牌、Token、页面家族、状态、模板地图和验收原则。

`design-system-complete.html` 02 · Icon 层

### Icon Board

29 个正式 SVG 的位置、用途、组件关联和误用限制。

`icon-board.html` 03 · 组件层

### 可调用组件库

12 个组件的 DOM、状态、交互、预览和复制片段。

`leai-component.html` 04 · 模板层

### 页面模板

全屏首页、商城导购和商品详情的页面级事实源。

`assets/templates/`

## 页面模板选择

页面模板 | 适用范围 | 核心结构与交互 | 入口
--- | --- | --- | ---
首页全屏对话 | 根路径欢迎、对话、历史与画廊 | 悬浮主导航、历史侧栏、首页输入框、聊天态、内容卡片 | 打开模板
个人及家庭商城 | `/shop-chat/`、`/b-chat/`、`/biz-chat/` | 左助手、广告横幅、吸顶分类、商品楼层、拖拽和悬停推荐 | 打开模板
商品详情购买 | 助手商城框架内商品详情页 | 商品图、AI 推荐、配置选择、价格操作、服务保障与评价总结 | 打开模板

## 12 个可调用组件

区域 | 组件 | 主要来源
--- | --- | ---
首页 / 聊天 | `PC-首页-首页新建对话输入框` `PC-聊天-聊天态输入框` `PC-首页-内容标签卡片` | 首页全屏模板
导航 / 侧栏 | `PC-侧栏-历史记录抽屉` `PC-顶部-悬浮主导航` `PC-侧栏-导购默认态智能体面板` `PC-侧栏-商品悬浮推荐提问卡` | 首页与商城模板
商城 | `PC-商城-顶部轮播广告横幅` `PC-商城-商品卡片` `PC-商城-商品悬停智能鼠标` | 商城导购模板
详情页 | `PC-详情页-商品购买信息区` `PC-详情页-用户评价智能总结` | 商品详情模板

## 团队资料

`team-usage-workflow.md` 多人协作 `acceptance-checklist.md` 交付验收 `design-system-governance.md` 四层治理 `release-and-governance.md` 版本发布

## 何时写回规范

- POC 已通过产品、设计和研发评审。
- 模式可复用，不是一次性业务特例。
- 状态、响应式、可访问性和正式资产齐备。
- 四层文件、references、入口与版本同步更新。

## 版本纪律

- 任何 Skill 内容更新都必须升级版本。
- 规范、模板头、SKILL、README 与治理资料版本一致。
- 发布前校验断链、旧名称、脚本语法和本地打开。
- 保留回滚包，不在业务页面临时修补规范。

## 允许与禁止

### 允许

- 在 Skill 目录外复制最近模板完成 POC。
- 组合现有组件形成新的业务流程。
- 设计师在 POC 中反复调整视觉和交互。
- 评审通过后由负责人统一治理和发布。

### 禁止

- 只按截图实现，跳过四层来源。
- 使用 `media/`、内联 SVG、base64 SVG 或文本符号替代 Icon。
- 以破图、空白或骨架屏作为默认商品状态。
- 在旧版本号下发布已变更内容。

## 发布前最低验收

- 29 Icon、12 组件、3 模板、13 references 计数一致。
- 所有显式本地路径和图片均存在。
- 无废弃 references、旧组件名和旧版本入口。
- Icon 没有 `media/`、内联或 base64 依赖。
- 交互状态、键盘操作、ARIA 和 AI 免责声明齐全。
- 三个模板可本地打开，关键脚本无语法错误。
- 版本已同步到入口、规范、模板和治理资料。
- 默认页面展示真实内容，不出现破图和占位异常。

已复制提示词