页面输入包模板
适用场景:页面首版、设计稿还原、组件抽取前的输入整理。
推荐目录
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`
每张图至少标注:
- 当前断点
- 当前状态
- 对应模块