The 4-Step Workflow for a Person and AI Agents to Build a Website

XMarvin

AI summary focused on the core points of the original article.

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.

XPLORED View

The core of this workflow is not running many agents, but turning design decisions into reusable prototypes, components, and context rules that can be passed along.

Good for reading when

When one person wants to design and implement a brand website with multiple AI agents
When you want to reduce issues where design consistency and code quality become unstable as pages increase

Key takeaways

Parallel work by subagents is effective only after the sitemap, content, and UI approval criteria are defined in detail.
The context and rules that agents read repeatedly are closer to core product assets that maintain site quality than to documentation.

Read original

Get the week's signal by email, every Saturday.

A short read on the tools and articles added that week.