AI-Assisted Team Augmentation For Website Development

About the project

ProVision is Australia's largest peer body for independent optometrists, supporting over 450 practices with buying power, marketing, education, and business growth services. They needed a new marketing website to attract optometrists who weren't yet members, replacing an aging WordPress site that didn't reflect the brand's ambition.

‍

Userkind, a specialist UX & UI design agency and long-time Uinno partner, managed the project end to end. They delivered a complete Figma design and brought Uinno in as their development team.

‍

The task was to build a modern, content-managed website that ProVision's team could maintain on their own, and do it by the end of April 2026, because ProVision needed the site live for the campaign launch.

‍

Challenges and Solutions

Large Scope with Complex Page Types

The site included a large homepage with complex navigation, service pages, pillar pages, articles, a careers section, a board page, case studies, a news blog, membership pricing, a quiz feature, and contact forms tied to Microsoft Dynamics CRM. Every page had a dedicated mobile presentation.

Solution

Uinno built a three-agent AI system where a Director breaks each page into phases, delegates to a frontend agent and a CMS agent, and runs automated verification before moving on. This made it possible for a single developer to work through the full scope at roughly twice the normal speed.

Design-to-Code Accuracy at Speed

The Figma design was detailed, with carousels, sliders, scroll-triggered animations, and elements that slide in and out. Translating all of this pixel-perfectly into React components, by hand, would take far longer than the timeline allowed.

Solution

The frontend agent connects directly to Figma through the Figma MCP (Model Context Protocol), reads design tokens and layout data, and writes Next.js components from the source file. After each build, it uses the Playwright MCP to launch a browser, screenshot the result, and compare it against the original Figma design. If a margin is off or a button is misplaced, it identifies the gap and corrects the code. This cycle repeats two to three times per section until the output matches.

Full Content Management Across Every Page

ProVision's team needed to create pages, duplicate them, customize which sections appear, and edit every piece of content (text, images, colors, links) without developer help. That meant building a complete editorial system behind it.

Solution

A dedicated CMS sub-agent reads the frontend code the first agent produced, identifies every dynamic field, and auto-generates the Payload CMS schema, migration scripts, and seed data. The admin panel comes pre-populated, and the agent verifies that content changes in the CMS show up correctly on the live page.

Uinno's approach

Part 1: Set Up the AI Workflow

Uinno’s engineering manager built a complete AI agent system from scratch. The system has three agents: a Director that manages the overall process, a frontend design sub-agent that writes React code, and a CMS integration sub-agent that handles Payload CMS schemas and content migration.The Director receives a task (a link to a Figma section, for example) and breaks it into phases.

It runs setup, passes control to the frontend agent, then to the CMS agent, and finishes with a verification step. Each agent follows a library of instructions and skills, written as markdown files that define coding conventions, project structure, design system rules, and safety guardrails.

Part 2: Design-to-Code with Figma MCP

The frontend agent connects directly to Figma through the Figma MCP (Model Context Protocol) and extracts design information from each section. It surveys the existing codebase for reusable components, creates a development plan, and writes the frontend code in Next.js with the design system tokens applied.

Part 3: Quality Control

After writing code, the agent runs visual verification using the Playwright MCP. It launches a browser, takes a screenshot of the built page, and compares it to the original Figma design.

If a button is out of place or a margin is wrong, the agent identifies the difference and corrects the code. This build-screenshot-compare-fix cycle runs two to three times per section until the output matches the design.

Part 4: CMS Integration

The CMS sub-agent reads the frontend code that the first agent produced, identifies every dynamic field (text, images, colors, links), and creates the corresponding schema in Payload CMS. It generates migration scripts and seed data so the admin panel isn't empty when the client opens it for the first time.

Part 5: Safety and Self-Improvement

All development ran inside a Docker dev container. AI agents can hallucinate and run destructive commands. The container means the worst an agent can do is destroy the container itself, which rebuilds in minutes. The developer's local machine stays untouched.

discover our featured cases

AI-Assisted Team Augmentation For Website Development

Uinno joined Userkind's team to build a marketing website for Australia's largest optometry peer body, using an AI-driven development workflow

Healthcare / Optometry

Australia

Marketing Platform for Content Creators

A SaaS platform that lets content creators skip the marketplace, discover brands across 250+ industries, and pitch them directly from their own inbox