Field notes for the AI era
Working
with AI as a developer.
Field notes on shipping with AI — models, workflows, and tooling. What actually works in production, kept up to date as the space moves.
01 / Start here
What are you working on?
A useful place to begin.From idea to pull request
A better workflow.
Already mapped out.
Choose a task. Get the steps, prompts, and guardrails to take it into your own codebase.
Find and copy a workflow Free to use. No account or API key.Define the intent
spec.mdMake a small plan
plan.mdBuild with context
feature.tsxProve it works
feature.test.tsx03 / The reference
Less guessing.
More understanding.
19 chapters. Read in order, or follow your curiosity.
Browse guides by taskUnderstanding the Models
Model selection, personalities, prompting, and cost tradeoffs.
Shipping Workflows
From spec to PR, bug to fix — flows that work in production.
- 042 tools
Spec to PR
The full AI-assisted development loop, from spec file to merged pull request
- 051 tool
AI-Assisted Debugging: From Bug Report to Tested Fix
Reproduce a pagination bug, write a failing test, make a minimal patch, and prove the fix with a runnable example.
- 061 tool
Design Token to Storybook
From Figma tokens to production component to documented Storybook stories
- 072 tools
Jira Ticket to Cursor to PR
Turning a Jira ticket into a structured Cursor task with Figma design context
- 082 tools
AI-Powered Code Review
Using BugBot and Codex as PR reviewers - what they catch and what they miss
- 09
How to Write Spec Files for AI Coding: Template and Worked Example
Keep requirements beside your code, reuse a Markdown template, and verify changes against a concrete component spec.
- 101 tool
Building Blocks First
Why starting from atoms changes how AI writes code
Review & Quality
Diff review, AI code review, and guardrail patterns.
Tools & Infrastructure
Context strategy, agents, skills, Figma MCP, and emerging infrastructure.
- 131 tool
Cursor Max Mode
When the 1M token context window earns its cost
- 143 tools
Agents and Skills
How reusable skill files encode domain knowledge beyond a single session
- 151 tool
Figma MCP to React: A Worked Design-to-Code Workflow
Map a Figma component to React with explicit token mappings, a copyable handoff prompt, and browser verification.
- 161 tool
Code to Canvas
Pushing live rendered UI back into Figma as editable frames
- 172 tools
Design to Code and Back
The full design and code feedback loop with Figma MCP
- 18
What Is Happening
New models and the tools around them — European open weights, visual decisions, harness design, and agent orchestration
- 19
What Is an AI Harness?
Raw model power is a runaway horse. A harness turns it into directed work.