# videocompressor.online — Design Handoff

状态：**DESIGN_GO / 可进入前端实现**
日期：2026-06-03

## 1. 开发应看的文件

### Stitch 元信息
- `stitch/screen-index.json` — 官方 Stitch SDK 生成索引，含 projectId / screenId / htmlUrl / imageUrl
- `stitch/project.json` — Stitch project id

### 截图
- `screens/home-desktop.png`
- `screens/home-mobile.png`
- `screens/mp4-compressor-desktop.png`
- `screens/mp4-compressor-mobile.png`
- `screens/discord-desktop.png`
- `screens/discord-mobile.png`
- `screens/whatsapp-desktop.png`
- `screens/whatsapp-mobile.png`
- `screens/instagram-desktop.png`
- `screens/instagram-mobile.png`
- `screens/privacy-video-compressor-desktop.png`
- `screens/privacy-video-compressor-mobile.png`
- `screens/state-*.png`

### HTML/CSS 参考（视觉真源）
- `html/home-desktop.html`
- `html/home-mobile.html`
- `html/mp4-compressor-desktop.html`
- `html/mp4-compressor-mobile.html`
- `html/discord-desktop.html`
- `html/discord-mobile.html`
- `html/whatsapp-desktop.html`
- `html/whatsapp-mobile.html`
- `html/instagram-desktop.html`
- `html/instagram-mobile.html`
- `html/privacy-video-compressor-desktop.html`
- `html/privacy-video-compressor-mobile.html`
- `html/state-empty-desktop.html`
- `html/state-selected-desktop.html`
- `html/state-processing-desktop.html`
- `html/state-success-desktop.html`
- `html/state-target-missed-desktop.html`
- `html/state-failed-desktop.html`
- `html/state-unsupported-desktop.html`
- `html/state-mobile-warning-desktop.html`
- `html/state-mobile-warning-mobile.html`

### 品牌资产
- `assets/icon.svg`
- `assets/wordmark.svg`
- `assets/horizontal.svg`
- `assets/stacked.svg`
- `assets/logo-system.json`
- `assets/favicon.ico`
- `assets/favicon-16.png`
- `assets/favicon-32.png`
- `assets/favicon-512.png`
- `assets/apple-touch-icon.png`
- `assets/og-image.png`
- `assets/hero-workbench.png`

### 设计-文案契约
- `content-fit-matrix.md`

## 2. Stitch Project / Screen ID

- Project ID: `6425530723869486131`
- Source: official `@google/stitch-sdk`
- Fallback status: `none`
- Screen count: `21`

| Screen | Route | Device | Screen ID |
|---|---|---|---|
| home-desktop | `/` | DESKTOP | `2a7039c2b56142ada6e4280724723fc3` |
| home-mobile | `/` | MOBILE | `b21a161ebf49414581a61a41170ccb18` |
| mp4-compressor-desktop | `/mp4-compressor` | DESKTOP | `4560b061d7424fd896c636bbcafa7462` |
| mp4-compressor-mobile | `/mp4-compressor` | MOBILE | `686e169d97a74c7a818a7536e9506e0e` |
| discord-desktop | `/compress-video-for-discord` | DESKTOP | `abf371df566340ab990e15ae5b11ffe6` |
| discord-mobile | `/compress-video-for-discord` | MOBILE | `373a48943fcb4ee59b08e9238239f214` |
| whatsapp-desktop | `/compress-video-for-whatsapp` | DESKTOP | `4f990ba82d5049d4acff594dde72b6d4` |
| whatsapp-mobile | `/compress-video-for-whatsapp` | MOBILE | `1eee4ef76e144157b4483d858fa377b4` |
| instagram-desktop | `/compress-video-for-instagram` | DESKTOP | `b284e21a2ef245f9b45bd04332d510c1` |
| instagram-mobile | `/compress-video-for-instagram` | MOBILE | `94802c93cfd44584b7ee22ff61307c5f` |
| privacy-video-compressor-desktop | `/privacy-video-compressor` | DESKTOP | `622a59c3550d49cdbe8526b721bec89c` |
| privacy-video-compressor-mobile | `/privacy-video-compressor` | MOBILE | `c772e2d2b5094b04be8691712a702151` |
| state-empty-desktop | `/state/empty` | DESKTOP | `d77f6c2f97584c269dfe7931989e4e4a` |
| state-selected-desktop | `/state/selected` | DESKTOP | `bf8530c4c7a04f0a85af07c7bbb094bf` |
| state-processing-desktop | `/state/processing` | DESKTOP | `3592cb0e92764d3581574b7f502591a5` |
| state-success-desktop | `/state/success` | DESKTOP | `d3ed9c391cf24c3490acec52180aac4b` |
| state-target-missed-desktop | `/state/target-missed` | DESKTOP | `bf6a331804394dc2bec8012ac74bd8b0` |
| state-failed-desktop | `/state/failed` | DESKTOP | `91086e99ab0f42c6a4c012df3d7cf98d` |
| state-unsupported-desktop | `/state/unsupported` | DESKTOP | `bab77629c16747688adfb2d69fd72c05` |
| state-mobile-warning-desktop | `/state/mobile-warning` | DESKTOP | `cdcdaa4ff9734926bbe00b3bdcc478c5` |
| state-mobile-warning-mobile | `/state/mobile-warning` | MOBILE | `e8a1cf412836496c830d7248b7d37705` |

## 3. 设计方向

Industrial privacy-first video workstation — 暗色、工程感、低噪音、高可信度。

核心判断：这个站不能像通用 SaaS，也不能像在线视频编辑器。它应该像一个本地浏览器里的压缩工作台：文件选择、目标 MB、分辨率、质量、状态反馈都清晰；隐私/no-upload 是信任主轴，但不喧宾夺主。

## 4. Design Tokens

| Token | Value |
|---|---|
| Background | `#0B0E0D` |
| Surface | `#131A18` |
| Raised Surface | `#18221F` |
| Text Primary | `#EAF2EE` |
| Text Secondary | `#8DA39A` |
| Accent Primary | `#7CFFB2` |
| CTA / Warning | `#FFB84D` |
| Danger | `#FF6B6B` |
| Font Display | JetBrains Mono |
| Font Body | IBM Plex Sans |
| Icon Style | Material Symbols / custom SVG, no emoji |

## 5. 页面 IA

### `/`
1. Header / Nav
2. Split Hero：左侧价值主张，右侧 compact compressor panel
3. Trust strip：browser-local / MP4 first / target presets
4. Short answer block
5. Best settings table
6. How it works
7. Browser support and limits
8. Target-missed recovery
9. FAQ
10. Footer + independent/no-affiliation note

### `/mp4-compressor`
- MP4/H.264-first 工具页，强调 custom MB、resolution、quality tradeoff。

### `/compress-video-for-discord`
- Discord 10MB preset；明确“target, not guarantee”；不能使用平台 logo，不能暗示官方关系。

### `/compress-video-for-whatsapp`
- WhatsApp 16MB preset；强调长视频需降分辨率，最终体积受源文件影响。

### `/compress-video-for-instagram`
- Instagram upload prep；不承诺单一 MB 上限，重点是 1080p/720p 与质量平衡。

### `/privacy-video-compressor`
- No-upload/privacy explainer；解释 default local workflow、analytics 边界、server logs 边界。

### Tool states
- Empty
- Selected
- Processing
- Success
- Target missed
- Failed
- Unsupported codec
- Mobile warning

## 6. 开发注意事项

- 视觉真源以 `html/*.html` 为准，不要只按截图重做。
- Header 必须是页面第一结构，Footer 必须是页面结束结构。
- Hero 工具区保持 compact，不要做成完整后台编辑器。桌面首屏默认左文案 : 右工具区约 45:55 或 50:50。
- 所有 CTA 以真实工具任务为核心：Choose Video / Start Compression / Download MP4 / Retry。
- v0 不接 Stripe，不保留 Buy/Checkout/Sign In 假入口；Pro/Business 只能做 Waitlist/Contact。
- 隐私文案必须和实现一致：default local workflow / no upload by default in supported browsers。上线前 QA 必须用 Network 面板证明压缩流程无媒体上传。
- 禁止承诺：unlimited、lossless、no quality loss、support all formats、fastest、official affiliation。
- 平台名只用于兼容/场景语义；不使用 Discord/WhatsApp/Instagram/Meta logo，不暗示官方背书。
- Tool state copy 必须保留具体下一步，不要改成泛化错误文案。

## 7. 需替换 / 注意的占位内容

- Stitch HTML 中有少量 `lh3.googleusercontent.com/aida-public/...` 临时工业风图片。上线实现时优先替换为：
  - `assets/hero-workbench.png`
  - 自制视频工作台插画 / WebCodecs processing diagram
  - 真实产品截图（压缩面板、结果卡、target missed 状态）
- Stitch 曾生成少量 browser/icon 图像引用。不要上线使用官方 browser logo 图；改成 Material Symbols 图标或纯文字 compatibility cards。
- `placeholder` 出现在真实 input placeholder 中，不是未完成 Lorem Ipsum。

## 8. Logo System

概念：compressed video frame + signal rails。图标是单一几何记忆点，16px 可辨识，黑白可用，无渐变/阴影/3D。

文件：
- `assets/icon.svg`
- `assets/wordmark.svg`
- `assets/horizontal.svg`
- `assets/stacked.svg`
- `assets/logo-system.json`

## 9. 验证记录

- Official Stitch SDK generation: PASS
- `screen-index.json` screen count: 21
- HTML count: 21
- Screenshot count: 21
- Fallback status: none
- Favicon generated: PASS
- OG image generated: PASS, 1200×630
- Hero asset generated: PASS, 1600×900
- Forbidden claim scan in HTML: PASS
  - `unlimited`: 0
  - `lossless`: 0
  - `no quality loss`: 0
  - `support all formats`: 0
  - `fastest`: 0
  - `official affiliation`: 0
- Emoji icon scan: PASS

## 10. 未完成项 / 下游输入

- Frontend must wire the actual client-side compression flow and map states to these visual states.
- QA must verify no-upload default workflow with real browser network proof.
- Frontend/QA must calibrate file-size/browser copy after WebCodecs or ffmpeg.wasm testing.
- If any cloud/server-side compression mode appears later, compliance must re-review privacy, retention, deletion, and pricing copy.