Atomic Page Builder（原子页面构建器）
从现有组件组合页面。此技能负责组装；atomic-design 负责创建。
规则
| 必须做 | 禁止做 |
|---|---|
| 从设计系统导入组件 | 创建新的原子、分子或有机体 |
| 从设计源（Figma、规格说明、原型）获取布局值 | 猜测网格、间距或内边距 |
| 使用从令牌读取的范围样式 | 硬编码值（#333、24px） |
| 精确匹配设计，包括响应式行为 | 对数值进行四舍五入或添加“改进” |
| 仅使用项目的组件库 | 引入项目未使用的外部 UI 库 |
移交给 atomic-design
在以下情况下切换到 atomic-design：
- 所需的原子、分子或有机体不存在；
- 需要新的令牌；
- 设计中的令牌值已更改且必须先更新。
工作流程
- 获取布局规格。 如果存在设计源（通过 MCP 的 Figma、规格说明、截图），从中提取网格、间距、内边距、边距和断点。如果不存在，则请求一个或明确说明假设。注意页面特定的覆盖。
- 盘点。 列出项目已有的组件（原子、分子、有机体、模板）及其属性。
- 差距分析。 将页面的每个区域映射到现有组件。列出任何不匹配的部分。
- 构建或停止。
- 所有组件都存在：组合页面，1:1 匹配规格。
- 缺少某些内容：停止，报告差距，并切换到
atomic-design。
- 验证。 在设计源下，在移动端、平板端和桌面端宽度上对比。
页面模式
/** Dashboard 页面。布局来自：<设计链接或节点 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）中渲染页面，在 375px、768px 和 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 | 布局、插槽、数据状态、导入顺序 |
输出检查表
- 布局值来自设计源，而非猜测
- 响应式行为匹配设计
- 所有导入都来自项目的设计系统
- 无硬编码值
- 无新增组件
- 页面文件中记录了设计链接