How to code with AI agents  🔗 **Source:** [How to code with AI agents](https://humanmade.com/engineering/how-to-code-with-ai-agents/) > [!note]+ Document Notes > tags: [ai-agents, software-development, workflow-automation, ai-coding, development-productivity] > author: Ivan Kristianto > source: Human Made > reference: https://humanmade.com/engineering/how-to-code-with-ai-agents/ > date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} > > # 🏷️ Title: How to code with AI agents > <!-- deep-read:sections start --> ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ## 📝 Summary - **What happened**: Human Made Senior Engineer Ivan Kristianto shares a comprehensive workflow for daily AI-augmented development work, covering nine practical patterns from spec-first development to parallel agent execution. - **Why it matters**: This represents one of the first detailed, production-tested workflows for AI coding at enterprise scale, moving beyond tool comparisons to actual operational patterns that work in practice. - **Key stakeholders**: Senior developers, engineering teams, DevRel professionals, and organizations adopting AI-assisted development workflows. - **Risks and tradeoffs**: Non-deterministic outputs require new mental models; throwaway code mindset conflicts with traditional development investment patterns; quality gates become critical dependencies. - **Bottom line**: AI agents compress time between idea and implementation but only with clear specs, disposable code mindset, and built-in quality control systems. ## 📖 Main Content The article presents a battle-tested workflow for coding with AI agents based on three months of daily production use. The core insight is that AI coding success depends more on workflow patterns than tool selection. ### Nine-Step Development Process The workflow follows a structured sequence: 1. **Worktree Creation**: Isolated Git worktrees for each feature branch 2. **AI-Driven Brainstorming**: Agent interviews developer to understand requirements 3. **Spec Writing and Review**: Detailed specification with second-agent validation 4. **Implementation Planning**: Breaking work into 2-5 minute tasks with exact file paths 5. **Cross-Review**: Fresh agent validates spec-plan alignment 6. **Automated Execution**: Subagents execute plan sequentially with commits 7. **User-Focused Review**: Testing as end user, not engineer 8. **Three-Agent Code Review**: Parallel review for maintainability, performance, security 9. **Browser-Based Testing**: AI agent executes user test scenarios ### Key Philosophical Shifts **Non-Deterministic Acceptance**: Rather than fighting variability in AI outputs, the workflow embraces it by staying tool-agnostic and using multiple models for different tasks. **Code as Disposable**: Generated code gets thrown away and regenerated when it doesn't meet standards, treating implementation as cheap and decision-making as expensive. **Spec-First Discipline**: Extensive upfront specification prevents downstream rewrites, with multiple agent reviews before any coding begins. ### Technical Infrastructure **Quality Gates**: Six automated checks (ESLint, Stylelint, Prettier, design system compliance, TypeScript, tests) that force agents to self-correct before human review. **Skills System**: Reusable prompts and workflows that eliminate re-explaining context, following a "build once, reuse" pattern for common tasks. **Parallel Execution**: Independent tasks run simultaneously across multiple agents rather than sequentially, significantly reducing total time. ### Beyond Coding Applications The workflow extends to research, brainstorming, and UX testing through "Vibe User" patterns where agents explore applications as naive users, surfacing usability issues invisible to developers. ## 🗒️ Notes - **Tool Agnostic Approach**: Uses Claude Code, Gemini CLI, Copilot CLI, Codex CLI, OpenCode, and Anti Gravity interchangeably based on task fit - **Obra/Superpowers Framework**: Seven-stage development process providing structure while maintaining flexibility - **Quality Gate Examples**: ESLint catches JS/TS errors, Stylelint enforces CSS consistency, custom design system checks prevent pattern violations - **Skills Library**: 20+ reusable workflows from worktree setup to SEO auditing, searchable through skills.sh tool - **Mobile Integration**: Fire-and-forget patterns using phone apps for idea capture and exploration - **NotebookLM Usage**: Synthesizing messy client materials (RFPs, transcripts, slide decks) with source citations - **Emotional Discipline**: Removing frustration from prompts, treating agent interactions as precision tools rather than conversations - **Worktree Isolation**: One branch = one worktree = one environment, enabling parallel development streams - **Vibe User Methodology**: Agents with browser access test applications as uninformed users to surface UX friction ## 📚 References - [obra/superpowers](https://github.com/obra/superpowers) - Seven-stage development framework - [skills.sh](https://skills.sh) - Skill library search tool - [supacode.sh](https://supacode.sh) - Multi-worktree management - Vibe Coding by Gene Kim & Steve Yegge - Beyond Vibe Coding by Addy Osmani - Chrome DevTools MCP integration - NotebookLM for document synthesis ## 🗣️ Paraphrase AI-assisted development succeeds through workflow discipline rather than tool selection. The key is embracing AI's non-deterministic nature while implementing strict quality controls and throwaway code practices. The most effective pattern involves extensive upfront specification with multiple AI reviews before any implementation begins. Code generation becomes a disposable commodity, with agents self-correcting through automated quality gates before human review. Beyond coding, AI agents excel at research, UX testing, and synthesis work when given browser access and clear user personas. The workflow extends from mobile idea capture through production deployment, with parallel execution significantly reducing development cycles. ## 📰 Newsletter **AI Development Workflows Hit Production Scale** Human Made's Ivan Kristianto just published the most detailed AI coding workflow we've seen yet. This isn't another tool comparison—it's three months of battle-tested patterns for spec-first development, parallel agent execution, and quality-gated automation. Key takeaway for WordPress developers: the "throwaway code" mindset completely flips traditional development investment patterns. When implementation is cheap and specs are expensive, you optimize differently. The workflow uses Git worktrees for isolation, multiple AI agents for parallel code review, and browser automation for user testing. Quality gates force agents to self-correct through ESLint, TypeScript, and custom design system checks. Worth exploring: their "Vibe User" pattern where AI agents test your app as naive users, surfacing UX friction you'd never notice as the developer. [Read the full workflow guide](https://humanmade.com/engineering/how-to-code-with-ai-agents/) ## ✅ Action Items #### DevRel - **Developer education**: Create workshops on AI-assisted development workflows, quality gate implementation, and spec-first methodologies - **Documentation**: Develop best practices guides for AI coding workflows, skill creation patterns, and tool integration strategies - **Developer experience**: Build templates for development workflows, quality gate configurations, and skill libraries - **Community management**: Facilitate discussions on AI coding ethics, workflow sharing, and collaborative skill development #### WordPress - **Core**: Evaluate AI-assisted contribution workflows, develop coding standards for AI-generated patches - **Community**: Create meetup content on AI development workflows, establish working groups for AI coding best practices - **Documentation**: Update DevHub with AI-assisted development guidance, workflow templates, and integration examples #### The WPCC - **Programs**: Fund skill library development, sponsor AI coding workflow standardization efforts - **Projects**: Support open source AI development tools, quality gate frameworks for WordPress development ## 🧪 Hypotheses 1. **Spec-first development with AI review reduces downstream bugs by 60% compared to direct coding approaches** 2. **Parallel agent execution for independent tasks reduces development cycle time by 40-70%** 3. **Quality gates enable AI agents to self-correct 80% of common coding errors before human review** 4. **Throwaway code mindset increases developer velocity when combined with strong specifications** 5. **Vibe User testing with AI agents identifies 3x more usability issues than developer-led testing** 6. **Tool-agnostic workflows reduce single-point-of-failure risks from AI service outages or model degradation** ### 📊 Methodology **A/B Testing Framework**: Compare traditional development workflows with AI-augmented workflows across matched development teams, measuring cycle time, bug rates, and code quality metrics. **Longitudinal Study**: Track developer productivity, code quality, and cognitive load over 6-month adoption periods with standardized project complexity controls. **User Testing Analysis**: Compare Vibe User AI testing results with traditional user testing sessions, measuring issue detection rates and severity classification. **Quality Gate Effectiveness**: Instrument AI development workflows to measure error detection rates, self-correction success, and human review time reduction. ### ❓ Questions - How do quality gate failures impact AI agent learning and subsequent code generation quality? - What specification patterns most effectively prevent AI implementation drift? - How does parallel agent execution scale with team size and project complexity? - What security implications emerge from AI agents having browser access for testing? - How do throwaway code practices affect knowledge transfer and team onboarding? ### 🔮 Future Research - **Workflow Optimization**: Investigate optimal task granularity for AI agent execution, specification detail levels, and quality gate thresholds - **Team Collaboration**: Study multi-developer AI-assisted workflows, skill sharing patterns, and collaborative specification development - **Security Analysis**: Examine attack vectors in AI-assisted development, code review blind spots, and automated security validation - **Cognitive Load**: Research developer mental model changes, context switching costs, and learning curve patterns ### 💡 Implications **Practice**: Traditional code review processes need restructuring around AI self-correction capabilities and parallel agent workflows. Development velocity metrics require recalibration for disposable code practices. **Policy**: Organizations need new guidelines for AI-generated code ownership, quality standards, and security review processes. Traditional time-based project estimation becomes obsolete. **Education**: Computer science curricula must incorporate specification-first development, AI collaboration patterns, and non-deterministic system workflows. Traditional coding bootcamps require fundamental restructuring. **Funding**: Development project budgets shift from implementation-heavy to specification-heavy allocation. Tool licensing and AI service costs become primary budget line items. ### 🧠 Learning Styles Assessment **Reading level estimate**: Flesch-Kincaid Grade Level: 12.8 (college level) #### 👀 Visual learners - **Present**: Workflow diagrams, nine-step process visualization, quality gate flowcharts - **Improve**: Add architecture diagrams for worktree setup, skill system visualization, parallel agent execution timelines #### 🔊 Aural learners - **Present**: None identified - **Improve**: Audio walkthrough of development workflow, podcast discussion with Ivan Kristianto, narrated skill creation examples #### 🗣️ Verbal learners - **Present**: Detailed explanations, defined terminology (worktrees, skills, quality gates), analogies for disposable code - **Improve**: Glossary section, comparison tables between traditional vs AI workflows, plain-language workflow summaries #### 🧩 Kinesthetic learners - **Present**: Step-by-step implementation guide, executable examples, hands-on skill creation - **Improve**: Interactive workflow builder, downloadable skill templates, practice exercises with sample projects #### 🧠 Logical learners - **Present**: Nine-step sequential process, cause-effect relationships in quality gates, decision trees for tool selection - **Improve**: Workflow optimization matrices, performance metrics dashboards, ROI calculations for AI adoption #### 🧑‍🤝‍🧑 Social learners - **Present**: Team collaboration mentions, skill sharing concepts - **Improve**: Discussion prompts for development teams, collaborative skill development guides, community review processes #### 🧘‍♀️ Solitary learners - **Present**: Individual workflow optimization, personal skill development, self-directed tool evaluation - **Improve**: Self-assessment checklists, private workflow customization guides, reflection prompts for adoption challenges #### 🌿 Naturalistic learners - **Present**: Ecosystem thinking about AI tool landscape, organic workflow evolution - **Improve**: Development environment setup analogies, tool ecosystem health metrics, sustainable workflow practices ### 📊 Accessibility Assessment #### Screen reader semantics - **Present**: Clear heading hierarchy, descriptive link text, structured lists - **Improve**: Add alt text for process diagrams, ARIA labels for workflow steps, heading landmarks for major sections #### Keyboard navigation - **Present**: Standard HTML navigation, logical tab order - **Improve**: Skip links for long workflow sections, keyboard shortcuts for skill library navigation #### Contrast and readability - **Present**: Standard text contrast on white background - **Improve**: Verify code snippet contrast ratios, ensure workflow diagram text meets 4.5:1 minimum #### Text resizing and reflow - **Present**: Responsive design supports 200% zoom - **Improve**: Test complex workflow diagrams at high zoom levels, ensure code blocks remain readable #### Media and captions - **Present**: Text-based content, no media requiring captions - **Improve**: Add captions to future video walkthroughs, provide transcripts for audio content #### Forms and interactions - **Present**: No interactive forms in article - **Improve**: Ensure skill search interfaces are accessible, provide clear error messages for tool integrations ### 🌍 DEIB Assessment #### Cultural breadth - **Present**: English-language focus, US-centric development practices - **Improve**: Include examples from global development teams, consider time zone impacts for parallel workflows, acknowledge varying AI service availability #### Inclusive language - **Present**: Technical jargon defined in context, neutral professional tone - **Improve**: Provide plain-language workflow summaries, expand technical terminology definitions, avoid assumptions about development experience #### Neurodiversity support - **Present**: Structured step-by-step processes, consistent formatting - **Improve**: Increase heading frequency, provide visual workflow summaries, offer multiple explanation formats #### Representation - **Present**: Single author perspective, enterprise development focus - **Improve**: Include diverse developer voices, acknowledge varying access to AI tools, represent different company sizes and contexts #### Psychological safety - **Present**: Respectful technical discussion, acknowledges learning curve - **Improve**: Address concerns about AI replacing developers, provide support resources for workflow adoption challenges ### ✅ Logical Validity #### Strong reasoning - **Deductive strength**: Clear logical progression from AI non-determinism to tool-agnostic approaches; specification quality directly impacts implementation success - **Inductive evidence**: Three months of production experience provides substantial empirical foundation for workflow recommendations - **Causal reasoning**: Quality gates create feedback loops that improve AI output through self-correction mechanisms - **Analogical reasoning**: Disposable code concept effectively compared to traditional development investment patterns #### Fallacies - **Hasty generalization**: Single developer's experience generalized to all AI development contexts without acknowledging team size, project complexity, or domain variations - **Appeal to novelty**: Assumes newer AI models and tools are inherently better without considering stability trade-offs - **False dilemma**: Presents throwaway vs sacred code as binary choice rather than contextual decision #### Tone of voice - **Authoritative but accessible**: "I use AI agents every day: not just to write code, but for research, brainstorming, planning, and user testing" - **Pragmatic**: "This sounds wasteful. In practice it saves more time than it costs" - **Reflective**: "What I Had to Unlearn" section demonstrates intellectual honesty and growth mindset ### 🛡️ DARVO Analysis No DARVO patterns detected. The article maintains a constructive technical focus without defensive rhetoric, victim-blaming, or role reversal. The author acknowledges limitations and learning experiences without deflection. ## 🎯 Conclusion This article represents a significant contribution to AI-assisted development practices by providing concrete, battle-tested workflows rather than theoretical frameworks. The emphasis on specification quality, quality gates, and disposable code practices offers a practical path for teams adopting AI coding tools. The most valuable insight is treating AI non-determinism as a feature rather than a bug, leading to tool-agnostic approaches that reduce single points of failure. For WordPress developers and DevRel professionals, the workflow patterns provide immediately applicable improvements to development velocity and code quality. Next steps for readers include experimenting with spec-first development, implementing quality gates, and exploring the skills system for workflow automation. The throwaway code mindset requires the biggest philosophical shift but offers the highest potential returns. ## 🔄 Refactor Appendix — How to code with AI agents > Density: 2–5 Literature atoms (H3), 0–3 Permanent candidates (H4). > Defaults: 3 Literature, 1 Permanent. Resonance filter: if you can't > articulate in one line why a claim matters, drop it. ### 📚 Literature Atoms (H3) #### Non-deterministic AI outputs require tool-agnostic workflows > [!quote] ID:rw_001 > The first thing to accept about AI is that it is non-deterministic. Run the same prompt twice and you get two different results. This is not a bug to work around. It is the nature of the medium. **Context & use**: - Opening philosophical framework for AI development - Drives tool selection strategy and workflow resilience patterns **Tags**: #ai-development #workflow-design #xref **Highlight**: [view highlight](https://humanmade.com/engineering/how-to-code-with-ai-agents/#non-deterministic-reality) <!-- atomicity: 1 idea ✓ --> #### Specifications prevent expensive downstream iterations in AI coding > [!quote] ID:rw_002 > Before writing any code, I spend time on the spec. This single practice separates productive AI usage from frustrating AI usage. **Context & use**: - Core workflow principle that determines success/failure - Contrasts with traditional rapid prototyping approaches **Tags**: #specification-first #ai-development #xref **Highlight**: [view highlight](https://humanmade.com/engineering/how-to-code-with-ai-agents/#spec-first-then-build) <!-- atomicity: 1 idea ✓ --> #### Quality gates enable AI self-correction at commit time > [!quote] ID:rw_003 > The single biggest improvement to agent output quality is not a better prompt or a smarter model. It is a strict set of quality gates that run before every commit. **Context & use**: - Technical implementation strategy for AI workflow reliability - Shifts quality control from human review to automated feedback loops **Tags**: #quality-assurance #automated-testing #xref **Highlight**: [view highlight](https://humanmade.com/engineering/how-to-code-with-ai-agents/#quality-gates-built-in-self-correction) <!-- atomicity: 1 idea ✓ --> ### 🧠 Permanent Candidates (H4) #### AI development success depends on workflow patterns, not tool selection **Claim**: The effectiveness of AI-assisted development is determined by systematic workflow practices rather than specific AI tools or models. **Evidence pointer**: [[#Non-deterministic AI outputs require tool-agnostic workflows]] **Scope & conditions**: Applies when teams have access to multiple AI tools; breaks when locked into single-vendor solutions or highly specialized domains requiring specific model capabilities. **Links**: - [[Development workflow optimization]] — because extends beyond AI to general productivity patterns - [[Tool vendor lock-in risks]] — because contrasts with single-tool dependency strategies - [[Software development methodologies]] — because applies-in agile and iterative development contexts <!-- atomicity: 1 idea ✓ --> ### ✏️ Fleeting Queue - Investigate skills.sh for workflow automation discovery — explore reusable prompt libraries #fleeting #tools - Research NotebookLM citation accuracy for client work — validate source tracking claims #fleeting #research - Experiment with Vibe User pattern for WordPress admin UX testing #fleeting #wordpress ### → Things 3 - [ ] Set up Git worktree workflow for parallel development streams — test with current project #things - [ ] Build quality gate configuration for WordPress plugin development — ESLint, PHPCS, unit tests #things <!-- deep-read:sections end --> ## Highlights - The first thing to accept about AI is that it is non-deterministic. Run the same prompt twice and you get two different results. This is not a bug to work around. It is the nature of the medium. - Note: 📚 Non-deterministic AI outputs require tool-agnostic workflows · - Opening philosophical framework for AI development - Drives tool selection strategy and workflow resilience patterns · #atom/literature/h1 - Before writing any code, I spend time on the spec. This single practice separates productive AI usage from frustrating AI usage. - Note: 📚 Specifications prevent expensive downstream iterations in AI coding · - Core workflow principle that determines success/failure - Contrasts with traditional rapid prototyping approaches · #atom/literature/h2 - The single biggest improvement to agent output quality is not a better prompt or a smarter model. It is a strict set of quality gates that run before every commit. - Note: 📚 Quality gates enable AI self-correction at commit time · - Technical implementation strategy for AI workflow reliability - Shifts quality control from human review to automated feedback loops · #atom/literature/h3 - AI development success depends on workflow patterns, not tool selection - Note: [[Development workflow optimization]] — because extends beyond AI to general productivity patterns · - [[Development workflow optimization]] — because extends beyond AI to general productivity patterns · #atom/zettel/z1 - Investigate skills.sh for workflow automation discovery — explore reusable prompt libraries #fleeting #tools - Note: ✏️ Fleeting capture #atom/fleeting/f1 - Research NotebookLM citation accuracy for client work — validate source tracking claims #fleeting #research - Note: ✏️ Fleeting capture #atom/fleeting/f2 - Experiment with Vibe User pattern for WordPress admin UX testing #fleeting #wordpress - Note: ✏️ Fleeting capture #atom/fleeting/f3 - Single developer's experience generalized to all AI development contexts without acknowledging team size, project complexity, or domain variations - Note: 🔍 Fallacy: Hasty Generalization #fallacy/hasty-generalization - Presents throwaway vs sacred code as binary choice rather than contextual decision - Note: 🔍 Fallacy: False Dilemma #fallacy/false-dilemma