---
name: figma-query-page-extraction
description: "Extract complete page/screen with all components, assets, and documentation. 提取完整 Figma 頁面/屏幕：組件、資產、文檔。 Use when: extracting full screen layout, documenting page design, generating page HTML mockup, extracting section CSS, building page-level design documentation"
disable-model-invocation: true
---
# Page/Screen Extraction
此技能提取實現完整 Figma 頁面或屏幕所需之全部物料。
## Page vs Component Extraction
| Aspect | Component | Page |
|--------|-----------|------|
| Scope | Single reusable element | Full screen layout |
| Hierarchy | Flat or shallow | Deep with sections |
| Components | Is a component | Uses many components |
| Layout | Self-contained | Grid/layout system |
| Documentation | Component spec | Screen spec + flow |
## Extraction Process
### Phase 1: Page Discovery
定位頁面及其結構：
```yaml
# Get file tree to find pages
get_tree:
file_key: "FILE_KEY"
depth: 2
# Get specific page structure
get_tree:
file_key: "FILE_KEY"
node_id: "PAGE_ID"
depth: 4
```
### Phase 2: Section Analysis
將頁面拆分為邏輯區塊：
```yaml
# Query for top-level frames (sections)
query:
file_key: "FILE_KEY"
q:
from: ["#PAGE_ID > FRAME"]
select: ["@structure", "@bounds"]
# Get wireframe for each section
wireframe:
file_key: "FILE_KEY"
node_id: "SECTION_ID"
annotations: ["ids", "names", "dimensions"]
```
### Phase 3: Component Identification
查找所有組件實例：
```yaml
# Query for component instances
query:
file_key: "FILE_KEY"
q:
from: ["#PAGE_ID > INSTANCE"]
select: ["@structure", "componentId"]
# Get component references
list_components:
file_key: "FILE_KEY"
include_usage: true
```
### Phase 4: Layout Extraction
提取佈局/柵格信息：
```yaml
# Get page-level layout
get_node:
file_key: "FILE_KEY"
node_id: "PAGE_ID"
select: ["@layout"]
# Get section layouts
get_css:
file_key: "FILE_KEY"
node_ids: ["SECTION_IDS..."]
style: "vanilla"
include: ["layout", "spacing"]
```
### Phase 5: Content Extraction
提取文本與圖像：
```yaml
# Query all text nodes
query:
file_key: "FILE_KEY"
q:
from: ["#PAGE_ID > TEXT"]
select: ["@structure", "characters"]
# Find all images
query:
file_key: "FILE_KEY"
q:
from: ["#PAGE_ID"]
select: ["@images"]
```
### Phase 6: Asset Export
導出頁面視覺資源：
```yaml
# Full page render
download_image:
file_key: "FILE_KEY"
node_ids: ["PAGE_ID"]
format: "png"
output_dir: "./docs/pages"
# Section renders
download_image:
file_key: "FILE_KEY"
node_ids: ["SECTION_IDS..."]
format: "png"
```
## Output Structure
```
pages/PageName/
├── README.md # Page documentation
├── page.css # Full page CSS
├── layout.css # Layout/grid CSS
├── preview.png # Full page render
├── wireframe.txt # ASCII structure
├── mockup.html # HTML mockup
├── sections/
│ ├── header/
│ │ ├── section.css
│ │ ├── preview.png
│ │ └── mockup.html
│ ├── hero/
│ │ └── ...
│ └── footer/
│ └── ...
└── assets/
├── hero-bg.png
└── icons/
```
## Documentation Template
```markdown
# PageName Screen
## Overview
[Page description and purpose]
## Preview
## Structure
\`\`\`
[Wireframe output showing sections]
\`\`\`
## Sections
### Header
- Navigation links
- Logo
- User menu
### Hero
- Headline
- Subheadline
- CTA buttons
### Content
[...]
## Components Used
| Component | Count | Location |
|-----------|-------|----------|
| Button/Primary | 3 | Hero, Footer |
| Card | 6 | Content grid |
| NavLink | 5 | Header |
## Layout
- **Grid**: 12-column, 24px gutter
- **Max width**: 1280px
- **Breakpoints**: 768px, 1024px, 1280px
## CSS
\`\`\`css
[Page layout CSS]
\`\`\`
## HTML Mockup
\`\`\`html
[Full page HTML]
\`\`\`
## Responsive Notes
[Breakpoint-specific changes]
```
## HTML Mockup Generation
```html
PageName
```
## Section Extraction Pattern
每區塊逐步提取：
```yaml
# 1. Get section structure
wireframe:
node_id: "SECTION_ID"
annotations: ["ids", "names"]
# 2. Get section CSS
get_css:
node_ids: ["SECTION_ID", "CHILD_IDS..."]
# 3. Get section tokens
get_tokens:
node_ids: ["SECTION_ID", "CHILD_IDS..."]
# 4. Export section preview
download_image:
node_ids: ["SECTION_ID"]
# 5. Document section
# Generate README.md with details
```
## Integration with Design Library Loop
頁面在組件之後處理：
1. 先提取組件以備引用
2. 各頁面識別組件用量
3. 含組件引用的區塊逐一提取
4. 由各區塊組裝完整頁面
> Invoke the `Skill` tool with `skill: figma-query:adversarial-design-library` — 啟動含頁面提取的完整對抗式庫提取循環。