Help me, Blake

Research & prompt engineering with Grok

Start in Grok to research the topic, competitor landscape, and target audience. Go back and forth — challenge its assumptions, refine the scope, nail down exactly what the project needs to do. Once the vision is sharp, have Grok write a detailed Claude Code prompt covering structure, content, styling, and functionality.

Grok's job is to think. Claude's job is to build. Splitting those roles is the unlock. See the real prompt I used to kick off this very site below.

Open VS Code + Claude Code

Visual Studio Code with the Claude Code extension — not Copilot, not a chatbot sidebar. Claude Code operates as a full coding agent inside your editor: it reads your files, writes code, runs commands, and iterates autonomously. This is where the actual building happens.

Set up your CLAUDE.md file

Before pasting the Grok prompt, I populate a CLAUDE.md file in the project root. This is Claude Code's custom instruction file — it reads it automatically on every interaction. Mine contains project structure, naming conventions, the design system (colors, fonts, spacing), tech stack preferences, and rules like "no emojis" or "match Nisius.com styling." Think of it as a creative brief that never expires.

Pro tip: steal this idea. A good CLAUDE.md is the difference between "rewrite everything" and "ship it."

# Example CLAUDE.md structure:
- Project: Single-page app, HTML + Tailwind CDN
- Design: Light-first, dark as a peer theme. All color
  via CSS custom properties in tokens.css — no raw hex.
- Brand: One green, rationed. Solid fill or 2px rule only.
- Fonts: Inter for everything. Mono for code blocks only.
- Style: Bordered cards, banded sections, no glows/gradients
- Rules: No emojis, mobile-first, match nisius.com

Paste the Grok prompt & iterate

Drop the Grok-generated prompt into Claude Code and let it build the first pass. Then go back and forth: refine the layout, adjust logic, tweak interactions, fix edge cases. Claude reads the CLAUDE.md context on every turn, so it stays on-brand without you repeating yourself. This is where 80% of the magic happens — rapid iteration with an agent that remembers everything.

Generate visuals with Nano Banana 2

Once the project is built, I have Claude write a Nano Banana 2 prompt that matches the project's exact style and theme — colors, mood, typography cues, everything. Then I paste that prompt into Gemini (Pro/Thinking mode) to generate on-brand hero images, icons, or infographics. AI writing prompts for other AI. We're deep in the recursion now.

The output is consistently better than anything I'd describe from scratch. Claude just knows what Claude built.

Prompt

Output

Push to GitHub

Commit and push to a new GitHub repo. Claude Code can handle the git commands for you if you ask — init, add, commit, push, the works.

git init
git add .
git commit -m "Initial build: AI-powered project"
git remote add origin https://github.com/you/your-repo.git
git push -u origin main

Deploy on Railway

Railway.app — connect your GitHub repo, and it auto-builds and deploys on every push. Zero config, zero server management. Your project is live before your coffee gets cold.

1. Create a Railway account and start a New Project
2. Select Deploy from GitHub Repo and authorize access
3. Pick your repo — Railway detects the stack and deploys automatically
4. Once live, go to Settings → Networking → Custom Domain and add your domain

Every future git push triggers a new deploy. That's it — no CI/CD to configure.

Full walkthrough: Railway Deployment Docs

Point DNS with Cloudflare

Cloudflare — add your domain, point a CNAME to Railway's generated URL. You get a global CDN, SSL, and DDoS protection out of the box.

Because who wants slow?

# In Cloudflare DNS settings:
Type: CNAME
Name: @  (or www)
Target: your-app.up.railway.app
Proxy: DNS only (grey cloud)