NemoClaw Knowledge Wiki

Kombai for Design of Front-ends

4 min read

Kombai for Design of Front-ends

https://www.youtube.com/watch?v=6AKeMsFZY08 Kombai is introduced as the first-ever AI agent purpose-built for frontend development, directly integrating into popular IDEs like VS Code, Cursor, and Windsuf. Key Features and Differentiators:

  1. Specialized AI for Frontend Tasks: Unlike general-purpose coding agents, Kombai is specifically optimized for frontend development. Benchmarks show it consistently outperforms tools like GitHub Copilot, CodePal, and even Gemini in areas like code review (72% success vs. 30-50%), feature implementation (43% vs. 17-37%), and compilation success (96% vs. 46-70%).
  2. Diverse Input Modalities: It can generate high-quality frontend code from various inputs, including Figma designs, image inputs, and even plain text descriptions.
  3. Deep Codebase Understanding: Kombai understands your existing codebase, matches your current tech stack (supporting 25-30 frontend libraries), and produces code that can be directly merged into production. Users can also configure their preferred frameworks (React, TypeScript, Next.js), API frameworks (RTK Query), routers (React Router), component libraries (AntD v5, MUI v7), styling methods (SCSS, Emotion, Tailwind), and icon packs (Lucide, Font Awesome).
  4. Intelligent Error Auto-Fixing: If something breaks down during code generation (e.g., linting errors, runtime issues), Kombai automatically identifies and fixes them, eliminating the need for manual debugging.
  5. Multi-Agent Architecture: It operates with multiple specialized agents behind the scenes, including planner and developer agents, to handle complex tasks autonomously.
  6. Contextual Awareness: It leverages multiple designs as context to describe different states or flows, improving the accuracy and relevance of the generated code.

How it Works (User Workflow):

  1. Installation: Install the Kombai extension from the marketplace within your IDE (VS Code, Cursor, or Windsuf).
  2. Setup: Create or sign in to your Kombai account within the IDE.
  3. Interaction: Users can interact with Kombai via a chat interface: “Ask” Agent: For general Q&A related to frontend development. “Code” Agent: To autonomously generate code based on prompts.
  4. Provide Context: Attach Figma URLs (right-click frame > “Copy/Paste as” > “Copy link to selection”), attach images, or simply type in natural language descriptions of the desired UI.
  5. Planning Phase: Kombai analyzes the input and generates a detailed plan, outlining the sections and features it intends to build. Users can review and edit these editable plan files (e.g., schema, endpoints, theme configurations) before proceeding.
  6. Code Generation: Once the plan is approved, Kombai generates the corresponding frontend code. It provides a list of generated files and implemented features.
  7. Preview & Save: The generated code can be run in a sandbox for immediate preview. Users can then view the individual files within the IDE and save them directly into their workspace, ready for integration or further modification.

Examples Demonstrated in the Video:

  • Roles and Permissions Interface: Generates a comprehensive roles and permissions management interface from a Figma design, including tabs, search, filtering, role management, and a responsive table. Kombai automatically fixed TypeScript errors and integrated new components.
  • Edtech Portal Page: Creates an academic course website page with a sidebar, header, course grid, and various sections, handling animations and placeholders effectively.
  • Team Settings Page: Produces a modern team settings page from a Figma design, including an app sidebar, main content area with navigation tabs, and a team management table with search, user selection, and pagination controls. It also extracts SVG code for icons.
  • Multi-step Modal: Generates a functional multi-step customer overview modal with overview, address, and notes sections, form validation, and appropriate navigation based on multiple Figma inputs.
  • Multi-page Finance Tracking Web App: Builds a complete financial tracking web application from a plain text prompt, including a beautiful landing page, a dummy signup/login page with authentication systems, and a detailed dashboard with graphs, recent transactions, and spending categories.

Kombai aims to empower frontend developers by automating repetitive coding tasks, ensuring high-quality, scalable, and production-ready code that adheres to best practices and fits seamlessly into existing repositories.

Graph View

Backlinks