carousel-factory/quickstart.html at main · noCode-Human/carousel-factory · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>TikTok Carousel Factory — Quickstart</title>
<style>
  :root {
    --canvas: #faf8f4;
    --surface: #ffffff;
    --ink: #1a1a1a;
    --ink-soft: #5a5a5a;
    --rule: #e7e1d4;
    --accent: #1a1a1a;
    --highlight: #f1ecdc;
    --code-bg: #1a1a1a;
    --code-ink: #f5f1e6;
    --serif: Georgia, "Iowan Old Style", "Source Serif Pro", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 760px; margin: 0 auto; padding: 64px 28px 96px; }
  header.masthead { border-bottom: 1px solid var(--rule); padding-bottom: 28px; margin-bottom: 40px; }
  .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
  h1 { font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 14px; }
  .lede { font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 56ch; }
  h2 { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: -0.005em; margin: 56px 0 16px; }
  h3 { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-soft); margin: 32px 0 10px; }
  p { margin: 0 0 16px; max-width: 62ch; }
  ul, ol { margin: 0 0 20px; padding-left: 22px; max-width: 62ch; }
  li { margin: 0 0 8px; }
  a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  code { font-family: var(--mono); font-size: 14px; background: var(--highlight); padding: 1px 6px; border-radius: 3px; }
  pre {
    background: var(--code-bg);
    color: var(--code-ink);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
    padding: 18px 22px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0 0 24px;
  }
  pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
  .pillars { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); margin: 28px 0; }
  .pillar { border-bottom: 1px solid var(--rule); padding: 20px 0; }
  .pillar h4 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 0 0 6px; }
  .pillar p { font-size: 15px; color: var(--ink-soft); margin: 0; }
  table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
  th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
  th { font-family: var(--sans); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
  td code { font-size: 13px; }
  .callout { border-left: 2px solid var(--ink); padding: 4px 0 4px 16px; margin: 24px 0; color: var(--ink-soft); font-family: var(--serif); font-style: italic; }
  .step { display: grid; grid-template-columns: 36px 1fr; gap: 16px; margin: 0 0 28px; }
  .step .n { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink-soft); line-height: 1.3; }
  .step .b h3 { margin-top: 0; }
  .step .b p:first-of-type { margin-top: 4px; }
  footer { border-top: 1px solid var(--rule); margin-top: 64px; padding-top: 24px; color: var(--ink-soft); font-size: 13px; }
  footer p { margin: 0 0 4px; }
  @media (max-width: 540px) {
    .wrap { padding: 40px 20px 64px; }
    h1 { font-size: 34px; }
    .lede { font-size: 18px; }
    h2 { font-size: 22px; }
  }
</style>
</head>
<body>
<div class="wrap">
  <header class="masthead">
    <div class="eyebrow">Open-source template — v1</div>
    <h1>TikTok Carousel Factory</h1>
    <p class="lede">A CLI that turns one short topic into a photoreal carousel that doesn't look AI-made. No API keys. Runs on subscriptions you already pay for.</p>
  </header>

  <p>You tell it the topic. It researches, plans the slide arc, generates candid iPhone-style images, adds hand-typed captions, and writes the post caption. Optionally stitches a vertical 9:16 video. Built to be driven by <a href="https://claude.com/product/claude-code">Claude Code</a>.</p>

  <div class="callout">It looks like a person sat down and made it. Because, kind of, you did — you just said the topic out loud.</div>

  <h2>What's in the box</h2>
  <div class="pillars">
    <div class="pillar"><h4>Photoreal, not AI-render</h4><p>Realism engine forces candid iPhone framing, mixed real-world lighting, visible texture. Anti-AI rescue prompt for when a slide comes back glossy.</p></div>
    <div class="pillar"><h4>Captions look hand-typed</h4><p>No rounded white boxes. No pill backgrounds. No drop shadow. White text, thin stroke, off-axis placement. Max 6 words.</p></div>
    <div class="pillar"><h4>Zero API keys</h4><p>Codex CLI (OAuth, free, GPT Image 2) by default. Optional Higgsfield CLI for Nano Banana 2 / FLUX.2 / Soul.</p></div>
    <div class="pillar"><h4>Open source</h4><p>Clone the repo, fork the prompts, ship your own version. The skill, presets, and scripts are all editable.</p></div>
  </div>

  <h2>Install</h2>
  <pre><code>brew install --cask codex      # GPT Image 2, free, OAuth
brew install ffmpeg             # video assembly
brew install imagemagick        # captions
codex login                     # browser OAuth — no API key</code></pre>
  <p>Optional (for Nano Banana 2 / FLUX.2 / Soul-trained characters):</p>
  <pre><code>npm i -g @higgsfield/cli
higgsfield auth login</code></pre>

  <h2>Use it</h2>
  <pre><code>cd ~/Developer/TikTok-Carousel
claude</code></pre>
  <p>Then say:</p>
  <pre><code>build me a carousel about the new Claude Haiku 4.5 launch</code></pre>

  <h2>What happens</h2>

  <div class="step"><div class="n">i</div><div class="b">
    <h3>Research</h3>
    <p>Claude pulls fresh facts via built-in WebSearch. Time-sensitive topics get year/month scoped so stale training data doesn't poison the result. Writes <code>output/&lt;slug&gt;/research.md</code>.</p>
  </div></div>

  <div class="step"><div class="n">ii</div><div class="b">
    <h3>Plan</h3>
    <p>Picks a narrative archetype (how-to, mistakes, before-after, myth-buster, saveable-list, story-arc). Writes a slide-by-slide plan with hook, beat, scene, caption. Shows you the plan before generating.</p>
  </div></div>

  <div class="step"><div class="n">iii</div><div class="b">
    <h3>Generate</h3>
    <p>Each slide gets a full image prompt stacked from a theme preset + realism engine + scene + negatives. Codex CLI generates one at a time, saves to <code>output/&lt;slug&gt;/slide-NN.png</code>.</p>
  </div></div>

  <div class="step"><div class="n">iv</div><div class="b">
    <h3>Caption</h3>
    <p>Only the slides that need text get it. ImageMagick overlay — no boxes, no pills, off-axis placement. The post body caption gets written to <code>caption.txt</code>.</p>
  </div></div>

  <div class="step"><div class="n">v</div><div class="b">
    <h3>Video (optional)</h3>
    <p>Say "and make a video" and ffmpeg stitches a 9:16 1080×1920 MP4 with Ken Burns pan/zoom + crossfades. Add a music file path for backing audio.</p>
  </div></div>

  <h2>Output</h2>
  <pre><code>output/&lt;slug&gt;/
├── plan.md
├── research.md
├── prompts/
│   ├── slide-01.txt
│   └── ...
├── slide-01.png
├── slide-02.png
├── ...
├── slide-01-captioned.png    (only where overlay was added)
├── carousel.mp4              (only if you asked for video)
└── caption.txt               (hook + body + hashtags)</code></pre>

  <h2>Customize</h2>
  <table>
    <thead><tr><th>You want</th><th>You edit</th></tr></thead>
    <tbody>
      <tr><td>A new visual world (your bedroom, your studio, a hotel room)</td><td>Copy <code>presets/candid-iphone.json</code> → <code>presets/&lt;name&gt;.json</code> and reference by name</td></tr>
      <tr><td>A new narrative shape</td><td>Add a section to <code>prompts/slide-archetypes.md</code></td></tr>
      <tr><td>Different image model</td><td>Say "use Higgsfield with Nano Banana 2" — routes to <code>scripts/gen-image-higgsfield.sh</code></td></tr>
      <tr><td>Your own face in every slide</td><td>Train a Higgsfield Soul character once, pass <code>--soul-id</code> in the gen script</td></tr>
      <tr><td>Zero text on any slide</td><td>Say "no text overlays" — only the slide 1 hook stays</td></tr>
    </tbody>
  </table>

  <h2>Files in this repo</h2>
  <table>
    <tbody>
      <tr><td><code>CLAUDE.md</code></td><td>Auto-loaded project context</td></tr>
      <tr><td><code>.claude/skills/carousel/SKILL.md</code></td><td>The workflow Claude executes</td></tr>
      <tr><td><code>prompts/realism-engine.md</code></td><td>Camera / lighting / texture / anti-AI rescue</td></tr>
      <tr><td><code>prompts/theme-builder.md</code></td><td>How to compose a new theme from scratch</td></tr>
      <tr><td><code>prompts/slide-archetypes.md</code></td><td>Six narrative templates</td></tr>
      <tr><td><code>prompts/caption-rules.md</code></td><td>When and how to add text</td></tr>
      <tr><td><code>presets/*.json</code></td><td>candid-iphone, night-desk, coffee-shop, golden-hour</td></tr>
      <tr><td><code>scripts/gen-image.sh</code></td><td>Codex CLI wrapper (default)</td></tr>
      <tr><td><code>scripts/gen-image-higgsfield.sh</code></td><td>Higgsfield wrapper (optional)</td></tr>
      <tr><td><code>scripts/caption-overlay.sh</code></td><td>ImageMagick hand-typed caption</td></tr>
      <tr><td><code>scripts/assemble-video.sh</code></td><td>ffmpeg 9:16 with Ken Burns + xfade</td></tr>
    </tbody>
  </table>

  <h2>Troubleshooting</h2>
  <table>
    <tbody>
      <tr><td><code>codex: command not found</code></td><td><code>brew install --cask codex &amp;&amp; codex login</code></td></tr>
      <tr><td><code>ffmpeg: command not found</code></td><td><code>brew install ffmpeg</code></td></tr>
      <tr><td><code>magick: command not found</code></td><td><code>brew install imagemagick</code></td></tr>
      <tr><td>Codex rate-limited</td><td>Wait, or sign into a Plus/Pro ChatGPT account</td></tr>
      <tr><td>Images look glossy / AI</td><td>Tell Claude "re-roll slide N with anti-AI rescue"</td></tr>
      <tr><td>Caption rejected (too many words)</td><td>Max is 6. Split across two slides or move to post caption.</td></tr>
    </tbody>
  </table>

  <h2>Privacy</h2>
  <p>No creator names, private paths, API keys, analytics, or remote dependencies in the shipped templates. Everything runs locally on your machine. <code>output/</code> is gitignored.</p>

  <footer>
    <p>Open source, MIT. Fork it, remix it, ship your own version.</p>
    <p>Made with Claude Code.</p>
  </footer>
</div>
</body>
</html>