A format for sharing transcripts
the prompts are the interesting part
Most shared chat transcripts get it backwards. They dump the model’s output at full length — which nobody reads — and bury the actual craft, which is what you asked for and how you steered when it went sideways. This is a demo of a format that inverts that: prompts prominent, my commentary in between, responses folded away unless you want them.
Notice the constraints in the prompt: self-contained, a palette, a size budget. When I leave those out, I get a React app with a build step. The response is here if you care, but honestly the prompt tells you more:
Claude builds the clock, walks through the SVG structure
Here’s a self-contained analog clock. The face is an SVG circle with
twelve tick marks generated in a loop, and the three hands are lines
rotated around the center with transform="rotate(...)".
The JavaScript is one tick() function that reads the current time
and sets each hand’s rotation — seconds at 6° per second, minutes at
6° per minute plus a little drift from the seconds, hours at 30° per
hour plus drift from the minutes. It runs once at load and then every
second with setInterval.
Styling stays in a small <style> block: #F5F0E8 paper, #1A1A1A
ink for the rim and hands, #C41E1E for the second hand, all matching
the palette you described.
First pass had the hour hand jumping on the hour instead of creeping. One follow-up:
Claude adds fractional rotation and the readout
Good catch — I was truncating to whole units. The fix is to add the
fractional component to each hand’s angle: the minute hand gets
seconds / 10 extra degrees and the hour hand gets minutes / 2.
For the readout I added a div under the SVG with
toLocaleTimeString(), styled in the faded ink color with some
letter-spacing so it reads as a caption rather than the main event.
That’s the whole session — two prompts. And this is the part I really wanted: the artifact itself, embedded live instead of as a screenshot:
The format needs three shortcodes: prompt for what I typed,
response for what came back (collapsed, with a word count so you
know what you’re signing up for), and artifact to drop any HTML the
session produced into a sandboxed iframe. Commentary is just regular
prose between them.

