# Cometeer Prototype Starter A drop-in folder for spinning up a Cometeer-branded prototype page in Claude Code — no design-system internals to wrangle, no design tokens to copy, just paste a brief and ship. > Don't edit `/starter/` on the cometeer repo directly. **Copy it > locally and work from there** — that's the whole point. ## Before you start (one-time, ~10 minutes) ### 1. Figma access to the AI Kit Ask Toan to invite you to the **Cometeer Figma team** as a Viewer. Free seat on the Pro tier. Without it, the AI Kit file (`aWT68n9nxtNBJVX8rntJaI`) returns 403 to your Claude and the build flies blind on token names + visual references. Once invited, confirm access: - Open Figma desktop → search "Claude-Kit" → you should see the file with read access. ### 2. Figma Dev Mode MCP server This is what lets your local Claude Code "see" Figma files. - Open the **Figma desktop app** (latest version). - Top-left Figma menu → Preferences → **Enable Dev Mode MCP Server**. - Restart Claude Code. - Test: in Claude Code, ask *"call the Figma whoami tool"* — if it returns your email, you're set. (Background: `whoami` is exempt from Figma's per-minute rate limits, so it's the cleanest connectivity test. If `whoami` works but other Figma calls intermittently fail with "session expired," you're being rate-limited — wait 60s and retry.) ### 3. Vercel CLI ```bash npm i -g vercel vercel login ``` Sign in with whatever account you want the prototype to live under. The prototype URL will be `https://.vercel.app/`. ## Each time you build a page ### 1. Copy this folder ```bash # Whichever you prefer: git clone https://github.com/toandesigns/cometeer ~/cometeer-tmp cp -r ~/cometeer-tmp/starter ~/my-new-page rm -rf ~/cometeer-tmp cd ~/my-new-page ``` Or download the cometeer repo as a zip, unzip, copy out `/starter/`. ### 2. Open Claude Code in that folder ```bash cd ~/my-new-page claude ``` (Or open the folder in your Claude Code IDE integration of choice.) ### 3. Paste the prompt Replace the bracketed parts with your task. Everything else is reusable. > Build a Cometeer-branded landing page. > > **Content:** [DESCRIBE THE PAGE — e.g., "introduce a new roaster Bird > Rock Coffee Roasters, explain who they are, and show their 5 coffees > available on Cometeer."] > > Use the design system documented in this folder: > - `CLAUDE.md` — workflow + constraints (read first) > - `CLAUDE-KIT-TOKENS.md` — token naming + known Figma↔gist mismatches > - `tokens.json` — canonical token values > - "AI Kit (MCP-friendly)" page in Claude-Kit (`aWT68n9nxtNBJVX8rntJaI`) > — use `get_metadata` to enumerate tokens, `get_screenshot` for > visuals. Node `1:3797` is the desktop landing template, `1:3745` is > mobile. > > Constraints: > - Named tokens only (`primary.cream`, never `#F3F5E8`) > - `theme.*` for semantic intent (buttons, cards, alerts) > - `primary.*` / `secondary.*` for brand palette > - Agipo for display + headings, BauTF for body. Case-sensitive. > > Build the page in this directory as `index.html` (replace the existing > placeholder). Preview locally with `python3 -m http.server`. Deploy > with `vercel deploy --prod`. ### 4. Preview locally ```bash python3 -m http.server 8765 # Open http://localhost:8765/ in your browser ``` ### 5. Deploy ```bash vercel deploy --prod ``` First run prompts: - *"Set up and deploy?"* → **yes** - *"Which scope?"* → pick your account - *"Link to existing project?"* → **no** - *"What's your project's name?"* → e.g., `bird-rock-launch` - *"In which directory?"* → press enter (default `.`) Your page lands at `https://bird-rock-launch.vercel.app/` (or whatever project name you chose). Subsequent `vercel deploy --prod` runs go straight there. ## What's in this folder and why | File / dir | What | |-----------------------------|-----------------------------------------------| | `_fonts/cometeer.css` | `@font-face` declarations for Agipo + BauTF | | `_fonts/agipo/` | Agipo Bold Condensed `.otf` | | `_fonts/bautf/` | BauTF Regular / Medium `.otf` + Bold `.ttf` | | `assets/cometeer-wordmark.svg` | Cometeer wordmark for nav + footer | | `tokens.json` | Engineering-canonical token values | | `CLAUDE-KIT-TOKENS.md` | Token reference + 3 known Figma↔gist mismatches | | `CLAUDE.md` | Claude reads on startup (constraints, deploy commands) | | `index.html` | Handshake page — verifies fonts + tokens loaded correctly. Replace it with your build. | | `vercel.json` | Static-site config (no build step) | | `.gitignore` / `.vercelignore` | Excludes machine-local + deploy junk | **Why ship the fonts?** Agipo and BauTF aren't on Google Fonts. The brand falls back to system serif/sans if these files are missing — same copy, generic vibe. Worth the ~300 KB. **Why ship `tokens.json`?** So Claude can resolve `primary.cream` → `#F3F5E8` without hitting the network. Single source of truth, no guessing. ## Updating the starter If `tokens.json` or fonts change upstream, refresh them: ```bash # tokens curl -sSL https://gist.githubusercontent.com/seand7565/5c2b249e02cbf642a825e8414683539f/raw/ > tokens.json git diff tokens.json # eyeball the change # fonts: copy from cometeer repo cp -r ~/cometeer/_fonts/* _fonts/ cp ~/cometeer/CLAUDE-KIT-TOKENS.md ./CLAUDE-KIT-TOKENS.md ``` ## Troubleshooting - **"Enable Dev Mode MCP Server"** error from Claude when it tries to read Figma → setup step 2 wasn't done. Restart Figma desktop + Claude Code after enabling. - **403 / "not found"** from `get_metadata` on the Claude-Kit file → setup step 1 wasn't done. Ping Toan for the Figma team invite. - **Fonts look like Times New Roman / system sans** → the `_fonts/` directory got lost in the copy. Re-run the copy step. Verify by loading `index.html` (the handshake page) and checking the wordmark + sample type render correctly. - **Vercel deploy fails with "COMMIT_AUTHOR_REQUIRED"** → your git commits don't match a verified email on your Vercel account. Run `git config user.email ` and try again. ## Questions Ping Toan on Slack. This starter is alive — if something's missing, unclear, or out of date, file feedback so it can be fixed for the next teammate.