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:

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