Building a Cloud Designer: 10x Faster UI Iteration with Parallel AI Agents |

It's possible to customize a cloud coding environment into a powerful cloud designer, allowing for UI iteration that is significantly faster. This approach involves forking and generating five to even ten different UIs simultaneously. These advanced capabilities are unlocked by leveraging several hidden features in cloud-based coding assistants, such as parallel task commands and new SDKs. This article will break down the process so you can replicate it.

The Power of Parallel Sub-Agents

A little-known feature of modern cloud coding assistants is the ability to spin up multiple sub-agents through simple prompts. For instance, by providing a prompt like, "start several parallel agents to implement variations of the to-do app UI," the system initiates multiple tasks that run concurrently.

You can observe this in action as different agents tackle distinct design briefs simultaneously: - Agent 1: Implements a minimalist to-do UI. - Agent 2: Creates a modern to-do UI. - Agent 3: Develops a Kanban-style UI.

In a short time, you receive three completely different styles, dramatically accelerating the iteration process. This parallel task capability can be packaged into a highly effective UI iteration workflow.

There has been a heated debate recently regarding multi-agent systems. One development team published a blog post arguing against building them, noting that for tasks like coding, parallel actions can lead to merge conflicts since each sub-agent lacks context about the others' work. Their conclusion was to favor a single-threaded approach.

However, a few days later, another company released its own findings on applying multi-agent systems in research, where groups of agents with parallel tasks handle things like data gathering. Both perspectives have merit. For most coding tasks, ensuring a full context is crucial. Yet, for scenarios like research or UI design, parallelism is a perfect use case. When designing in tools like Figma, it's common practice to fork a design, create a few variations, and compare them side-by-side to arrive at a final version. This design pattern translates effectively to AI-driven development.

Customizing the AI's Behavior with `cloud.md`

To harness this workflow, we need to understand four core concepts. The first is sub-agents, which we've covered. The second is cloud.md. If you are familiar with Cursor, this is essentially "Cursor Rules" but for the cloud environment. This file allows us to customize how the AI should work, giving it knowledge about which tasks to run in parallel and which to handle sequentially.

Here’s a quick example. If you open your cloud environment in any folder and create a file named cloud.md, you can insert instructions.

# cloud.md
You always respond in all caps.

Now, if you prompt the assistant with "hi," it will respond in all caps. You can imagine the power of using more specialized prompts. For instance, a prompt for internal UI design could include details about colors, fonts, and layout. You could also add special rules, such as instructing the agent to always create a single HTML file for UI iterations.

With a rule like that in place, a simple prompt such as, "build me a modern to-do app UI," will result in a single HTML file containing a clean, modern UI, rather than a complex multi-file project.

Automating Workflows with Custom Commands

The next powerful concept is Commands. This feature allows you to predefine a list of common workflows for the AI to follow. To get started, create a .cloud folder in your project, and inside it, another folder named commands.

Let's say you want to create a joke generator. You would create a file named joke.md inside the commands folder.

# joke.md
Make a joke about {arguments}.
Always end the joke with "a man eating chips."

The {arguments} placeholder is a special variable that passes input from your command directly into the prompt template. Now, if you type /joke AI coding, the system will generate a joke about AI coding that ends with the specified custom instruction.

Official documentation shows that you can even include shell commands that execute before the main task. For example, you could create a command that checks the Git status first.

# command.md
`git status`
---
Make a joke about the current git branch.

If you run this command in a directory that isn't a Git repository, it will note that. But if you initialize Git and run it again, it will incorporate the branch name into its response. This is a subtle but incredibly powerful feature.

A Practical UI Design Workflow

Here is how to use these features to create a streamlined UI workflow. Inside the .cloud/commands directory, create a ui folder.

Create an extract-design-system.md command: This command will analyze a UI mock-up from an image URL, extract design elements like color patterns and typography, and save them into a design-system.json file in a prd folder. This works much better than just giving the AI a UI reference directly.
Create an iterate-design.md command: This command instructs the AI to spin up three to five sub-agents to concurrently implement the same UI in different styles. It will analyze the design-system.json file and build a single HTML page for each variation, outputting them to a ui-iterations folder as ui-1.html, ui-2.html, and so on.

With these two commands, the workflow is as follows: First, find some UI inspiration from a website and save it as an image. Then, run the extract-design-system command and provide the image. This will generate the design-system.json file with detailed style information.

Next, call the second command, iterate-design, with a prompt like, "a modern phone to-do app using this design style as reference." The AI will set up several tasks, each with detailed instructions and design directions. After a short wait, it will output multiple UI variations.

If you like one version—say, ui-2.html—but want to iterate further, you can run the command again with a new prompt: "iterate on the ui-2.html version, which is the best so far, and try a dark mode." The AI will analyze the existing UI and spin up more parallel tasks to create dark mode variations.

This command-line interaction is fascinating. Traditionally, software design requires defining specific arguments. Here, you provide free-form text, and the agent magically figures it out. After a few minutes, you'll have several new UI versions based on your selection, each with slight variations. You can pick the one you like best or even combine elements from different versions and ask the AI to iterate again.

Scaling to Production with Git Worktrees

This workflow is great for single HTML pages, but what about setting up parallel agents to work on a production Next.js app? This is where the fourth concept, Git Worktrees, comes in.

Typically, you can only have one branch checked out at a time. git worktree allows you to set up multiple sandboxed environments of your repository. This means you can have several cloud code instances, each working on an individual worktree, without impacting each other. When you're done, you can merge the version you like.

To create a worktree, you run the following command:

git worktree add -b <branch-name> <path-to-new-directory>

For example, with a basic Next.js to-do app, you can open a terminal and run:

git worktree add -b demo-branch trees/demo-branch

This creates a new folder trees/demo-branch containing a full copy of your project on the new demo-branch. You can then cd into that directory, install dependencies, and run the development server. The application will be running in a separate environment.

Theoretically, you could manually create multiple worktrees and set up parallel agents for each. However, this can be automated with a single command. By creating an execute-parallel-agents.md command, you can define a two-step process:

Step 1: Set up multiple Git worktrees based on the user's request (e.g., three variations means three worktrees). Install dependencies in each.
Step 2: Set up parallel sub-agents, with each agent working on a different worktree.

With this command in place, you can simply type:

/execute-parallel-agents try three versions of the UI: one nerdy style, one kid style, and one gaming style.

The master agent will then: - Create three worktrees: nerdy, kid, and gaming. - Install dependencies in each. - Launch three parallel sub-agents to work on each one.

You can expand the task details to see the specific prompts each sub-agent receives, tailored to the desired style. This process takes time, but the benefit is getting all the UI variations in one go. In the end, you'll have three different versions, each in its own folder, reflecting the requested styles. You can then choose a version and iterate further.

Note: Remember to delete the worktrees you don't need, as each one contains a full copy of the project, including all its dependencies, and can be quite large.

This workflow of iterating on UI is rapidly evolving and will likely become a key part of development in the coming months, especially for UI-heavy tasks.