maogeigei
5f5b4f1cb7
- 工作台大版本升级：hash 路由 + 6 数据功能页（周榜/热门账号/账号详情/视频详情/AI写脚本/AI写作复盘），只读复用 dsh 库副本 + 抖音榜单 JSON - 数据库隔离：复制 dsh 库到 mcn-work-shop/，与 dsh 原库各访问各的（已 gitignore） - 图标全面扁平化：Lucide 线性 SVG，功能图标亮色区分，文字标题去图标 - 首页重构：功能入口卡 + AI写剧本快捷卡片(2列/8个/5行预览) + 独立帮助页 + header 精简 - 新增设计技能 impeccable + taste-skill（生成网页时参考） - 修复：fmtTime 跨 script 全局冲突(P0)、弹窗关闭、外链新标签打开等
85 lines
5.0 KiB
Markdown
85 lines
5.0 KiB
Markdown
Layout turns product priority into reading order, grouping, rhythm, and usable space. Diagnose the structural problem before moving boxes.
|
|
|
|
---
|
|
|
|
## Visitor mode
|
|
|
|
- **Persuade + Experience:** composition may be asymmetric, fluid, or intentionally disruptive when the selected world earns it.
|
|
- **Operate + Read:** predictable structure, stable density, and navigable linearity are affordances.
|
|
- **Native:** follow [ios.md](ios.md) or [android.md](android.md) for navigation, insets, adaptation, and touch targets.
|
|
|
|
Preserve the established visual world. A layout command changes structure inside it; identity replacement belongs to [new-work.md](new-work.md).
|
|
|
|
## Two isolated assessments
|
|
|
|
When a sub-agent tool is available and permitted, run these independently; otherwise run them yourself in this order.
|
|
|
|
1. **Layout assessment:** inspect representative states and viewports. Answer every question below with rendered or source evidence:
|
|
- **Reading order:** Apply the squint test. With detail blurred, can you still identify the primary element, the secondary element, and the major groups in order?
|
|
- **Grouping:** Are related items close and distinct groups separated, or are containers compensating for weak proximity?
|
|
- **Rhythm:** Do tight and generous intervals create a deliberate cadence, or is one spacing value repeated until everything has equal weight?
|
|
- **Structure:** Does the topology match the content and task? Are repeated cards, columns, or sections genuinely equivalent, or merely a framework default?
|
|
- **Density:** Does the amount of information per region fit use frequency, decision complexity, and visitor mode?
|
|
- **Adaptation:** At narrow, intermediate, wide, zoomed, and localized states, what reorders, collapses, wraps, scrolls, or remains fixed? Does DOM and focus order still agree with the visual order?
|
|
- **Extremes:** Do long content, empty states, overlays, sticky elements, safe areas, and small touch targets expose structural failures?
|
|
2. **Mechanical scan:** run:
|
|
|
|
```bash
|
|
node {{scripts_path}}/detect.mjs --json --scope layout [target files or dirs]
|
|
```
|
|
|
|
Also inspect arbitrary spacing, overflow, stacking, and container behavior the detector cannot resolve. Keep mechanical evidence out of the first assessment, then synthesize both passes before editing. A clean scan cannot prove hierarchy or rhythm.
|
|
|
|
## Set the spatial thesis
|
|
|
|
Before editing, name:
|
|
|
|
- the primary reading or task path;
|
|
- what belongs together and what must separate;
|
|
- which element leads and which supports;
|
|
- the intended density and spacing rhythm;
|
|
- how the structure changes across containers, viewports, input modes, and content extremes.
|
|
|
|
Choose the simplest structural model that expresses those relationships. Use layout primitives according to the relationships they control, and name reusable spacing and container roles semantically.
|
|
|
|
## Apply
|
|
|
|
- Group by meaning. Use proximity before adding containers or decoration.
|
|
- Create rhythm through deliberate contrast between tight and generous intervals.
|
|
- Use a documented spacing scale rather than one-off values. A 4-unit base usually provides the useful middle steps that an 8-only scale misses.
|
|
- Let hierarchy follow product priority, not framework defaults.
|
|
- Keep distinct content visually distinct without turning every group into an isolated component.
|
|
- Make responsive behavior structural: reorder, collapse, reflow, or reveal based on what remains important.
|
|
- Prefer container-aware components when the same component appears in different contexts.
|
|
- Use `gap` for sibling rhythm when it expresses the relationship more directly than child margins.
|
|
- Keep touch targets usable even when their visible marks are small.
|
|
- Use depth only when it clarifies state or hierarchy.
|
|
- Make optical corrections only after inspecting the rendered result.
|
|
|
|
Variation is not a goal by itself. Repetition should support recognition; break it only when content or priority changes.
|
|
|
|
## Verify
|
|
|
|
- The squint test still reveals the primary, secondary, and major groups in order.
|
|
- The reading and task path remains clear at every supported size.
|
|
- Related content groups naturally; unrelated content does not blur together.
|
|
- Tight and generous spacing create intentional rhythm instead of monotonous repetition.
|
|
- Density matches use frequency and content complexity.
|
|
- Long text, empty states, localization, zoom, and dynamic content do not break the structure.
|
|
- Keyboard, touch, and assistive-technology order agree with the visual order.
|
|
- The final mechanical scan has no unexplained findings.
|
|
|
|
Answer each item with rendered or source evidence, then rerun the scan. Do not substitute a bare “yes” for verification.
|
|
|
|
When the structure holds, hand off to `{{command_prefix}}impeccable polish`.
|
|
|
|
## Live-mode signature params
|
|
|
|
Every variant declares a coarse `density` parameter and authors spacing against `var(--p-density, 1)`.
|
|
|
|
```json
|
|
{"id":"density","kind":"range","min":0.6,"max":1.4,"step":0.05,"default":1,"label":"Density"}
|
|
```
|
|
|
|
Add one structural parameter only when the topology genuinely branches. Follow [live.md](live.md)'s parameter contract.
|