The 4-Step Workflow for a Person and AI Agents to Build a Website
AI Agent-Based Website Development Process
- Design (prototype HTML artifacts)
- Method: Create a wide variety of fast prototypes in single-file HTML without a framework or build step to establish brand identity.
- Recommended technique/skill: nutlope/hallmark (Anti-slop design skill that prevents low-quality design)
- Build (Bextract a design system)
- Method: Instead of creating individual pages one by one, build a library of components such as hero sections, cards, diagrams, and CTAs. New pages are completed by combining these like LEGO.
- Recommended technique/skill: /design-sync (built-in feature in Claude Code)
- Automation (subagent-driven development)
- Method: After planning the full sitemap, page content, and UI in detail, distribute the work to subagents. Have the agents perform code reviews and fix errors on their own.
- Recommended technique/skill: obra/superpowers (subagent-based development)
- Maintenance (context + rules agents load)
- Method: Define the context and rules that agents will load so the site’s integrity and quality are continuously maintained.
