phase-design 設計階段技能（融合版）

name: phase-design description: 將PRD文件轉化為標準化設計方案，輸出三種格式（MD/JSON/YAML）供下游使用

技能定位

本技能負責設計階段，將需求文件（PRD）轉化為結構化的設計方案，採用分層架構（L4佈局層 + L5模組層），輸出三種獨立格式供下游消費。

上游輸入： - phase-requirement 輸出的 PRD 文件.md - 或使用者直接提供的系統需求描述

下游輸出： - 設計方案.md（詳細設計描述） - 設計方案.json（DSL JSON資料結構） - 設計引數.yaml（SPEC YAML引數配置）

分層架構

本技能採用 L4 + L5 兩層架構：

┌─────────────────────────────────────────────────────────┐
│                     L4-Layouts-designer                  │
│                   佈局層 - 頁面級設計                      │
├─────────────────────────────────────────────────────────┤
│  • 7種標準佈局模式（LayoutPage-1~7）                      │
│  • 20種頁面型別規範                                       │
│  • 元件令牌系統（component_tokens.md）                    │
│  • 柵格系統與響應式設計                                    │
└─────────────────────────────────────────────────────────┘
                            ↓
┌─────────────────────────────────────────────────────────┐
│                    L5-Module-designer                    │
│                   模組層 - 區域級設計                      │
├─────────────────────────────────────────────────────────┤
│  • BEM命名規範                                           │
│  • 四層容器結構（Page→Section→Block→Element）            │
│  • 模組HTML模板庫（module-templates.md）                 │
│  • 欄位描述規範                                          │
└─────────────────────────────────────────────────────────┘

工作流程

Step 1: 提取需求

輸入來源： 1. PRD 文件（含頁面清單、模組欄位、操作互動） 2. 使用者直接提供的系統需求

提取要素： - 系統型別（CRM/OA/ERP等） - 頁面清單 - 功能模組與欄位 - 操作互動需求

Step 2: 選擇佈局（L4）

7種標準佈局：

頁面型別對映：

Step 3: 規劃模組結構（L5）

BEM命名規範：

Block（模組）         → .user-module
Block__Element（元素） → .user-module__header
Block--Modifier（修飾）→ .user-module--collapsed

四層容器結構：

Page（頁面層）
  └── Section（區域層）
        └── Block（模組層）
              └── Element（元件層）

標準區域劃分： 1. 頭部區域（Header Section）：頁面標題、麵包屑、全域性操作 2. 篩選區域（Filter Section）：搜尋、篩選條件、批次操作 3. 內容區域（Content Section）：資料表格、卡片列表、詳情資訊 4. 操作區域（Action Section）：分頁、底部按鈕、懸浮操作

Step 4: 選擇元件

元件令牌系統：位於 L4-Layouts-designer/references/component_tokens.md

令牌格式：[類別]::[元件]::[變體]

元件令牌與BEM的關係： - 元件令牌描述「是什麼」元件（語義層面） - BEM命名描述「在哪裡」放置（位置層面） - 解耦原則：令牌不強制繫結特定BEM容器，可靈活放置

Step 5: 生成三種輸出

輸出1：設計方案.md - 詳細的設計描述文件 - 按區域劃分的設計詳情 - 人類可讀的設計說明

輸出2：設計方案.json - DSL JSON資料結構 - 機器可解析的設計資料 - 供自動化工具使用

輸出3：設計引數.yaml - SPEC YAML引數配置 - 設計系統Token值 - 供前端工程化使用

Python引擎使用（保守模式）

保留Python引擎僅用於輔助查詢，精簡後的命令：

核心原則

1. 元件令牌與BEM解耦

• 令牌描述元件語義，不繫結特定容器
• BEM描述佈局位置，靈活容納各種令牌
• 對映表提供參考，不限制實際使用

2. 三種輸出職責分明

• MD → 人類可讀的設計文件
• JSON → 機器可解析的資料結構
• YAML → 工程化的引數配置

3. 分層設計清晰

• L4 負責頁面級佈局規劃
• L5 負責區域級模組設計
• 各層職責單一，邊界清晰

4. Python引擎保守使用

• 僅用於快速查詢和輔助決策
• 不用於生成SPEC或驗證邏輯
• LLM承擔主要的分析和生成工作

知識庫結構

phase-design/
├── SKILL.md                          # 本檔案（主入口）
├── design_engine.py                  # Python引擎（精簡版）
│
├── L4-Layouts-designer/              # 佈局層
│   ├── skill.md                      # L4技能定義
│   └── references/
│       ├── 00-page-layouts.md       # 7種標準佈局
│       ├── 01-dashboard.md          # Dashboard規範
│       ├── 02-list-table.md         # 列表頁規範
│       ├── ...                      # 其他頁面型別
│       ├── component_tokens.md      # 元件令牌系統（來自M版）
│       └── layout-grid.md           # 柵格系統
│
├── L5-Module-designer/               # 模組層
│   ├── skill.md                      # L5技能定義
│   └── references/
│       ├── bem-naming.md            # BEM命名規範
│       ├── module-structure.md      # 四層容器結構
│       ├── module-templates.md      # 模組HTML模板庫（新增）
│       └── module-best-practices.md # 最佳實踐
│
└── templates/                        # 輸出模板
    ├── design-output-template.md    # MD輸出模板
    ├── dsl-json-template.json       # JSON輸出模板
    └── spec-yaml-template.yaml      # YAML輸出模板

使用示例

場景1：來自PRD文件

輸入：PRD文件.md（含頁面清單、模組欄位）

↓

Step 1: 提取頁面清單
- 客戶列表頁
- 客戶詳情頁  
- 商機看板

Step 2: L4選擇佈局
- 系統型別：CRM
- 推薦佈局：LayoutPage-2（側邊欄+頂欄+內容區）
- 頁面型別：列表頁(02) + 詳情頁(10) + Dashboard(01)

Step 3: L5規劃模組
- 頭部區域：頁面標題 + 麵包屑
- 篩選區域：搜尋框 + 篩選條件 + 新建按鈕
- 內容區域：資料表格（客戶列表）
- 操作區域：分頁器

Step 4: 選擇元件令牌
- `GEN::Button::primary` → 新建客戶按鈕
- `ENT::Input::search` → 搜尋框
- `DISP::Table::selection` → 客戶列表表格

Step 5: 生成三種輸出
- 設計方案.md（按區域劃分）
- 設計方案.json（DSL結構）
- 設計引數.yaml（SPEC引數）

場景2：使用者直接需求

輸入："做一個簡單的客戶管理系統"

↓

Step 1: 快速推斷需求
- 系統型別：CRM
- 核心頁面：客戶列表、客戶詳情、Dashboard

後續步驟同上...

輸出規範

MD輸出規範

按以下結構組織（詳見 templates/design-output-template.md）：

# [頁面名稱] 設計方案

## 頁面資訊
## 頁面描述
## 整體頁面佈局結構
## 區域詳細設計（按區域劃分）
### 區域1: [區域名稱]
### 區域2: [區域名稱]
...
## 元件令牌彙總
## 設計規範
小蔥技能站7w4.net每天更新，海量AI技能等你發現。

JSON輸出規範

DSL JSON結構（詳見 templates/dsl-json-template.json）：

{
  "version": "1.0",
  "pages": [{
    "id": "",
    "layout": "",
    "sections": [{
      "id": "",
      "components": []
    }]
  }]
}

YAML輸出規範

SPEC YAML引數（詳見 templates/spec-yaml-template.yaml）：

Global:
  layout: ""
  theme: {}
Regions: []
Modules: []

注意事項

1. L3模式層暫不關聯：當前版本暫不引用L3的模式知識庫，專注於L4+L5的落地實現
2. L6頁面層已取消：不再維護獨立的L6頁面知識庫，頁面規範整合到L4
3. 令牌與BEM解耦：元件令牌描述語義，BEM描述位置，兩者獨立
4. 三種輸出分開：MD/JSON/YAML三種格式獨立輸出，不融合

這個 Skill 質量較好，專注於把需求文件變成設計方案。它把頁面設計拆成佈局層和模組層兩層來講，配有詳細的元件規範和示例，輸出格式也很完整。不過檔案數量多、層級深，文件內容偏長，初次使用可能需要花時間熟悉。適合有一定基礎的開發者使用。