makelore/design-qa.md

Comparison Target

• Source visual truth: /var/folders/m7/x9ry3xgx4x50fxb20_0108tr0000gn/T/codex-clipboard-58e2cc35-7a17-4951-8bbc-53fee12d5246.png, superseded at the lower action area by the user's explicit follow-ups: use a standalone 新增项目 CTA and horizontally arranged existing-project cards, not a conversation box, and omit the visible 已有项目 / 选择一个项目继续 labels.
• Implementation screenshot: /Users/inmanx/.codex/visualizations/2026/09/06/01a0756a-b6f5-7892-a11c-1c1608ebe592/makelore-coding-default-v3.png
• Full-view comparison: /Users/inmanx/.codex/visualizations/2026/09/06/01a0756a-b6f5-7892-a11c-1c1608ebe592/codex-reference-vs-makelore-v3.png
• Focused lower-region comparison: /Users/inmanx/.codex/visualizations/2026/09/06/01a0756a-b6f5-7892-a11c-1c1608ebe592/codex-reference-vs-makelore-v3-bottom.png
• State: Codex reference start screen and Makelore Code with two remembered local projects but no active project.
• Viewport: implementation CSS viewport 1280 x 800 at device scale factor 1. The source is 908 x 835 pixels with unknown capture density. For full-view comparison, the source was aspect-fit onto a 1280 x 800 white canvas and the implementation remained at its native 1280 x 800 size. The focused comparison uses a 400-pixel-tall lower crop from each normalized content region.

Findings

• No actionable P0, P1, or P2 differences remain after applying the user's correction.
• Fonts and typography: the M hero keeps the reference's restrained system-sans hierarchy and single-line display copy. The CTA, project names, and recency metadata form a clear descending hierarchy without crowding or truncation at the verified viewport.
• Spacing and layout rhythm: the hero retains generous white space. The standalone CTA is visually separated from the existing-project row, and fixed-width cards create a true horizontal browsing pattern without increasing page height as the catalog grows.
• Colors and visual tokens: the CTA uses the existing Makelore brand orange and the cards use existing neutral surface tokens, preserving the single light product system and one-accent discipline.
• Image quality and asset fidelity: the hero uses the repository's existing vector Makelore M asset. Project cards use the product's installed icon library; no placeholder image, CSS drawing, or reconstructed logo is present.
• Copy and content: 新增项目 remains the only action label above the card rail. The redundant 已有项目 heading and 选择一个项目继续 helper are absent; project cards themselves use real project names and last-opened timestamps from the local catalog.
• Interaction and accessibility: the CTA opens the existing creation dialog; each card has a project-specific accessible name, keyboard focus treatment, pressed feedback, horizontal overflow, and routes through the Sidebar's existing validated project-entry behavior.

Open Questions

• None. The source screenshot's composer remains useful only for overall composition; the user's later instruction is authoritative for the lower interaction model.

Full-view Comparison Evidence

• The combined view preserves the reference's primary visual order: small centered mark, large guide sentence, ample whitespace, then the entry action area.
• The Makelore-specific CTA and project cards occupy the same quiet lower zone without resembling an editable conversation surface.

Focused Region Comparison Evidence

• The focused comparison confirms that the earlier composer-shaped block is gone. The orange CTA is isolated and unmistakably actionable, while the two project cards align on one horizontal baseline with consistent icon, title, date, radius, and elevation treatment.

Comparison History

• Pass 1: the user identified a P1 interaction-model mismatch: the lower surface looked like a default conversation box and omitted horizontally arranged existing projects.
• Fix: replaced the composer-shaped starter with a standalone 新增项目 CTA; added a horizontal, overflow-safe row backed by the real project catalog; connected card clicks to the existing Sidebar entry path; added unit and Electron coverage.
• Pass 2: the revised full-view and focused comparisons show the corrected CTA/card hierarchy with no remaining actionable P0/P1/P2 findings.
• Pass 3: removed the visible project-section heading and helper copy at the user's request. The fresh screenshot and focused comparison confirm that the CTA now leads directly into the unchanged horizontal card rail.

Implementation Checklist

• Keep the Makelore M mark and large centered guide sentence.
• Remove the composer-shaped no-project starter.
• Add one standalone 新增项目 primary CTA.
• Render real existing projects as horizontal cards.
• Remove the visible 已有项目 and 选择一个项目继续 labels.
• Reuse the existing creation and validated project-entry flows.
• Verify both the empty catalog and remembered-project states in Electron.

Follow-up Polish

• None required for this correction.

final result: passed