AI UP LAB / AI 协作与验收AI & review / v1.2.1
设计验收与维护Design review & maintenance
把品牌一致性、交互完整性和内容可靠性变成可复核的验收项。Make brand consistency, interaction completeness, and content reliability reviewable.
01 / LIVE SPECIMEN
实际示例Working example
示例 / 可操作的状态标有按钮EXAMPLE / Interactive states have controls
尚未检查;仅在实际验证后勾选。Not checked. Tick only after verifying.
02 / STRUCTURE & RULES
组成与使用规则Anatomy & usage
- 01基础:Logo、语义色彩、字号与间距。Foundations: logo, semantic color, type, and spacing.
- 02交互:焦点、状态、键盘、恢复路径与收藏。Interaction: focus, states, keyboard, recovery, and saved items.
- 03内容:来源、日期、双语与真实用途。Content: sources, dates, both languages, and real purpose.
- 04维护:版本、共用参数、代码映射与静态导出同步。Maintenance: synchronize versions, shared tokens, code mappings, and exports.
必须遵守Required behavior
- 每个问题附具体页面、规则 id 和可复现证据。Attach a page, rule ID, and reproducible evidence to each finding.
- 先解决阻断与主要问题,再调整视觉细节。Resolve blocking and major findings before polishing.
- 检查通过只覆盖实际执行的项目,不推导完整合规认证。A pass covers executed checks only and does not imply full certification.
- 改动公共规则时同步规则文本、映射和代码示例。When shared rules change, update prose, mappings, and code examples together.
推荐做法Do
“390px 下分类首卡可见,按钮可键盘触发”,附截图或检查结果。At 390px, the first card is visible and actions are keyboard-operable, with evidence.
避免做法Avoid
只写“看起来不错”或把所有检查默认标记为通过。Write only looks good or mark all checks as passed by default.
03 / PARAMETERS
参数与状态Parameters & states
| 参数Parameter | 取值Value | 用法Usage |
|---|---|---|
severity.blocking | broken / misleading | 无法完成任务、内容错误、链接失效或关键操作不可达。Broken tasks, incorrect content, dead links, or inaccessible core actions. |
severity.major | hierarchy / states | 首屏内容被挤走、关键状态缺失、手机严重溢出。Buried content, missing key states, or major mobile overflow. |
severity.polish | consistency | 局部间距、非关键文案和轻微视觉差异。Local spacing, non-critical wording, and minor visual inconsistencies. |
待检查Not checked
没有运行就保留待检查,不预先勾选。Keep items unchecked until verified.
发现问题Issue found
记录证据、严重度和修复动作。Record evidence, severity, and the fix.
已验证Verified
记录实际验证范围,改动后复查相关项。Record the verified scope and recheck affected items after changes.
代码映射与 AI 使用Code mapping & AI use
先读取本项规则,再通过下列映射找到已有实现。调整共用组件时,同步检查依赖项。Read these rules, then locate the existing implementation below. Check dependencies when changing shared components.
实现片段Implementation fragment
组件片段需放入相应 Astro 文件上下文,按代码映射补齐导入。Place component fragments in the corresponding Astro context and complete imports from the code mappings.
npm run build
# Then exercise affected pages in both themes and languages.
# Capture evidence at 320, 390, 768, and 1440 CSS px.相关规则Related rules
给 AI 的完整规则文本Full rules for AI
# 设计验收与维护 / Design review & maintenance ID: review Version: 1.2.1 把品牌一致性、交互完整性和内容可靠性变成可复核的验收项。 Make brand consistency, interaction completeness, and content reliability reviewable. ## Anatomy - 基础:Logo、语义色彩、字号与间距。 Foundations: logo, semantic color, type, and spacing. - 交互:焦点、状态、键盘、恢复路径与收藏。 Interaction: focus, states, keyboard, recovery, and saved items. - 内容:来源、日期、双语与真实用途。 Content: sources, dates, both languages, and real purpose. - 维护:版本、共用参数、代码映射与静态导出同步。 Maintenance: synchronize versions, shared tokens, code mappings, and exports. ## Parameters - severity.blocking: broken / misleading 无法完成任务、内容错误、链接失效或关键操作不可达。 Broken tasks, incorrect content, dead links, or inaccessible core actions. - severity.major: hierarchy / states 首屏内容被挤走、关键状态缺失、手机严重溢出。 Buried content, missing key states, or major mobile overflow. - severity.polish: consistency 局部间距、非关键文案和轻微视觉差异。 Local spacing, non-critical wording, and minor visual inconsistencies. ## Rules - 每个问题附具体页面、规则 id 和可复现证据。 Attach a page, rule ID, and reproducible evidence to each finding. - 先解决阻断与主要问题,再调整视觉细节。 Resolve blocking and major findings before polishing. - 检查通过只覆盖实际执行的项目,不推导完整合规认证。 A pass covers executed checks only and does not imply full certification. - 改动公共规则时同步规则文本、映射和代码示例。 When shared rules change, update prose, mappings, and code examples together. ## States - 待检查 / Not checked: 没有运行就保留待检查,不预先勾选。 Keep items unchecked until verified. - 发现问题 / Issue found: 记录证据、严重度和修复动作。 Record evidence, severity, and the fix. - 已验证 / Verified: 记录实际验证范围,改动后复查相关项。 Record the verified scope and recheck affected items after changes. ## Do / Avoid - Do: “390px 下分类首卡可见,按钮可键盘触发”,附截图或检查结果。 / At 390px, the first card is visible and actions are keyboard-operable, with evidence. - Avoid: 只写“看起来不错”或把所有检查默认标记为通过。 / Write only looks good or mark all checks as passed by default. ## Code mapping - scripts/verify-build.mjs: 构建与规范数据检查 / Build and design-data verification ## Dependencies foundations, layout, buttons, resource-cards, feedback ## Acceptance - 检查记录能对应具体页面与规则。 Review records identify the page and rule. - 重要问题已关闭,剩余问题明确说明。 Important findings are resolved and remaining ones are explicit. - 构建通过,相关交互已实际操作。 The build passes and affected interactions were exercised. ## Implementation example ``` npm run build # Then exercise affected pages in both themes and languages. # Capture evidence at 320, 390, 768, and 1440 CSS px. ``` ## Reference Method reference: https://tmall-design.com/#blog/building-design-wiki-for-aigui Rules, parameters, examples, and branding in this file are specific to AI UP LAB.
交付前检查Before delivery
- 检查记录能对应具体页面与规则。Review records identify the page and rule.
- 重要问题已关闭,剩余问题明确说明。Important findings are resolved and remaining ones are explicit.
- 构建通过,相关交互已实际操作。The build passes and affected interactions were exercised.
方法参考与适用边界Reference & scope
参考 Tmall Design 将规则、映射与代码关联的组织方法。本页参数、示例和品牌资产为 AI UP LAB 自身规范。Inspired by Tmall Design’s organization of rules, mappings, and code. Parameters, examples, and brand assets here are specific to AI UP LAB.
Tmall Design ↗