built-with-ai.sh
█

$ claude --show-workflow

How I Build

step 1

Idea

Define the feature, sketch the architecture, identify constraints.

step 2

AI Prompt

Write a precise prompt with context, constraints, and expected output format.

step 3

Generated Code

The model produces typed components, utility functions, and tests in one pass.

step 4

Human Review

Read every line. Verify types, accessibility, edge cases. Refine the prompt if needed.

step 5

Ship

Commit, build, deploy to Vercel. The whole cycle takes minutes, not days.

$ claude --examples

Prompt → Output

Real prompts from building this site and the projects it showcases. The left pane is what I wrote; the right is what the AI generated.

prompt.mdinput
Create a ProjectCard component styled like a JSON response:
- Terminal window frame with macOS dots + slug.json filename
- Body shows project data as syntax-highlighted JSON
- Keys in indigo, strings in mint, numbers in amber
- StatusDot in the title bar
- Hover: glow border in accent-primary
- Click navigates to /projects/[slug]
- Framer Motion staggered entrance
output.tsxoutput
"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import StatusDot from "./StatusDot";

interface ProjectCardProps {
  name: string;
  slug: string;
  tags: string[];
  status: "live" | "in-progress" | "demo" | "complete";
  stats: Record<string, string>;
  index?: number;
}

export default function ProjectCard({
  name, slug, tags, status, stats, index = 0,
}: ProjectCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 12 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, delay: index * 0.1 }}
    >
      <Link href={`/projects/${slug}`} className="block group">
        <div className="rounded-lg border border-border
          hover:border-accent-primary/40
          hover:shadow-[0_0_20px_rgba(0,212,170,0.06)]">
          {/* Title bar */}
          <div className="flex items-center bg-bg-tertiary
            border-b border-border px-4 py-2.5">
            <div className="flex gap-1.5">
              <span className="w-2.5 h-2.5 rounded-full
                bg-[#FF5F56]" />
              <span className="w-2.5 h-2.5 rounded-full
                bg-[#FFBD2E]" />
              <span className="w-2.5 h-2.5 rounded-full
                bg-[#27C93F]" />
            </div>
            <span className="flex-1 text-center font-mono
              text-xs text-text-secondary">
              {slug}.json
            </span>
            <StatusDot status={status} />
          </div>

          {/* JSON body */}
          <div className="p-5 font-mono text-sm">
            <span className="text-text-secondary">{"{"}</span>
            <div className="pl-4">
              <span className="text-accent-secondary">
                "name"
              </span>
              <span className="text-text-secondary">: </span>
              <span className="text-accent-primary">
                "{name}"
              </span>
            </div>
            {/* ... more fields */}
            <span className="text-text-secondary">{"}"}</span>
          </div>
        </div>
      </Link>
    </motion.div>
  );
}

$ claude --why

Why This Matters

AI-native companies don't just want people who use AI tools — they want people who understand how to collaborate with them effectively. Showing the prompt alongside the output is proof of that skill.

Every component on this site went through the same loop: define the intent precisely, give the model the right context, review what comes back, and iterate. That's not “letting AI write your code” — it's a multiplier on engineering velocity that compounds with domain knowledge.

The companies building the next generation of AI-native infrastructure and developer tools need people who operate this way natively. This page exists so you don't have to take my word for it.

If you're reading this and you build AI-first products, let's talk.