# Project Architecture Showcase HTML 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:** Build a standalone Chinese HTML page that presents the GEO Agent Article Optimizer architecture, business value, technical highlights, MVP boundaries, and expansion paths for customer demonstrations.

**Architecture:** Implement a single static HTML document under `docs/` with embedded CSS and no external dependencies. The document will use semantic sections, responsive CSS grid/flex layouts, and CSS-only diagrams to show the workflow and system layers.

**Tech Stack:** HTML5, embedded CSS, no JavaScript required, no external assets.

---

## File Structure

- Create: `docs/project-architecture-showcase.html`
  - Self-contained customer-facing presentation page.
  - Includes all copy, layout, and responsive CSS in one file.
  - Opens directly in a browser without Next.js, CDN assets, or network access.

## Task 1: Create Static Showcase Page

**Files:**

- Create: `docs/project-architecture-showcase.html`

- [ ] **Step 1: Create the standalone HTML skeleton**

  Add a complete HTML5 document with:

  - `lang="zh-CN"`.
  - UTF-8 charset.
  - Responsive viewport meta tag.
  - Page title: `GEO 智能文章优化器 | 项目架构展示`.
  - Embedded `<style>` block.
  - Body sections for hero, customer problems, workflow architecture, code architecture, highlights, MVP boundary, and expansion roadmap.

- [ ] **Step 2: Add customer-facing Chinese content**

  Add the approved content from `docs/superpowers/specs/2026-06-16-project-architecture-showcase-html-design.md`:

  - Hero positioning: `一个以事实卡为约束、以质量门禁为闭环的 AI 内容优化工作流`.
  - Capability labels: `事实卡约束`, `多节点 Agent 工作流`, `QA 质量门禁`, `定向重写`, `Markdown / Word / JSON 导出`.
  - Customer problems: industry drift, company-name inconsistency, image-text mismatch, official-voice mismatch, platform mismatch, grammar quality, hallucinated claims, and claim inconsistency.
  - Solution loop: extract candidate facts, confirm fact card, optimize under confirmed facts, run quality gates, rewrite failed sections, export after hard failures are cleared.
  - Actual workflow nodes: `Article Input`, `InputNormalizer`, `FactExtractor`, `UserConfirmedFactCard`, `ArticleOptimizer`, `QualityInspector`, `TargetedRewriter`, `Exporter`.
  - Code layers: `src/app`, `src/components`, `src/lib/domain`, `src/lib/workflow`, `src/lib/llm`, `src/lib/db`, tests.
  - Technical highlights, MVP limits, and expansion paths from the design spec.

- [ ] **Step 3: Add responsive presentation styling**

  Add embedded CSS that:

  - Uses a dark professional background with restrained blue/green accents.
  - Keeps text legible on desktop and mobile.
  - Uses cards for repeated units only.
  - Uses CSS-only flow chips and arrows for the architecture diagram.
  - Uses responsive grids for problem/solution, module layers, and highlight sections.
  - Avoids external fonts, images, icons, and scripts.

## Task 2: Verify The Static Page

**Files:**

- Verify: `docs/project-architecture-showcase.html`

- [ ] **Step 1: Confirm the file exists and has no external resources**

  Run:

  ```bash
  test -f docs/project-architecture-showcase.html
  rg -n "https?://|<script|@import|cdn|fonts.googleapis" docs/project-architecture-showcase.html
  ```

  Expected:

  - `test -f` exits successfully.
  - `rg` returns no matches.

- [ ] **Step 2: Confirm required project terms are present**

  Run:

  ```bash
  rg -n "GEO 智能文章优化器|InputNormalizer|FactExtractor|UserConfirmedFactCard|ArticleOptimizer|QualityInspector|TargetedRewriter|Exporter|src/lib/workflow|DeepSeek|SQLite|Markdown / Word / JSON" docs/project-architecture-showcase.html
  ```

  Expected:

  - All required architecture terms appear in the HTML.

- [ ] **Step 3: Confirm the HTML can be opened directly**

  Run:

  ```bash
  open docs/project-architecture-showcase.html
  ```

  Expected:

  - The operating system opens the static HTML file in a browser.
  - No local dev server is required.