category: reference

tags: [design, frontend, launch]

last_updated: 2026-03-14

Spec for the public landing page at `https://wikibot.io/`. This is the first thing a new visitor sees. It needs to explain what WikiBot is, make the case for why you'd want it, and get people to sign up. It does NOT need to sell hard — the product is free.

See also: [[Tasks/Phase_4]] (P4-6), [[Design/Implementation_Phases]], [[Design/Platform_Overview]]

**Voice and tone.** This is an indie project, not an enterprise SaaS. Write like a README, not a pitch deck. First person is fine. Dry humor is fine. No marketing jargon, no "unlock the power of," no "seamlessly integrate." The audience is developers and researchers who use AI agents — they'll smell bullshit instantly.

- https://macdown.app/ — clean single-page layout, personal voice, collapsible FAQ, simple logo + typography, no framework

- The README style of https://github.com/schuyler/garganorn and https://github.com/schuyler/autobus — direct, technical, shows-don't-tells

- No pricing table (it's free, just say it)

- No testimonials or "trusted by" logos

- No animated gradients, parallax, or decorative illustrations

- No three-column "value prop" grid

- No "Get started in 3 easy steps" with big numbered circles

- No React, no build step, no JavaScript framework

- Single HTML file with inline or linked CSS. No JS framework. Minimal JS only if needed (e.g. FAQ accordion).

- Must be a static file servable from S3 + CloudFront (already in the architecture per [[Design/Platform_Overview]])

- Responsive — should look good on desktop and mobile

- Fast — aim for <50KB total page weight before images

- Semantic HTML, accessible (proper heading hierarchy, alt text, contrast ratios)

- No external font CDNs; use system font stack or self-host if needed

Monospace for code snippets:

We don't have a logo yet. For launch, we need a simple SVG mark that:

- Works at small sizes (32x32 for favicon, 64x64 for OAuth provider screens)

- Reads on light and dark backgrounds

- Is not embarrassing

A clean lettermark ("W" or "wb") is the safe choice. Something slightly playful is fine but it shouldn't look like clip art. The logo will also be used on the OAuth consent screens for Google, GitHub, Microsoft, and Apple sign-in.

Deliver as:

- `logo.svg` (scalable, used on the page)

- `favicon.ico` or `favicon.png` (32x32)

- `logo-192.png` and `logo-512.png` (for OAuth screens and PWA manifest if ever needed)

Minimal. Logo + "wikibot.io" wordmark on the left. "Docs" and "Sign In" links on the right. Sticky or not — doesn't matter much, the page is short.

**Tagline:** "Memory for agents in a wiki for humans."

**Subtext (one or two sentences):** Something like: "WikiBot is a lightweight, git-backed wiki with native MCP support. Your AI agents and your browser read and write the same pages."

**CTA button:** "Get started — it's free" → links to signup/login flow

**Screenshot:** Placeholder for now. Once the web UI exists, replace with a real screenshot of a wiki with some content in it. For initial build, use a styled placeholder box with alt text.

Two to three paragraphs, conversational. This is the "About" section. Key points to hit:

- WikiBot gives AI agents persistent, shared memory in a format that's useful to humans too — a wiki.

- Every wiki is a git repo full of markdown files, with a web UI for browsing and editing, and an MCP endpoint any compatible agent can connect to.

- Origin story: "I built this because I needed a shared scratchpad for myself and my agents. I wanted Claude.ai and Claude Code to have access to the same working notes — and I wanted to read and edit those notes in a browser like a normal person."

- The "same scratchpad" moment: "Right now, the dev wiki for this project is being used simultaneously from Claude.ai and Claude Code via MCP. Same notes, same edits, no sync step."

This section should NOT be a bullet list of features. It should read like prose.

Short walkthrough. Four steps, but presented as a brief narrative, not a numbered infographic:

1. Sign up with Google, GitHub, Microsoft, or Apple.

2. Create a wiki.

3. Copy the MCP URL into your agent's config.

4. Start writing — from the web UI, from your agent, or both.

Include actual MCP config snippets for Claude.ai and Claude Code. These should be in fenced code blocks, copy-pasteable. Example shape (exact config TBD — use placeholders):

**Claude.ai:** Explain that users add the MCP URL in Claude.ai's MCP server settings.

**Claude Code:**

Note: The exact config format and auth mechanism (bearer token header, etc.) should match whatever the MCP auth design specifies in [[Design/Auth]]. Use realistic-looking placeholders.

Collapsible accordion (minimal JS, or use `<details>`/`<summary>` HTML elements for zero-JS). Questions:

Model Context Protocol. It's an open standard that lets AI agents use external tools. WikiBot exposes your wiki as an MCP server, so any agent that speaks MCP can read and write your notes. [Link to modelcontextprotocol.io or similar]

The free tier gives you one wiki with full read/write/MCP access. There'll be a paid tier later for people who want multiple wikis, semantic search, and external git sync — probably under $10/month.

Anything that supports MCP's Streamable HTTP transport. Currently that's Claude.ai, Claude Code, and a growing list of MCP-compatible clients. The protocol is open, so if your tool speaks MCP, it can talk to your wiki.

Yes. Every wiki is a bare git repo. You can clone it and have a local copy of everything.

Your wiki is private by default. Only you and people you explicitly invite can access it.

Semantic search (find notes by meaning, not just keywords), multiple wikis per account, and bidirectional git sync with GitHub/GitLab. These will be part of the paid tier.

- Sign-in provider icons (Google, GitHub, Microsoft, Apple) — small, muted, just to show the options

- Links: Docs, GitHub (if applicable), Contact/Feedback

- "Made in Portland by Schuyler Erle" or similar

- Copyright line

- Light background, dark text. No dark mode required for launch (nice to have later).

- Minimal color palette. One accent color for the CTA button and links. Don't overthink it.

- Generous whitespace. Let the text breathe.

- Max content width ~700-800px, centered. Like a README or a blog post.

- Code blocks should have a subtle background and monospace font.

The landing page is a static file (or small set of static files) that gets deployed to S3 and served via CloudFront at `https://wikibot.io/`. Deliverables:

1. `index.html` — the landing page

2. `style.css` — if not inlined (inlining is fine too)

3. `logo.svg` + raster variants (see Logo section above)

4. `favicon.ico` or `favicon.png`

The page should be self-contained. No external CDN dependencies (no Google Fonts, no Font Awesome, no Bootstrap). If icons are needed for the SSO providers, inline SVGs are preferred.

- Signup/login flow (that's a separate SPA route, not part of this page)

- Docs / Getting Started guide (separate deliverable in P4-6)

- Analytics (can add later if desired)

- Blog

- Dark mode

- i18n