# ai.com — prototypes & strategy

A collection of self-contained **ai.com / AIC** prototypes and strategy decks exploring an
**agent-first workplace OS**, built for and dogfooded against Crypto.com PM personas.

**Start here:** open [`index.html`](index.html) — the landing page that links every
prototype and document in this repo.

```bash
# open directly
open index.html

# …or serve the whole repo (needed for the Command Center prototype — see below)
python3 -m http.server 8080   # then visit http://localhost:8080/
```

> Tailwind and Inter load from a CDN, so the pages need internet on first load.

---

## Directory map

| Path | What's in it |
|------|--------------|
| `index.html` | **Root landing page** — the hub linking everything below. |
| `assets/` | Shared brand assets (`ai-com-banner.png`). |
| `docs/` | Strategy decks as standalone HTML. |
| `meridian/` | "One Week at Meridian" — a scripted 5-act product demo (`index.html` + `app.js` + `styles.css`). |
| `prototype-playbook/` | The Command Center prototype (`command-center.dc.html`), its strategy deck, and the **ai.com design system** under `_ds/` (the source of truth for tokens). |
| `ralph-loop/` | An autonomous-build kit and its **14-prototype gallery** (`ralph-loop/index.html`). ⚠️ This folder is **its own nested git repository** — don't move it or rewrite its paths from the parent repo. |

---

## How to run each prototype

| Prototype | How to open |
|-----------|-------------|
| **Ralph-loop gallery** (`ralph-loop/index.html`) | Open directly in a browser. |
| **Meridian** (`meridian/index.html`) | Open directly in a browser. |
| **Command Center** (`prototype-playbook/command-center.dc.html`) | **Needs a local web server** — it uses `fetch()`, which browsers block on `file://`. Use a launcher in `prototype-playbook/` (`run-mac.command`, `run.sh`, or `run-windows.bat`), or serve the repo root and open the file over `http://`. |
| **Strategy docs** (`docs/*.html`, `prototype-playbook/aicom-command-center-strategy.html`) | Open directly in a browser. |

---

## Design system

The real, in-repo design system lives at
`prototype-playbook/_ds/ai-com-design-system-.../` — near-monochrome surfaces, **Inter** +
**JetBrains Mono**, **black** as the action color, **violet/iris** (`#6E56CF`) as the AI/agent
signal, and **magenta** (`#DB1A6B`) as brand identity. Its `readme.md` is the brand bible.

The root `index.html` mirrors this look via a self-contained Tailwind-CDN config (the same
approach as `ralph-loop/index.html`), so it has no path dependency on `_ds/`.

> Note: the `.claude/skills/design-tokens` skill describes a Next.js / Tailwind-v4
> `src/app/globals.css` project that **does not exist in this repo** — it is inherited config
> from another codebase. Ignore it here; use `prototype-playbook/_ds/` instead.

---

## Adding a new prototype

1. **Create the prototype.** Put it in its own folder with an `index.html`:
   - a one-off → a new top-level folder (e.g. `my-prototype/index.html`), or a shared
     `prototypes/` folder if you'd like to keep the root tidy as the collection grows;
   - part of the Ralph series → under `ralph-loop/prototypes/NN-slug/index.html`.
2. **Match the design system.** Either link/copy
   `prototype-playbook/_ds/ai-com-design-system-.../styles.css`, or reuse the Tailwind-CDN
   `tailwind.config` block from the top of `index.html`.
3. **Register it on the landing page.** Append one object to the `PROTOTYPES` array (or
   `DOCUMENTS` for a doc) near the bottom of [`index.html`](index.html):
   ```js
   {
     title: 'My prototype',
     subtitle: 'Persona · scenario',
     href: 'my-prototype/index.html',
     tag: 'PROTOTYPE',
     blurb: 'One or two sentences on what it shows and the hypothesis it tests.',
     needsServer: false,            // set true if it uses fetch()/modules
     // runHint: 'How to run it.',  // optional, shown when needsServer is true
   }
   ```
   The card renders automatically — no markup changes needed.

---

## Hosting

This is a static site (no build step). The repo name references Cloudflare; if you later
publish to **Cloudflare Pages**, set the build output directory to the repo root (no build
command) and the landing page becomes the site root. No deploy config is committed yet.