diff --git a/README.md b/README.md
index 860cd5f..29fa707 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Drop your pitch deck, market research, business plan, competitor notes and call
> Every company, customer, metric and transcript used as an example in this repo is invented. Nothing here is drawn from any real client engagement.
-[**New to working with AI**](docs/ai-basics.md) · [**What the words mean**](docs/what-things-are.md) · [**The method**](docs/method.md) · [**Build the knowledge base**](docs/knowledge-base.md) · [**Prompt library**](prompts/INDEX.md) · [**For coaches**](docs/for-coaches.md) · [**For programmes**](docs/for-portfolios.md) · [**Quickstart**](QUICKSTART.md)
+[**New to working with AI**](docs/ai-basics.md) · [**What the words mean**](docs/what-things-are.md) · [**The infographics**](docs/infographics.md) · [**The method**](docs/method.md) · [**Build the knowledge base**](docs/knowledge-base.md) · [**Prompt library**](prompts/INDEX.md) · [**For coaches**](docs/for-coaches.md) · [**For programmes**](docs/for-portfolios.md) · [**Quickstart**](QUICKSTART.md)
[](https://fritzhand.github.io/startup-stack/)
@@ -63,11 +63,11 @@ There is a second reader, and the repo now serves them too: the **programme** ru
| [`stack/`](stack/) | **The templates.** Ten numbered sections — company, customer, market, product, GTM, operations, money, capital, brand, pulse — one markdown file each, with front matter. [`stack/INDEX.md`](stack/INDEX.md) is the router an AI reads first, and [`stack/CONTEXT.md`](stack/CONTEXT.md) is the one-pager it reads next. This *becomes* your knowledge base; you fill it in, you do not copy it out. |
| [`prompts/`](prompts/INDEX.md) | **The prompt library.** 19 prompts: bootstrap, gap scan, competitive intelligence, unit economics, the list of 100, the pitch deck, fundraise readiness, the weekly recap, meeting-to-actions, and the adversarial review that tells you what an investor will attack. Each opens with a `Requires:` line and stops if what it needs is missing. Most want a filled-in stack; [`00`](prompts/00-bootstrap-the-stack.md), [`14`](prompts/14-meeting-to-actions.md) and [`15`](prompts/15-scrape-a-site.md) run against an empty one, which is how a stack starts to fill. The last three belong to `portfolio/` and never touch a founder's stack. |
| [`worksheets/`](worksheets/) | **The repeatable artifacts.** Fill-in files you produce over and over: startup-prep, customer interview, competitor profile, two-week experiment, SOP entry, trade/order sheet, advisor scope letter, one-pager, list of 100, weekly recap. |
-| [`docs/`](docs/) | **The method, in thirteen pages.** New to any of this: [AI basics](docs/ai-basics.md) and [what the words mean](docs/what-things-are.md) — the terminal, an editor, Git, GitHub, connectors, model tiers — each in plain language with a diagram. The method: [why it works](docs/method.md), [building the knowledge base](docs/knowledge-base.md), [the front-matter schema](docs/front-matter.md), [getting your material in](docs/getting-material-in.md) source by source, and [website to inbox](docs/scraping.md). Running it: [the weekly recap](docs/weekly-recap.md), [for coaches](docs/for-coaches.md), [the safety rules](docs/safety.md) for giving an AI access to your files, and [on a schedule](docs/automation.md) — recipes for Microsoft 365, Google Workspace, Zoom, Slack, and none of them. Two are for programmes only: [for programmes](docs/for-portfolios.md) and [the exchange folder](docs/exchange.md). |
+| [`docs/`](docs/) | **The method, in eighteen pages.** New to any of this: [AI basics](docs/ai-basics.md) and [what the words mean](docs/what-things-are.md) — the terminal, an editor, Git, GitHub, connectors, model tiers — each in plain language with a diagram. The method: [why it works](docs/method.md), [building the knowledge base](docs/knowledge-base.md), [the front-matter schema](docs/front-matter.md), [getting your material in](docs/getting-material-in.md) source by source, and [website to inbox](docs/scraping.md). Running it: [the weekly recap](docs/weekly-recap.md), [for coaches](docs/for-coaches.md), [the safety rules](docs/safety.md) for giving an AI access to your files, and [on a schedule](docs/automation.md) — recipes for Microsoft 365, Google Workspace, Zoom, Slack, and none of them. Two are for programmes only: [for programmes](docs/for-portfolios.md) and [the exchange folder](docs/exchange.md). And [the infographics](docs/infographics.md) — thirty pictures across four pages, covering [what AI is](docs/infographics-ai.md), [the tools](docs/infographics-tools.md), [the method](docs/infographics-method.md) and [running a portfolio](docs/infographics-portfolio.md); take them for a workshop. |
| [`portfolio/`](portfolio/) | **Optional — for a programme, not a founder.** The templates an incubator, accelerator or studio uses to run this across many companies: a router, a 1-to-5 maturity rubric per function, the cross-company theme scan, and a company folder to copy. Delete it if you are a founder. See [docs/for-portfolios.md](docs/for-portfolios.md). |
| [`_inbox/`](_inbox/) | Where raw material lands before it is processed. Git-ignored by default. |
| [`tools/`](tools/) | **Optional.** One script that turns a website into citable markdown in `_inbox/`. You never need it — it saves an hour of copy-and-paste. See [docs/scraping.md](docs/scraping.md). |
-| [`web/`](web/) | **This project's own site**, generated from the markdown in this repo. Not part of your stack — delete it when you fork. |
+| [`web/`](web/) | **This project's own site**, generated from the markdown in this repo, plus [`web/infographics/`](web/infographics) — the thirty images the infographics pages show. Not part of your stack — delete it when you fork, but take the infographics first if you want them. |
## Quickstart
diff --git a/docs/infographics-ai.md b/docs/infographics-ai.md
new file mode 100644
index 0000000..8ff1cf7
--- /dev/null
+++ b/docs/infographics-ai.md
@@ -0,0 +1,59 @@
+# Infographics — what AI is
+
+Eight pictures covering the foundations: what a language model actually is, how one gets built, what people mean by weights, why the models keep improving, and what changes when the same model is put in a different place. Nothing here is specific to this repository. Take any of it for a workshop.
+
+Click an image to open it at full size.
+
+---
+
+## What this thing actually is
+
+The plain description, with no metaphor that misleads. A model predicts the next piece of text, repeatedly. Everything useful about it and everything dangerous about it follow from that one sentence.
+
+
+
+## How a model gets made
+
+Four stages — gather, pre-train, fine-tune, align — and the reason a new version arrives faster than the cost of the first one would suggest.
+
+
+
+## What weights actually mean
+
+The part of a model that *is* the model: a very large list of numbers, none of them written by a person, none of them readable afterwards. This is also where open weights and closed weights get explained, which is the choice that matters if you work under a confidentiality obligation.
+
+
+
+## The loops that make models improve
+
+Four feedback cycles — human preference, AI feedback, verifiable rewards, synthetic data — and an honest note on where each one stops working.
+
+
+
+## The same model in four different places
+
+Website, desktop app with connectors, editor, API. The model is identical in all four. What differs is what it can see and what it is allowed to do — and that difference is most of the reason two people get different results from the same question.
+
+
+
+## What agentic actually means
+
+The difference between asking for text and delegating a task, and the inner loop — plan, act, observe, check — that makes the second one possible.
+
+
+
+## Which model should I use
+
+Three tiers, a separate dial for thinking effort, and the rule of thumb that saves the most money: start in the middle and move for a reason.
+
+
+
+## Where your words actually go
+
+What happens between pressing enter and getting an answer, and why it explains the three things that puzzle people most: rising cost in long threads, forgetting the start of a conversation, and why an index is a cost decision rather than a tidiness preference.
+
+
+
+---
+
+Next: [the tools](infographics-tools.md) — terminal, Git, Node, databases and the rest of the words.
diff --git a/docs/infographics-method.md b/docs/infographics-method.md
new file mode 100644
index 0000000..61e7be7
--- /dev/null
+++ b/docs/infographics-method.md
@@ -0,0 +1,79 @@
+# Infographics — the method
+
+Nine pictures of what this repository actually describes. Together they are the whole method: how scattered files become a knowledge base, how it stays honest, how material keeps arriving, and what you do with it every week.
+
+Click an image to open it at full size.
+
+---
+
+## The Startup Stack method
+
+The whole thing on one page. Raw material on the left, ten sections in the middle, the work that comes out on the right, and the three loops that keep it alive.
+
+
+
+The written version is [the method](method.md).
+
+## How the AI answers without reading everything
+
+Why an index makes a knowledge base cheaper as it grows rather than dearer. This is the single idea that most people miss, and it is the reason the whole thing is structured the way it is.
+
+
+
+## The ten sections
+
+The fixed spine every stack shares, the dependencies between them, and the part that is genuinely yours to decide.
+
+
+
+The written version is [build the knowledge base](knowledge-base.md).
+
+## How every fact gets tagged
+
+The quality system that stops an AI inventing your numbers. Four tags, who is allowed to apply each, the one-way promotion only a human may perform, and the fifth tag that exists because judgement is not a checkable claim.
+
+
+
+## Front matter, line by line
+
+Eleven fields annotated with the one thing that breaks when each is wrong. Thirty seconds to write; the difference between a router and a pile.
+
+
+
+The written version is [the front matter schema](front-matter.md).
+
+## Getting your material in
+
+Three routes from wherever your company lives today into one folder, and the list of what stays out whichever route you take.
+
+
+
+The written version is [getting your material in](getting-material-in.md).
+
+## Putting the pull on a schedule
+
+Connecting a subscription to mail and drive without mirroring your inbox — the setup, the weekly cycle, the daily-or-weekly question, and the monthly audit that most people skip.
+
+
+
+The written version is [running it on a schedule](automation.md).
+
+## Private master, shared derived
+
+How one stack produces four different documents without leaking. Three sensitivity bands, four outputs, and one band that never leaves the machine at all.
+
+
+
+The written version is [the safety rules](safety.md).
+
+## The weekly recap
+
+Thirty minutes, six sections, and the only part of this system that compounds. Including the arrow that brings last week's unmet commitments back as this week's uncomfortable question.
+
+
+
+The written version is [the weekly recap](weekly-recap.md).
+
+---
+
+Next: [running a portfolio](infographics-portfolio.md) — the layer for a programme rather than a single founder.
diff --git a/docs/infographics-portfolio.md b/docs/infographics-portfolio.md
new file mode 100644
index 0000000..7591ad8
--- /dev/null
+++ b/docs/infographics-portfolio.md
@@ -0,0 +1,35 @@
+# Infographics — running a portfolio
+
+Three pictures of the layer that sits above a single founder: what an incubator, accelerator, studio or university programme keeps for itself, and how it does that without holding anybody's master copy.
+
+Click an image to open it at full size. The written version is [for programmes](for-portfolios.md).
+
+---
+
+## Running this across a portfolio
+
+The three-zone architecture. The founder's stack on the left under their control, the programme's record on the right built from what coaches already produce, and a deliberately thin shared folder between them.
+
+Including the constraint that defeats most attempts at this: you almost certainly hold no equity, so any system that depends on founder discipline is accurate for about three weeks.
+
+
+
+## Every session becomes two files
+
+Why the factual record and the coach's read must never be the same document, and the test that decides which one a sentence belongs in: said out loud in the room, or thought and not said.
+
+
+
+The written version is [the exchange folder](exchange.md).
+
+## What stage are they really at
+
+Five maturity levels scored on evidence rather than on funding, revenue or headcount — and the one step a programme can actually cause.
+
+
+
+The written version is [the maturity rubric](../portfolio/rubric.md).
+
+---
+
+Back to [all the infographics](infographics.md).
diff --git a/docs/infographics-tools.md b/docs/infographics-tools.md
new file mode 100644
index 0000000..1e2ac0d
--- /dev/null
+++ b/docs/infographics-tools.md
@@ -0,0 +1,73 @@
+# Infographics — the tools
+
+Ten pictures explaining the words you will hear and be expected to nod along to. Most of them are not things a founder building a knowledge base has to learn — they are things a founder has to stop being intimidated by.
+
+If you only look at one, look at the first. It shows which layer each of the others lives on, which is the part nobody explains.
+
+Click an image to open it at full size. The written version of most of this is [what things are](what-things-are.md).
+
+---
+
+## How all of this fits together
+
+Five layers, from your own computer up to the AI, and which tool sits on which. Also the honest note about how few of them you actually need on day one.
+
+
+
+## What the terminal is
+
+The oldest way to tell a computer what to do, why AI tools still use it, and the only skill a founder actually needs here: being able to read a command before approving it.
+
+
+
+## Editors, IDEs, and what agentic means
+
+The difference between a chat window you paste into and a tool that can see your folder, edit it, and run commands. Also what comes with that access.
+
+
+
+## What Git is
+
+The undo button for a folder. The highest-value five minutes on this entire site, and the only safety measure that makes a bad outcome recoverable rather than merely less likely.
+
+
+
+## Git and GitHub are not the same thing
+
+One runs on your machine with no internet. The other is a website. People conflate them constantly, and it makes every explanation of both harder to follow.
+
+
+
+## What Node is
+
+Why a tool tells you to install something before anything will run, and what npm, `package.json` and `node_modules` are. Plumbing, explained once so it stops being mysterious.
+
+
+
+## What a database is, and whether you need one
+
+The line between a website and a product. Most things a founder builds first do not need a database, and knowing which side of the line you are on saves a great deal of money.
+
+
+
+## How a website actually goes live
+
+Seven stages from a folder on your laptop to a name people can type. Useful mostly because it shows that you never upload a website — you upload the source, and a machine builds it.
+
+
+
+## What a connector is
+
+How an AI reaches your mail and your drive, why there is now a standard for it, and the three habits that keep it from becoming a liability.
+
+
+
+## What markdown is
+
+The format this entire method is built on. Plain text that reads well as text and renders as a document, and outlives whatever tool made it.
+
+
+
+---
+
+Next: [the method](infographics-method.md) — this repository, drawn.
diff --git a/docs/infographics.md b/docs/infographics.md
new file mode 100644
index 0000000..d095f36
--- /dev/null
+++ b/docs/infographics.md
@@ -0,0 +1,24 @@
+# The infographics
+
+Thirty pictures covering what AI actually is, the tools you will hear named, the method this repository describes, and how a programme runs it across a portfolio. They are split across four pages so that none of them is a wall of images.
+
+Every one is a single image with a caption. Click any of them to open it at full size — they are drawn dense enough that a phone-width version would not be readable, so the page fits them to the column and the click gives you the detail.
+
+---
+
+## The four pages
+
+| Page | What is on it | Count |
+|---|---|---|
+| [What AI is](infographics-ai.md) | Foundations. What a model is, how one gets made, what weights are, why they keep improving, what agentic means, and where your words go when you press enter. | 8 |
+| [The tools](infographics-tools.md) | The words you will hear and have to nod along to. Terminal, editor, Git, GitHub, Node, databases, hosting, connectors, markdown — and how they relate. | 10 |
+| [The method](infographics-method.md) | This repository, drawn. The three loops, the ten sections, the tags, front matter, the carve, the weekly recap. | 9 |
+| [Running a portfolio](infographics-portfolio.md) | The layer for an incubator or accelerator. The three-zone architecture, the two-part session note, the maturity ladder. | 3 |
+
+---
+
+## Using them elsewhere
+
+They are ordinary image files in [`web/infographics/`](../web/infographics). Take them for a workshop deck, a course, an onboarding pack or a slide — that is what they are for, and the licence on this repository permits it.
+
+Two things worth knowing before you put one in front of a room. They were generated, so read the small text on any you are about to present; a few carry the kind of mangled label that image generation produces, and the fix is to regenerate rather than to apologise for it live. And they describe this method, which is opinionated — if your programme does something differently, the picture will quietly argue with you in front of your own cohort.
diff --git a/web/assets/site.css b/web/assets/site.css
index 06e3ca1..210f77f 100644
--- a/web/assets/site.css
+++ b/web/assets/site.css
@@ -221,9 +221,11 @@ img, svg, video { max-width: 100%; height: auto; }
}
.sidebar-group { margin-bottom: 6px; }
.sidebar-title {
+ display: flex; align-items: center; gap: 7px;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-faint); padding: 14px 10px 6px;
}
+.sidebar-title svg { width: 14px; height: 14px; flex: none; opacity: 0.8; }
.sidebar a.nav-link {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px; border-radius: var(--radius-sm);
@@ -392,6 +394,16 @@ pre:hover > .copy-btn, .codeblock:hover > .copy-btn, .copy-btn:focus-visible { o
drawings is 15px in a 1200-wide viewBox, so at 880px it still paints at
about 11px. 620px would have rendered it at under 8px. */
.figure.figure-wide > svg { max-width: none; min-width: 880px; }
+/* A raster infographic behaves the other way round to an inlined SVG: it has a
+ fixed pixel size, so it fits the column and the click opens it at full
+ resolution. Scrolling a 2000px image sideways inside a 700px column would be
+ a worse way to read it than opening it. */
+.figure > .figure-zoom { display: block; }
+.figure > .figure-zoom > img {
+ display: block; width: 100%; height: auto;
+ border-radius: var(--radius-sm); background: #fff;
+}
+.figure > .figure-zoom:hover { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.figure-cap {
margin-top: 12px; font-size: 0.8rem; line-height: 1.5;
color: var(--text-faint); text-align: center;
diff --git a/web/build.mjs b/web/build.mjs
index 8e178d5..2abcdd8 100644
--- a/web/build.mjs
+++ b/web/build.mjs
@@ -114,6 +114,11 @@ const DOC_PAGES = [
{ src: "docs/exchange.md", url: "exchange.html", nav: "Run a portfolio", short: "The exchange folder" },
{ src: "portfolio/README.md", url: "portfolio.html", nav: "Run a portfolio", short: "The templates" },
{ src: "portfolio/rubric.md", url: "rubric.html", nav: "Run a portfolio", short: "The maturity rubric" },
+ { src: "docs/infographics.md", url: "infographics.html", nav: "Infographics", short: "All of them" },
+ { src: "docs/infographics-ai.md", url: "infographics-ai.html", nav: "Infographics", short: "What AI is" },
+ { src: "docs/infographics-tools.md", url: "infographics-tools.html", nav: "Infographics", short: "The tools" },
+ { src: "docs/infographics-method.md", url: "infographics-method.html", nav: "Infographics", short: "The method, drawn" },
+ { src: "docs/infographics-portfolio.md", url: "infographics-portfolio.html", nav: "Infographics", short: "Running a portfolio" },
];
/* ---- prompts: the library, grouped the way prompts/INDEX.md groups them ---- */
@@ -197,6 +202,15 @@ function linkFor(href, ctx) {
const page = PAGE_BY_SRC.get(rel);
if (page) return `${ctx.root}${page}${hash}`;
+ /* the infographics are copied into the site, so they resolve to a real file
+ the browser can load — a blob URL would give an a web page, not an
+ image, and it would only fail once someone opened the published site */
+ if (rel.startsWith("web/infographics/")) {
+ const f = rel.slice("web/infographics/".length);
+ DRAWN_INFOGRAPHICS.add(f);
+ return `${ctx.root}infographics/${f}`;
+ }
+
const isDir = statSync(abs).isDirectory();
return `${isDir ? TREE : BLOB}${rel}${isDir ? "" : hash}`;
}
@@ -264,6 +278,21 @@ function mdToHtml(src, ctx) {
const dia = line.match(/^\s*$/i);
if (dia) { out.push(diagram(dia[1], ctx)); i++; continue; }
+ /* an image alone on a line is a figure, not a paragraph with a picture in
+ it — the alt text doubles as the caption, so there is one thing to write
+ and no way to caption an image while leaving it unreadable to a screen
+ reader */
+ const fig = line.trim().match(/^!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)$/);
+ if (fig) {
+ const [, alt, src] = fig;
+ const url = linkFor(src, ctx);
+ out.push(``
+ + ``
+ + (alt ? `${inline(alt, ctx)}` : "")
+ + ``);
+ i++; continue;
+ }
+
if (!line.trim()) { i++; continue; }
/* fenced code */
@@ -361,6 +390,11 @@ const DG_LIGHT = (() => {
})();
const DIAGRAM_DIR = join(ASSETS, "diagrams");
+const INFOGRAPHIC_DIR = join(WEB, "infographics");
+/* every infographic a page draws, so the sweep at the end can name the ones no
+ page draws — an unreferenced 200 KB image ships to the site and is seen by
+ nobody, and the only moment anyone would notice is never */
+const DRAWN_INFOGRAPHICS = new Set();
function checkDiagramPalette(name, svg) {
for (const [, token, literal] of svg.matchAll(/var\(--(dg-[a-z-]+),\s*(#[0-9a-fA-F]{3,8})\)/g)) {
const want = DG_LIGHT[token];
@@ -396,15 +430,24 @@ const ICONS = {
arrow: I(''),
github: I(''),
stack: I(''),
+ /* one per sidebar group, so the eye can find a section without reading it */
+ compass: I(''),
+ book: I(''),
+ checklist: I(''),
+ wrench: I(''),
+ repeat: I(''),
+ people: I(''),
+ picture: I(''),
};
const NAV = [
- { group: "Start here", items: [{ url: "index.html", title: "What this is" }] },
- { group: "The method", items: [] },
- { group: "Do the work", items: [] },
- { group: "Tools", items: [] },
- { group: "Running it", items: [] },
- { group: "Run a portfolio", items: [] },
+ { group: "Start here", icon: "compass", items: [{ url: "index.html", title: "What this is" }] },
+ { group: "The method", icon: "book", items: [] },
+ { group: "Do the work", icon: "checklist", items: [] },
+ { group: "Tools", icon: "wrench", items: [] },
+ { group: "Running it", icon: "repeat", items: [] },
+ { group: "Run a portfolio", icon: "people", items: [] },
+ { group: "Infographics", icon: "picture", items: [] },
];
const navPush = (group, url, title) => {
const g = NAV.find((x) => x.group === group);
@@ -417,8 +460,8 @@ function sidebar(root, active) {
`${esc(title)}`;
return `