Product Design Flow — 全流程地图 + AI 介入方法

Overview

Provide a self-contained, single-file web app that teaches and applies the complete product
design process. The app combines a 7-stage flow map, AI intervention methods + selection
guidance per stage, a prompt-template library, real cases organized by domain, and a
local-first workflow board. The bundled assets/product-design-flow.html is a ready-to-run
industrial/HMI styled template — copy it, then customize content or visuals per the steps below.

When to use

• User wants a product-design methodology / process tool, learning app, or teaching aid.
• User asks to visualize "设计全流程", "双钻 / 设计思维", or "AI 在设计里怎么用".
• User wants to ship a hardcore industrial-style (HMI / blueprint) design reference web app.
• User needs prompt templates for design-stage AI tasks, or real cases grouped by domain.

App architecture (reference)

The template is a single static HTML file (inline CSS + inline JS + inline data). No build
step, no server, no external dependencies. Open by double-click or serve statically.

Core modules (all present in the template):

1. Flow map (home) — blueprintSVG() renders an inline blueprint topology of the 7 stages
   with pulsing nodes, flowing energy dots, and a scan sweep. Click a node → stage detail.
2. Stage detail — for each stage: key questions, method cards, AI intervention cards,
   selection advice (decision dimensions), real cases touching that stage, a track lens, and
   AI prompt templates. Stages use STAGES + STAGE_COLORS in APP_DATA.
3. AI decisioner (#/decision) — pick stage + goal → get recommended AI tools and steps;
   also surfaces matching prompt templates.
4. Prompt library (#/prompts) — 21 ready-to-use prompt templates (3 per stage), filterable
   by stage and goal, with copy / send-to-AI.
5. Cases library (#/library) — real cases grouped by 4 domains (see below), each tagged
   with the stages it touches (clickable), key methods, AI intervention, and outcome. Filterable.
6. Workflow board (#/collab) — 4-column kanban (todo / doing / review / done) over the 7
   stages, assign owners, due dates, knowledge assets. Persists to localStorage.
7. Settings (#/settings) — pluggable real AI: paste an OpenAI-compatible key+endpoint to
   enable "let AI plan this stage" / "send prompt to AI"; without a key it falls back to the
   knowledge base.

Domain & track model (content backbone)

• 4 domains (DOMAINS + DOMAIN_CASES): 智慧出行 (mobility), 高端装备 (equipment), 生态健康
  (ecohealth), 文化传承 (culture). Each domain has 4 real cases. Domain icons are inline HUD
  SVGs generated by domainLogoHTML(id, size, color) — edit those paths to change the glyphs.
• 4 tracks (TRACKS + STAGE_TRACKS): 移动 App / Web·SaaS / 智能硬件 / 服务设计. Each stage
  exposes track-specific methods + case + pitfall via the "赛道视角" lens.
• 7 stages (STAGES): discover / define / ideate / prototype / validate / deliver / iterate.
  NOTE: the validation stage id is validate (not verify — verify is a GOALS goal id).

Customization workflow

To produce a new or modified app from this skill:

1. Copy the template to the target location:
   cp assets/product-design-flow.html [destination]/index.html
   (or just open it directly).
2. Edit content by finding the window.APP_DATA = { ... } block and changing:
   - STAGES[].cases, STAGES[].template — per-stage real cases and checklists.
   - DOMAINS / DOMAIN_CASES — add/adjust domain cases.
   - TRACKS / STAGE_TRACKS — adjust track-specific methods.
   - PROMPTS — add/replace prompt templates (use {占位符} for user fill-ins).
   - GOALS — decisioner goal taxonomy.
3. Edit visuals in the <style> block or blueprintSVG() / domainLogoHTML():
   - Colors via CSS vars (--bg, --panel, --accent amber, --ai screen-green,
   --blueprint cyan).
   - HMI frame, scanline, alarm pulse, blueprint animation are all CSS/SMIL — tune keyframes.
4. Wire real AI (optional): set endpoint + key in Settings; aiGenerate() and sendPrompt()
   already call the endpoint. Default expects an OpenAI-compatible /chat/completions.
5. Validate by opening in a browser; for automated checks, load the file in jsdom and walk
   the hash routes (#/, #/stage/STAGE_ID, #/decision, #/prompts, #/library, #/collab,
   #/settings), asserting no runtime errors. Remember the live clock setInterval keeps node
   alive — call process.exit(0) at the end of any node test harness.

Resources

assets/

• product-design-flow.html — the complete, runnable single-file app (industrial/HMI styled).
  Copy this as the starting point for any new build.

Notes / pitfalls

• Single file is the deliverable; do NOT split CSS/JS unless the user wants a multi-file project.
• STAGE_COLORS keys must match STAGES[].id; prompt keys must match stage ids (validate,
  not verify).
• Domain logos are inline SVG (no image files) — keep them inline so the file stays portable.
• All user data (workflow board, AI settings) lives in localStorage; clearing it resets state.