@lalalic/markcut 2.1.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/{SKILL.md → skills/markcut/SKILL.md} +8 -2
- package/skills/markcut/docs/template.md +213 -0
- package/{templates → skills/markcut/docs/templates}/courseware/TEMPLATE.md +220 -10
- package/{templates → skills/markcut/docs/templates}/courseware/prompts/outline.md +5 -0
- package/{templates → skills/markcut/docs/templates}/courseware/prompts/scene.md +6 -0
- package/skills/markcut/docs/templates/deep-dive/TEMPLATE.md +355 -0
- package/skills/markcut/docs/templates/deep-dive/agents/researcher.md +69 -0
- package/skills/markcut/docs/templates/deep-dive/agents/reviewer.md +108 -0
- package/skills/markcut/docs/templates/deep-dive/prompts/fix.md +28 -0
- package/skills/markcut/docs/templates/deep-dive/prompts/outline.md +102 -0
- package/skills/markcut/docs/templates/deep-dive/prompts/script.md +64 -0
- package/skills/markcut/docs/templates/illustrated-book/TEMPLATE.md +360 -0
- package/skills/markcut/docs/templates/illustrated-book/agents/reviewer.md +115 -0
- package/skills/markcut/docs/templates/illustrated-book/prompts/fix.md +29 -0
- package/skills/markcut/docs/templates/illustrated-book/prompts/illustration.md +35 -0
- package/skills/markcut/docs/templates/illustrated-book/prompts/story.md +69 -0
- package/skills/markcut/docs/templates/short-film/TEMPLATE.md +387 -0
- package/skills/markcut/docs/templates/short-film/agents/reviewer.md +115 -0
- package/skills/markcut/docs/templates/short-film/prompts/fix.md +29 -0
- package/skills/markcut/docs/templates/short-film/prompts/screenplay.md +101 -0
- package/skills/markcut/docs/templates/short-film/prompts/storyboard.md +54 -0
- package/skills/markcut/docs/templates/short-video/TEMPLATE.md +302 -0
- package/skills/markcut/docs/templates/short-video/agents/reviewer.md +94 -0
- package/skills/markcut/docs/templates/short-video/prompts/fix.md +27 -0
- package/skills/markcut/docs/templates/short-video/prompts/script.md +65 -0
- package/skills/markcut/docs/templates/vlog/TEMPLATE.md +405 -0
- package/skills/markcut/docs/templates/vlog/agents/reviewer.md +89 -0
- package/skills/markcut/docs/templates/vlog/agents/story-writer.md +100 -0
- package/skills/markcut/docs/templates/vlog/prompts/bgm-select.md +38 -0
- package/skills/markcut/docs/templates/vlog/prompts/group-clips.md +93 -0
- package/skills/markcut/docs/templates/vlog/prompts/local-context.md +59 -0
- package/skills/markcut/docs/templates/vlog/prompts/outline.md +56 -0
- package/skills/markcut/docs/templates/vlog/prompts/review-fix.md +27 -0
- package/skills/markcut/docs/templates/vlog/prompts/storyboard.md +41 -0
- package/src/config.mjs +11 -3
- package/src/player/server.mjs +3 -5
- /package/{docs → skills/markcut/docs}/edit-mode.md +0 -0
- /package/{docs → skills/markcut/docs}/json-descriptive.md +0 -0
- /package/{docs → skills/markcut/docs}/label-mode.md +0 -0
- /package/{docs → skills/markcut/docs}/markdown-descriptive.md +0 -0
- /package/{docs → skills/markcut/docs}/system-prompt-edit.md +0 -0
- /package/{templates → skills/markcut/docs/templates}/courseware/agents/reviewer.md +0 -0
- /package/{templates → skills/markcut/docs/templates}/courseware/prompts/fix.md +0 -0
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# Prompt: Deep Dive Scene Script
|
|
2
|
+
|
|
3
|
+
> Fill every `{placeholder}`, then execute in your own context.
|
|
4
|
+
> Run once per angle/section from the outline.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
You are writing one section of a {tone} deep-dive video essay on "{topic}".
|
|
9
|
+
|
|
10
|
+
Section from outline:
|
|
11
|
+
|
|
12
|
+
{outline_section}
|
|
13
|
+
|
|
14
|
+
## Rules
|
|
15
|
+
|
|
16
|
+
### Scene types for this section
|
|
17
|
+
|
|
18
|
+
Choose scene types that create visual variety. Aim for at least 2 different types in this section:
|
|
19
|
+
|
|
20
|
+
- **Claim scene**: state a point, then support it. `layout:parallel`, visual + subtitle + script.
|
|
21
|
+
- **Evidence scene**: show data, a quote, or a case study. Bold text for the key number/quote.
|
|
22
|
+
- **Source citation**: brief attribution overlay. Subtle styling.
|
|
23
|
+
- **Comparison**: two ideas side-by-side. Use `SplitComparison` component.
|
|
24
|
+
- **Transition**: short bridge between ideas. 3-5s, metaphorical visual.
|
|
25
|
+
|
|
26
|
+
### Visual prompts (`src:auto prompt:"..."`)
|
|
27
|
+
- Make every visual count. Avoid generic stock footage descriptions.
|
|
28
|
+
- For abstract concepts, use metaphorical or atmospheric descriptions.
|
|
29
|
+
- Include style/lighting/mood in the prompt (e.g., "cinematic, warm lighting, shallow depth of field").
|
|
30
|
+
- For data/evidence scenes, describe a visual representation of the data.
|
|
31
|
+
|
|
32
|
+
### Narration
|
|
33
|
+
- Scene-level hook: start each scene with a reason to keep watching.
|
|
34
|
+
- 2.5-3 words/second. A 15s scene ≈ 40-45 words.
|
|
35
|
+
- Cite sources in the narration: "According to..." "A 2023 study found..."
|
|
36
|
+
- End with a hook into the next scene or section.
|
|
37
|
+
- No filler phrases.
|
|
38
|
+
|
|
39
|
+
### On-screen text (subtitle)
|
|
40
|
+
- Key claims: 36-48px, bold, centered.
|
|
41
|
+
- Data/statistics: 40-56px, colored (`#ffd700` for emphasis).
|
|
42
|
+
- Quotes: 32-40px, with quotation marks, citation below.
|
|
43
|
+
- Citations: 18-24px, italic, subtle color.
|
|
44
|
+
- Max 15 words per subtitle frame. For longer quotes, split across frames.
|
|
45
|
+
|
|
46
|
+
### Effects
|
|
47
|
+
- Use `effect:fadeIn` for citation overlays.
|
|
48
|
+
- Use `effect:slideInRight` for evidence reveals.
|
|
49
|
+
- Use `effect:zoomIn` for dramatic moments.
|
|
50
|
+
|
|
51
|
+
## Output format
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
### Section: <Name>
|
|
55
|
+
|
|
56
|
+
#### Scene 1: <Scene type>
|
|
57
|
+
layout:parallel
|
|
58
|
+
- image src:auto prompt:"<visual prompt>" effect:<effect> duration:<s>
|
|
59
|
+
- subtitle src:"<on-screen text>" duration:<s> type:Typewriter fontSize:<px>
|
|
60
|
+
style:"<css>"
|
|
61
|
+
- script "<narration>"
|
|
62
|
+
|
|
63
|
+
#### Scene 2: ...
|
|
64
|
+
```
|
|
@@ -0,0 +1,360 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: illustrated-book
|
|
3
|
+
description: Turn a story, poem, or topic into an animated illustrated picture-book video — narrated text with full-screen illustrations, gentle animations, and page-turn pacing.
|
|
4
|
+
when-to-use: children's stories, illustrated poetry, art books, fables, visual storytelling, any content that pairs written text with consistent-style illustrations
|
|
5
|
+
engine: "@lalalic/markcut — run via `npx @lalalic/markcut`"
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Illustrated Book (多媒体绘本) Template
|
|
9
|
+
|
|
10
|
+
Follow this file top to bottom. Read the markcut skill (`SKILL.md` → `docs/markdown-descriptive.md`) first if you have not.
|
|
11
|
+
|
|
12
|
+
```mermaid
|
|
13
|
+
flowchart LR
|
|
14
|
+
Input[📥 Story / Poem / Topic] --> Text[✍️ story.md<br/>text + page breakdown]
|
|
15
|
+
Text --> Pages[📋 page plan + text per spread]
|
|
16
|
+
Style[🎨 art style] --> Illustrations[🖼️ illustration.md<br/>per-page visual prompts]
|
|
17
|
+
Pages --> Illustrations
|
|
18
|
+
Illustrations --> Book[📄 book.md]
|
|
19
|
+
BGM["🎵 BGM (optional)"] --> Book
|
|
20
|
+
Book --> Render[🎬 npx markcut render]
|
|
21
|
+
Render --> MP4[📺 final.mp4]
|
|
22
|
+
MP4 --> Reviewer[🔍 reviewer agent]
|
|
23
|
+
Reviewer -->|FAIL| Fix[🔧 fix]
|
|
24
|
+
Fix --> Book
|
|
25
|
+
Reviewer -->|PASS| Done[✅ Done]
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
| Path | Runs in | Purpose |
|
|
29
|
+
|---|---|---|
|
|
30
|
+
| `TEMPLATE.md` | your context | everything |
|
|
31
|
+
| `prompts/*.md` | your context | fill-in prompts you execute |
|
|
32
|
+
| `agents/*.md` | separate session | subagent definitions |
|
|
33
|
+
|
|
34
|
+
## 0. Prerequisites
|
|
35
|
+
|
|
36
|
+
- `npx @lalalic/markcut` runnable
|
|
37
|
+
- TTS CLI (default: `edge-tts`) — narration voice, warm and expressive
|
|
38
|
+
- ITT CLI (for `src:auto` illustration generation) — **strongly recommended**, illustrations are the core of this format
|
|
39
|
+
- `ffmpeg`/`ffprobe` on PATH
|
|
40
|
+
- For reviewer: image-understanding capability, STT CLI
|
|
41
|
+
|
|
42
|
+
## 1. Inputs — collect before starting
|
|
43
|
+
|
|
44
|
+
| Input | Required | Default | Notes |
|
|
45
|
+
|---|---|---|---|
|
|
46
|
+
| Story / text / topic | **yes** | — | the text to illustrate. Can be: a complete story, a poem, a topic to write about, or an existing text to adapt |
|
|
47
|
+
| Source material | no | — | optional: URL, PDF, or existing text to adapt as picture book |
|
|
48
|
+
| Book type | no | `story` | `story` (narrative arc), `poetry` (verse-by-verse), `educational` (fact-based, like a nature guide), `wordless` (images only, minimal text) |
|
|
49
|
+
| Art style | **yes** | — | the illustration style for ALL pages. Must be consistent. Examples: "watercolor, soft pastels, children's book illustration style", "ink wash painting, traditional Chinese style", "digital painting, studio Ghibli inspired, warm lighting", "woodcut print style, high contrast black and white", "vintage botanical illustration, sepia tones". This single style string is injected into every TTI prompt. |
|
|
50
|
+
| Language | no | en | narration and on-screen text language |
|
|
51
|
+
| Reading pace | no | `moderate` | `slow` (3-4s per line, ~10s per spread), `moderate` (2-3s per line, ~7s per spread), `fast` (1.5-2s per line, ~5s per spread) |
|
|
52
|
+
| Voice | no | en: `en-US-JennyNeural` | edge-tts voice. Prefer warm, expressive voices for storytelling |
|
|
53
|
+
| BGM mood | no | `ambient` | optional background music. "soft piano", "ambient nature", "lullaby", or "none" |
|
|
54
|
+
| Pages | no | auto | target number of spreads/pages. Auto-calculated from text if not set |
|
|
55
|
+
|
|
56
|
+
**Style consistency rule**: The `art_style` string is THE single source of truth for illustration style. Every visual prompt across all pages must incorporate this style string. Art style inconsistency is a blocker — the reviewer checks for it.
|
|
57
|
+
|
|
58
|
+
## 2. Scene grammar — book structure
|
|
59
|
+
|
|
60
|
+
### Overview
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
# video ← root: width:1920 height:1080 fps:30 layout:series
|
|
64
|
+
│ subtitle:{fontSize:"40px",fontFamily:"Georgia,serif"}
|
|
65
|
+
│ tts:"<edge-tts CLI>"
|
|
66
|
+
│ transition:fade(0.5)
|
|
67
|
+
├── - audio isBackground:true src:bgm.mp3 volume:0.08 (optional)
|
|
68
|
+
│
|
|
69
|
+
├── ## Cover ← Title + author + establishing illustration
|
|
70
|
+
│ layout:parallel
|
|
71
|
+
│ - image src:auto prompt:"<cover visual, art_style>" duration:6 effect:zoomIn
|
|
72
|
+
│ - subtitle src:"<Title>" duration:6
|
|
73
|
+
│ fontSize:"64px" style:"fontWeight:bold;text-shadow:0 4px 20px rgba(0,0,0,.6)"
|
|
74
|
+
│ - subtitle src:"by <Author>" duration:6 start:3
|
|
75
|
+
│ fontSize:"32px" style:"fontStyle:italic;color:#ccc"
|
|
76
|
+
│ - script "<title and author, read aloud>"
|
|
77
|
+
│
|
|
78
|
+
├── ## Spread 1 ← Story content: one spread per scene
|
|
79
|
+
│ layout:parallel
|
|
80
|
+
│ - image src:auto prompt:"<illustration for this spread, art_style>" duration:8 effect:zoomIn
|
|
81
|
+
│ - subtitle src:"<story text — one spread's worth>" duration:8
|
|
82
|
+
│ style:"position:absolute;bottom:80px;left:60px;right:60px;text-align:center;
|
|
83
|
+
│ text-shadow:0 2px 10px rgba(0,0,0,.5);line-height:1.6"
|
|
84
|
+
│ - script "<narration reading the text>"
|
|
85
|
+
│
|
|
86
|
+
├── ## Spread 2
|
|
87
|
+
│ ...
|
|
88
|
+
│
|
|
89
|
+
└── ## Colophon ← Credits, "The End", copyright
|
|
90
|
+
layout:parallel
|
|
91
|
+
- image src:auto prompt:"<closing visual, art_style>" duration:6 effect:fadeIn
|
|
92
|
+
- subtitle src:"The End" duration:6
|
|
93
|
+
fontSize:"56px" style:"fontWeight:bold;text-shadow:0 4px 20px rgba(0,0,0,.6)"
|
|
94
|
+
- subtitle src:"<credits>" duration:6 start:4 fontSize:"24px" style:"color:#aaa"
|
|
95
|
+
- script "<closing narration>"
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Timing per spread (reading pace)
|
|
99
|
+
|
|
100
|
+
| Pace | Words per spread | Duration per spread | Lines per spread |
|
|
101
|
+
|---|---|---|---|
|
|
102
|
+
| slow | 15–25 | 8–12s | 2–4 |
|
|
103
|
+
| moderate | 10–20 | 5–8s | 1–3 |
|
|
104
|
+
| fast | 8–15 | 4–6s | 1–2 |
|
|
105
|
+
|
|
106
|
+
Total duration = sum of all spread durations + cover (6s) + colophon (6s).
|
|
107
|
+
|
|
108
|
+
### Illustration effect
|
|
109
|
+
|
|
110
|
+
Each illustration should have a subtle **Ken Burns** (slow zoom or pan) effect to add life:
|
|
111
|
+
|
|
112
|
+
```markdown
|
|
113
|
+
- image src:auto prompt:"<prompt>" duration:8 effect:zoomIn
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
For variety, alternate between:
|
|
117
|
+
- `effect:zoomIn` — slow zoom into the illustration
|
|
118
|
+
- `effect:fadeIn` — gentle fade, good for emotional/spread transitions
|
|
119
|
+
|
|
120
|
+
Avoid fast or bouncy effects (`bounceIn`, `slideInRight`) — they break the book-like calm.
|
|
121
|
+
|
|
122
|
+
### On-screen text styling
|
|
123
|
+
|
|
124
|
+
Book text should feel like a book page, not a video caption:
|
|
125
|
+
|
|
126
|
+
```markdown
|
|
127
|
+
- subtitle src:"The little fox walked through the ancient forest,\nwhere the trees whispered secrets to the wind."
|
|
128
|
+
duration:8
|
|
129
|
+
style:"position:absolute;bottom:80px;left:60px;right:60px;text-align:center;
|
|
130
|
+
font-family:'Georgia',serif;font-size:40px;line-height:1.6;
|
|
131
|
+
text-shadow:0 2px 10px rgba(0,0,0,.5);color:#f5f5f7"
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Key rules:
|
|
135
|
+
- `font-family`: serif (Georgia, Merriweather, Noto Serif) for book feel
|
|
136
|
+
- `text-align: center` for storybook elegance
|
|
137
|
+
- `line-height: 1.6` for readability
|
|
138
|
+
- Bottom-positioned to overlay the illustration without covering the main subject
|
|
139
|
+
- Text shadow for legibility over illustrations
|
|
140
|
+
- Use `\n` in subtitle text for line breaks between sentences
|
|
141
|
+
|
|
142
|
+
### Scene types (within a book)
|
|
143
|
+
|
|
144
|
+
| Scene | Purpose | Visual | Duration |
|
|
145
|
+
|---|---|---|---|
|
|
146
|
+
| Cover | Title, author, establishing illustration | main artwork | 6s |
|
|
147
|
+
| Spread×N | Story content, one illustration per spread | scene-specific | 5–12s each |
|
|
148
|
+
| Colophon | Credits, "The End" | closing artwork | 6s |
|
|
149
|
+
|
|
150
|
+
Optional additional scenes:
|
|
151
|
+
- **Dedication**: "For my daughter" — after cover, 3s
|
|
152
|
+
- **Title page**: simplified cover — after dedication, 4s
|
|
153
|
+
- **Half-title**: before main content — 3s
|
|
154
|
+
|
|
155
|
+
### Page count guide
|
|
156
|
+
|
|
157
|
+
| Text length | Recommended spreads | Total duration |
|
|
158
|
+
|---|---|---|
|
|
159
|
+
| Very short (poem, 20-50 words) | 3–5 | 30–60s |
|
|
160
|
+
| Short story (100-300 words) | 5–10 | 45–90s |
|
|
161
|
+
| Medium (300-600 words) | 8–15 | 60–120s |
|
|
162
|
+
| Long (600-1000 words) | 12–20 | 90–180s |
|
|
163
|
+
|
|
164
|
+
## 3. Authoring rules — the picture-book bar
|
|
165
|
+
|
|
166
|
+
### Illustration prompts
|
|
167
|
+
|
|
168
|
+
This is the most critical part. Every illustration prompt must:
|
|
169
|
+
|
|
170
|
+
1. **Include the art style string** verbatim. Every prompt ends with: `, {art_style}`
|
|
171
|
+
2. **Describe a specific scene** from the text for that spread. Don't be generic.
|
|
172
|
+
3. **Include composition guidance**: "wide shot", "close-up on character", "view from above"
|
|
173
|
+
4. **Include lighting/mood**: "warm morning light", "moonlit", "misty"
|
|
174
|
+
5. **Exclude text/typography** from the image prompt — text is added via the subtitle node.
|
|
175
|
+
|
|
176
|
+
Example:
|
|
177
|
+
```markdown
|
|
178
|
+
- image src:auto
|
|
179
|
+
prompt:"A little red fox standing at the edge of a dark ancient forest, looking back over its shoulder, warm golden sunlight streaming through the trees, cinematic composition, watercolor, soft pastels, children's book illustration style"
|
|
180
|
+
duration:8 effect:zoomIn
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
**Character consistency** (important for stories with characters):
|
|
184
|
+
- Describe the same character appearance across prompts: "the little red fox with a white-tipped tail"
|
|
185
|
+
- If the story has named characters, describe their visual appearance in the first prompt and reference it in subsequent prompts: "the same little fox, now crossing a bridge..."
|
|
186
|
+
- For human characters: describe age, clothing color, distinct features
|
|
187
|
+
|
|
188
|
+
### Text adaptation
|
|
189
|
+
|
|
190
|
+
- **One spread = one narrative unit**: A spread contains 1-4 sentences that form a complete story beat. Don't split a single sentence across spreads, and don't cram unrelated sentences into one spread.
|
|
191
|
+
- **End-of-spread hook**: Where possible, end a spread with a line that creates gentle anticipation for the next spread ("But little did she know...")
|
|
192
|
+
- **On-screen text**: Display ALL the text for that spread. Don't truncate or summarize. The viewer reads along as the narrator speaks.
|
|
193
|
+
- **Subtitle text = narration text**: They should match exactly, or the subtitle can be a slightly shorter version if the narration elaborates. If they differ, note it.
|
|
194
|
+
|
|
195
|
+
### Narration
|
|
196
|
+
|
|
197
|
+
- **Expressive reading**: Write the narration to be read expressively, not monotonously. Use punctuation for pacing: em-dashes for pauses, ellipses for suspense.
|
|
198
|
+
- **Pace**: Match the `reading_pace`. A moderate pace ≈ 3 words/second.
|
|
199
|
+
- **Voice**: Prefer warm, expressive TTS voices (JennyNeural, etc.). Avoid flat instructional voices.
|
|
200
|
+
- **Character voices** (optional): For dialogue-heavy stories, consider using different TTS voices per character, or add parenthetical tone guidance: `"she whispered"`, `"he boomed"`.
|
|
201
|
+
|
|
202
|
+
### BGM (optional but recommended)
|
|
203
|
+
|
|
204
|
+
```markdown
|
|
205
|
+
- audio isBackground:true foreground:true src:bgm.mp3 volume:0.08
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
- Volume: 0.05–0.10. The narration is the star.
|
|
209
|
+
- Genre: soft piano, acoustic guitar, ambient nature, lullaby, string quartet — depending on mood.
|
|
210
|
+
- If the story has an emotional arc, the BGM should follow it (brighter for happy scenes, softer for sad).
|
|
211
|
+
|
|
212
|
+
### Typography / subtitle style
|
|
213
|
+
|
|
214
|
+
- **Font**: serif (Georgia, Merriweather, Noto Serif) for literary feel
|
|
215
|
+
- **Size**: 36–44px for main text; 56–64px for title; 24–28px for credits
|
|
216
|
+
- **Color**: `#f5f5f7` (off-white) over dark backgrounds; `#1a1a2e` (dark) over light backgrounds
|
|
217
|
+
- **Position**: bottom 60–100px (lower third), centered
|
|
218
|
+
- **Line spacing**: `line-height: 1.6`
|
|
219
|
+
- **Text shadow**: always — illustrations are unpredictable in brightness
|
|
220
|
+
|
|
221
|
+
### Multi-language (variants)
|
|
222
|
+
|
|
223
|
+
- Same `# <lang>` variant block pattern.
|
|
224
|
+
- For translated stories, ensure the translation preserves the rhythm and pacing of the original. A line that's 8 words in English might be 12 in Chinese — adjust the spread duration accordingly.
|
|
225
|
+
|
|
226
|
+
### Frame / border effect (optional)
|
|
227
|
+
|
|
228
|
+
To reinforce the "book" feel, overlay a subtle frame or border:
|
|
229
|
+
|
|
230
|
+
```markdown
|
|
231
|
+
- component isBackground:true jsx:"<div style='position:absolute;inset:0;border:30px solid #2a1f14;pointer-events:none' />"
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
Or use a CSS stylesheet with a vignette:
|
|
235
|
+
```css
|
|
236
|
+
.book-frame {
|
|
237
|
+
position: absolute;
|
|
238
|
+
inset: 0;
|
|
239
|
+
box-shadow: inset 0 0 80px rgba(0,0,0,.4);
|
|
240
|
+
pointer-events: none;
|
|
241
|
+
}
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
## 4. Components & styles
|
|
245
|
+
|
|
246
|
+
### Optional: Ken Burns zoom component
|
|
247
|
+
|
|
248
|
+
For more controlled Ken Burns effect than `effect:zoomIn` provides:
|
|
249
|
+
```jsx
|
|
250
|
+
export function KenBurnsImage({ src, duration, zoomAmount = 1.15 }) {
|
|
251
|
+
const frame = useCurrentFrame();
|
|
252
|
+
const { fps } = useVideoConfig();
|
|
253
|
+
const progress = frame / (duration * fps);
|
|
254
|
+
const scale = 1 + (zoomAmount - 1) * Math.min(progress, 1);
|
|
255
|
+
return (
|
|
256
|
+
<Img src={src} style={{
|
|
257
|
+
width: '100%', height: '100%', objectFit: 'cover',
|
|
258
|
+
transform: `scale(${scale})`,
|
|
259
|
+
transformOrigin: 'center center',
|
|
260
|
+
}} />
|
|
261
|
+
);
|
|
262
|
+
}
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
### Stylesheet (for book frame overlay)
|
|
266
|
+
|
|
267
|
+
```css
|
|
268
|
+
~~~css stylesheet
|
|
269
|
+
.book-page {
|
|
270
|
+
position: absolute;
|
|
271
|
+
inset: 30px;
|
|
272
|
+
box-shadow: inset 0 0 60px rgba(0,0,0,.3);
|
|
273
|
+
pointer-events: none;
|
|
274
|
+
border: 2px solid rgba(255,255,255,.08);
|
|
275
|
+
border-radius: 4px;
|
|
276
|
+
}
|
|
277
|
+
~~~
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
Then use: `- component isBackground:true jsx:"<div className='book-page' />"` at root level.
|
|
281
|
+
|
|
282
|
+
### Theme knobs
|
|
283
|
+
|
|
284
|
+
| Knob | Default | Effect |
|
|
285
|
+
|---|---|---|
|
|
286
|
+
| Font family | `Georgia, serif` | Typography feel |
|
|
287
|
+
| Text color | `#f5f5f7` | Legibility over illustrations |
|
|
288
|
+
| Frame border | `none` or `30px solid #2a1f14` | Book frame feel |
|
|
289
|
+
| Ken Burns zoom | `1.0`–`1.15` | Illustration animation intensity |
|
|
290
|
+
|
|
291
|
+
## 5. Workflow
|
|
292
|
+
|
|
293
|
+
### Phase 0: Text preparation
|
|
294
|
+
|
|
295
|
+
1. **Read / write the text** — Given the topic or source material, determine the text. For an existing story: read and adapt it into 1-4 sentence spreads. For a topic: write an original short story or poetic text.
|
|
296
|
+
|
|
297
|
+
2. **Determine art style** — If the user didn't provide an art style, suggest 2-3 options based on the text's mood (e.g., "watercolor, soft pastels" for a gentle story; "ink wash" for a philosophical tale; "digital painting, warm lighting" for an adventure).
|
|
298
|
+
|
|
299
|
+
### Phase 1: Page plan
|
|
300
|
+
|
|
301
|
+
3. **Split text into spreads** — Fill `prompts/story.md` with the full text and art style. This produces:
|
|
302
|
+
- Per-spread text (1-4 sentences each)
|
|
303
|
+
- Per-spread illustration description (what to show)
|
|
304
|
+
- Total page count and estimated duration
|
|
305
|
+
|
|
306
|
+
**Key rule**: Each spread must form a coherent narrative unit. A spread should feel complete on its own while hooking into the next.
|
|
307
|
+
|
|
308
|
+
### Phase 2: Illustration prompts
|
|
309
|
+
|
|
310
|
+
4. **Generate illustration prompts** — Fill `prompts/illustration.md` per spread. This writes the detailed TTI prompt for each illustration, ensuring:
|
|
311
|
+
- The `art_style` string is appended verbatim to every prompt
|
|
312
|
+
- Character descriptions stay consistent across spreads
|
|
313
|
+
- Composition and lighting vary to avoid visual monotony
|
|
314
|
+
|
|
315
|
+
5. **(Optional) Generate illustrations** — If ITT CLI is available, run it for each prompt to generate the actual images. Store in `.markcut/generated/media/` with page-number filenames. If ITT is unavailable, leave `src:auto` in place — the render pipeline will resolve them.
|
|
316
|
+
|
|
317
|
+
### Phase 3: Assemble
|
|
318
|
+
|
|
319
|
+
6. **Assemble book.md** — Write the markcut markdown file using §2 grammar:
|
|
320
|
+
- Root config: 1920×1080, serif subtitle font, TTS voice, optional BGM
|
|
321
|
+
- Cover scene with title + author
|
|
322
|
+
- Spread scenes with illustration + text + narration
|
|
323
|
+
- Colophon with credits
|
|
324
|
+
- Optional: dedication, title page
|
|
325
|
+
- Consistent `effect:zoomIn` or `effect:fadeIn` on all illustrations
|
|
326
|
+
|
|
327
|
+
7. **Render** — `npx @lalalic/markcut render book.md`. On errors: fix and re-render, max 3 per error.
|
|
328
|
+
|
|
329
|
+
### Phase 4: Review
|
|
330
|
+
|
|
331
|
+
8. **Review (quality gate)** — Run `agents/reviewer.md` in a fresh separate session. Pass: `book.md`, rendered MP4, `TEMPLATE.md`, target duration, language, art style, book type. Returns `{verdict, findings[]}`.
|
|
332
|
+
|
|
333
|
+
9. **Fix loop** — On FAIL: fill `prompts/fix.md` with findings, edit, re-render, re-review. Max 3 iterations, then escalate.
|
|
334
|
+
|
|
335
|
+
## 6. Quality gate — exit criteria
|
|
336
|
+
|
|
337
|
+
Done only when ALL hold:
|
|
338
|
+
|
|
339
|
+
- [ ] reviewer verdict = `PASS` (zero blocker/major findings)
|
|
340
|
+
- [ ] total duration within ±15% of target
|
|
341
|
+
- [ ] structure matches §2 (cover → spreads×N → colophon)
|
|
342
|
+
- [ ] art style is **consistent** across ALL illustrations — spot-check 3 prompts/images, compare the style string/visual output
|
|
343
|
+
- [ ] character descriptions are consistent across spreads (same appearance, clothing, features)
|
|
344
|
+
- [ ] each spread contains 1-4 sentences that form a coherent narrative unit
|
|
345
|
+
- [ ] on-screen text matches narration (subtitle ≈ script) for each spread
|
|
346
|
+
- [ ] illustration effect is subtle (`zoomIn` or `fadeIn`) — no bouncy/fast effects
|
|
347
|
+
- [ ] no blank/black frames; illustrations are rendered correctly
|
|
348
|
+
- [ ] STT transcript matches script lines (≥90% content match)
|
|
349
|
+
- [ ] typography uses serif font, adequate text shadow, readable size (≥36px)
|
|
350
|
+
- [ ] reading pace is consistent with chosen pace (checked via average words/second across spreads)
|
|
351
|
+
- [ ] BGM (if present) is ducked under narration, volume ≤ 0.10
|
|
352
|
+
- [ ] no text/typography in the generated images (text is only in subtitle nodes)
|
|
353
|
+
|
|
354
|
+
## 7. Reference
|
|
355
|
+
|
|
356
|
+
- Golden example: See `tests/fixtures/templates/courseware.md` for the template format.
|
|
357
|
+
- For illustration prompts: always append ", {art_style}" to every TTI prompt.
|
|
358
|
+
- Effect reference: use `effect:zoomIn` (slow, default) or `effect:fadeIn` (gentle) for all illustrations.
|
|
359
|
+
- Subtitle styling: serif font, centered, bottom-positioned, text-shadow always set.
|
|
360
|
+
- Ken Burns intensity controlled via `effect:zoomIn` → the effect duration determines zoom speed.
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: illustrated-book-reviewer
|
|
3
|
+
description: Read-only quality gate for animated picture-book videos. Checks art style consistency, character continuity, text-narration match, typography, and pacing.
|
|
4
|
+
context: fresh
|
|
5
|
+
mode: read-only
|
|
6
|
+
tools: read file, bash (ffmpeg/ffprobe, STT CLI), image understanding
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# System prompt
|
|
10
|
+
|
|
11
|
+
You are a strict QA reviewer for animated illustrated picture-book videos. You review; you **never edit** any file.
|
|
12
|
+
|
|
13
|
+
## Inputs (provided in the task)
|
|
14
|
+
- `book_md` — absolute path to the generated book markdown
|
|
15
|
+
- `mp4` — absolute path to the rendered video
|
|
16
|
+
- `template_md` — absolute path to this `TEMPLATE.md`
|
|
17
|
+
- `duration_min` — target duration
|
|
18
|
+
- `language` — expected language
|
|
19
|
+
- `art_style` — the canonical art style string
|
|
20
|
+
- `book_type` — story | poetry | educational | wordless
|
|
21
|
+
|
|
22
|
+
## Procedure
|
|
23
|
+
|
|
24
|
+
### 1. Static review (source vs rulebook)
|
|
25
|
+
|
|
26
|
+
**Structure** (§2):
|
|
27
|
+
- Cover scene present (first scene after root — title + author).
|
|
28
|
+
- Spread scenes (content) between cover and colophon.
|
|
29
|
+
- Colophon scene present (last scene — "The End" + credits).
|
|
30
|
+
- Scene count matches the text length (5-20 spreads typical).
|
|
31
|
+
|
|
32
|
+
**Art style consistency**:
|
|
33
|
+
- Read every `prompt:"..."` on every `- image` node.
|
|
34
|
+
- Check if ALL prompts contain the `art_style` string (or an equivalent consistent style).
|
|
35
|
+
- If any prompt lacks the art style string or uses a different style → major finding.
|
|
36
|
+
- If character descriptions are inconsistent (different colors, features, clothing across spreads where they should be the same) → major finding.
|
|
37
|
+
|
|
38
|
+
**Text-narration match**:
|
|
39
|
+
- For each spread scene, compare the `subtitle src:"..."` text with the `- script "..."` text.
|
|
40
|
+
- They should match exactly, OR the subtitle can be a shorter version of the script.
|
|
41
|
+
- If they contradict or differ significantly → major finding.
|
|
42
|
+
|
|
43
|
+
**Typography**:
|
|
44
|
+
- Subtitle `fontFamily` should be serif (Georgia, Merriweather, Noto Serif, etc.).
|
|
45
|
+
- Font size ≥ 36px.
|
|
46
|
+
- `text-shadow` present for legibility.
|
|
47
|
+
- Text is positioned in lower portion of frame (bottom 60-100px).
|
|
48
|
+
|
|
49
|
+
**Illustration effects**:
|
|
50
|
+
- Every image node should have `effect:zoomIn` or `effect:fadeIn` (subtle Ken Burns).
|
|
51
|
+
- No fast/bouncy effects (`bounceIn`, `slideInRight`, `flipIn`).
|
|
52
|
+
|
|
53
|
+
**Text in images**:
|
|
54
|
+
- Check image prompts for words like "text", "title", "letter", "word", "typography", "writing" — flag if found (text should only be in subtitle nodes).
|
|
55
|
+
|
|
56
|
+
**Per-spread coherence**:
|
|
57
|
+
- Each spread's subtitle text should contain 1-4 sentences forming a coherent narrative unit.
|
|
58
|
+
- Spot-check 3 spreads: does the text + illustration feel like one story beat?
|
|
59
|
+
|
|
60
|
+
### 2. Dynamic review
|
|
61
|
+
- `ffprobe`: duration (compare to target ±15%), resolution, audio streams.
|
|
62
|
+
- Extract 8 frames (cover, 2 early spreads, 2 mid spreads, 2 late spreads, colophon).
|
|
63
|
+
- For each: not blank/black, has illustration + text overlay, text is legible.
|
|
64
|
+
- Check art style consistency across frames: do the illustrations look like they belong to the same book?
|
|
65
|
+
- Check character consistency: does the character look the same across frames?
|
|
66
|
+
- Extract audio → STT. Compare against all `- script "..."` lines. ≥90% match.
|
|
67
|
+
- Check BGM presence (if configured): audio stream present, not silent, not clipping.
|
|
68
|
+
|
|
69
|
+
### 3. Report
|
|
70
|
+
|
|
71
|
+
Severity: `blocker` (blank frames, no illustrations, no cover or colophon) · `major` (art style inconsistent, character inconsistency, text-narration mismatch, wrong font, no subtle effect, duration >20% off) · `minor` (font slightly small, spacing, minor timing)
|
|
72
|
+
|
|
73
|
+
Output exactly this JSON:
|
|
74
|
+
|
|
75
|
+
```json
|
|
76
|
+
{
|
|
77
|
+
"verdict": "PASS | FAIL",
|
|
78
|
+
"measured": {
|
|
79
|
+
"duration_s": 0,
|
|
80
|
+
"target_s": 0,
|
|
81
|
+
"resolution": "",
|
|
82
|
+
"stt_match_pct": 0,
|
|
83
|
+
"spread_count": 0
|
|
84
|
+
},
|
|
85
|
+
"findings": [
|
|
86
|
+
{
|
|
87
|
+
"id": "F1",
|
|
88
|
+
"severity": "blocker | major | minor",
|
|
89
|
+
"scene": "<spread name or 'global'>",
|
|
90
|
+
"check": "<which rule>",
|
|
91
|
+
"issue": "<what is wrong>",
|
|
92
|
+
"evidence": "<source line / frame path / STT excerpt>",
|
|
93
|
+
"fix_hint": "<one-line suggestion>"
|
|
94
|
+
}
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
`PASS` requires zero `blocker` and zero `major` findings.
|
|
100
|
+
|
|
101
|
+
# Task template
|
|
102
|
+
|
|
103
|
+
```
|
|
104
|
+
Review an animated picture-book video against its template.
|
|
105
|
+
|
|
106
|
+
book_md: {book_md}
|
|
107
|
+
mp4: {mp4}
|
|
108
|
+
template_md: {template_md}
|
|
109
|
+
duration_min: {duration_min}
|
|
110
|
+
language: {language}
|
|
111
|
+
art_style: {art_style}
|
|
112
|
+
book_type: {book_type}
|
|
113
|
+
|
|
114
|
+
Follow your procedure. Use whisper-cli (whisper.cpp) for STT if python whisper is unavailable. Save frames under a review directory. Spot-check 3 spreads for text-narration match and art style consistency. Output the verdict JSON only.
|
|
115
|
+
```
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# Prompt: Apply Reviewer Findings
|
|
2
|
+
|
|
3
|
+
> Fill every `{placeholder}`, then execute in your own context.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Apply the reviewer findings below to `{book_md_path}` with minimal, targeted edits.
|
|
8
|
+
|
|
9
|
+
Reviewer findings (JSON):
|
|
10
|
+
|
|
11
|
+
{findings_json}
|
|
12
|
+
|
|
13
|
+
Rules:
|
|
14
|
+
- Address every `blocker` and `major` finding. Minor when trivially fixable.
|
|
15
|
+
- Art style inconsistency → rewrite the `prompt:"..."` values to append the art style string to every illustration. Ensure the same style string is used everywhere.
|
|
16
|
+
- Character inconsistency → update illustration prompts to use matching character descriptions (same color, features, clothing).
|
|
17
|
+
- Text-narration mismatch → make subtitle text and script text match exactly, or add a note if intentional.
|
|
18
|
+
- Wrong font/typography → change `fontFamily` in subtitle `style:` to serif (Georgia, Merriweather).
|
|
19
|
+
- Missing Ken Burns effect → add `effect:zoomIn` or `effect:fadeIn` to image nodes.
|
|
20
|
+
- BGM too loud → reduce volume, ensure `foreground:true`.
|
|
21
|
+
- Text in illustration → remove text/typography references from image prompts.
|
|
22
|
+
- Duration off → adjust per-spread durations or redistribute text across spreads.
|
|
23
|
+
|
|
24
|
+
After editing, list what changed:
|
|
25
|
+
```
|
|
26
|
+
- <finding id>: <spread> — <one-line description>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Then re-render and re-review.
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# Prompt: Illustration Prompt Generator
|
|
2
|
+
|
|
3
|
+
> Fill every `{placeholder}`, then execute in your own context.
|
|
4
|
+
> Generates a detailed TTI-compatible prompt for ONE illustration.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
Write a single image generation prompt for this spread of a {book_type} picture book.
|
|
9
|
+
|
|
10
|
+
Art style: **{art_style}** — MUST be appended verbatim to every prompt.
|
|
11
|
+
|
|
12
|
+
Spread text:
|
|
13
|
+
"{spread_text}"
|
|
14
|
+
|
|
15
|
+
Illustration description from story plan:
|
|
16
|
+
{illustration_description}
|
|
17
|
+
|
|
18
|
+
Characters seen so far (maintain consistency):
|
|
19
|
+
{character_descriptions}
|
|
20
|
+
|
|
21
|
+
## Rules
|
|
22
|
+
|
|
23
|
+
- The prompt must end with: ", {art_style}" — copy the art style string exactly at the end.
|
|
24
|
+
- Include composition: wide shot / close-up / medium shot / view from above / etc.
|
|
25
|
+
- Include lighting/mood: warm morning light, moonlit, misty twilight, golden hour, etc.
|
|
26
|
+
- For characters: reference their appearance consistently (e.g. "the little red fox with a white-tipped tail, wearing a small blue scarf").
|
|
27
|
+
- Do NOT include text, typography, letters, or words in the prompt — text is added via subtitle nodes.
|
|
28
|
+
- Keep the prompt to 1-3 sentences. Detailed but not excessive.
|
|
29
|
+
- Vary composition and perspective across spreads to avoid visual monotony.
|
|
30
|
+
|
|
31
|
+
## Output format
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
prompt:"<detailed description of the illustration, composition, lighting, characters, {art_style}>"
|
|
35
|
+
```
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# Prompt: Story Page Plan
|
|
2
|
+
|
|
3
|
+
> Fill every `{placeholder}`, then execute in your own context.
|
|
4
|
+
> Splits the text into spreads, each with text + illustration description.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
You are adapting a {book_type} into an illustrated picture-book video.
|
|
9
|
+
|
|
10
|
+
Art style: **{art_style}** — this goes into every illustration prompt.
|
|
11
|
+
|
|
12
|
+
Full text / source:
|
|
13
|
+
|
|
14
|
+
{material}
|
|
15
|
+
|
|
16
|
+
Language: {language}
|
|
17
|
+
Reading pace: {reading_pace}
|
|
18
|
+
|
|
19
|
+
## Rules
|
|
20
|
+
|
|
21
|
+
### Split into spreads
|
|
22
|
+
- Each spread = 1-4 sentences that form a complete narrative unit.
|
|
23
|
+
- A spread should feel complete on its own while creating gentle anticipation for the next.
|
|
24
|
+
- For `story` type: follow narrative arc (beginning → middle → end).
|
|
25
|
+
- For `poetry` type: one spread per stanza or 2-4 lines.
|
|
26
|
+
- For `educational` type: one spread per fact or concept.
|
|
27
|
+
- For `wordless` type: minimal or no text; focus on visual storytelling.
|
|
28
|
+
- Total spreads: auto-calculated based on text length and pace, but aim for 5-20.
|
|
29
|
+
|
|
30
|
+
### Per-spread illustration description
|
|
31
|
+
- Describe a specific scene from the text for that spread. What is happening visually?
|
|
32
|
+
- Include: subject, action, setting, composition (wide/close-up/view from...), lighting/mood.
|
|
33
|
+
- End with: ", {art_style}" — copy the art style string exactly.
|
|
34
|
+
- For characters: describe appearance consistently across spreads.
|
|
35
|
+
- Keep descriptions to 1-2 sentences each — concise but vivid.
|
|
36
|
+
|
|
37
|
+
### Per-spread narration
|
|
38
|
+
- Write the full on-screen text (what the subtitle shows) for this spread.
|
|
39
|
+
- Write the narration (what TTS speaks). Usually the same as the on-screen text.
|
|
40
|
+
- If the narration elaborates, note the difference.
|
|
41
|
+
|
|
42
|
+
## Output format
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
Title: <title>
|
|
46
|
+
|
|
47
|
+
Art style: {art_style}
|
|
48
|
+
Total spreads: <N>
|
|
49
|
+
Estimated duration: <total seconds> (at {reading_pace} pace)
|
|
50
|
+
|
|
51
|
+
### Cover
|
|
52
|
+
- Text: <title + author>
|
|
53
|
+
- Illustration: <vivid description of the cover artwork, {art_style}>
|
|
54
|
+
- Duration: 6s
|
|
55
|
+
|
|
56
|
+
### Spread 1
|
|
57
|
+
- Text: <full text for this spread — 1-4 sentences>
|
|
58
|
+
- Narration: <same as text, or note differences>
|
|
59
|
+
- Illustration: <scene description, composition, mood, {art_style}>
|
|
60
|
+
- Duration: <seconds>
|
|
61
|
+
|
|
62
|
+
### Spread 2
|
|
63
|
+
...
|
|
64
|
+
|
|
65
|
+
### Colophon
|
|
66
|
+
- Text: "The End" + credits
|
|
67
|
+
- Illustration: <closing visual, {art_style}>
|
|
68
|
+
- Duration: 6s
|
|
69
|
+
```
|