website-design-system-architect · git:20260905.7f6ea1e · 2026-09-05 · sha256 d969905280a13f95

website-design-system-architect git:20260905.7f6ea1eA

Immutable. This exact content is served forever at /api/v1/blob/d969905280a13f95.

---
name: website-design-system-architect
description: Create or evolve an implementation-agnostic website design system from existing-site evidence or new-site brand and industry research. Use to compare text directions, validate one selected baseline with a compact Design Board, or update shared visual rules before page/module design. Do not use for page layouts, full-page mockups, module design, Elementor controls, or production implementation.
---

# Website Design System Architect

先提出文字方向,再把用户选中的方向整理成临时规则草稿;用单方向 Design Board 验证规则,确认后才写入可继续演进的正式 Design System。

## 标准生命周期

```text
行业与品牌输入
→ 2–3 个文字方向
→ 用户选择一个方向
→ 对话中形成 Design System 规则草稿
→ 生成单方向 Design Board
→ 设计师视角自查并自动修正一轮明确问题
→ 用户查看、微调并确认
→ 写入 Active Baseline Design System
→ 一致性与可用性自查并自动修正一轮明确问题
→ 页面实践中按需受控更新
```

临时规则草稿只保留在对话中,不创建 `design-system-draft.md`。Design Board 是规则的可视化验证工具,不是页面设计稿、模块方案或组件大全。

统一使用名称 **Design Board**;为兼容既有项目,文件路径仍保留为 `设计稿/design-system/style-board.html`。

## 路由

1. 先判断任务:
   - **New Site**:无可靠现站视觉基线,读取 [New Site 工作流](references/new-site-workflow.md)。
   - **Existing Site**:已有线上站、主题或页面视觉,读取 [Existing Site 工作流](references/existing-site-workflow.md)。
2. 涉及网页证据采集时,读取 [共享浏览器研究协议](references/browser-research.md)。
3. 两条路径都遵守 [Design System 标准](references/design-system-standard.md)。
4. 生成 Design Board 时读取 [B2B Design Board 默认模式](references/design-board-pattern.md)。
5. 交付 Design Board 或 Active Baseline 前读取并执行 [设计师自查](references/design-review.md)。

## 强制门禁

1. New Site 同行研究名单未经用户确认,不开展深度视觉研究。
2. 未提供并确认文字方向,不生成 Design Board。
3. 用户未选择方向,不整理临时规则草稿。
4. Design Board 只展示一个已选方向,只验证基础规则与基础组件。
5. 用户未确认 Design Board,不生成正式 `design-system.md`。
6. 正式文件标记为 `Active Baseline`,不是不可修改的终稿。

设计师自查不是门禁状态或实现 QA:不检查响应式、溢出、浏览器兼容与生产实现,也不输出验收等级。它只用于发现设计语言、组件示例与正式规则中的明显瑕疵;明确问题最多自动修正一轮,主观方向仍交给用户决定。

## 职责边界

- 本 Skill 定义基础视觉语言、基础组件规则,以及正式 Design System 中的平台中立媒体、响应式、动效与可访问性基线。
- `website-ui-architect` 负责页面构图、模块表达、完整模块、页面级视觉节奏,以及模块 HTML 与整页 HTML 的实现 QA。
- 实现 Skill 负责平台字段、模板、CSS、JS 和验收。
- Form 默认由插件负责,不进入首版基础组件规则;只有用户明确要求统一定制时才补充。
- 禁止在本文档中写平台专属控件、Widget slug、PHP 类名或 CSS selector。