跳到主要内容

Chapter 01 High-Fidelity Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Rebuild only the homepage Chapter 01 hero and expertise strip to closely match the approved reference while using the supplied Novilla desktop and mobile screenshots.

Architecture: Keep the existing PortfolioHomepage component and all Chapter 02–06 markup intact. Replace the Chapter 01 project mockup with semantic browser and phone frames, then isolate all visual changes to the hero/expertise CSS selectors and responsive overrides.

Tech Stack: Docusaurus 3.10.1, React 19, TypeScript 6, CSS Modules, Node test runner, Playwright visual QA.

Global Constraints​

  • Modify only Chapter 01 markup and Chapter 01/expertise CSS selectors.
  • Use /assets/home/Novilla官网.png and /assets/home/Novilla官网手机端.png as the displayed project screenshots.
  • Do not add a runtime UI or animation dependency.
  • Keep Chapter 02–06 unchanged.
  • Honor prefers-reduced-motion and preserve keyboard focus visibility.
  • Do not run Shopify Theme Check; this is a Docusaurus/React project.

Task 1: Add a Chapter 01 structural regression test​

Files:

  • Modify: tests/homepage-structure.test.mjs

Interfaces:

  • Consumes: src/components/PortfolioHomepage/index.tsx source text.

  • Produces: a failing test that requires both real Novilla assets, semantic project labels, and the mobile device frame.

  • Step 1: Add the failing test

Add a test that asserts the component contains /assets/home/Novilla官网.png, /assets/home/Novilla官网手机端.png, NOVILLA · DESKTOP + MOBILE, RESPONSIVE STOREFRONT, heroDesktopFrame, and heroPhoneFrame, and no longer contains /img/homepage/hero-product.webp.

  • Step 2: Verify the test fails for the expected missing assets/frames

Run: pnpm test:homepage

Expected: FAIL because the component still renders the AURA lamp mockup.

Task 2: Implement the semantic Novilla project composition​

Files:

  • Modify: src/components/PortfolioHomepage/index.tsx
  • Test: tests/homepage-structure.test.mjs

Interfaces:

  • Consumes: the two static PNG assets and existing hero styles.

  • Produces: real DOM browser/phone frames with descriptive image alt text and project labels.

  • Step 1: Replace only the hero visual markup

Render a heroProject wrapper containing heroDesktopFrame, a browser chrome row with three dots, the desktop image, heroPhoneFrame with a compact speaker/notch and the mobile image, plus the two project labels. Leave the Chapter rail, hero copy, buttons, and all following sections unchanged.

  • Step 2: Run the structural test

Run: pnpm test:homepage

Expected: PASS with all homepage tests green.

Task 3: Match the approved Chapter 01 visual system​

Files:

  • Modify: src/components/PortfolioHomepage/styles.module.css

Interfaces:

  • Consumes: the new Chapter 01 class names.

  • Produces: desktop, tablet, and mobile layouts with the approved proportions and device overlap.

  • Step 1: Refine the desktop hero geometry

Set the hero width, minimum height, columns, chapter rail, title size/leading, actions, browser frame aspect ratio, phone overlap, project labels, shadow, and expertise strip rules to mirror the reference at 1440px.

  • Step 2: Add tablet and mobile adaptations

At existing breakpoints, keep a compact two-column tablet layout; below the mobile breakpoint, stack copy and project visual, scale the phone to roughly 27–30% of the desktop frame, protect labels from overlap, and avoid horizontal page overflow.

  • Step 3: Preserve restrained motion and accessibility

Use one-time reveal motion, a 2–4px hover lift on the project group, visible :focus-visible button outlines, and disable non-essential motion in the existing reduced-motion rule.

Task 4: Visual calibration and verification​

Files:

  • Capture: output/playwright/chapter-01-desktop.png
  • Capture: output/playwright/chapter-01-mobile.png

Interfaces:

  • Consumes: the built homepage and approved reference.

  • Produces: fresh automated and visual evidence that Chapter 01 matches and later chapters remain intact.

  • Step 1: Run automated verification

Run: pnpm test:homepage && pnpm typecheck && pnpm build

Expected: all commands exit 0.

  • Step 2: Capture and inspect desktop

Start the local site, open it at 1440×1000, capture output/playwright/chapter-01-desktop.png, and compare the title rhythm, 5:6 column balance, device overlap, labels, and expertise strip against the reference.

  • Step 3: Capture and inspect mobile

Open at 390×844, capture output/playwright/chapter-01-mobile.png, and confirm readable stacking, correct device crop, intact labels, keyboard focus, and no horizontal page overflow.

  • Step 4: Correct material mismatches and rerun verification

Adjust only Chapter 01 selectors, then rerun pnpm test:homepage, pnpm typecheck, and pnpm build after the final visual change.