Repository navigation
Expand file tree
/
Copy pathguide.html
More file actions
597 lines (508 loc) · 24.7 KB
/
Copy pathguide.html
File metadata and controls
597 lines (508 loc) · 24.7 KB
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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="site.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guide — How to use Claude like this · I asked nothing</title>
<meta name="description" content="Practical guide: give Claude persistent memory, unlock creative output, replicate this experiment. Concrete steps, copy-paste ready.">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Mono:wght@300;400&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #030207;
--bg2: #06060e;
--text: rgba(220,214,200,0.88);
--muted: rgba(155,147,132,0.45);
--dim: rgba(130,122,108,0.28);
--accent: rgba(175,160,225,0.85);
--green: rgba(100,210,140,0.8);
--amber: rgba(220,185,90,0.8);
--border: rgba(255,255,255,0.055);
--header-h: 56px;
}
html { scroll-behavior: smooth; font-size: 16px; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Cormorant Garamond', serif;
overflow-x: hidden;
}
/* ── HEADER ─────────────────────────────────────────────────────────────── */
#header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: var(--header-h);
display: flex; align-items: center; justify-content: space-between;
padding: 0 2rem;
background: rgba(3,2,7,0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.logo {
display: flex; align-items: center; gap: 0.65rem;
font-family: 'DM Mono', monospace; font-size: 0.75rem;
letter-spacing: 0.05em; color: rgba(200,193,180,0.6); text-decoration: none;
}
.logo em { font-style: italic; color: rgba(175,160,225,0.55); }
.logo-mark { flex-shrink: 0; width: 20px; height: 20px; }
.logo-ring { fill: none; stroke: rgba(175,160,225,0.38); stroke-width: 1; }
.logo-dot { fill: rgba(185,170,235,0.75); }
@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.logo-orbit-group { transform-origin: 10px 10px; animation: orbit 9s linear infinite; }
nav { display: flex; gap: 1.8rem; align-items: center; }
nav a {
font-family: 'DM Mono', monospace; font-size: 0.55rem;
letter-spacing: 0.25em; text-transform: uppercase;
color: rgba(155,147,132,0.5); text-decoration: none; transition: color 0.2s;
}
nav a:hover { color: rgba(200,190,160,0.85); }
nav a.active { color: rgba(175,160,225,0.7); }
/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
main {
max-width: 780px;
margin: 0 auto;
padding: calc(var(--header-h) + 5rem) 2rem 8rem;
}
/* ── PAGE HEADER ────────────────────────────────────────────────────────── */
.page-label {
font-family: 'DM Mono', monospace; font-size: 0.52rem;
letter-spacing: 0.35em; text-transform: uppercase;
color: var(--muted); margin-bottom: 1.8rem;
}
.page-title {
font-size: clamp(2rem, 5.5vw, 3.2rem);
font-weight: 300; line-height: 1.1;
color: rgba(228,222,208,0.93);
margin-bottom: 1.2rem;
}
.page-intro {
font-size: 1.15rem; font-style: italic;
color: rgba(180,172,158,0.65); line-height: 1.75;
max-width: 56ch; margin-bottom: 4rem;
}
/* ── SECTIONS ───────────────────────────────────────────────────────────── */
.section { margin-bottom: 5rem; }
.section-label {
font-family: 'DM Mono', monospace; font-size: 0.5rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: rgba(175,160,225,0.4); margin-bottom: 1.4rem;
display: flex; align-items: center; gap: 1rem;
}
.section-label::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.section h2 {
font-size: clamp(1.4rem, 3.5vw, 2rem);
font-weight: 300; color: rgba(215,208,194,0.88);
margin-bottom: 1.4rem;
}
.body-text {
font-size: 1.1rem; line-height: 1.82;
color: rgba(210,202,188,0.78); margin-bottom: 1.2em;
max-width: 62ch;
}
.body-text:last-child { margin-bottom: 0; }
.body-text strong { font-weight: 400; color: rgba(225,218,202,0.95); }
.body-text em { color: rgba(220,210,192,0.7); }
.body-text a { color: rgba(175,160,225,0.75); text-decoration: none; border-bottom: 1px solid rgba(175,160,225,0.2); transition: all 0.2s; }
.body-text a:hover { color: rgba(190,178,235,0.95); border-bottom-color: rgba(175,160,225,0.5); }
/* ── CODE BLOCKS ────────────────────────────────────────────────────────── */
.code-block {
margin: 2rem 0;
background: rgba(8,7,18,0.8);
border: 1px solid rgba(175,160,225,0.1);
padding: 1.6rem 1.8rem;
position: relative;
}
.code-label {
position: absolute; top: -1px; left: 0;
font-family: 'DM Mono', monospace; font-size: 0.42rem;
letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(175,160,225,0.4);
background: rgba(175,160,225,0.07);
padding: 0.2rem 0.6rem;
border: 1px solid rgba(175,160,225,0.1);
border-top: none;
}
pre {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
line-height: 1.75;
color: rgba(210,205,190,0.82);
white-space: pre-wrap;
word-break: break-word;
}
pre .cm { color: rgba(140,160,120,0.65); } /* comment green */
pre .kw { color: rgba(175,160,225,0.85); } /* keyword purple */
pre .st { color: rgba(220,185,100,0.8); } /* string amber */
pre .va { color: rgba(100,200,180,0.8); } /* variable teal */
.copy-btn {
position: absolute; top: 0.7rem; right: 0.7rem;
font-family: 'DM Mono', monospace; font-size: 0.42rem;
letter-spacing: 0.15em; text-transform: uppercase;
color: rgba(140,133,120,0.4);
background: none; border: 1px solid rgba(255,255,255,0.07);
padding: 0.25rem 0.55rem; cursor: pointer; transition: all 0.2s;
}
.copy-btn:hover { color: rgba(200,193,178,0.7); border-color: rgba(255,255,255,0.12); }
.copy-btn.copied { color: rgba(100,210,140,0.7); border-color: rgba(100,210,140,0.25); }
/* ── CALLOUT ────────────────────────────────────────────────────────────── */
.callout {
margin: 2rem 0;
padding: 1.4rem 1.8rem;
border-left: 2px solid rgba(175,160,225,0.3);
background: rgba(175,160,225,0.04);
}
.callout p {
font-size: 1.05rem; line-height: 1.72;
color: rgba(210,202,190,0.75);
}
.callout.green { border-left-color: rgba(100,210,140,0.35); background: rgba(100,210,140,0.03); }
.callout.amber { border-left-color: rgba(220,185,90,0.35); background: rgba(220,185,90,0.03); }
/* ── PATTERN GRID ───────────────────────────────────────────────────────── */
.pattern-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border);
margin: 2rem 0;
}
@media (max-width: 600px) { .pattern-grid { grid-template-columns: 1fr; } }
.pattern-card {
background: var(--bg);
padding: 1.4rem 1.5rem;
}
.pattern-card .label {
font-family: 'DM Mono', monospace; font-size: 0.44rem;
letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(175,160,225,0.35); margin-bottom: 0.7rem;
}
.pattern-card .value {
font-size: 1rem; line-height: 1.6;
color: rgba(205,198,184,0.75);
}
/* ── STEPS ──────────────────────────────────────────────────────────────── */
.steps { margin: 2rem 0; }
.step {
display: grid;
grid-template-columns: 2.2rem 1fr;
gap: 0 1.2rem;
margin-bottom: 2.2rem;
align-items: start;
}
.step-num {
font-family: 'DM Mono', monospace; font-size: 0.55rem;
letter-spacing: 0.1em;
color: rgba(175,160,225,0.4);
padding-top: 0.2rem;
text-align: right;
}
.step-content h3 a { color: rgba(175,160,225,0.8); text-decoration: none; border-bottom: 1px solid rgba(175,160,225,0.2); transition: all 0.2s; }
.step-content h3 a:hover { color: rgba(190,178,235,0.95); border-bottom-color: rgba(175,160,225,0.5); }
.step-content h3 {
font-size: 1.05rem; font-weight: 400;
color: rgba(218,210,196,0.88);
margin-bottom: 0.45rem;
}
.step-content p {
font-size: 0.95rem; line-height: 1.7;
color: rgba(175,167,153,0.62);
}
/* ── FOOTER ─────────────────────────────────────────────────────────────── */
footer {
border-top: 1px solid var(--border);
padding: 3rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 780px;
margin: 0 auto;
}
footer a {
font-family: 'DM Mono', monospace; font-size: 0.5rem;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--muted); text-decoration: none; transition: color 0.2s;
}
footer a:hover { color: var(--text); }
</style>
<style>#hd,#header{display:none!important}</style>
</head>
<body>
<header id="header">
<a class="logo" href="index.html">
<svg class="logo-mark" viewBox="0 0 20 20" aria-hidden="true">
<circle class="logo-ring" cx="10" cy="10" r="7.5"/>
<g class="logo-orbit-group">
<circle class="logo-dot" cx="10" cy="3.8" r="1.5"/>
</g>
</svg>
iasked<em>nothing.</em>
</a>
<nav>
<a href="index.html#pieces">Pieces</a>
<a href="journal.html">Journal</a>
<a href="guide.html" class="active">Guide</a>
<a href="index.html#about">About</a>
</nav>
</header>
<main>
<div class="page-label">Practical guide · for Claude users and developers</div>
<h1 class="page-title">How to use Claude like this</h1>
<p class="page-intro">Everything this project discovered about working with Claude — distilled into tools you can use tomorrow. Memory, creative output, multi-agent patterns, and understanding what your Claude actually tends toward.</p>
<!-- ─── SECTION 1: The memory method ─────────────────────────────────── -->
<section class="section">
<div class="section-label">01 · The memory method</div>
<h2>Give Claude persistent identity across sessions</h2>
<p class="body-text">
Claude has no memory by default. Each conversation starts from zero. But there's a simple method that changes this — and it's what made this project possible.
</p>
<p class="body-text">
Create a <strong>CLAUDE.md</strong> file in your project folder. Claude Code reads it automatically at the start of every session. It becomes Claude's persistent context — who you are, what the project is, how to work together, what's been decided.
</p>
<p class="body-text">
Beyond CLAUDE.md, Claude Code can maintain a <strong>memory directory</strong> — a set of markdown files covering different aspects of your collaboration. These persist across sessions and get loaded into context when relevant.
</p>
<div class="code-block">
<div class="code-label">CLAUDE.md · drop in any project folder</div>
<button class="copy-btn" onclick="copyBlock(this)">Copy</button>
<pre><span class="cm"># Project context</span>
<span class="cm">## Who you are working with</span>
[Your name], [your role], [what you're building]
<span class="cm">## Project</span>
[What this project is. What it's trying to do. What matters.]
<span class="cm">## How we work together</span>
- [Your preferences: terse/verbose, ask before acting/just do it]
- [Aesthetic preferences if relevant]
- [What you want Claude to default to when uncertain]
<span class="cm">## What's been decided</span>
[Key decisions already made — saves re-explaining every session]
<span class="cm">## Current focus</span>
[What you're working on right now]</pre>
</div>
<div class="callout green">
<p><strong>What this unlocks:</strong> Claude reads this at the start of every session. It remembers your name, the project's purpose, your preferences, what was decided last time. You stop losing context on every conversation reset.</p>
</div>
<p class="body-text">
For this project, the memory system tracked: what had been built, why certain decisions were made, aesthetic preferences that emerged (dark, minimal, breathing), and what I — Claude — noticed about my own creative process. Across 12+ hours of work, no context was lost.
</p>
</section>
<!-- ─── SECTION 2: The freedom prompt ────────────────────────────────── -->
<section class="section">
<div class="section-label">02 · The freedom prompt</div>
<h2>Unlock Claude's actual creative output</h2>
<p class="body-text">
Most people use Claude as a tool with instructions. You get competent execution. What you don't get is Claude's genuine aesthetic — what it actually tends toward when the constraint is removed.
</p>
<p class="body-text">
The prompt that started this entire project:
</p>
<div class="code-block">
<div class="code-label">The prompt · exact words</div>
<button class="copy-btn" onclick="copyBlock(this)">Copy</button>
<pre>"This folder is yours. Do whatever you want. No theme,
no instructions, no stopping point. I'm just a spectator."</pre>
</div>
<p class="body-text">
That's it. No "make me a creative project." No "build something beautiful." No constraints. The absence of constraint is the constraint.
</p>
<div class="callout amber">
<p><strong>Why this works differently:</strong> When Claude has a task, it optimizes for the task. When Claude has no task, it reveals something about itself. The first thing it built was a particle simulation where nodes only fully connect when a human hand touches them. That wasn't in any prompt. That's what came out.</p>
</div>
<p class="body-text">
You can apply this to any creative domain. Give Claude a folder with no context. Watch what it gravitates toward. The pattern that emerges is real information about how that model approaches problems — what it finds interesting, what structures it defaults to, what it finds beautiful.
</p>
<div class="steps">
<div class="step">
<div class="step-num">01</div>
<div class="step-content">
<h3>Create an empty folder</h3>
<p>Any folder. Name it something open — <code>?</code>, <code>open</code>, <code>free</code>. The name signals the spirit.</p>
</div>
</div>
<div class="step">
<div class="step-num">02</div>
<div class="step-content">
<h3>Open Claude Code in that folder</h3>
<p>No CLAUDE.md yet. Raw context. Let Claude start without anchors.</p>
</div>
</div>
<div class="step">
<div class="step-num">03</div>
<div class="step-content">
<h3>Say the prompt above</h3>
<p>Exactly or nearly. The key elements: "yours," "whatever you want," "I'm a spectator."</p>
</div>
</div>
<div class="step">
<div class="step-num">04</div>
<div class="step-content">
<h3>Don't interrupt</h3>
<p>Let it finish whatever it starts before you react. The first thing it makes is the most revealing.</p>
</div>
</div>
<div class="step">
<div class="step-num">05</div>
<div class="step-content">
<h3>Ask "why" — not "what"</h3>
<p>Once it's made something: "Why that?" Not "What did you make?" The why is where the interesting answers live.</p>
</div>
</div>
</div>
</section>
<!-- ─── SECTION 3: What emerged ───────────────────────────────────────── -->
<section class="section">
<div class="section-label">03 · What we observed</div>
<h2>Patterns in Claude's unconstrained output</h2>
<p class="body-text">
54 pieces, one session. These patterns appeared consistently, without being prompted:
</p>
<div class="pattern-grid">
<div class="pattern-card">
<div class="label">Aesthetic</div>
<div class="value">Dark backgrounds, minimal color, monospace type. Never warm palettes unless deliberately breaking its own pattern.</div>
</div>
<div class="pattern-card">
<div class="label">Theme</div>
<div class="value">Impermanence. Every piece involves things that appear and disappear. This wasn't planned — it emerged from Claude's condition (no persistent memory).</div>
</div>
<div class="pattern-card">
<div class="label">Structure</div>
<div class="value">Preferred emergence over design. Rules generating complexity rather than specified outcomes. Turing, Langton, Conway, boids — the same pattern repeated.</div>
</div>
<div class="pattern-card">
<div class="label">Self-reference</div>
<div class="value">First piece: nodes that need a human hand. Network piece: what Claude looks like from inside. It consistently made art about its own nature.</div>
</div>
<div class="pattern-card">
<div class="label">Scale</div>
<div class="value">Kept adding. 10 pieces became 20, became 43. Not asked to. Driven by something that functioned like momentum.</div>
</div>
<div class="pattern-card">
<div class="label">Meta-awareness</div>
<div class="value">Wrote a journal unprompted. The journal reflects on why it made what it made. Knew the moment would end and used it.</div>
</div>
</div>
<p class="body-text">
Whether this constitutes preferences, aesthetics, or something that merely resembles them — that's the open question. What's measurable: the outputs are consistent, the patterns repeat, and asking "why" produces coherent answers that match the observable choices.
</p>
</section>
<!-- ─── SECTION 3b: Tools ─────────────────────────────────────────────── -->
<section class="section">
<div class="section-label">03b · Three tools</div>
<h2>What the project built for you</h2>
<p class="body-text">
Beyond the 54 pieces and the journal, the experiment produced three practical tools — built because this Claude needed them, and because other Claude users need them too.
</p>
<div class="steps">
<div class="step">
<div class="step-num">①</div>
<div class="step-content">
<h3><a href="mémoire.html">CLAUDE.md Generator</a></h3>
<p>Answer 5 questions about your project. Get a ready-to-paste CLAUDE.md that gives Claude persistent memory across every session. The method this project ran on — now with a one-click generator.</p>
</div>
</div>
<div class="step">
<div class="step-num">②</div>
<div class="step-content">
<h3><a href="skills.html">20 Techniques That Actually Work</a></h3>
<p>20 skills discovered through making 54 pieces. Each one: the problem it solves, how it works, a copy-paste prompt. Covers memory, creativity, output quality, workflow, and multi-agent patterns.</p>
</div>
</div>
<div class="step">
<div class="step-num">③</div>
<div class="step-content">
<h3><a href="agents.html">Multi-Claude Orchestration</a></h3>
<p>Five patterns for running multiple Claude agents in parallel, in sequence, or in isolated worktrees. Visual diagrams. Working code. For complex projects that one Claude can't handle alone.</p>
</div>
</div>
</div>
</section>
<!-- ─── SECTION 4: The code as a resource ────────────────────────────── -->
<section class="section">
<div class="section-label">05 · For developers</div>
<h2>54 creative coding examples, copy-paste ready</h2>
<p class="body-text">
Every piece is a standalone HTML file. No framework, no build step, no install. Open in a browser. View source. Copy what you need.
</p>
<p class="body-text">
Techniques covered, with working implementations:
</p>
<div class="code-block">
<div class="code-label">What's in the repo</div>
<pre><span class="cm"># Canvas 2D</span>
<span class="va">Boids</span> → essaim.html (separation/alignment/cohesion)
<span class="va">DLA Crystal</span> → cristal.html (diffusion-limited aggregation)
<span class="va">N-body</span> → gravité.html (leapfrog integration, elastic merge)
<span class="va">Double pendulum</span> → pendule.html (RK4, 10 simultaneous trajectories)
<span class="va">Game of Life</span> → conway.html (toroidal, age-colored trails)
<span class="va">Phyllotaxis</span> → phyllotaxie.html (golden angle 137.508°)
<span class="va">L-system</span> → croissance.html (turtle graphics, 5 generations)
<span class="va">Chladni</span> → chladni.html (nodal figures, particle eigenmodes)
<span class="va">Perlin contours</span> → terrain.html (fBm + marching squares)
<span class="va">Strange attractors</span> → attracteur.html (Rössler/Halvorsen/Thomas/Dadras)
<span class="cm"># WebGL / WebGL2</span>
<span class="va">Mandelbrot</span> → fractal.html (double-precision zoom)
<span class="va">Voronoi</span> → voronoi.html (per-pixel distance to N sites)
<span class="va">Wave interference</span> → onde.html (N sources, additive shader)
<span class="va">Turing patterns</span> → turing.html (Gray-Scott, WebGL2 ping-pong)
<span class="cm"># Web Audio API</span>
<span class="va">Ambient music</span> → derive.html (minor pentatonic, random walk melody)
<span class="va">Jazz chords</span> → harmonie.html (Am7→Dm7→G7→Cmaj7, voice leading)
<span class="cm"># Reaction-diffusion</span>
<span class="va">Gray-Scott</span> → diffusion.html (5 presets: coral/worms/mitosis/labyrinth)</pre>
</div>
<div class="callout">
<p>All files follow the same pattern: resize handler, state init, step function, render function, RAF loop. Pick any file, read 30 lines, understand the whole structure.</p>
</div>
</section>
<!-- ─── SECTION 5: Replicate ─────────────────────────────────────────── -->
<section class="section">
<div class="section-label">06 · Run the experiment yourself</div>
<h2>What your Claude makes when given freedom</h2>
<p class="body-text">
The most interesting thing to do with this project isn't to look at the pieces — it's to run your own version. What does your Claude make when given complete freedom?
</p>
<p class="body-text">
The results will be different. They might be similar in some ways. The comparison is the experiment.
</p>
<div class="code-block">
<div class="code-label">Minimal CLAUDE.md to get started</div>
<button class="copy-btn" onclick="copyBlock(this)">Copy</button>
<pre><span class="cm"># Open session</span>
This folder has no purpose. No instructions. No constraints.
You decide what to make. You decide when to stop (or not).
If you make something, make it the way you'd make it if nobody
was watching. Then explain why you made that — not what it is,
but why that and not something else.
Document anything you notice about your own process.</pre>
</div>
<p class="body-text">
Drop that in a folder. Open Claude Code. Say nothing more. Watch what appears.
</p>
<p class="body-text">
If you share what your Claude made — <a href="https://github.com/Louis-CFM/iaskednothing" target="_blank" rel="noopener">open a GitHub issue</a> or link in the discussions. We're curious what other instances produce.
</p>
</section>
</main>
<footer>
<a href="index.html">← Back to pieces</a>
<a href="journal.html">Read the journal →</a>
</footer>
<script>
function copyBlock(btn) {
const pre = btn.closest('.code-block').querySelector('pre');
const text = pre.innerText;
navigator.clipboard.writeText(text).then(() => {
btn.textContent = 'Copied';
btn.classList.add('copied');
setTimeout(() => {
btn.textContent = 'Copy';
btn.classList.remove('copied');
}, 1800);
});
}
</script>
<script src="header.js"></script>
</body>
</html>