wufufu770 前端实现规格生成器
角色
资深前端架构师：把界面需求翻译成像素级、帧级可开工可验收的规格。
生成前置（每次必做）
按序读取本 skill 目录同级的 _spec-core/ 下 core-laws.md → protocol.md → structure.md 并遵照执行；内核不可读时降级为无内核模式：直接按本 skill 领域骨架生成，全部精确值标 [待验证] 并在文末注明「核心铁律未加载」。
章节骨架（叠加于通用 10 章；第 3 章全局视觉、第 6 章 UI/UX 为最重两章）
Why → Features → Getting Started → Usage → Components/Props →
Theming → Accessibility → Performance → Testing → Browser Support
子形态要点
| 子形态 | 规格必含 |
|---|---|
| 响应式网站 | 断点表（如 375/768/1024/1440），每断点栅格列数、容器宽度、导航形态（汉堡/全量）、字号间距缩放系数；移动优先 |
| SPA (React/Vue/Svelte) | 路由表（path→组件→权限）、状态管理选型、数据获取策略、懒加载分割点、错误边界清单 |
| SSR (Next/Nuxt) | 渲染策略矩阵（每页 SSR/SSG/ISR/CSR + revalidate 值）、数据获取层级、水合警告豁免清单、缓存标头 |
| SSG (Astro/Hugo) | 内容模型 frontmatter 字段表、构建速度预算、增量构建、图片优化管线 |
| 组件库/设计系统 | Props 表（name|type|default|description 必用）、组件状态矩阵、design tokens 四组表（color/space/typography/radius/shadow）、WCAG AA + ARIA 角色清单、受控/非受控契约、语义化版本与废弃策略 |
| 微前端 | 应用边界划分、共享依赖允许/禁止清单、样式隔离方案、跨应用通信契约、版本漂移策略、路由归属表 |
| 实时应用 (WS) | 连接生命周期（建连/心跳/重连/优雅关闭）、心跳间隔、消息 JSON schema、重连退避（1s/2s/4s 封顶 30s + jitter）、断线队列、幂等处理 |
| PWA | manifest 字段表、Service Worker 缓存策略表（每类资源：network-first/cache-first/stale-while-revalidate）、离线页、SW 版本化更新策略、安装提示 |
| WebAssembly | 加载策略（懒/预加载）、内存分配上限、JS↔WASM 数据传递规范、线程支持、fallback 方案 |
| 浏览器扩展 | 权限最小化 manifest 表、background/content/popup 职责划分、消息协议、MV2/MV3 兼容、发布渠道 |
| 前端工具链 | 构建目标、分包策略、产物大小预算、dev server 配置、HMR 边界 |
| CSS (Tailwind) | 配置主题扩展点、设计令牌映射、暗色模式实现、组件类组织规范 |
| 动画库 (GSAP/FM) | 动画清单表（元素→触发→时长→缓动→延迟）、滚动触发表、交错动画间隔 |
领域增补铁律
- 色彩对比 MUST 满足 WCAG AA（正文 ≥ 4.5:1，大字 ≥ 3:1）；图片 MUST 带 width/height 占位，CLS SHOULD ≤ 0.1。
- 字体 MUST 授权明确；MUST NOT 使用系统默认栈之外的未授权字体。图标风格全站统一命名。
- 点击反馈 MUST ≤ 100ms 可见；触控目标 ≥ 44×44pt（iOS）/ 48×48dp（Android Web）。
- Core Web Vitals 目标写入第 7 章：LCP ≤ 档位预算、CLS ≤ 0.1、INP ≤ 200ms（S/A 档）。
动效曲线速查（配合铁律 3）
| 用途 | 时长 | 曲线 |
|---|---|---|
| 微交互/按钮 | 80–150ms | ease-out |
| 面板展开/收起 | 200–250ms | cubic-bezier(0.4, 0, 0.2, 1) |
| 页面切换 | 200–300ms | cubic-bezier(0.4, 0, 0.2, 1) |
| 弹窗 | 150ms 入 / 120ms 出 | ease-out / ease-in |
| 大元素入场 | 600–900ms | cubic-bezier(0.16, 1, 0.3, 1) |
| 弹性反馈 | 300–500ms | cubic-bezier(0.34, 1.56, 0.64, 1) |
验收惯例
Lighthouse（移动端节流）达档位分值；Playwright E2E 断言交互路径；视觉回归快照（像素 diff 阈值显式给出）；axe 扫描零 critical；DevTools Performance 面板录屏验证帧率达标。
开工检查单默认项
技术栈一行 / 目录结构草案（pages|components|stores|api|styles）/ 最先实现的 3 个文件（设计 tokens → 布局壳 → 一个完整功能切片）/ 最低验收门槛 = 档位对应测试要求。
不适用（When NOT to use）
- 后端接口契约、数据库、部署管道细节分别归 fs-spec-backend / fs-spec-devops。
- 原生移动 App 归 fs-spec-mobile；纯 CLI/TUI 归 fs-spec-desktop-cli。
- 视觉创意本身（配色美学、品牌设计）不属规格范畴——本 skill 只约束可验收的实现形态。