# aicodingpricing leaderboard — UX / Design Handoff

状态：可交给前端实现（DESIGN_GO with data-safety guardrails）
日期：2026-05-28
任务：t_f7e78ca6
站点：aicodingpricing.com
主题：AI Coding Model Leaderboard / decision-engine inner pages

## 1. 结论

把 leaderboard 做成“模型采购决策面板”，不是排名娱乐网站。

核心设计判断：
- 视觉方向：Industrial editorial dashboard。
- 信息优先级：workflow → evidence → token price → task-cost calculator → caveat/source。
- 关键转化链：`/llm-leaderboard` row CTA → `/coding-agent-cost-calculator?model=<model>&workflow=<workflow>`。
- P0 不做“best overall”或综合分；只做 workflow shortlist + source-backed fields。

## 2. 开发应看的文件

### Design docs
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/HANDOFF.md`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/content-fit-matrix.md`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/responsive-layout-notes.md`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/component-inventory.md`

### Stitch metadata
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/stitch/screen-index.json`

### HTML visual truth
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/html/llm-leaderboard-desktop.html`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/html/llm-leaderboard-mobile.html`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/html/recommender-calculator-transition-desktop.html`

### Screenshots
Stitch exported preview screenshots:
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/screens/llm-leaderboard-desktop.png`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/screens/llm-leaderboard-mobile.png`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/screens/recommender-calculator-transition-desktop.png`

Browser-rendered full screenshots for implementation reference:
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/screens/llm-leaderboard-desktop-full.png`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/screens/llm-leaderboard-mobile-full.png`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/design/screens/recommender-calculator-transition-desktop-full.png`

### Input sources
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/input-brief.md`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/seo-copy-freeze.md`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/data-contract.md`
- `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/model-leaderboard-seed.json`

## 3. Stitch evidence

Generated via official `@google/stitch-sdk`.

- Project ID: `9639735303367778938`
- Desktop screen: `55962e35703e41cf91d788bb709b8ab0`
- Mobile screen: `27ed96be82d24a4e806ffac01179d4e0`
- Recommender/calculator state screen: `1ebf3b28d8d9476bb9d0c8284be09757`
- Fallback status: `none`

Important: the Stitch output was compliance-remediated in local HTML before browser screenshot export. Use the local HTML and full screenshots as implementation truth, not the raw remote thumbnail alone.

## 4. Design direction

Industrial editorial dashboard — source-led, dense, dark, precise.

Design tokens:

| Token | Value |
|---|---|
| Background | `#0B0F14` |
| Surface | `#111821` |
| Surface elevated | `#1B252E` |
| Text primary | `#D7E2EA` |
| Text secondary | `#9FB0BA` |
| Evidence / source-backed | `#7CFFB2` |
| Partial / needs recheck | `#FFB454` |
| Link / secondary accent | `#6EA8FF` |
| Error / estimate caveat | `#EA6B66` |
| Font display | Sora |
| Font body | IBM Plex Sans |
| Font data / labels | JetBrains Mono |

Do not replace this with Tailwind default blue/purple gradients.

## 5. Page IA

### /llm-leaderboard

1. Existing-site nav
2. Hero: decision-engine positioning
3. Above-fold answer block
4. Workflow filter rail
5. Recommender cards
6. Leaderboard table / mobile model cards
7. Unknown value legend
8. Methodology blocks
9. Calculator transition module
10. FAQ + footer

### /best-llm-for-coding

1. Scenario guide hero
2. Short answer
3. Scenario cards:
   - coding agents
   - repo refactor / code review
   - frontend generation
   - cheapest good-enough
   - Chinese coding workflow
4. Evidence table intro
5. Methodology/caveat block
6. Calculator CTA bridge
7. FAQ

### /coding-agent-cost-calculator

1. Calculator-first hero
2. Model/workflow prefill summary
3. Assumption input grid
4. Formula + component cost explanation
5. Estimate caveat notice
6. Sensitivity notes
7. Sample scenarios
8. Return-to-leaderboard CTA
9. FAQ

## 6. Component implementation map

Implement these as reusable components:

- `WorkflowFilterRail`
- `UnknownValueLegend`
- `LeaderboardTable`
- `LeaderboardModelCard`
- `BenchmarkEvidenceCell`
- `PriceCell`
- `ContextCell`
- `SpeedCell`
- `DataStatusBadge`
- `SourceFreshnessLine`
- `WorkflowQuestionCard`
- `RecommenderResultPanel`
- `RecommendationModelCard`
- `CalculatorBridge`
- `CalculatorPrefillSummary`
- `AssumptionInputGrid`
- `EstimateCaveatNotice`
- `MethodologyGrid`
- `FAQAccordion`

Full inventory: `component-inventory.md`.

## 7. Data safety rules for frontend

P0 blockers:

1. No universal ranking score.
2. No “best overall”.
3. No inferred speed while `speed_source` is null.
4. No `0` for unknown price/context/speed.
5. No hidden caveats.
6. No calculator price prefill unless source-backed.
7. No task-cost estimate until user assumptions exist.
8. No provider logos unless asset rights are explicitly handled.

Unknown values must render as:
- `not disclosed`
- `not publicly benchmarked`
- `source needs recheck`
- `partial evidence`

## 8. Responsive requirements

Desktop:
- Keep semantic table.
- Sticky header allowed.
- Row caveat/source visible.
- CTA remains on each row.

Mobile:
- Replace table with cards.
- Keep caveat/source/CTA visible in every model card.
- Filters become horizontal chips.
- 44px minimum touch target.
- No horizontal page overflow.

Full detail: `responsive-layout-notes.md`.

## 9. Frontend inputs

Required from upstream/current artifacts:

- Dataset: `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/model-leaderboard-seed.json`
- Contract: `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/data-contract.md`
- Copy: `/root/.hermes/reports/aicodingpricing-leaderboard-20260528/seo-copy-freeze.md`

Still needs product/data confirmation before production claims:
- Existing aicodingpricing repo path and data directory convention.
- Whether the 9-row seed is launch-visible or hidden behind `source_needs_recheck` rows.
- Exact model alias mapping for OpenAI, Gemini, Kimi, Qwen rows.
- Exact official context sources for Anthropic/OpenAI/Gemini/Kimi/Qwen rows.
- Public speed source, if speed is shipped in V1.
- Calculator default task assumptions, or approval to keep them blank.

## 10. Anti-AI-slop check

Passed:
- No purple gradient SaaS hero.
- No generic centered hero + 3 feature cards.
- No emoji icons.
- No provider-logo dependency.
- Caveats are visible.
- Unknown states are designed as first-class UI.
- Desktop and mobile have separate Stitch screens.
- Local full screenshots rendered from HTML.

Watch item:
- Raw Stitch generation introduced a few unsafe certainty labels. They were remediated in local HTML before final screenshot export. Frontend should use local files and contract rules, not infer from raw generated phrasing.

## 11. Handoff status

DESIGN_GO for frontend implementation under the above guardrails.

No code repository changes were made. This task produced design artifacts only under the report root.