跳到主要内容

页面输入包模板

适用场景:页面首版、设计稿还原、组件抽取前的输入整理。

推荐目录

page-input/
figma-node.md
tokens-map.md
states-checklist.md
shots/
README.md

figma-node.md

# Figma Node

- Link:
- Page / Frame:
- Node name:
- Goal:

## Section Structure

1.
2.
3.

## Key Dimensions

- Container:
- Hero:
- Cards / Grid:

## Notes

- 哪些层是页面专有结构
- 哪些层可能后续提炼成共享组件

tokens-map.md

# Tokens Map

| UI Element | Design Value | Semantic Token | Notes |
| --- | --- | --- | --- |
| Hero background | | | |
| Card radius | | | |
| CTA gap | | | |
| Heading color | | | |

states-checklist.md

# States Checklist

## Breakpoints

- [ ] 360
- [ ] 768
- [ ] 1280

## Interaction States

- [ ] hover
- [ ] focus
- [ ] active
- [ ] disabled

## Data / Edge States

- [ ] loading
- [ ] empty
- [ ] error
- [ ] success
- [ ] long copy

shots/README.md

# Shots

- `360-home.png`
- `768-home.png`
- `1280-home.png`
- `component-closeup.png`
- `state-diff.png`

每张图至少标注:
- 当前断点
- 当前状态
- 对应模块

使用提醒