105 lines
4.2 KiB
Markdown
105 lines
4.2 KiB
Markdown
# 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.
|
|
|