Atomic Page Builder
從現有元件組合頁面。此技能負責組裝；atomic-design 負責建立。
規則
| 執行 | 不執行 |
|---|---|
| 從設計系統匯入元件 | 建立新的原子、分子或有機體 |
| 從設計來源（Figma、規格、模型圖）取得佈局值 | 猜測網格、間距或內距 |
| 使用從代號讀取的作用域樣式 | 硬編碼數值（#333、24px） |
| 完全符合設計，包括回應式行為 | 四捨五入數值或添加「改進」 |
| 僅使用專案的元件庫 | 引入專案未使用的外部 UI 庫 |
移交至 atomic-design
在以下情況切換至 atomic-design：
- 所需的原子、分子或有機體不存在；
- 需要新的代號；
- 設計中的代號數值已變更，必須先更新。
工作流程
- 取得佈局規格。 如果存在設計來源（透過 MCP 的 Figma、規格、螢幕截圖），從中提取網格、間距、內距、邊距和中斷點。如果不存在，要求提供一個或明確說明假設。記錄頁面特定的覆寫。
- 盤點。 列出專案已具備的元件（原子、分子、有機體、模板）及其屬性。
- 差距分析。 將頁面的每個區域對應到現有元件。列出任何不匹配的部分。
- 建立或停止。
- 一切存在：組合頁面，與規格完全一致。
- 缺少某些內容：停止，報告差距，並切換至
atomic-design。
- 驗證。 在行動裝置、平板和桌面寬度下與設計進行比較。
頁面模式
/** 儀表板頁面。佈局來源：<設計連結或節點 ID> */
import { DashboardLayout } from '@/design-system/templates/DashboardLayout';
import { Card } from '@/design-system/molecules/Card';
import { DataTable } from '@/design-system/organisms/DataTable';
import styles from './Dashboard.module.css';
export const Dashboard = () => (
<DashboardLayout>
<div className={styles.statsGrid}>
<Card title="收入">$12,450</Card>
</div>
<DataTable columns={columns} data={data} />
</DashboardLayout>
);
.statsGrid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-4);
}
@media (min-width: 768px) {
.statsGrid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-6); }
}
請根據專案調整匯入路徑和樣式方法。
驗證
在真實瀏覽器（playwright-cli）中，以 375、768 和 1440px 寬度、淺色和深色主題渲染頁面，讀取主控台，並與設計來源進行比較。同時檢查標題順序、地標、鍵盤流程，以及載入、空資料和錯誤狀態。
搭配使用
| 需求 | 技能或工具 |
|---|---|
| 缺少元件或代號 | atomic-design（必要搭配） |
| 頁面層級評論或潤飾 | impeccable |
| 無障礙性稽核 | fixing-accessibility、design:accessibility-review |
| 頁面元資料、標題、Open Graph | fixing-metadata |
| 移交至工程 | design:design-handoff |
額外規則
- 在模板的插槽中進行組合；不要深入元件的內部或覆蓋其樣式。
- 頁面特定樣式僅限於佈局（網格、間距、位置）；任何視覺相關的內容都應屬於元件或代號。
- 絕不複製貼上元件以進行調整；應透過
atomic-design請求變體。 - 在檢查頁面時，傳遞真實、具代表性的內容（長名稱、空列表、錯誤）。
- 設定文件標題，每頁一個
h1。 - 頁面檔案僅包含組合和資料連接；不包含可重複使用的 UI 邏輯。
參考資料
| 檔案 | 閱讀時機 |
|---|---|
| references/design-source-extraction.md | 提取佈局數值並撰寫頁面規格 |
| references/inventory-and-gaps.md | 盤點元件並尋找差距 |
| references/composition-patterns.md | 佈局、插槽、資料狀態、匯入順序 |
輸出檢查清單
- 佈局數值來自設計來源，非猜測
- 回應式行為符合設計
- 所有匯入均來自專案的設計系統
- 無硬編碼數值
- 無新元件
- 頁面檔案中記錄了設計連結