Kombai AI Agent for Frontend Development: Design, Code, and Browser Automation

Introduction

Kombai is an AI agent that integrates directly into your development environment, specifically designed to build and refine frontends. It addresses the common challenge where AI agents are proficient in code logic but often struggle with intuitive and aesthetically pleasing user interface design.

Configuration Checklist

Element	Version / Link
Language / Runtime	TypeScript, JavaScript, React
Main library	Kombai VS Code Extension
Required APIs	Kombai API (for credits/usage)
Keys / credentials needed	API Keys (for thumbfa.st in demo)

Step 1 — Install and Configure Kombai

To begin, install the Kombai extension in your preferred code editor. Kombai acts as an all-in-one agent for building frontends, allowing you to design, code, and automate directly within your development workflow.

# Kombai is a VS Code extension, installation is typically done via the VS Code Marketplace.
# Search for "Kombai" and click install.
# [Editor's note: Exact installation command for VS Code extensions is not provided in the video, but it's usually via the Extensions view in VS Code.]

Once installed, you can access different modes: Plan, Code, Debug, Ask, and Design. For UI development, the Design mode is crucial as it allows you to build and iterate on UI designs. You can also select the "thinking" level for the AI (Auto, Ultra, High, Medium, Mini) and configure the number of design variations and refinement passes.

# To select Design mode in Kombai chat input box:
# Click the dropdown in the Kombai chat input box and select 'Design'.
# To configure variations and passes:
# Click the settings icon next to the 'Design' mode selection.
# Set 'Variations' (Number of variants to create for each new design)
# Set 'Passes' (Number of refinement passes for each new design)
# [Editor's note: Specific commands for setting these are UI interactions within the extension.]

Step 2 — Design UI Components with Natural Language

Kombai's Design Mode allows you to generate UI components using natural language prompts. This is particularly useful for quickly prototyping and iterating on design ideas without writing code manually. Kombai will create a Design System including Style Guides, Themes, and Blocks based on your input.

Example: Creating Inspiration Cards

To create variations for an inspiration card, you would provide a prompt like this:

# In the Kombai chat input box (ensure Design mode is selected):
create variations for inspirations card.

This prompt instructs Kombai to generate different design options for an "inspiration card" component. Kombai will then create a Style Guide for your project, defining colors, typography, spacing, and radius, and generate multiple card variations on a canvas.

Refining Designs with Contextual Feedback

After initial generation, you can provide further instructions to refine the designs. Kombai understands context and can apply stylistic changes based on existing elements or new requirements.

# Example of refining a design based on existing styles and new requirements:
regarde le style qu'on a dans thumbnail et aussi dans persons et essaie de faire un style variations qui match tout ça

This prompt asks Kombai to analyze the existing styles of "thumbnails" and "persons" components within your application and generate new variations for the inspiration card that align with those styles. Kombai will identify areas for improvement (e.g., YouTube icon, gradient, category badge, dropdown overlap) and propose changes.

# Example of making specific stylistic changes:
delete inforamtion, decete lehe tags, show the inforation in a subtle way, remove the border red, only on hover, and make the things really minimalistic

This detailed prompt guides Kombai to simplify the design by removing specific elements, adjusting information display, and applying minimalistic styling, including a hover effect for borders. Kombai will process these instructions and update the design on the canvas.

Step 3 — Generate Responsive Versions and Themes

Kombai can automatically generate different versions of your designs for various devices (mobile, tablet, laptop) and color modes (light, dark). This ensures consistency and responsiveness across platforms.

# To generate a new version of a design:
# Click the 'Decorate' dropdown menu on the canvas.
# Select 'Generate Version'.
# Choose 'DEVICE' (e.g., Mobile, Tablet, Laptop) and 'MODE' (Light, Dark).
# Add 'CUSTOM INSTRUCTIONS' if needed.
# Click 'Generate Version'.
# [Editor's note: Specific commands are UI interactions within the extension.]

This feature allows you to quickly preview how your design adapts to different screen sizes and themes, facilitating responsive design development.

Step 4 — Implement and Refactor Live Applications

Kombai can interact directly with your running application, allowing you to implement designs and refactor existing code. It connects to your local development server and provides a browser automation interface.

Connecting to Your Application

First, ensure your application is running locally. Kombai will then connect to it via a dedicated browser instance.

# Start your local development server (example for a Vite/React app):
pnpm start-all --port 3010
# This command starts the application on localhost:3010.
# Kombai will then connect to this port.

Once connected, Kombai's browser automation feature allows you to select DOM elements on your live application and instruct the AI agent to perform actions or refactor code based on the selected elements.

# Example of implementing a card directly into your application:
# Switch Kombai to 'Code' mode.
Implement la carte directement dans mon application

This command tells Kombai to take the previously designed card and integrate it into your application's codebase. Kombai will analyze your tech stack (e.g., React, TailwindCSS) and generate the necessary code, including components, data types, and icons.

Refactoring Existing UI Elements

Kombai can also refactor existing UI elements on your live application. You can select an element and provide instructions for improvement.

# Example of refactoring a dashboard text element:
# Select the 'Dashboard' text element in the live browser.
# In Kombai's chat input box:
Boom, change ce text avec ça
# This instructs Kombai to change the selected text.

This demonstrates Kombai's ability to directly manipulate and update elements within your live application, providing a seamless design-to-code workflow. Kombai will also perform checks like TypeScript validation to ensure code quality.

Comparison Tables

The video implicitly compares Kombai to other AI coding agents like Codex or Claude Design by highlighting Kombai's strength in UI design, which is often a weakness for other agents.

Feature / Tool	Kombai	Other AI Agents (e.g., Codex, Claude Design)
UI Design Quality	High (specialized Design Mode, iterative canvas)	Low (often struggle with good interfaces)
Code Reflection	High (understands frontend stack, best practices)	High (good for code generation/reflection)
Live Browser Interaction	Yes (connects to local server, inspects/modifies DOM)	No (typically code-only interaction)
Design System Management	Yes (Style Guides, Themes, Blocks)	Limited/None
Figma Integration	Yes (parses Figma designs to code)	Limited/None
Creative Design Generation	Yes (High creativity mode for complex animations)	Limited
Code Implementation	Yes (implements designs directly into app code)	Yes (generates code, but integration might be manual)

⚠️ Common Mistakes & Pitfalls

1. Not selecting the correct mode: Users might try to generate designs in Code mode or implement code in Design mode.
   • Fix: Always ensure the correct mode (Design for UI, Code for implementation) is selected in the Kombai chat input dropdown.
2. Ignoring Kombai's questions/suggestions: Kombai often asks clarifying questions or suggests improvements.
   • Fix: Pay attention to Kombai's prompts and respond to guide the agent effectively.
3. Lack of context for design changes: Providing vague instructions without pointing to specific elements or existing styles.
   • Fix: Use Kombai's element selector in browser mode or reference existing Style Guides and Themes to give precise context for design modifications.
4. Overlooking credit usage: While Kombai offers free credits, complex tasks or high creativity modes consume more.
   • Fix: Monitor your credit usage, especially when experimenting with multiple variations or high-fidelity designs, and consider upgrading if needed.

Glossary

Kombai: An AI agent integrated as a VS Code extension that assists in frontend development by generating UI designs, writing code, and automating browser interactions.
Design Mode: A specialized mode within Kombai that allows users to generate, iterate, and refine UI designs on an infinite canvas using natural language prompts.
Style Guide: A collection of design tokens (colors, typography, spacing, radii) that define the visual identity and consistency of a user interface within Kombai's Design System.

Key Takeaways

• Kombai bridges the gap between AI's coding prowess and human-like UI design intuition through its specialized Design Mode.
• The tool integrates directly into VS Code, offering a seamless workflow from design conception to code implementation.
• Users can generate UI variations, apply existing design systems, and refine aesthetics using natural language prompts.
• Kombai can connect to a live local application, allowing for direct DOM manipulation and code refactoring based on visual selections.
• It analyzes your project's tech stack (e.g., React, TailwindCSS) to generate production-ready code that matches your existing conventions.
• The Canvas Gallery and Design System features enable efficient management and reuse of design components, themes, and style guides.
• Kombai supports generating responsive versions for different devices and color modes (light/dark) automatically.
• The pricing model includes a free tier with monthly credits, making it accessible for individual developers to experiment.

Resources

• Official Website: https://kombai.com/
• Pricing Page: https://kombai.com/pricing
• Documentation (Design Mode Overview): https://docs.kombai.com/design/overview
• Example Projects: https://kombai.com/examples
• Demo Application (Thumbfa.st): https://thumbfa.st/
• VS Code Extension: [Editor's note: Link to VS Code Marketplace extension is not explicitly provided in the video but can be found by searching "Kombai" in the marketplace.]