Case Study · 2026AgentSync — AI Agent Web Design Team
A real-time SaaS platform that orchestrates a 9-agent team via Slack and a live Next.js dashboard to simulate the software development lifecycle, utilizing Moonshot's Kimi K2.6 and Google Gemini APIs.
Web App
SaaS
AI Agents
Full-Stack
UI/UX
Product
AgentSync - AI Agent Web Design Team
Framework
Next.js, Python, Docker, Google Embeddings 2
Tech
Kimi K2.6, GPT Image 2, Seedance 2.0
My Role
Product Designer & Agent Orchestrator
The AgentSync platform orchestrating the AI team.
Increasing productivity for web designers with an autonomous AI team
AgentSync is a real-time SaaS platform that orchestrates a 9-agent team (PM, Designer, Dev, Supervisor, Bug, Scout, Motion Designer, Graphic Designer, and Accountant) via Slack and a live Next.js dashboard. It was created to increase productivity for solo web designers and developers by simulating the entire project management and software development lifecycle.
Using a deterministic multi-agent state machine configured with LangGraph, AgentSync features an automated, self-healing Chrome QA loop via Playwright. It produces complete React/Vite/Tailwind codebases and AI-generated visual assets written directly to disk.
To ensure high-quality outputs, it stores multimodal UI/UX design patterns and project memory into a Qdrant vector database using a custom Scout Design DB system, turning past projects into intelligent references for future designs.
A comprehensive toolkit for AI-driven development
Agent Management & Slack Connect
An agent management application connected directly to Slack for seamless orchestration.
9-Agent Architecture
A complete autonomous team featuring 3 core agents (PM, Designer, and Dev), 3 supporting agents (Supervisor, Bug, Scout), and 3 specialist agents (Motion Designer, Graphic Designer, Accountant) built with LangGraph workflows.
Multimodal & Web Intelligence
Kimi vision enables image reading for references, combined with web search and scraping via Tavily, FireCrawl, and Chrome Dev Tools.
RAG & Visual Memory
Utilizes memory and RAG with Google Embeddings 2 to store, retrieve, and enhance future web designs using the Scout DB system.
AI-Generated Assets
Generates custom visual assets for projects using GPT Image 2.
The 9-agent team with their specializations and skills.
Agent UX/UI Patterns
Chat
Chat Interface
Shows User and Agent responses while interfacing with Slack.
Status
Status Log
Showing agent logs and tasks at different operational states.
Execution
Ambient Execution
Small, corner-positioned status badges indicating the number of active, background agent tasks.
Workflow
Graph Workflow
Shows agent at work and task handoff from one to another.
Managing multiple generated projects directly from the dashboard.
Command center for the autonomous team
Main Dashboard
Shows the live statuses of all agents when they are at work, including task logs, interactive graphs, active chats, and token counts.
Agents Directory
A detailed directory of the 9-agent team, listing their specialized skills, tools, and roles.
Projects & Tasks
List of current projects featuring a Kanban board to track the status of tasks per project.
Project Memory
Shows the memory folders for each project and the stored design library of UI references and past context.
Brain (RAG System)
Visualizes the RAG system for the design library references and component library, showing how the agents connect ideas.
Generated Assets
A centralized view showing all generated assets for each project, such as images and logos.
Built with cutting-edge AI orchestration
1
Next.js Web Application
The user-facing dashboard is built on Next.js, providing a responsive and real-time view into the agents' activities.
2
Claude Code + Opus 4.7
The project scaffold from backend to frontend was developed in phases with Claude Code.
3
Python & LangGraph Backend
The backend is powered by Python, LangChain, LangGraph, Asyncio, and Docker for orchestrating the multi-agent deterministic state machine.
4
Advanced AI Models
Leverages Kimi K2.6 for reasoning and GPT Image 2 for visual asset generation.
5
Gemini Embeddings 2
Uses Google Gemini Embeddings 2 to power the internal RAG system and vector database memory.
6
Antigravity IDE
Developed and continuously refined using the Antigravity IDE for rapid iteration.
Visualizing the intelligent agentic workflow and handoffs.
01
Clone-Site Skill & Strict Replication
Resolved challenges with agents prematurely diluting strict replication intent by short-circuiting the creative pipeline. This ensures exact pixel-for-pixel cloning and adherence to reference styles.
02
Strategic Multi-Agent Orchestration
Utilized a keyword-based approach on Slack to dynamically identify and assign tasks. For example, 'Fix this code' routes directly to the Bug agent, while 'Create a Project' triggers a complete chained agent workflow.
03
Industry-Aware Design Agent
Added a specialized Design Agent to the workflow pipeline to produce industry-specific blueprints (typography, color palettes, layouts) before Developer code generation.
04
Scout Agent & Vector Memory
Implemented a background Scout Agent to continuously populate a Qdrant vector database with design patterns scraped from web sources, embedded via Gemini for PM retrieval.
05
Post-Build QA Bug Agent
Separated concerns by moving heavy QA responsibility from the Dev agent to a dedicated Bug Agent, which handles code validation through a 3-attempt self-healing Playwright retry loop.
06
Complex Project Routing Resolution
Fixed critical routing bugs where projects without pre-existing memory folders were misdirected. This involved a robust three-layer fix for path resolution and fuzzy matching.
Generated media assets from GPT Image 2 and Seedance 2.0.
Building AgentSync has taught me UX/UI best practices when designing Agentic systems, particularly the utmost importance of transparent system states and solid architectural foundations.
I’ve continually run tests to ensure the best quality output from the agentic flow — going back and forth, as the development of autonomous systems is never strictly linear.
Operating a 9-agent team orchestrating complex tasks is incredibly challenging, but it truly amazes me when the generated code and design can be highly accurate and fast when orchestrated correctly.
01
Implement a front-end web template store for an autonomous shop agent to utilize in specific use cases.
02
Iterate and improve the agent team with more comprehensive UI references, components, and industry standards.
03
Create a standalone application that works natively on Windows and Mac for ease of local deployment.
