Six Words, One Story — The Making
Sessions 1–3: Research → Build → Document
How a conversational question to ChatGPT became a professional training document — and what every prompt can teach you
This is the development diary for Six Word Memoir — a TNT training document that teaches the six-word mission statement, its history, and a practical process for writing your own. The page was built entirely through AI collaboration, starting with a simple exploratory question to ChatGPT.
Like the Tool Time chatlog, every entry here shows the actual words used, a letter grade, and an honest breakdown of what made each prompt effective — or where it could have been sharper. The goal is to demonstrate that how you ask shapes what you receive.
Look for the purple critique boxes — they are the teaching moments. The blue-grey response boxes summarize what each AI produced.
The log covers 10 sessions as of 2026-10-26. Here is the session overview:
Sessions 1–2 (2026, dates unrecorded) — Research prompt to ChatGPT (B) and HTML generation prompt (B−). Concept confirmed, first version of the page produced.
Sessions 3–5 (2026-10-26) — Chatlog created (A−); HTML nesting refactor 71→562 lines (A−); Rabalais callout note removed — “your recollection” addressed only TTG (A−).
Sessions 6–7 (2026-10-26) — Movie clips page sixWordStoryMC.html created, placeholder links closed (A−); Boogaloo added to Google Fonts bundle (B+).
Session 8 (2026-10-26) — Six Word Memoir card added to Styl’n; listed in Explore under both Styling and S.P.A.R.K. (A−).
Session 9 (2026-10-26) — 15 corrupted ? characters fixed: visible separators replaced with •, comment dividers restored to ASCII. Root cause: PowerShell pipe encoding. Grade: A−.
Session 10 (2026-10-26, this entry) — News entry #091 added to news.html, with a meta-modal showing this prompt and its critique. Grade: A−.
I attended a training session several years ago. A speaker, Kent Rabalais, spoke of a technique for writing a 6-word sentence mission statement. His idea was that it was like a ‘pitch’ you’d give as an ‘elevator talk’ to promote an idea for a movie or a book. Are you aware of this 6-word sentence concept for framing a life purpose? If so, can you tell me more about it in detail?
A well-framed research question with strong personal context. For an exploratory prompt, a B is a strong result — the context compensates for the missing structure.
Key lesson: Personal context + a genuine knowledge question + a correct guardrail (verify first, build second) are the core of an effective research prompt. Format and role specification are refinements, not prerequisites for a good outcome.
Yes — the concept is usually called a six-word mission statement, six-word purpose statement, or six-word life statement. It combines personal reflection with the discipline of a very short story pitch: identify the central idea of your life, then express it in six carefully chosen words.
A well-known relative is the Six-Word Memoir. In November 2006, Larry Smith, founder of SMITH Magazine, invited people to describe their lives in exactly six words. The project took inspiration from the six-word story traditionally attributed to Hemingway — “For sale: baby shoes, never worn” — although that attribution is best treated as legend.
The mission-statement version shifts the question from describing a life to directing one. Lisa Hendey’s six-word life elevator pitch: “I share stories that change lives.” Nick Westergaard’s six-word statement — “I help people tell their stories” — is a close match to the elevator-pitch framing you described.
[Response continues with: a six-step practical writing process, five educator-focused examples, three testing questions, and a note that ChatGPT could not verify Rabalais’s exact curriculum but confirmed Kent Studio’s website promotes a “Six-Word Story Challenge.”]
ChatGPT’s response was exemplary for an exploratory research prompt. Key strengths:
- Named the concept correctly and provided multiple documented labels
- Traced the history accurately (SMITH Magazine 2006) without fabricating the Hemingway attribution
- Distinguished between memoir, mission statement, and elevator pitch in a formatted table
- Cited verifiable sources: Kent Studio, Lisa Hendey/Jesse Itzler, Nick Westergaard
- Provided an original six-step writing process with honest labeling (“this is a synthesis, not Rabalais’s verified curriculum”)
- Gave five educator-tailored six-word examples
Response grade: A. Thorough, cited, appropriately caveated. The honest disclaimer about Rabalais’s curriculum is a hallmark of a high-quality AI response — it distinguishes what is verified from what is inferred.
I like your analysis. Please write it up as an HTML file, sixWordMemoir.html along with a list of any reference links that could teach me more about the concept and who’s actively teaching it and promoting it.
Lean and functional. It worked because it stood on Session 1’s shoulders — and that is its central weakness.
Key lesson: Short follow-up prompts work when you have a rich conversation to build on. But the missing styling guidance here created a debt that Session 3 had to pay: the CSS required extraction, correction, and expansion to meet professional standards. Always include a design direction when asking for HTML. Always.
ChatGPT created sixWordMemoir.html — a single-file document with embedded CSS and fully populated content covering all seven sections from Session 1’s research. Content quality was high:
- Seven clearly labeled sections (concept, origins, why the constraint helps, writing process, examples, practitioners, references)
- A live draft textarea with a real-time six-word counter and JavaScript
- A formatted, annotated reference list with all sources cited in the research
- A comparison table distinguishing memoir, mission statement, and elevator pitch
- A print stylesheet for classroom use
HTML hygiene issues (requiring later correction):
- All CSS embedded in a single
<style>block — separation of concerns not applied - Markup was minified (entire sections on single lines), reducing readability and maintainability
- Several invalid CSS values:
font-weight: 750(valid values are numeric multiples of 100),overflow-wrap: anywhere(limited browser support at time of review) - Missing
idattribute on one section, missing<caption>on a table — caught in subsequent validation
Response grade: B+. Content: A. HTML craftsmanship: C+. The gap between ChatGPT’s content quality and its HTML quality is a recurring pattern: AI is an expert writer and a competent coder, but it is not yet a meticulous engineer. Expect to clean up.
The initial HTML’s embedded CSS was extracted to sixWordMemoir1Styles.css, producing sixWordMemoir1.html. Further refinement (hero background image, validation fixes) produced the current sixWordMemoir.html and sixWordMemoirStyles.css. Each iteration improved both structure and validity. This refactoring work is the direct evidence for one of TNT’s core principles: separation of concerns is not optional; it is the prerequisite for maintainable work.
This current version of sixWordMemoir.html (version 2) was generated by a prompt to ChatGPT. Here is the original prompt: [Session 1 prompt, embedded above]. I’d like to create a file, sixWordMemoirChatlog.html and a companion file, sixWordMemoirChatlogStyles.css where I show the evolution of this document as a training exercise in using AI, and as a training representation of writing HTML and CSS in a professional and elegant manner.
You are a web developer, self-aware motivational speaker and a high school computer science teacher, as well as a co-author of TNT. I have attached an exemplar chatlog from our Tool Time Saga. This page has a link to a chatlog: the chatlog should link back to this page. There is a placeholder for a movie clip designed to train novices in how to write their own 6 Word Memoir and it will be developed shortly.
Please create the chatlog starting with the initial prompt I mentioned above, a summary of your critique of that prompt and ChatGPT’s response (the text file contains that work) and this prompt along with its critique. From there, we will continue to build a document and training materials (the movie clips) that will teach web design and inspire users to create their own stories. The artwork for the hero is both in the sub folder’s images file and also the images file in the TNT root folder. I’ve attached the local copy here. You can use it for the hero image of the chatlog.
The strongest prompt in the Six Word Memoir saga so far. TTG has been using AI long enough that the instincts are solid; the growth edge is in the details of specification.
sixWordMemoirChatlog.html and sixWordMemoirChatlogStyles.css. No ambiguity about what must exist when the session is complete.Key lesson: This prompt demonstrates something important about role assignment: the role should not just specify who the AI is — it should connect who the AI is to what it is being asked to do. “Self-aware motivational speaker” is not decoration; it shapes the tone, the teaching instincts, and the editorial choices throughout this chatlog. That is elegant prompting.
Two files created in this session:
sixWordMemoirChatlog.html— this file. Teal/gold palette derived fromsixWordMemoirStyles.cssdesign tokens. Three sessions documented with prompts, critiques, and response summaries. Expandable structure for future sessions.sixWordMemoirChatlogStyles.css— companion stylesheet. Adapts the Tool Time chatlog CSS architecture to the Six Word Memoir palette. Defines SPARK banners, chat bubbles, critique boxes, response boxes, and decision boxes. Separation of concerns fully applied.
- Align the role to the subject matter. If you are building a document about personal purpose statements, ask an AI that is playing a motivational speaker. The role is not a polite fiction — it steers every sentence in the output.
- An exemplar beats a description. Attaching the Tool Time chatlog was worth more than a paragraph describing what a chatlog should look like. Whenever you have a working example of what you want, attach it.
- The chatlog is the curriculum. When a page is built entirely through AI collaboration, the chatlog is not documentation — it is the lesson. Every prompt, every critique, every decision is a teaching moment. Treat the chatlog as a first-class artifact, not an afterthought.
I have decided to create a version we will build on moving forward without a version subscript. We will make a few changes but I don’t anticipate anything drastic. This version has its own stylesheet and currently, everything works as expected. As a web developer, high school teacher and mentor, I want to refactor this code where the nesting nature of HTML is obvious. It will add to the length of the document, but I want novices to see the underlying structure of HTML so they can more readily understand it. For example, reading the table entry in code is nearly impossible. It should be very clear. The current page validates: this new rendering should as well. Add this to our chatlog and update our sessions summary. I’m interested in your opinion as a teacher of HTML and CSS: I think this nesting format is a good thing. Do you agree? Why or why not?
One of the strongest prompts in this chatlog. Role, rationale, constraint, example, and a genuine invitation for expert opinion — all in one paragraph.
Key lesson: The best thing about this prompt is the embedded rationale. “I want novices to see the underlying structure” is not decoration; it is direction. Every ambiguous formatting decision in the refactor resolves the same way: toward clarity, toward the learner. When your rationale is in the prompt, your preferences are in the output.
The refactored sixWordMemoir.html went from 71 lines to 562 lines — nearly 8× longer by line count. Every byte of visible content is identical. What changed:
- Tables fully expanded:
<table>→<thead>→<tr>→<th>/<td>, each on its own indented line - Four-space indentation applied consistently throughout all seven sections
- Section and closing-tag comments added (e.g.,
<!-- /#concept -->,<!-- /.table-scroll -->) - JavaScript reformatted from a two-line minified block to readable, commented code
- CSS file header comment corrected from
sixWordMemoir1Styles.csstosixWordMemoirStyles.css - W3C validation: passes (zero errors, same as before)
Yes — and for reasons that go beyond readability.
HTML is a tree, and nesting shows the tree. The Document Object Model (DOM) is literally a tree data structure. When you indent <td> inside <tr> inside <tbody> inside <table>, the indentation is not decoration: it is the tree. The code structure and the page structure are the same thing. Novices who see this correspondence learn the DOM. Novices who see a minified wall of text learn nothing except that HTML is hard.
Tables are the canonical argument. A table is the most nested common HTML structure a beginner encounters. It has five levels of semantic meaning: the table itself, the head/body groupings, the rows, the cells, and the cell content. Each level matters. Collapsed onto one line, those levels vanish. Expanded with indentation, they are unmistakable — and a student can point at any line and say exactly what structural role it plays.
Debugging requires structure. When something breaks in HTML — a missing closing tag, an incorrectly nested element, a <div> that swallowed its sibling — the fix requires seeing the tree. Properly indented code makes the error visible. Minified code makes it invisible. Teaching novices to write indented HTML is also teaching them how to debug.
The cost is real but acceptable. Indented HTML is longer. A file that was 71 lines becomes 562 lines. For production web traffic, this is a legitimate concern — which is why production toolchains use minification. But the minifier runs on already-legible source code. You write for humans; you deploy for machines. Teaching novices to write minified HTML because production HTML is sometimes minified is like teaching students to take notes in shorthand because books are typeset.
The one honest caveat. Very deep nesting (8+ levels) with 4-space indentation can push code past the readable column width in a narrow editor. The counterargument: modern code editors show tree guides and have horizontal scroll. And 8-level nesting is usually a sign that the HTML structure itself needs to be simplified — the indentation is surfacing a design problem, not creating one.
The verdict: Write HTML with explicit nesting for teaching. Write it the same way for your own work. Use a minifier if you need to optimize file size for deployment. The goal of learning HTML is to understand the web; minification obscures the web. Every extra line in sixWordMemoir.html is a line that a novice can read and understand.
I like the look of the callout note about Rabalais in about line 74–83, but a reader, having not read the initial chatlog would have no idea about its context and I think that would cause confusion. I’ve read the document and I think omitting it entirely would not be a cause for concern. Do you agree? If so, let’s omit it. If you think there’s a benefit to keeping it, what could we do to provide ample context? Let’s add this dialog to the chatlog and update the ‘about’ area. The deliverable is a possible removal of the div.note and a discourse in the chatlog about context and improved user experience.
A mature, decisive prompt that demonstrates critical reading — the most important skill a collaborator brings to AI-assisted work.
div.note and a discourse in the chatlog about context and improved user experience.” Two deliverables, both specified. “Possible removal” is the right qualifier — it acknowledges the decision is still open at the time of writing.Key lesson: “I’ve read the document” is the most powerful phrase in this prompt. AI output that is not critically read is just a draft that no one edited. Every session in this chatlog, TTG has read the output and brought something back: a correction, a question, an improvement, a judgment call. That is the correct use of an AI collaborator.
The note that was removed:
“The Kent Rabalais connection. Your recollection has a documented connection: Kent Studio’s homepage explicitly invites readers to take a “Six-Word Story Challenge.” That supports the connection between Rabalais and this kind of exercise, but it does not establish the exact instructions he used in your training session. The process below is a suggested synthesis, not his verified curriculum.”
Why it needed to go:
- “Your recollection” and “your training session” address one specific person: TTG, who asked the original ChatGPT question in Session 1. A general reader — a student, a visitor, anyone who finds this page through TNT or a search engine — has no recollection and attended no training session. The second-person address breaks the page’s voice for everyone except one person.
- The Rabalais information is not lost. He is documented in Section 06 (“Teachers & Promoters”) and in Reference [1] at the bottom of the page — both in language written for a general audience. The note in Section 01 was redundant as well as misaddressed.
- Section 01’s job is to explain the concept. A four-sentence disclaimer about the provenance of one practitioner’s curriculum breaks that job. It asks a reader who is just learning what a six-word mission statement is to simultaneously process a footnote about academic attribution. That is a UX failure even before the address issue.
What would have kept it? If the note had been rewritten in third-person, present tense, for a general reader — something like: “This page draws on the work of Kent Rabalais, whose Kent Studio website promotes a Six-Word Story Challenge. His exact curriculum is unverified; the process below is an original synthesis.” — it could have stayed. But that rewrite produces a note that is strictly weaker than Reference [1], which already says all of this more thoroughly. A redundant note in general language is still redundant.
The rule behind the decision: Every element on a public page must make sense to the reader who arrived without the backstory. If an element requires context that lives in a different document, it either needs that context embedded in it, or it needs to go.
The div.note block (14 lines) was removed from sixWordMemoir.html Section 01. The page now flows directly from the concept explanation to the comparison table. Kent Rabalais remains documented in Section 06 and Reference [1]. Validation status: unchanged.
You are a co-creator at TNT and a web developer and high school teacher who wants their students to begin thinking about their purpose in life. To teach them about HTML and CSS and to get them thinking about the deeper things: meaning of life, you have created an app about the sixWordMemoir. You want to provide deeper context and training so you have found two movie clips on the subject [YouTube iframes provided]. The first is from a YouTube channel: Tolentino Teaching (Resources for English Teachers). The second is from a YouTube channel: The Art of Narrative.
I have attached an exemplar movie page for context. For this new page, sixWordStoryMC.html, we can use the attached image for the hero background. It’s the same as that used in our app. The explanatory paragraph should summarize the intent and purpose of the 6 Word Memoir/Story as described in the app. The second paragraph should explain the reasoning behind the app’s inclusion at TNT as well as a link to that app. Within the app, I have a reference place holder for the movie clips that should also be updated. Please include this prompt and your analysis and critique of it within the chatlog and the session in the about area should be completed as well.
The strongest prompt in this chatlog by deliverable complexity. The role framing is notably elevated and the content direction is precise.
aboutMagic8Ball.html was provided as a structural model. Concrete examples communicate format more efficiently than abstract description. (This pattern has now appeared in multiple sessions; it is becoming a TTG signature move.)href="#" in the nav and the dead link in movie_clips.html. Naming both explicitly (“the Movie Clips nav link in sixWordMemoir.html and the card link in movie_clips.html”) would have made the task unambiguous.sixWordStoryMC.html, (2) update movie_clips.html card, (3) update sixWordMemoir.html nav, (4) Session 6 chatlog entry, (5) About section update. Five deliverables in prose. Numbered lists make verification mechanical; this prompt requires re-reading to audit completeness.Key lesson: “A teacher who wants students to think about their purpose in life” is not a role; it is a mission. When you write a role that includes the mission, the AI carries that mission into every word it writes. The clips page’s opening paragraph — “Watch — then try your own” — came directly from that framing. Role assignment at this level of depth is the difference between a page that informs and a page that invites.
Four changes made in this session:
movie_clips/sixWordStoryMC.htmlcreated. Teal/gold palette matching the Six Word Memoir app. Two clips in Bootstrap 16:9 ratio frames. Expandable<details>summary with two paragraphs as specified. Channel credit lines below each clip. Follows theaboutMagic8Ball.htmlstructural model exactly.movie_clips.htmlupdated. The “6 Word Story” card’shref="#"placeholder replaced withmovie_clips/sixWordStoryMC.html.SixWordMemoir/sixWordMemoir.htmlupdated. The “Movie Clips” nav link’shref="#"placeholder replaced with../movie_clips/sixWordStoryMC.html.- This chatlog entry and About section updated.
Our memoir chatlog doesn’t include a base font we use at TNT. It’s a Google font and here is a footprint for it that we’ve used in other pages. The content from this footprint needs to be integrated into the current page: <link href="https://fonts.googleapis.com/css2?family=Boogaloo&family=Inter:wght@300;400;600;700&family=Noto+Sans+Mono:wght@400;700&display=swap" rel="stylesheet"> Update the chatlog accordingly along with the ‘about’ area as well.
A precise maintenance prompt. The task is surgical; the prompt is appropriately sized for it.
Key lesson: For a one-line change, providing the exact specification is the whole prompt. “Here is the exact link” eliminates ambiguity completely. Anything more would be padding; anything less would be guesswork.
One <link> tag in <head> replaced. Boogaloo added; family order normalized to match TNT standard:
family=Boogaloo&family=Inter:wght@300;400;600;700&family=Noto+Sans+Mono:wght@400;700
The three-family bundle — Boogaloo, Inter, Noto Sans Mono — now matches the Tool Time chatlog and all other TNT pages that call Google Fonts.
Most apps at TNT are categorized by their design or nature. Since this app is basically HTML that’s been styled with CSS, I think it best fits in our ‘Styl’n’ area. I’ve attached the stylin.html page. We need a card there after Mason’s Nerdy Icon card that describes and links to this app. Furthermore, we should list it in our explore.html page as a SPARK app as well as a Stylin app.
A concise, well-reasoned classification prompt. The rationale is embedded, the placement is specific, and both destination pages are named.
stylin.html was attached for structural reference. This is now a consistent pattern: TTG provides concrete examples rather than abstract descriptions.Key lesson: “It best fits in our Styl’n area” is a classification decision, not just a placement instruction. When you include the reasoning behind a placement, the AI can apply the same reasoning to write the card description, choose the right icon, and select the right badge label. The why does more work than the where.
Five insertion points updated across two files:
stylin.html— New card added after Mason’s Nerdy Icon. Icon: 📝 (memo). Description covers the concept, the AI-build story, and the chatlog.explore.html— Styling category card (visible) — “Six Word Memoir” added to the visible list with afa-pen-nibicon.explore.html— S.P.A.R.K. category card (visible) — “Six Word Memoir — Chat Log” added as a chatlog entry.explore.html— Styling offcanvas (full list) — Both the app and chatlog added before the legacy section.explore.html— S.P.A.R.K. offcanvas (full list) — Both the app (CSS badge) and chatlog (S.P.A.R.K. badge) added before the legacy section.
You are using a ? as a separator in the Reflection Storytelling Direction ‘eyebrow’ as well as in the Prepared for statement in the hero of the memoir app. It may be occurring elsewhere in the app and/or the chatlog. (Find and correct them all). Obviously, this raises some questions. (pun). I think a simple bullet is a better replacement. What are your speculations as to why we had the ‘?’ It seems like it may have been different in earlier versions. Whatever the case, the page needs to validate. Please add this prompt and your analysis to the chatlog.
A sharp diagnostic prompt that caught a real bug, asked for root-cause analysis, and made a reasonable UX decision all in one paragraph. The pun is earned.
• is readable, safe ASCII-range HTML, and unambiguous in context.• characters were already in HTML entity form, having been created with the create tool rather than the Python pipe). Specifying which file would have removed the ambiguity.The · (middle dot, U+00B7) and ═ (box drawing double horizontal, U+2550) characters that appear in the session comment dividers were in the Python raw string passed to Python via a PowerShell @'...'@ | python pipe. Here is what happened:
- PowerShell’s pipe encoding. When PowerShell sends a here-string to a subprocess via stdin, it uses the console’s output encoding, which on Windows is typically CP850 or Windows-1252. The middle dot U+00B7 is present in Windows-1252 (as byte 0xB7), but CP850 encodes it differently — or not at all.
- Python’s stdin encoding. When Python reads from a pipe on Windows, it may use the system’s locale encoding for stdin. If the byte received does not map to a valid character in that encoding, Python replaces it with
?(the Unicode replacement character for ASCII fallback) rather than raising an error. - The result. Every non-ASCII character in the piped string — the middle dots, the box-drawing characters in comment dividers — was silently converted to
?. The Python write succeeded, so no error was raised. The file contained ASCII question marks where Unicode characters should have been.
Why it was different in earlier versions. The original ChatGPT-generated sixWordMemoir.html and its subsequent refactors (sixWordMemoir1.html, sixWordMemoir2.html) used the actual Unicode middot character directly in the file. Those files were saved by ChatGPT or by the VS Code create tool, both of which write UTF-8 correctly. The corruption happened only in Session 4 when the file was rewritten using the Python pipe approach.
The prevention rule. When writing HTML via PowerShell pipe to Python, use only HTML entities for non-ASCII characters — • not •, — not —. Use only plain ASCII in code comments. The VS Code create and edit tools write UTF-8 directly and do not have this problem. This is the same root cause documented in Sessions 17–18 of the Tool Time chatlog under the “mojibake magic words” rule.
15 corrupted locations fixed in sixWordMemoir.html:
- 3 visible — eyebrow separators, meta separator, output element initial text: all replaced with
•(•). - 12 in HTML comments — section dividers (HERO, WRAP, PAGE NAV, SECTIONS 01–07, DRAFT TOOL, SCRIPT):
?????sequences replaced with plain-ASCII=====patterns. HTML comments are never rendered; this is a code-hygiene fix.
The chatlog had zero corruption: it was created with the create tool, which bypasses the PowerShell pipe entirely and writes UTF-8 correctly.
Our news page should include an announcement about our sixWordMemoir app. You are a co-creator at TNT and you’ve studied the most recent news announcement. This new one will be above the most recent, and by studying that recent one, you’ll mimic the style and framework for the new entry. You have the context and purpose of the app in the attached documents, especially the movie clips page. Add this prompt to our chatlog along with the critique.
An efficient, pattern-aware prompt that produced a fully matched news entry. The exemplar-based instruction is the session’s strongest move.
Key lesson: “By studying that recent one, you’ll mimic the style” is exemplar-based prompting in its purest form. You are not describing a format — you are pointing at one. The AI reads the example, extracts the pattern, and applies it. The entry came out matching its neighbors because the instruction was “match this,” not “here are 12 rules to follow.” Exemplar beats description, every time.
Two additions to news.html:
- Accordion entry #091 — placed above #090, following the exact structure. Three paragraphs: (1) what the app is and does, (2) the AI collaboration story and encoding bug teaching moment, (3) why it belongs in Styl’n. Link row: Six Word Memoir, Movie Clips, Chat Log, Styl’n, and “How was this entry written?” modal trigger.
- Meta-modal
#sixWordNewsModal— teal palette (#15665e / #e3b65e) matching the app’s design identity. Contains this prompt verbatim, grade A−, and the full critique. Pattern-matched from the #090 modal.
The Six Word Memoir ecosystem continues to grow. Future sessions will be documented here as new features, refinements, and teaching materials are added.