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/1prddraft.md
• Full prompt: [references/agent1-prd-architect.md](references/agent1-prd-architect.md)

Stage 2: Structure Sketch Designer

• Input: PRD draft + original image
• Output: files/workspace/2structuresketch.md
• Full prompt: [references/agent2-sketch-designer.md](references/agent2-sketch-designer.md)

Stage 3: Hierarchy Logic Mapper

• Input: PRD + Structure Sketch
• Output: files/workspace/3hierarchylogic.md
• Full prompt: [references/agent3-logic-mapper.md](references/agent3-logic-mapper.md)

Stage 4: UI Art Director

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

Orchestrator

For automated pipeline management, see: [references/orchestrator.md](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.