# AI Coding Pricing — Design Handoff

状态：**可直接进入前端实现；视觉真源为 local HTML fallback，非完整 Stitch screen**
日期：2026-05-21
域名：aicodingpricing.com

## 0. 关键结论

- 已完成 9 个 P0 canonical route 的 desktop + mobile HTML/CSS 与截图，共 18 个页面 screen。
- 已补 4 组交互状态 desktop + mobile：calculator input / result / error / newsletter capture，共 8 个 state screen。
- 已完成 content-fit matrix、Logo System、favicon、OG image、verification。
- Official Stitch SDK smoke test 成功：projectId `11617046275142880227`；但完整多屏 Stitch generation 超时，最终页面产物已在 `screen-index.json` 中诚实标记为 `local-html-fallback-no-stitch-project`。

## 1. 开发应看的文件

### 设计交付
- `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/design/HANDOFF.md`
- `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/design/content-fit-matrix.md`
- `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/design/verification.json`

### Screen index
- `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/stitch/screen-index.json`

### HTML/CSS 视觉真源
- 目录：`/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html`

### 截图
- 目录：`/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens`

### 品牌资产
- 目录：`/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/assets`
- `apple-touch-icon.png`
- `favicon-16.png`
- `favicon-32.png`
- `favicon-512.png`
- `favicon.ico`
- `horizontal.svg`
- `icon.svg`
- `logo-system.json`
- `og-image.png`
- `og-image.svg`
- `stacked.svg`
- `wordmark.svg`

## 2. Stitch / generation evidence

- Official SDK smoke project ID: `11617046275142880227`
- Full design mode: `mixed-stitch-and-local-fallback`
- Screen index entries: 26
- Model requested in generation script: `GEMINI_3_FLASH`
- Production note: full multi-screen Stitch run was attempted after smoke success but timed out before first page returned. Do not represent these route screens as Stitch-generated screens. They are high-fidelity local HTML visual truths.

## 3. 设计方向

Industrial developer terminal — source-led, data-dense, high-trust, asymmetric.

Design choices:
- Dark technical background, not generic SaaS white/purple.
- Space Grotesk headings + IBM Plex Sans body.
- Primary accent `#D6FF5C`, secondary accent `#45D6B5`.
- Provider names are plain text only; neutral initial badges only.
- Tables and calculator panels use visible source / last checked / confidence / caveat affordances.
- Disclaimers are visible near hero/table modules, not buried only in footer.

## 4. Design Tokens

| Token | Value |
|---|---|
| Background | `#080B10` |
| Surface | `#111722` |
| Panel | `#161F2D` |
| Text Primary | `#F4F7FB` |
| Text Secondary | `#9CA8BA` |
| Accent Primary | `#D6FF5C` |
| Accent Secondary | `#45D6B5` |
| Warning Accent | `#FFB86C` |
| Error Accent | `#FF6B6B` |
| Line | `#2B3648` |
| Font Display | Space Grotesk |
| Font Body | IBM Plex Sans |
| Radius system | mixed: sharp 3-4px controls, 20-28px asymmetric panels |

## 5. Route/page visual truth

- `/` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/home-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/home-desktop-final.png` (local-html-fallback-no-stitch-project)
- `/` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/home-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/home-mobile-final.png` (local-html-fallback-no-stitch-project)
- `/claude-code-pricing` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/claude-code-pricing-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/claude-code-pricing-desktop-final.png` (local-html-fallback-no-stitch-project)
- `/claude-code-pricing` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/claude-code-pricing-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/claude-code-pricing-mobile-final.png` (local-html-fallback-no-stitch-project)
- `/claude-code-usage-limits` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/claude-code-usage-limits-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/claude-code-usage-limits-desktop-final.png` (local-html-fallback-no-stitch-project)
- `/claude-code-usage-limits` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/claude-code-usage-limits-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/claude-code-usage-limits-mobile-final.png` (local-html-fallback-no-stitch-project)
- `/codex-pricing` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/codex-pricing-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/codex-pricing-desktop-final.png` (local-html-fallback-no-stitch-project)
- `/codex-pricing` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/codex-pricing-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/codex-pricing-mobile-final.png` (local-html-fallback-no-stitch-project)
- `/codex-usage` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/codex-usage-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/codex-usage-desktop-final.png` (local-html-fallback-no-stitch-project)
- `/codex-usage` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/codex-usage-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/codex-usage-mobile-final.png` (local-html-fallback-no-stitch-project)
- `/cursor-pricing` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/cursor-pricing-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/cursor-pricing-desktop-final.png` (local-html-fallback-no-stitch-project)
- `/cursor-pricing` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/cursor-pricing-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/cursor-pricing-mobile-final.png` (local-html-fallback-no-stitch-project)
- `/claude-code-vs-codex` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/claude-code-vs-codex-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/claude-code-vs-codex-desktop-final.png` (local-html-fallback-no-stitch-project)
- `/claude-code-vs-codex` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/claude-code-vs-codex-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/claude-code-vs-codex-mobile-final.png` (local-html-fallback-no-stitch-project)
- `/claude-code-vs-cursor` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/claude-code-vs-cursor-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/claude-code-vs-cursor-desktop-final.png` (local-html-fallback-no-stitch-project)
- `/claude-code-vs-cursor` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/claude-code-vs-cursor-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/claude-code-vs-cursor-mobile-final.png` (local-html-fallback-no-stitch-project)
- `/pricing-changelog` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/pricing-changelog-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/pricing-changelog-desktop-final.png` (local-html-fallback-no-stitch-project)
- `/pricing-changelog` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/pricing-changelog-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/pricing-changelog-mobile-final.png` (local-html-fallback-no-stitch-project)

## 6. Interaction state visual truth

- `/_state/calculator-input` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/calculator-input-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/calculator-input-desktop-final.png`
- `/_state/calculator-input` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/calculator-input-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/calculator-input-mobile-final.png`
- `/_state/calculator-result` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/calculator-result-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/calculator-result-desktop-final.png`
- `/_state/calculator-result` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/calculator-result-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/calculator-result-mobile-final.png`
- `/_state/calculator-error` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/calculator-error-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/calculator-error-desktop-final.png`
- `/_state/calculator-error` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/calculator-error-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/calculator-error-mobile-final.png`
- `/_state/newsletter-capture` desktop: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/newsletter-capture-desktop-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/newsletter-capture-desktop-final.png`
- `/_state/newsletter-capture` mobile: `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/html/newsletter-capture-mobile-final.html` + `/root/.hermes/kanban/boards/site-factory/reports/site-pipeline/site-aicodingpricing-20260521/aicodingpricing/screens/newsletter-capture-mobile-final.png`

## 7. 首页 IA

1. Navigation: brand, Pricing, Compare, Changelog, Alerts.
2. Hero: H1, answer-first copy, primary/secondary CTA, visible independent disclaimer, calculator starter.
3. Calculator module: workflow, team size, hours/week, mode, result panel, estimate disclaimer.
4. Provider cards: Claude Code, OpenAI Codex, Cursor, GitHub Copilot as text-only cards.
5. Latest pricing changes: dated source/confidence timeline.
6. How calculator works / comparison / latest changes / workflow-fit sections.
7. Source links module.
8. Crawlable FAQ details.
9. Provider-specific pricing alert newsletter.
10. Footer trademark/no-affiliation disclaimer.

## 8. 开发注意事项

- Do not add provider logos, mascots, official screenshots, or official-looking brand colors.
- Keep every pricing/limits row schema-compatible: `source_url`, `last_checked`, `confidence`, `caveat`.
- Calculator output must stay framed as estimate, not billing quote.
- FAQ/details must be server-rendered/crawlable.
- Newsletter CTA copy must remain pricing/limits-alert specific.
- Alias pages `/codex-vs-claude-code` and `/cursor-vs-claude-code` should be 301/canonical only, not duplicated indexable pages.
- Changelog must not launch empty as an indexable page; seed entries need source URL and checked date.
- Final implementation should port visual system, not copy placeholder source rows as factual pricing data.

## 9. 需替换/确认的占位内容

- Pricing rows: replace visual placeholder rows with backend/source data rows.
- Changelog entries: replace seed visual examples with real maintained entries or noindex the changelog.
- Source `Last checked: 2026-05-21` appears as visual placeholder; launch data must be checked within 72 hours.
- Newsletter provider backend and privacy copy must match actual email service.
- No Google CDN/third-party provider images are used in final local HTML; only Google Fonts references are present.

## 10. Verification

- HTML files: 26
- PNG screenshots: 26
- Screen index entries: 26
- Required HTML missing: []
- Bad PNG signatures: []
- Missing frozen copy markers: []
- Forbidden copy hits: []
- Negative disclaimer note: endorsed appears only inside no-affiliation/no-endorsement disclaimers

## 11. 未完成项 / 风险

- Risk: full route screens are `local-html-fallback`, not Stitch-generated screens. If the pipeline requires strict Stitch screen IDs for every page, rerun the official SDK generation in smaller batches (1-2 pages per job) using the prompts embedded in `.stitch-run/generate-design.ts`.
- Risk: visual placeholder pricing/changelog data must not ship as factual data.
- Risk: frontend must preserve compliance modules; removing disclaimers/source freshness breaks the design contract.