Visual Storytelling — Visual Storytelling Full Production Pipeline
An agent team collaborates to produce visual story design, text writing, AI image generation, HTML layout, and integrated editing.
Execution Mode
Agent Team — 5 members communicate directly via SendMessage and cross-validate each other's work.
Agent Composition
| Agent |
File |
Role |
Type |
| story-architect |
.claude/agents/story-architect.md |
Narrative Structure, Scene Design |
general-purpose |
| essay-writer |
.claude/agents/essay-writer.md |
Body text, Caption, Quote writing |
general-purpose |
| image-prompter |
.claude/agents/image-prompter.md |
Gemini Image Prompt, |
general-purpose |
| layout-builder |
.claude/agents/layout-builder.md |
HTML/CSS Layout production |
general-purpose |
| editorial-reviewer |
.claude/agents/editorial-reviewer.md |
cross-validate, Verification |
general-purpose |
Workflow
Phase 1: Preparation (Performed Directly by the Orchestrator)
- Extract from user input:
- **Story **: Visual Storyof /
- type (Selection): in/in/BrandStory/
- **** (Selection): ///intense
- **Scene ** (Selection):
- ** File** (Selection): Text, Image,
_workspace/ and _workspace/images/ generate- Organize input and save to
_workspace/00_input.mdin save
- If existing files are present
_workspace/, copy to _workspace/ and skip the corresponding Phase
- Based on the scope of the request determine the execution mode ( " per mode" )
Phase 2: Team Assembly and Execution
compositionand . between of relationship and :
| sequence |
|
|
of |
|
| 1 |
Story Design |
architect |
None |
_workspace/01_story_blueprint.md |
| 2a |
Text writing |
writer |
1 |
_workspace/02_essay_text.md |
| 2b |
Image Prompt· |
prompter |
1 |
_workspace/03_image_prompts.md, images/ |
| 3 |
HTML Layout |
builder |
2a, 2b |
_workspace/04_layout.html |
| 4 |
Editing Review |
reviewer |
2a, 2b, 3 |
_workspace/05_review_report.md |
2a(Text)and 2b(Image) executed in parallel. 1(Story Design)in ofto whenin when .
Inter-team communication flow:
- architect complete -> writerTo Sceneper Text Role·Emotion before, prompterTo Visual ·Image concept before, builderTo Scene Structure·ratio before
- writer complete -> prompterTo Text Emotionand Image before, builderTo Text placement Guide before
- prompter complete -> builderTo Image File··placement Information before
- reviewer cross-validate. 🔴 Must Fix when AgentTo → → Verification (vs 2)
Phase 3: Integration and Final Deliverables
Reviewof based on :
_workspace/ within File verify- from the review report 🔴 Must Fix reflected verify
- summary To :
- Story lean —
01_story_blueprint.md
- in Text —
02_essay_text.md
- Image Prompt —
03_image_prompts.md
- HTML Layout —
04_layout.html
- Review —
05_review_report.md
- Image —
images/
Modes by Task Scale
of in Agent :
| Pattern |
mode |
Agent |
| "Visual Story ", " to" |
Full Pipeline |
5 All |
| "Story Planning " |
Planning mode |
architect + reviewer |
| " in Image " ( Text) |
Image mode |
prompter + reviewer |
| "Textand Imageto HTML " ( ) |
Layout mode |
builder + reviewer |
| " Visual Story " |
Review mode |
reviewer only |
Using Existing Files: Text Image , copy the files to _workspace/in and of Agent .
Data Transfer Protocol
| Strategy |
|
|
| File-Based |
_workspace/ |
Storing and sharing major deliverables |
| Message-Based |
SendMessage |
Real-time delivery of key information, revision requests |
| Task-Based |
TaskCreate/TaskUpdate |
Progress tracking, dependency management |
File naming convention: {}_{Agent}_{}.{}
Error Handling
| in type |
Strategy |
| Image |
vs Prompt 1 when → when + Prompt Text |
|
StoryDesign 3 Suggestion after |
| Agent failure |
1 retry -> if still fails, proceed without that deliverable, note omission in review report |
| RED found in review |
Request revision from relevant agent -> rework -> re-verify (up to 2 times) |
| Image-Text Emotion conflict |
Image Prompt Text |
Test Scenarios
Normal Flow
Prompt: "'whenof ' to Visual in . 8Scene "
Expected Result:
- Story lean: 8Scene Narrative arc, Emotion Curve, Visual ( )
- in Text: Sceneper narration+Caption+Quote, rhythm Writing style
- Image: 8 Style , color palette
- HTML: Responsive Layout, +Text+Quote Pattern combination
- Review: matrix before Verification
Existing File Utilization Flow
Prompt: " in in Image and HTMLto " + Text File
Expected Result:
- Text
_workspace/02_essay_text.mdto
- architect Text Analysisto between lean
- prompter + builder + reviewer
Error Flow
Prompt: "Visual Story , "
Expected Result:
- architect 3 Suggestion (//daily life etc.)
- to , 6Scene composition
- Review in the report " " when
Extended Skills per Agent
per Agentof before Extended Skill:
|
subject Agent |
Role |
image-prompt-engineering |
image-prompter |
5-Layer Prompt Structure, Style , Consistency technique |
narrative-structure-patterns |
story-architect |
3/5/hero's journey Structure, Emotion Curve, Visual rhythm |
1---2name: visual-storytelling3description: Visual Storytellingof Story Design, Text writing, AI Image (Gemini), HTML Layout, Integration Editing an agent team collaborates to production to line. 'Visual Story ', 'in Planning', 'Image+ combination', 'Visual in', 'Story page production', ' Story', 'Visual Planning', 'Image in', ' Story', 'Visual Narrative' etc. Imageand Text Storytelling productionin . Text Image casein Layout Integration . , video Editing, DTP, (JS ) of .4---56# Visual Storytelling — Visual Storytelling Full Production Pipeline78An agent team collaborates to produce visual story design, text writing, AI image generation, HTML layout, and integrated editing.910## Execution Mode1112**Agent Team** — 5 members communicate directly via SendMessage and cross-validate each other's work.1314## Agent Composition1516| Agent | File | Role | Type |17|---------|------|------|------|18| story-architect | `.claude/agents/story-architect.md` | Narrative Structure, Scene Design | general-purpose |19| essay-writer | `.claude/agents/essay-writer.md` | Body text, Caption, Quote writing | general-purpose |20| image-prompter | `.claude/agents/image-prompter.md` | Gemini Image Prompt, | general-purpose |21| layout-builder | `.claude/agents/layout-builder.md` | HTML/CSS Layout production | general-purpose |22| editorial-reviewer | `.claude/agents/editorial-reviewer.md` | cross-validate, Verification | general-purpose |2324## Workflow2526### Phase 1: Preparation (Performed Directly by the Orchestrator)27281. Extract from user input:29 - **Story **: Visual Storyof /30 - **type** (Selection): in/in/BrandStory/31 - **** (Selection): ///intense32 - **Scene ** (Selection): 33 - ** File** (Selection): Text, Image, 342. `_workspace/` and `_workspace/images/` generate353. Organize input and save to `_workspace/00_input.md`in save364. If existing files are present `_workspace/`, copy to _workspace/ and skip the corresponding Phase375. Based on the scope of the request **determine the execution mode** ( " per mode" )3839### Phase 2: Team Assembly and Execution4041 compositionand . between of relationship and :4243| sequence | | | of | |44|------|------|------|------|--------|45| 1 | Story Design | architect | None | `_workspace/01_story_blueprint.md` |46| 2a | Text writing | writer | 1 | `_workspace/02_essay_text.md` |47| 2b | Image Prompt· | prompter | 1 | `_workspace/03_image_prompts.md`, `images/` |48| 3 | HTML Layout | builder | 2a, 2b | `_workspace/04_layout.html` |49| 4 | Editing Review | reviewer | 2a, 2b, 3 | `_workspace/05_review_report.md` |5051 2a(Text)and 2b(Image) **executed in parallel**. 1(Story Design)in ofto whenin when .5253**Inter-team communication flow:**54- architect complete -> writerTo Sceneper Text Role·Emotion before, prompterTo Visual ·Image concept before, builderTo Scene Structure·ratio before55- writer complete -> prompterTo Text Emotionand Image before, builderTo Text placement Guide before56- prompter complete -> builderTo Image File··placement Information before57- reviewer cross-validate. 🔴 Must Fix when AgentTo → → Verification (vs 2)5859### Phase 3: Integration and Final Deliverables6061Reviewof based on :62631. `_workspace/` within File verify642. from the review report 🔴 Must Fix reflected verify653. summary To :66 - Story lean — `01_story_blueprint.md`67 - in Text — `02_essay_text.md`68 - Image Prompt — `03_image_prompts.md`69 - HTML Layout — `04_layout.html`70 - Review — `05_review_report.md`71 - Image — `images/` 7273## Modes by Task Scale7475 of in Agent :7677| Pattern | mode | Agent |78|----------------|----------|-------------|79| "Visual Story ", " to" | **Full Pipeline** | 5 All |80| "Story Planning " | **Planning mode** | architect + reviewer |81| " in Image " ( Text) | **Image mode** | prompter + reviewer |82| "Textand Imageto HTML " ( ) | **Layout mode** | builder + reviewer |83| " Visual Story " | **Review mode** | reviewer only |8485**Using Existing Files**: Text Image , copy the files to `_workspace/`in and of Agent .8687## Data Transfer Protocol8889| Strategy | | |90|------|------|------|91| File-Based | `_workspace/` | Storing and sharing major deliverables |92| Message-Based | SendMessage | Real-time delivery of key information, revision requests |93| Task-Based | TaskCreate/TaskUpdate | Progress tracking, dependency management |9495File naming convention: `{}_{Agent}_{}.{}`9697## Error Handling9899| in type | Strategy |100|----------|------|101| Image | vs Prompt 1 when → when + Prompt Text |102| | StoryDesign 3 Suggestion after |103| Agent failure | 1 retry -> if still fails, proceed without that deliverable, note omission in review report |104| RED found in review | Request revision from relevant agent -> rework -> re-verify (up to 2 times) |105| Image-Text Emotion conflict | Image Prompt Text |106107## Test Scenarios108109### Normal Flow110**Prompt**: "'whenof ' to Visual in . 8Scene "111**Expected Result**:112- Story lean: 8Scene Narrative arc, Emotion Curve, Visual ( )113- in Text: Sceneper narration+Caption+Quote, rhythm Writing style114- Image: 8 Style , color palette115- HTML: Responsive Layout, +Text+Quote Pattern combination116- Review: matrix before Verification117118### Existing File Utilization Flow119**Prompt**: " in in Image and HTMLto " + Text File120**Expected Result**:121- Text `_workspace/02_essay_text.md`to 122- architect Text Analysisto between lean 123- prompter + builder + reviewer 124125### Error Flow126**Prompt**: "Visual Story , "127**Expected Result**:128- architect 3 Suggestion (//daily life etc.)129- to , 6Scene composition130- Review in the report " " when131132## Extended Skills per Agent133134per Agentof before Extended Skill:135136| | subject Agent | Role |137|------|-------------|------|138| `image-prompt-engineering` | image-prompter | 5-Layer Prompt Structure, Style , Consistency technique |139| `narrative-structure-patterns` | story-architect | 3/5/hero's journey Structure, Emotion Curve, Visual rhythm |
revfactory