HTML Design Workflow

A 4-stage automated pipeline that transforms design images into production-ready HTML/Tailwind code.

Required Inputs

Create these files before running:

• •files/inputs/target_image.png - The UI design image
• •files/inputs/topic.txt - Topic/context description (e.g., "个人主页")

Workflow Stages

The pipeline runs sequentially - each stage depends on the previous:

Stage 1: PRD Architect

• •Input: target_image.png + topic.txt
• •Output: files/workspace/1_prd_draft.md
• •Full prompt: references/agent1-prd-architect.md

Stage 2: Structure Sketch Designer

• •Input: PRD draft + original image
• •Output: files/workspace/2_structure_sketch.md
• •Full prompt: references/agent2-sketch-designer.md

Stage 3: Hierarchy Logic Mapper

• •Input: PRD + Structure Sketch
• •Output: files/workspace/3_hierarchy_logic.md
• •Full prompt: references/agent3-logic-mapper.md

Stage 4: UI Art Director

• •Input: PRD (style) + Hierarchy (structure)
• •Output: files/workspace/4_ui_design.md
• •Full prompt: references/agent4-ui-director.md

Orchestrator

For automated pipeline management, see: references/orchestrator.md

The orchestrator:

• •Verifies inputs exist
• •Spawns agents sequentially
• •Validates each stage output before proceeding
• •Reports completion status

Technical Stack

• •HTML5 + Tailwind CSS 2.2.19
• •Font Awesome 6.0.0
• •Google Fonts: Noto Serif SC, Noto Sans SC

Quick Start

mkdir -p files/inputs files/workspace
cp your-design.png files/inputs/target_image.png
echo "个人主页" > files/inputs/topic.txt

Then follow the orchestrator workflow or run each agent stage manually.