# pfpmaker.online — Design Handoff

状态：DESIGN_CONDITIONAL_GO
日期：2026-06-03
交付目录：/root/.hermes/reports/site-pfpmaker-20260603/design

## 1. 开发应看的文件

### Stitch 元信息
- `stitch/screen-index.json`
- `stitch/project.json`

### 截图
- `screens/home-desktop.png`
- `screens/home-mobile.png`
- `screens/discord-pfp-maker-desktop.png`
- `screens/discord-pfp-maker-mobile.png`
- `screens/profile-picture-maker-desktop.png`
- `screens/profile-picture-maker-mobile.png`
- `screens/ai-pfp-maker-desktop.png`
- `screens/ai-pfp-maker-mobile.png`
- `screens/editor-empty-desktop.png`
- `screens/editor-empty-mobile.png`
- `screens/editor-upload-desktop.png`
- `screens/editor-upload-mobile.png`
- `screens/editor-edit-desktop.png`
- `screens/editor-edit-mobile.png`
- `screens/editor-result-desktop.png`
- `screens/editor-result-mobile.png`
- `screens/editor-download-desktop.png`
- `screens/editor-download-mobile.png`
- `screens/editor-error-desktop.png`
- `screens/editor-error-mobile.png`
- Key strips: `screens/key-desktop-strip.png`, `screens/key-mobile-strip.png`

### HTML/CSS 视觉真源
- `html/*.html`
- 每个 screen 的 HTML 与同名 PNG 一一对应。
- 最终视觉真源优先级：official Stitch `screen-index.json` + `html/*.html` + `screens/*.png` > 本 HANDOFF 描述。

### 品牌资产
- `assets/icon.svg`
- `assets/wordmark.svg`
- `assets/stacked.svg`
- `assets/horizontal.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/og-image.svg`

## 2. Stitch Project / Screen ID

Project ID: `4998158325019968850`

见 `stitch/screen-index.json`。本包共 20 个 official Stitch SDK screens：

- 4 个公开核心 route × desktop/mobile：home、Discord preset、profile picture maker、AI PFP feature-state page。
- 6 个 editor state × desktop/mobile：empty、upload、edit、result、download、error。

`fallback_status: none`。本包没有把 local fallback 当作 DONE。

## 3. 设计方向

Japanese Minimal utility toolkit — warm ivory, ink UI, teal crop geometry, orange upload CTA, compact editor controls.

判断：做“轻量、即时、平台 preset toolkit”，不做 PFPMaker 风格 AI headshot/photoshoot 站。

竞品避让：
- PFPMaker: 不借 AI headshot/photoshoot、用户量、社证数字、品牌语气。
- Canva / Adobe: 不做重模板编辑器感，强调 no-signup / instant。
- picofme.io: 不用免费 AI 背景移除叙事作为主卖点，转向 platform-ready crop/preset/export。

## 4. Design Tokens

| Token | Value |
|---|---|
| Background | `#F7F2E8` |
| Surface | `#FFFFFF` |
| Surface Muted | `#EFE7D8` |
| Border | `#D7CEC0` |
| Text Primary | `#101114` |
| Text Secondary | `#5C5851` |
| Accent Primary | `#18B7B0` |
| Accent Secondary / CTA | `#FF6B35` |
| Font Display | Sora |
| Font Body | IBM Plex Sans |
| Font Mono Labels | JetBrains Mono |
| Motif | square export frame + circular crop preview ring |

## 5. 首页 IA

1. Navigation
2. Hero: upload-first split editor mockup
3. Short answer / AEO block
4. Platform-ready profile picture presets
5. Edit your profile picture without a design suite
6. Three-step flow: Upload / Style / Download
7. Privacy/trust strip
8. FAQ
9. Footer with independent no-affiliation note

## 6. Route / state coverage

| Name | Route | Purpose |
|---|---|---|
| home | `/` | Primary keyword `pfp maker`, upload-first homepage |
| discord-pfp-maker | `/discord-pfp-maker` | High-intent platform preset page |
| profile-picture-maker | `/profile-picture-maker` | Secondary keyword route |
| ai-pfp-maker | `/ai-pfp-maker` | Feature-state AI page; planned only, no live AI promise |
| editor-empty | `/editor#empty` | Before upload |
| editor-upload | `/editor#upload` | Preparing/upload state |
| editor-edit | `/editor#edit` | Crop/style/preset controls |
| editor-result | `/editor#result` | Export-ready state |
| editor-download | `/editor#download` | Success/download confirmation |
| editor-error | `/editor#error` | Unsupported file / recovery |

## 7. 开发注意事项

- Header/nav must be first page structure. Footer must be final page structure.
- Keep primary CTA as upload/open editor. Do not add fake Sign In, Buy, Checkout, Pro, or account prompts in MVP.
- Preserve copy-package wording for privacy: “The core editor is designed to process basic edits in your browser where possible.” Do not upgrade this to absolute privacy claims unless QA verifies network behavior.
- Platform names are compatibility descriptors only. Do not use platform logos, brand-color UI, or official/endorsed language.
- AI page is feature-state only. If AI is not live, CTA must point to free editor, not “Generate AI PFP”.
- Tool states should be implemented as real reachable UI states or Storybook/test fixtures. QA needs empty/upload/edit/result/download/error coverage.
- Use Stitch HTML spacing and card density as visual truth. Do not replace it with generic Tailwind SaaS cards.

## 8. 需替换的占位内容

Stitch produced usable layout/composition, but some generated screenshots include face/photo/anime-like placeholders. Treat these as temporary visual placeholders, not production assets.

Replace before production with:

1. Abstract initials avatars.
2. Self-authored geometric/blob avatars.
3. Actual product screenshots from the implemented browser-side editor.
4. Safe crop diagrams and platform-agnostic preview shells.

Do not replace with:

- pfpmaker.com visuals.
- Platform logos/UI screenshots.
- Anime/game/celebrity/IP assets.
- AI headshot/photoshoot imagery.
- Fake user counts or social proof.

## 9. Acceptance checklist

- [x] Official Stitch SDK used.
- [x] `screen-index.json` includes projectId/screenId/htmlUrl/imageUrl/local files.
- [x] `fallback_status: none`.
- [x] Desktop and mobile screens delivered for each core page.
- [x] Empty/upload/edit/result/download/error editor states delivered desktop + mobile.
- [x] Brand logo system delivered as SVG.
- [x] Favicon and OG image delivered.
- [x] Content-fit matrix delivered.
- [x] No platform logo requirement preserved in handoff.
- [x] AI feature-state boundary preserved in handoff.
- [!] Placeholder-face replacement required before production.

## 10. Verdict

`DESIGN_CONDITIONAL_GO`

Reason: official Stitch package is complete and implementation-ready, but frontend must replace generated face/photo/anime-like placeholder imagery with safe original abstract/product assets before launch. This is a visual/IP/compliance condition, not a Stitch fallback blocker.