DEV Community: Vishwas

What is an LLM (For Web Developers)

Vishwas — Fri, 14 Mar 2025 10:03:28 +0000

Large Language Models (LLMs) are changing how we build software, and not in that vague "AI is the future" way that people have been saying for years.

The tool that transforms a Figma design into a fully responsive website? The assistant that writes your unit tests while you focus on core functionality? These aren't hypothetical scenarios; they're happening right now.

The best part is that adding LLMs to your codebase has become surprisingly straightforward. But even with this simplicity, understanding how these models actually work is crucial for using them effectively.

This guide will explain what Large Language Models actually are, how they work behind the scenes, and what you should consider when adding AI to your web projects.

What are Large Language Models (LLMs)?

Let's build our understanding step by step, starting with the fundamentals and working our way up to large language models.

What is a Model?

When people talk about AI and machine learning, you'll hear the term "model" thrown around constantly.

A model is basically a mathematical function that transforms inputs into outputs. But unlike traditional programming, where you'd write explicit rules, models learn patterns from data.

Here's what that looks like in practice:

Feed a model tons of cat and dog pictures, and it learns to tell them apart (classification model)
Show it housing data, and it figures out how square footage affects the price (regression model)
Give it your browsing history, and it starts guessing what you might buy next (recommendation model)

The process of training models is structured: you show the model examples, measure its error using mathematical functions (like "how far off was this prediction?"), and then let it adjust its internal parameters to reduce that error. The model uses optimization algorithms to systematically improve its accuracy with each round. Do this thousands or millions of times, and eventually, it gets pretty good at complex tasks.

What makes models powerful isn't fancy math or algorithms (though those help). It's the data. Models are only as good as what they're trained on. Take a housing price predictor, for example. If you only train it on housing prices in a luxurious neighborhood, it's gonna be totally lost when estimating values in rural villages—no algorithm, however sophisticated, can extract patterns from data it hasn't seen before.

In the end, a model is just a function that makes predictions based on patterns it's seen before. It's not magic, just math at scale.

What is a Language Model?

A language model is exactly what it sounds like—a model that works with human language. At its most basic level, it tries to predict what word will come next in a sequence.

When you type "The coffee is...", a language model calculates probabilities. It might think "hot" has a 30% chance of being next, "delicious" 15%, and "programming" basically 0%.

The first language models were pretty basic:

N-gram models just counted how often word sequences appeared together
Markov chains looked at the last couple of words to guess the next one
RNNs (Recurrent Neural Networks) tried to remember context from earlier in the text but weren't great at it

These older models were useful for some tasks but had major limitations. They'd quickly lose track of what was being discussed if the relevant information wasn't within their context window - which ranged from just a few words for n-grams to around 100 words for basic RNNs.

Modern language models are much more sophisticated, but the core idea remains the same: predict what text should come next based on patterns learned from data.

What is a Large Language Model?

A large language model (LLM) is, as the name suggests, a language model that's been scaled up dramatically in three key ways:

Data: They're trained on vast amounts of textual data—think hundreds of billions of sentences from books, articles, websites, code repositories, and more
Parameters: They have billions or trillions of adjustable internal values that determine how inputs are processed
Computation: They need absurd amounts of computing power to train—the kind only big tech companies can typically afford

What's fascinating is that once you scale these models big enough and combine them with advanced architectures, they develop capabilities nobody explicitly programmed. They don't just get better at predicting the next word—they can:

Generate human-like text that is coherent and lengthy
Follow complex instructions
Break down problems step-by-step
Write working software code
Understand different contexts and tones in natural language
Answer questions using information they've absorbed

This emergent behavior surprised even the researchers who built LLMs. Scale unlocks capabilities that smaller models just don't have.

How LLMs work

When you feed text into an LLM, it first breaks everything down into "tokens," which can be words, parts of words, or even individual characters. It then processes these tokens through its neural network to predict what should come next.

However, the real breakthrough behind modern LLMs is the transformer architecture (what the "T" in ChatGPT stands for), which completely changed how models process language.

Instead of processing text one word at a time like older models, transformers can look at entire passages at once and determine which parts should influence each other.

The most important part of transformers is the "attention" mechanism, which allows the model to:

Process text in parallel rather than word-by-word
Consider relationships between words regardless of how far apart they are
Weigh the importance of different words when generating each piece of output

Under the hood, LLMs are still doing the same basic job as simpler language models—predicting what comes next—but their scale and architecture make them capable of so much more.

The transformer model architecture is a deep learning architecture that was developed by researchers at Google and is based on the multi-head attention mechanism.

How LLMs learn

So, how do these large language models actually learn? It's just a whole lot of math, data, and computation.

The model learns patterns from training data consisting of trillions of words through unsupervised learning, without requiring explicit programming of linguistic rules.

LLM training typically happens in a few stages:

Pre-training: This is the foundation stage where the model learns language by predicting missing words from massive text datasets.
Fine-tuning: After pre-training, the model gets more specialized training:
RLHF (Reinforcement Learning from Human Feedback): This is where models like ChatGPT get their polish:

The cool thing about this approach is that we never explicitly program rules of language or facts into the model. It learns patterns from data and then refines itself based on what humans prefer.

From design to code: our experience with LLMs

At Builder.io, we've spent years building tools that connect design and development, and we've learned valuable lessons about effectively leveraging LLMs.

With Visual Copilot, our AI-powered Figma-to-code toolchain, we've trained specialized AI models with over 2 million data points that transform Figma designs into clean, responsive code.

We don't just use a single AI model for this—that approach tends to fall apart in the real world. Instead, we've built a pipeline of specialized systems:

First, a model transforms flat design structures into proper code hierarchies
Then, our open-source Mitosis compiler adapts this structure to whatever framework you're using
Finally, a fine-tuned LLM polishes the code to match your team's specific coding style and standards

This has dramatically cut down the time developers spend translating designs into actual working code, allowing them to focus on the stuff that matters: building great user experiences and working on the core functionality of their apps.

Working with LLMs in production has taught us that the difference between a mind-blowing AI feature and a frustrating one often comes down to the integration details most people overlook.

Integrating LLMs into web applications

So how do you actually add LLMs to your web app? You could go down a rabbit hole, but I want to focus on the fundamentals: how to connect to these models, handle their responses, and not break the bank while doing it.

API integration approaches

The most common way to integrate LLMs into web applications is through API calls to hosted models. Services like OpenAI, Anthropic, Cohere, and others provide API endpoints that accept your prompts and return responses.

Here's a basic example of using fetch to call an LLM API:

async function generateContent(prompt) {
  const response = await fetch('https://api.llmprovider.com/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
      prompt: prompt,
      max_tokens: 8192,
      temperature: 0.7
    })
  });

  const data = await response.json();
  return data.text;
}

The key parameters typically include:

Prompt: What do you want the model to respond to
Temperature: How random/creative the output should be (0.0 = deterministic, 1.0 = creative)
Max tokens: How long the response can be
Model: Which model to use (affects quality, speed, and cost)

Frontend considerations

When implementing LLMs in user-facing web applications, consider these best practices:

Handle loading states - LLM calls can take seconds, not milliseconds - show a spinner or typing animation
Implement streaming - Most providers support streaming responses so you can show text as it's generated
Add retry logic - LLM services can hit rate limits or have outages, so build in retry mechanisms
Consider moderation - If users can input their own prompts, you may need filtering to prevent misuse
Design for variability - No matter what temperature you use, responses will vary each time

Backend implementation strategies

On the server side, consider these approaches:

Asynchronous processing - For non-interactive uses, process requests in the background
Caching common responses - Store responses to common prompts to save money and improve speed
Rate limiting - Prevent abuse by implementing rate limits for LLM-based features
Prompt engineering - The quality of your prompt directly affects the results
Validation and post-processing - Validate and clean LLM outputs before using them

Performance and cost optimization

LLMs are powerful but can get expensive quickly:

Token optimization: Every token (roughly 4 characters) costs money, with input and output tokens typically priced differently – so be strategic with prompt length and expected response size
Model selection: Use smaller models for simpler tasks
Batching: Combine multiple requests when possible
Hybrid approaches: Use LLMs for what they're good at and traditional code for the rest

Choose an integration approach

You've got a few options depending on your needs:

Managed API services: OpenAI, Anthropic, and Cohere provide simple REST APIs with comprehensive documentation
AI SDK: Adds a nice layer of abstraction and type safety if that's your thing

Finding the right balance between these factors takes experimentation, but when done right, you can build features that would have been impossible just a few years ago.

The road ahead

LLMs are genuinely changing how we build software, but in more practical and immediate ways than the hype might suggest. You don't need a PhD, technical expertise or massive infrastructure to start using them effectively in your projects.

The learning curve exists, but it's more like learning a new framework than mastering quantum physics. Start with small experiments, try out the tools I've mentioned, and build from there.

What's exciting isn't just what these models can do today but how quickly they're evolving. So give it a shot—you might be surprised at how quickly you can go from curiosity to shipping features powered by LLMs.

Best AI Code Editors in 2025

Vishwas — Mon, 24 Feb 2025 11:36:15 +0000

AI code editors have come a long way since their introduction. What started as experimental coding tools are now essential parts of many developers' daily workflows. As these editors mature, the question isn't whether to use one, but which one best suits your needs.

In this article, we'll explore the leading AI code editors of 2025, from traditional IDEs with powerful AI integrations to purpose-built AI-first editors. Let's see what each brings to your development workflow.

VS Code

Visual Studio Code has been the go-to editor for many developers for years now. It's free, open-source, and supports just about every programming language you can think of. In 2025, through AI powerhouses like GitHub Copilot and Cline, it has evolved into a complete AI development environment while maintaining its familiarity and extensibility.

GitHub Copilot

GitHub Copilot, the tool that introduced many developers to AI pair programming, has transformed from a simple code completion tool into a sophisticated pair programmer.

Key Features:

Real-time code completions
Context-aware and smart code suggestions based on your current code and comments
Support for multiple programming languages and frameworks
Seamless IDE integration
Built-in chat capabilities through Copilot Chat for natural language requests
Copilot Agents for extending functionality with custom AI-powered tools for documentation, data retrieval, and specialized coding tasks

Models Supports multiple models including Claude 3.5 Sonnet from Anthropic, o1, and GPT-4o from OpenAI

Pricing: Free tier with 12,000 completions per month, $10/month for individuals, $19/user/month for businesses, free for students and open source contributors

Cline

Meet VS Code's other AI powerhouse. Cline bridges the gap between editor and terminal, turning routine development tasks into streamlined workflows with its unique approach to AI assistance.

Key Features:

Autonomous file creation and editing with diff views and Timeline tracking
Terminal command execution with real-time output monitoring
Browser automation for testing, debugging, and UI interactions
Flexible API integration with support for OpenRouter, Anthropic, OpenAI, Google Gemini, and local models
Comprehensive context management with file structure analysis and AST parsing
Workspace checkpoints for comparing and restoring different versions
Extensible through Model Context Protocol for custom tools and capabilities
Cost tracking for API usage and token consumption

Models: Supports a wide range of models from Anthropic, OpenAI, Google Gemini, DeepSeek, and local models via LM Studio and Ollama

Pricing: API costs vary based on chosen providers

Cursor

Imagine if Visual Studio Code went on a retreat, had a spiritual awakening, and came back obsessed with AI. That's basically what Cursor is. It's built on top of VS Code, so it feels familiar, but it's packed with AI features that make you wonder if you're still actually coding or if you've somehow stepped into the future.

Key Features

Advanced code completion with auto-imports for TypeScript and Python
Composer (⌘ + I) for creating entire applications
Agent mode (⌘ + .) for context gathering and terminal operations
Context-aware chat (⌘ + L) with folder drag & drop support
Terminal integration with natural language command processing
Built-in bug finder with fix suggestions

Models GPT-4o, o1, Claude 3.5 Sonnet, and more

Pricing Free hobby tier, $20/month for Pro, $40/user/month for Business

Windsurf

Built on VS Code (sensing a theme here?), Windsurf offers a sophisticated AI-powered development environment with its Supercomplete and Cascade features. Developed by Codeium, it focuses on real-time workspace understanding and intelligent code assistance.

Key Features

Supercomplete for predicting and offering intelligent code suggestions with diff box previews
Cascade with real-time workspace sync and iterative problem-solving
Comprehensive project understanding with automatic context updates
Flow technology for workspace synchronization

Models Base Model (Llama 3.1 70B), Premier Model (Llama 3.1 405B), plus GPT-4o and Claude 3.5 Sonnet with image support

Pricing Free tier with base model access, $15/month for Pro, $60/month for Pro Ultimate

Trae

ByteDance, the company behind TikTok, decided to throw its hat into the AI code editor ring with Trae (The Real AI Engineer). And surprise, surprise — it's built on VS Code. Trae might be the new kid on the block, but it's coming in hot with a polished UI and some fresh ideas.

Key Features

Unique "think-before-doing" approach to project-wide operations
Builder mode with systematic task breakdown
Dual chat interfaces: Side Chat (⌘ + U) and Inline Chat (⌘ + I)
Comprehensive context system with automatic indexing
Support for multimodal input including images

Models Claude 3.5 Sonnet and GPT-4o only

Pricing: Currently free with all features included (future pricing to be introduced)

A Note About Zed

Finally, an editor that isn't another VS Code fork! Zed is something different - a blazing fast editor built from the ground up in Rust, focused on raw performance and clean design. They were a bit late to the AI party, only launching their AI features in August 2024, and are still catching up with features that other editors have had for a while.

Zed isn't yet at the level of our main contenders, but their focus on performance combined with their careful approach to AI integration makes them worth keeping an eye on.

The Figma-to-IDE workflow

Workflow diagram showing Figma designs being converted to code through AI-powered Builder.io plugin, connecting designers to development tools.

While we've covered the best AI code editors, it's worth mentioning that the future of development isn't just about writing code. One of my preferred workflows combines these AI tools with Visual Copilot, a design-to-code Figma plugin:

Design in Figma: Everything starts with the design team creating pixel-perfect designs in Figma.
Visual Copilot: Next, Visual Copilot handles the code generation process, converting these Figma designs into clean, production-ready code.
Fine-tuning in IDE: While Visual Copilot handles the heavy lifting of translating design to functional code, I iterate on the generated code using the IDE's AI capabilities to add interactivity, optimize performance, and implement complex features across multiple files.

The Bottom Line

It's 2025, and AI code editors have evolved from novelties to necessities. The tools are mature - it's just about finding the one that that best complements your coding practices and accelerates your software development process.

Just remember: with great power comes great responsibility. And by responsibility, I mean "the ability to introduce bugs at superhuman speeds.”

While AI coding tools are great at generating functional code and handling repetitive coding tasks, they're most effective when combined with thorough code review practices.

For a more opinionated and technical deep dive, check out:

How Does Trae, the 100% Free AI IDE, Compare to Cursor?

Vishwas — Tue, 18 Feb 2025 15:02:16 +0000

Another day, another AI code editor! Just kidding - but seriously, a new AI editor called Trae just dropped. Remember when we used to joke about a new JavaScript framework dropping every day? Let's hope AI editors don't go down that road!

The reality is that using an AI-powered editor is quickly becoming less of a "nice to have" and more of a "wait, you're still coding without AI?" kind of thing. While Cursor has been crushing it as the go-to AI coding sidekick, Trae has entered the scene looking to measure up.

From code completion and generation to context awareness and pricing, let's break down how these tools compare where it matters most.

Meet the players

Cursor

Cursor has established itself as a force to be reckoned with in the AI coding space. Built on VS Code's foundation, it's evolved into something far beyond a simple code editor with AI capabilities bolted on.

Trae

The new kid on the block comes from ByteDance, the company behind TikTok. Trae (cleverly named as "The Real AI Engineer"), positions itself as an adaptive AI IDE. It’s built on VS Code, just like Cursor, but it's not your typical VS Code clone. They've given the interface a fresh coat of paint, which is pretty nice to see. Best of all, it's completely free for now and packs some interesting features that make it worth a look.

Let's dive into the specific features and see how these two compare.

Code completion

You know that feeling when you're typing and the IDE just gets what you're trying to do? That's what we're talking about here.

Cursor

Cursor's code completion is top-tier stuff. It doesn't just predict your next line - it understands your project's context and can handle everything from auto-imports in TypeScript and Python to multi-line completions that actually make sense. The suggestions feel natural, like they're coming from someone who's intimately familiar with your codebase.

Trae

Trae takes an interesting approach with its completion system. Hit Enter for a new line, and it starts suggesting completions based on your code context. You can either Tab to accept everything or use Ctrl + → for word-by-word acceptance. Trae also encourages comment-driven generation - write what you want in a comment, and it'll try to make it happen.

Code generation

This is where things get interesting. Imagine describing what you want your code to do, and boom — it's there.

Cursor

Cursor combines code generation and agent capabilities in powerful ways. The Composer (⌘ + I) understands and implements entire project architectures, while Agent mode (⌘.) acts like a senior developer at your command, handling everything from context gathering to terminal operations. Together, they can scaffold entire applications while maintaining your project's style.

Trae

Trae's Builder mode employs a unique "think-before-doing" approach to project-wide operations. Before executing any changes, it first analyzes and confirms its understanding of the task, then breaks it down systematically. This methodical process covers everything from context extraction to file modifications and command execution, with real-time previews letting you see changes before committing.

This planning-first approach mirrors an emerging trend in AI coding tools - notably, the current leader on Aider's polyglot leaderboard is a combination of DeepSeek R1 for architectural planning with Claude for implementation, achieving a 64% success rate on complex coding tasks.

While Trae’s approach might take slightly longer than Cursor’s direct approach, it often results in more accurate first-attempt solutions.

Chat

Sometimes you just need to ask a question. But is chatting with an AI actually helpful?

Cursor

Cursor's chat (⌘ + L) is context-aware and understands what you're working on. You can drag & drop folders into Chat for additional context and apply code suggestions directly. It even supports images for visual context.

Trae

Trae offers two chat interfaces:

Side Chat (⌘ + U): Works as an all-in-one AI partner, handling everything from code explanation to error fixing.
Inline Chat (⌘ + I): Embedded within the code editor for better flow, perfect for quick edits or code explanations.

Both chat modes support multimodal input, allowing you to add images like error screenshots or design drafts. You can even reference terminal output directly in your chats.

Terminal integration

Cursor

Cursor extends its AI capabilities directly to the terminal with ⌘ + K. This lets you translate natural language descriptions into actual commands right in the terminal, making complex command-line operations more accessible. However, it hijacks the terminal's clear shortcut, which is kind of annoying.

Trae

Trae handles terminal operations through its chat interface rather than direct terminal integration. When you need a command, ask in the chat and Trae will provide it with two options:

Add to Terminal: Inserts the command into your terminal, ready to run with Enter
Run: Inserts the command into your terminal and executes it directly

It’s not as seamless as Cursor's direct terminal integration but this approach still provides the help you need for command-line operations.

Context awareness

This is a big one. Can these tools actually understand your whole project, or are they just looking at the current file?

Cursor

Cursor's pretty impressive here. It looks at your entire codebase and project structure. You can even use @ symbols to reference specific parts of your project, like @Files, @Folders, @Code, and more.

Trae

Trae's context system is comprehensive, if a bit complex. You've got direct references, terminal output integration, and smart commands with #Code, #File, #Folder, and #Workspace. The automatic indexing for smaller projects (<5,000 files) is handy, though larger projects need manual indexing.

Models

Let's look at the AI horsepower under the hood - which models are powering these tools?

Cursor

Cursor offers a range of models, including GPT-4o, o1, Claude 3.5 Sonnet, and their custom cursor-small model. You can choose based on what you need — speed or capability.

Trae

Trae offers a focused selection of just two high-end models: Claude 3.5 Sonnet and GPT-4o. While limited in options, these are both top-tier models known for their advanced capabilities.

Code review

We all need a second pair of eyes sometimes.

Cursor

Cursor includes a powerful bug finder feature that scans your code and branch changes against main, rating potential bugs as it finds them. One click and it'll fix issues right in your editor, though each fix operation comes at a cost.

Trae

Currently, Trae doesn't offer dedicated AI-powered code review capabilities.

AI training & rules

One size doesn't fit all in coding. Can you bend these tools to fit your specific needs, or are you stuck with what they give you?

Cursor

Cursor offers two levels of AI behavior customization:

Global rules: Simple but powerful - modify AI behavior across your entire editor through Cursor Settings. Cursor Settings\ > General\ > Rules for AI. These rules apply to all features like Chat and Cmd+K commands.

Project rules: The recommended approach for serious development. Stored in .cursor/rules, these offer granular control with:

File pattern matching for specific file types
Folder-specific configurations
Semantic descriptions for rule application
Automatic context attachment

This flexibility means you can adapt AI behavior to different frameworks, file types, or development patterns within the same project.

Trae

While Trae offers language preferences and code indexing settings, it currently doesn't support custom AI behavior rules or project-specific AI configurations.

Pricing

Let's talk money. How do their pricing models compare?

Cursor

At $20/month for Pro and $40/user/month for Business, it's an investment in your development workflow.

Trae

Currently, Trae is completely free - a significant advantage for developers wanting to explore AI-assisted coding without commitment. While pricing will be introduced in the future, the current free access includes all features, from the Builder mode to multimodal capabilities.

The bottom line

After putting both tools through their paces, Cursor clearly comes out on top. Its more polished experience, superior context understanding, and fluid project-wide operations make it the more capable tool for serious development work.

That said, Trae offers an interesting proposition right now: it's free. While it may not match Cursor feature-for-feature, it's a solid platform for experiencing how AI can accelerate your coding workflow, especially with repetitive tasks.

My recommendation? Use Trae to build your AI-assisted development habits now, then upgrade to Cursor when you're ready to invest in a more powerful toolkit.

My preferred AI stack

My preferred workflow looks like this:

Our design team works in Figma
Visual Copilot converts the designs to code
I iterate on the code using Cursor

If you enjoyed this post, you might also like:

Figma to Code with Windsurf and Visual Copilot

Vishwas — Wed, 12 Feb 2025 10:57:40 +0000

Converting Figma designs into functional interfaces is typically a tedious process. Recreating every pixel-perfect design detail—fonts, spacing, responsive layouts, and interactions—in HTML, CSS, and JavaScript (or any other stack) is like retyping a book that's already been written.

The good news is that this level of manual work might finally be on its way out. The Windsurf and Visual Copilot integration eliminates this manual design-to-code work, freeing up time to focus on building features and delivering great products.

Windsurf

Windsurf is an AI-powered IDE developed by Codeium, built on top of Visual Studio Code. Its standout feature is the "Flow" technology, which maintains real-time sync with the workspace, enabling seamless AI collaboration across projects.

Visual Copilot

Visual Copilot is Builder.io’s AI-powered Figma to code toolchain that leverages AI models to convert Figma designs into React, Vue, Svelte, Angular, HTML, etc code in real-time. It can even reuse your existing components in the output and use any styling library or design system you need.

Set up your workflow

Getting started is straightforward:

Install the Visual Copilot plugin
Download Windsurf

How to turn Figma designs into code

Visual Copilot works with all popular frameworks like React, Vue, Svelte, and Angular. It also works with style tools like Tailwind CSS, Emotion and Styled Components. Whether you're building a simple landing page or a complex application, Visual Copilot can generate the code you need in your preferred tech stack. Here's how to use it:

Step 1: launch the Visual Copilot Figma plugin

Figma plugin search interface showing Builder.io AI-Powered Figma to Code plugin in the Plugins & widgets section.

In Figma, open the Actions menu from the toolbar, click the Plugins & widgets tab, search for "Builder.io AI-powered Figma to Code" plugin and run it.

You can also try the plugin from the Figma community page.

Step 2: export to code

Select the design to convert, check the preview in the plugin, and click Export to Code. This starts the code generation process behind the scenes. Copy the generated command and paste it into the Windsurf terminal.

Step 3: set up rules for AI

While you can start generating code right away, configuring AI rules helps produce code that better matches project standards:

.windsurfrules: For project-specific customization in your workspace in Windsurf.
.builderrules: To add custom instructions that will be automatically injected into the LLM prompt during code generation. Define anything from component naming conventions and state management patterns to error handling approaches and custom hook patterns.
.builderignore: To exclude specific files or patterns from being included in the code generation process. This is especially useful for template files that shouldn't influence the generated code, legacy code that doesn't follow current standards, third-party code that might confuse the generation process, and test files or mock data.

.builderrules and .builderignore are Visual Copilot-specific and won't affect Windsurf’s code generation

Step 4: guide the code generation

Tell the AI what you're building. For example: "This is a signup form for new users."

Visual Copilot and Windsurf will then:

Analyze existing project files
Read .builderrules, .builderignore and .**windsurfrules** files to understand coding patterns
Generate code matching the project's framework and styling choices (React with Tailwind CSS for example)

Step 5: make it better with Windsurf

This is where Windsurf's AI capabilities truly shine:

Cascade: Add more features to your code
Chat (⌘ + L): Ask questions about your code
Codeium Command (⌘ + K): Make quick changes

The real-time awareness feature means you won't need to repeatedly explain your context - Windsurf understands your actions as you make them.

Pro tips for better Figma to Windsurf results

Use Auto Layout in Figma: When designing your components and layouts in Figma, always use Auto Layout. This helps Visual Copilot generate more accurate and responsive code that better matches your design intentions.
Leverage Cascade memories: Use Windsurf's Cascade Memories to persist context across sessions. This helps maintain consistency in your code generation.
Pin important context: For specific bits of code you want extra attention on, pin directories, files, repositories, or code context items as persistent context.

Benefits

Integrating Visual Copilot with Windsurf saves you from copying designs into code by hand. You also won't need to switch back and forth between design and code to check measurements or fix layout problems.

Instead, your designs become working code in minutes. Visual Copilot creates the code, and Windsurf helps you fit it into your project perfectly.

It's a workflow that frees you to focus on building features that delight your users—and shipping them faster than ever.

FAQ

What frameworks are supported? Visual Copilot supports React, Vue, Svelte, Angular, and more, while Windsurf works with any language VS Code supports.
Does this work with my existing codebase? Yes! Both tools are designed to integrate seamlessly with your existing projects. Windsurf keeps track of your code in real-time.
What AI models are available? Windsurf gives everyone access to Llama 3.1 70B. Paid users get Llama 3.1 405B, GPT-4, and Claude 3.5 Sonnet (which can understand images).

If you enjoyed this post, you might also like:

Figma to Code with Cursor and Visual Copilot

Vishwas — Mon, 03 Feb 2025 19:21:39 +0000

If you’ve ever converted a Figma design into a functional interface, you know just how tedious that process can be.

Every pixel-perfect design detail—fonts, spacing, responsive layouts, and interactions — has to be painstakingly recreated in HTML, CSS, and JavaScript (or whatever your stack might be). It’s like retyping a book you already wrote, just so it can be “officially” published.

The good news is that we’re finally at a point where that level of hand-holding is about to disappear. The Cursor and Visual Copilot integration eliminates this manual design-to-code work, letting you focus on what truly matters: building features and delivering great products.

Cursor

Cursor is like having a senior developer looking over your shoulder 24/7. It's an AI-powered code editor built on top of VS Code that understands your entire codebase and helps you write, refactor, and optimize code faster than ever.

Visual Copilot

Set up your workflow

Getting started is straightforward:

Install the Visual Copilot plugin.
Download Cursor.

Convert Figma design to code

The beauty here is that Visual Copilot supports all major frameworks (React, Vue, Svelte, Angular) and styling solutions (Tailwind CSS, Emotion, Styled Components). Whether you're building a simple landing page or a complex application, Visual Copilot can generate the code you need in your preferred tech stack. Let's walk through the process:

Step 1: launch the Visual Copilot Figma plugin

Figma plugin search interface showing Builder.io AI-Powered Figma to Code plugin in the Plugins & widgets section.

In your Figma file, open the Actions menu from the toolbar, then click the Plugins & widgets tab. Search for “Builder.io AI-powered Figma to Code” plugin and run it.

You can also try the plugin from the Figma community page directly.

Step 2: export to code

Select the design you want to convert. You’ll get a preview in the plugin. If you’re satisfied with your selection, click the Export to Code button. This starts the code generation process behind the scenes. Copy the generated command and paste it into your Cursor terminal.

Step 3: configure rules for AI

While you can start generating code right away, configuring rules for AI will help produce code that better matches your project's standards:

.cursorrules: Configure this file to maintain consistent coding patterns across your project. This helps Cursor understand your coding standards and practices.
.builderrules: Use this to add custom instructions that will be automatically injected into the LLM prompt during code generation. You can define anything from component naming conventions and state management patterns to error handling approaches and custom hook patterns.
.builderignore: Use this file to exclude specific files or patterns from being included in the code generation process. This is especially useful for template files that shouldn't influence the generated code, legacy code that doesn't follow current standards, third-party code that might confuse the generation process, and test files or mock data.

While optional, setting up these configuration files is highly recommended for better code generation results. Note that .builderrules and .builderignore are Visual Copilot-specific and won't affect Cursor's code generation.

Step 4: guide the code generation

Here's where the magic really happens — tell the AI how your design fits into your project. Something like "a new registration card component for our auth flow" is all it takes.

Together, Visual Copilot and Cursor will:

Analyze your existing project files.
Read your .builderrules, .builderignore and .cursorrules files to understand your coding patterns.
Generate code that matches your project's framework and styling choices (like React with Tailwind CSS).

Step 5: Enhance with Cursor

This is where Cursor's AI superpowers come into play. Open your newly generated code in Cursor and use its features to take things to the next level:

Use ⌘ K to refactor and optimize the generated code.
Leverage Chat to get instant answers about the code structure.
Use Composer for larger architectural changes.

While Visual Copilot generates responsive layouts, you can use Cursor to ensure your responsive implementation works flawlessly across all screen sizes.

Pro tips for better Figma to Cursor results

Use Auto Layout in Figma: When designing your components and layouts in Figma, always use Auto Layout. This helps Visual Copilot generate more accurate and responsive code that better matches your design intentions.
Keep configuration files updated: Regularly update your .cursorrules, .builderrules, and .builderignore files as your project evolves. This ensures the generated code continues to align with your team's latest standards and practices.

Conclusion

By integrating Visual Copilot with Cursor, you'll eliminate the mind-numbing DOM manipulation and pixel-pushing that eats up your dev time. No more context-switching between Figma and your IDE to grab exact measurements, or debugging mysterious padding issues that make your implementation drift from the design specs.

Instead, you can turn designs into production-ready code with just a few clicks. Visual Copilot handles the heavy lifting of code generation, while Cursor's AI capabilities help you refine, optimize, and integrate that code seamlessly into your project.

It’s a workflow that frees you to focus on building features that delight your users—and shipping them faster than ever.

FAQ

What frameworks are supported? Visual Copilot supports React, Vue, Svelte, Angular, and more, while Cursor works with any language VS Code supports.
Does this work with my existing codebase? Yes! Both tools are designed to integrate seamlessly with your existing projects. You'll find it incredibly helpful in streamlining your workflow.

If you enjoyed this post, you might also like:

Cursor vs Windsurf vs GitHub Copilot

Vishwas — Thu, 09 Jan 2025 13:03:25 +0000

2024 was a wild year for AI. We saw some mind-blowing advancements that pushed the boundaries of what we thought was possible. Now, as we're stepping into 2025, it's clear that AI isn't just a fancy add-on for developers —it's becoming an essential part of how we code. AI coding assistants have quickly evolved from "neat trick" to "how did I ever code without this?".

While there are several players in this space, let’s zoom in on three major contenders: GitHub Copilot (the OG), Cursor (the one pushing boundaries), and Windsurf (the fresh face that's turning heads). They're all trying to do one thing: make our lives as devs a bit easier.

After spending time with Copilot, Cursor, and Windsurf, I thought it would be helpful to break down how they stack up against each other. Whether you’re curious about trying them out or just want to know what all the fuss is about, stick around. We’re going to dig into the key features that matter to us as developers.

Cursor AI

Cursor is an AI-powered code editor on steroids. It is a fork of Visual Studio Code, bringing advanced AI capabilities to a familiar interface.

Windsurf

Windsurf is an AI-powered IDE developed by Codeium. Similar to Cursor, it is built on top of Visual Studio Code.

GitHub Copilot

GitHub Copilot is an AI coding assistant developed by GitHub in collaboration with OpenAI. It uses machine learning to generate code suggestions and complete tasks directly in your code editor (Visual Studio Code, Visual Studio, Vim/Neovim, JetBrains IDEs).

All three offer a range of features designed to enhance productivity and support developers. Let's dive into the specific features and see how they compare.

Tab completion

You know that feeling when you're typing and the IDE just gets what you're trying to do? That's what we're talking about here.

Cursor

Cursor's tab completion is pretty wild. It'll suggest multiple lines of code, and it's looking at your whole project to make those suggestions. For TypeScript and Python files — when tab suggests an unimported symbol, Cursor will auto-import it to your current file. Plus, it even tries to guess where you're going to edit next.

Windsurf

Windsurf takes a dual approach to code completion. Its standard autocomplete suggests code as you type — tab to accept with Alt+] or Alt+[ for cycling through options. But the standout feature is Supercomplete, which predicts your next moves by analyzing code context before and after your cursor. It shows suggested changes in a diff box next to your code in the editor, and you press tab to accept these smarter suggestions.

Copilot

Copilot's more focused on inline suggestions. Tab to accept, and you're off to the races. It often predicts the next logical line of code based on the developer's style, which can significantly speed up coding tasks.

Need options? Hit Alt+] or Alt+[ to cycle through different suggestions, or Ctrl+Enter to see multiple alternatives in a new tab.

Code generation

This is where things get interesting. Imagine describing what you want your code to do, and boom — it's there.

Cursor

For inline generation, boilerplate code and edits, you can use the ⌘ + K feature. Impressively, it can work with multiple programming languages within the same project, adapting its suggestions accordingly.

Windsurf

Similar to Cursor’s Composer, Windsurf has this thing called Cascade with a write mode. You can use it to generate new code or change existing stuff. What's neat is that it keeps track of what you're doing in real-time.

For instance, if you rename a variable, it'll catch that and help you update it everywhere else in your project. Just type continue and it'll do its thing. For inline generation, boilerplate code and edits, you can use the Codeium Command feature ⌘ + K .

Copilot

Copilot's more about those inline suggestions, but Copilot Chat can handle bigger chunks of code if you ask it nicely. The CLI can also generate code if you describe what you want in plain English.

Chat

Sometimes you just need to ask a question. But is chatting with an AI actually helpful?

Cursor

Cursor's chat (⌘ + L) is context-aware, so it knows what you're working on. You can also drag and drop folders into Chat to provide additional context and apply code suggestions right from the chat, which is neat. It even supports images for visual context.

Windsurf

Windsurf’s Cascade has a Chat mode (⌘ + L) that is designed specifically for asking questions about your codebase and exploring general coding principles. What sets it apart is its real-time awareness of your actions — no need to repeatedly explain your context.

It works with uploaded images (up to 1MB) when using GPT-4 or Claude 3.5 Sonnet, and includes Memories to persist context across conversations.

Copilot

GitHub Copilot Chat is similar — you can ask it to explain code or suggest improvements. It's integrated right into VS Code, so it feels pretty seamless. They've been rolling out some new features lately, like better chat history, drag and & folders and ways to attach more context. But if you're already using Cursor, you might not find anything groundbreaking here.

Terminal

Terminal work can be a pain, especially with complex commands.

Cursor

Cursor extends its AI smarts to the terminal with ⌘ + K. It's pretty handy for translating vague ideas into actual commands. However, it hijacks the terminal's clear shortcut, which is just kind of annoying.

Windsurf

Simply press ⌘ + I in the terminal and describe what you want to do in plain English. You can express your intent naturally and let Codeium Command translate it into the correct command syntax.

Copilot

Copilot's got a slick terminal integration that lets you just hit ⌘ + I, type what you want, and get the command you need. No need to be a bash wizard anymore — just describe what you want to do in plain English, hit enter, and you're good to go. The ⌘ + enter shortcut to run the suggested command is very handy.

Context awareness

This is a big one. Can these tools actually understand your whole project, or are they just looking at the current file?

Cursor

Windsurf

Windsurf's got this thing called Cascade Memories that helps it remember stuff between sessions. So it's not starting from scratch every time you open your editor. Cascade also figures out what dev environment you're using, like what packages and tools you've got installed.

And if there are specific bits of code you want it to pay extra attention to, you can pin directories, files, repositories, or code context items — like functions or classes — as persistent context. Models reference these items for every suggestion, across Autocomplete, Chat, and Command.

Copilot

Copilot's pretty smart about context too. It looks at your open files to figure out what's going on and can pick up cues from your imports, comments, and function names. Use # to reference files or use the Attach Context button to pick exactly what you want Copilot to consider.

Multi-file support

Support for working across multiple files enables AI assistants to understand and modify complex project structures.

Cursor

Cursor's Composer can make changes across your entire project, which is pretty powerful. It understands how different files and components relate to each other. Composer can generate files for an entire app at once. I’ve personally used the feature to refactor a single file into more organized files and folders.

Windsurf

Windsurf’s Cascade also offers multi-file edits through context awareness, tool integration, and iterative problem-solving. The developer experience with multi-file is very clean and something I liked more than Cursor’s.

Copilot

Copilot's latest addition is its Edits feature. Just define your working set of files, describe what you want in plain English, and watch Copilot make changes across multiple files. You can review each change, accept what works, and iterate until you get it right.

In our testing, we found the feature to be surprisingly slow, sometimes getting stuck in infinite loading states or making incorrect file changes.

Pro tip: manually specify your files instead of relying on automatic detection — it's more work, but you'll get more reliable results.

AI agent

This is about having an AI assistant that can take control of your editor – running commands, managing files, and handling project-wide tasks.

Cursor

In Composer, press ⌘. and you've got yourself Cursor Agent, a super-powered AI assistant. It'll automatically grab context, run terminal commands, handle files, and even do semantic code search.

The catch? It only works with Claude models, and each operation counts against your quota. But when you need to get things done fast, it's an absolute game-changer.

Windsurf

Windsurf’s “Flow” technology allows the AI to maintain perfect sync with your workspace in real-time, enabling it to both assist and work independently on complex tasks without needing context updates. It's a more fluid way of collaborating with AI across your project.

Copilot

Nothing quite like this in Copilot's toolkit yet. While Copilot Chat can handle some similar tasks, it doesn't have the same level of integrated project-wide assistance.

Code review

We all benefit from a fresh perspective sometimes. AI-powered code review can provide automated feedback on code quality, potential bugs, and adherence to best practices.

Cursor

Cursor's new bug finder is pretty neat. It scans your code and branch changes against main, rating each potential bug it finds. One click and it'll fix things right in your editor. There's a catch though – you'll pay per click (we're talking a dollar or more each time).

Windsurf

Windsurf doesn’t have a dedicated feature to review your code. However, you can use Cascade to pair program and identify and potential issues.

Copilot

Copilot's just rolled out a code review feature that's pretty sweet (though still in limited release). Hit the review button in your Source Control tab, and it'll check your staged or unstaged changes. It drops suggestions right inline in your code that you can apply with one click. Skip what you don't like, accept what you do – simple as that.

Customization

One size doesn't fit all in coding. Can you bend these tools to fit your specific needs, or are you stuck with what they give you?

Cursor

Cursor lets you set custom instructions through settings and .cursorrules files. You can tailor it to your project's specific needs. You can take this to the next level by using Cursor Notepads which allow you to create reusable contexts for your development workflow.

Windsurf

Cascade offers flexible customization through both global and workspace-specific rules. Global rules can be set via the global_rules.md file and apply across all workspaces. For project-specific customization, you can create a .windsurfrules file in your workspace.

Copilot

Copilot supports custom instructions through a .github/copilot-instructions.md file, similar to Cursor's approach. This lets you specify your coding preferences and conventions, which Copilot will follow when generating code.

AI commit messages

Let's see how these tools handle git commits.

Cursor

AI-generated commit messages might not sound like much, but it saves me a couple of minutes every day and reduces the mental load of coming up with good commit messages. Now, Cursor does have this habit of being a bit...wordy with its commit messages. You can tweak that behavior by adding some instructions in the .cursorrules file.

Windsurf

Windsurf has no support for AI generated commit messages.

Copilot

Copilot does this pretty nice by default. Just hit the auto-generate commit message button and you're good to go. I've found their messages to be cleaner and more concise compared to Cursor's, though you'll probably still want to give them a quick review before committing.

IDE integration

Nobody wants to switch between a bunch of tools.

Cursor

Cursor is its own thing — it's built on top of VS Code, so it'll feel familiar if you're used to that.

Windsurf

Windsurf is in a similar boat. It’s built on top of VS Code and will feel familiar.

Copilot

Copilot on the other hand integrates with various IDEs — VS Code, IntelliJ, Neovim. The CLI works in any terminal.

Models

Cursor

Cursor offers a range of models, including GPT-4o, o1, Claude 3.5 Sonnet, and their custom cursor-small model. You can choose based on what you need — speed or capability.

Windsurf

Cascade provides a Base Model (Llama 3.1 70B) for all users, optimized for speed and accuracy. Paying users get access to the Premier Model (Llama 3.1 405B) for highest performance, plus GPT-4 and Claude 3.5 Sonnet with image support. Models can be switched via the selection menu below chat.

Copilot

Copilot has expanded its model offerings significantly. You can now choose between different models including Claude 3.5 Sonnet, o1, and GPT-4o. This flexibility lets you optimize for different tasks – whether you need quick code completions or more complex reasoning and understanding.

Pricing

Let's talk money. How do their pricing models compare?

Cursor

Cursor has a free Hobby tier with limited features, a Pro tier for $20/month, and a Business tier for $40/user/month.

Windsurf

Windsurf has a free tier with base model access, a Pro tier for $15/month, and a Pro Ultimate tier for $60/month.

Copilot

Copilot now offers a free tier with limited features (like 12,000 completions per month), while Pro plans start at $10/month. For teams, there's Business at $19/user/month and Enterprise at $39/user/month.

Wrapping up: and the winner is...

After diving deep into both Cursor, Windsurf and GitHub Copilot, it's time to pick a champ. And drum roll, please...Cursor takes the crown, though Windsurf makes it a much closer race than you might expect.

Now, don't get me wrong, both Windsurf and Copilot are solid tools. Copilot is great for quick suggestions across different IDEs, and Windsurf impresses with its polished UI and intuitive workflow. Windsurf's Cascade feature even offers sophisticated real-time collaboration, comprehensive project understanding, and seamless context awareness that rivals Cursor's capabilities.

Here's why Cursor still edges out:

Reliability: While both offer similar feature sets, Cursor consistently delivers more accurate and contextually relevant results.
Power features: Small but significant additions like auto-generated commit messages and advanced bug finding capabilities give it an edge.
Maturity: As a more established tool, Cursor has had time to iron out edge cases and optimize its workflows.

The gap between Cursor and Windsurf is narrow and closing fast. While Cursor wins for now based on slightly better overall results and stability, Windsurf's rapid development and polished experience make it a compelling alternative that could easily take the lead with a few refinements. If you want to really push the boundaries of what AI can do for your coding, Cursor is where it's at.

Of course, the best tool is the one that works for you. So give them all a spin if you can. But if you're asking me? Cursor's still the one to beat right now — just by a smaller margin than you might think.

If you enjoyed this post, you might also like:

React + AI Stack for 2025

Vishwas — Fri, 03 Jan 2025 11:51:31 +0000

React's been around for a while now, and it's still going strong. But the tech world doesn't stand still, and AI is shaking things up in a big way.

Let's talk about what a React + AI stack might look like in 2025. If you're planning a new project or thinking about upgrading your current setup, this might give you some ideas.

Core: React + TypeScript

Look, I know some of you still resist TypeScript, but it's like peanut butter and jelly with React at this point. It catches mistakes early, makes refactoring less painful, supercharges your IDE's autocomplete, and gives new devs on your team built-in docs. Plus, all those fancy AI coding assistants? They work way better with strongly-typed code.

Meta framework: Next.js

Next.js is the Swiss Army knife of React development. It does everything, and it does it well. It's got full React 19 support, integrated routing and API management, and built-in performance optimizations.

Now, I'm not saying it's the only option. Remix is still awesome for full-stack apps, and there's this new kid on the block called Tanstack Start that's doing some cool things so make sure to keep an eye out. And hey, if you just need routing, React Router V7 was recently launched.

Styling: Tailwind CSS + shadcn/ui

I used to be a Tailwind skeptic, but experience changed my mind. Pair it with shadcn/ui and you've got a styling powerhouse. AI tools can generate precise Tailwind classes, shadcn/ui gives you accessible components out of the box, your bundle stays optimized, and you can prototype and iterate quickly while keeping designs consistent.

Client-state management: Zustand

For client-side state, Zustand is the way to go. It's got zero boilerplate, a tiny bundle size, and a simple but powerful API that's easy to learn. You can create a store with just a few lines of code, which is pretty neat.

Server-state management: TanStack Query

TanStack Query handles all the annoying parts of server state. It auto-refreshes data, has smart caching that actually works, handles real-time updates without headaches, does optimistic updates that feel magical, and has devtools that'll make you wonder how you ever lived without them.

Animation: Motion

For animations in React, Motion is your best bet. It's got declarative animations that are easy to understand, gesture support that just works, advanced features like shared layout animations, and it's perfect for everything from simple transitions to complex motion designs.

Testing: Vitest, React Testing Library & Playwright

We're not skimping on testing. Here's the trifecta: Vitest is faster than Jest and works with ES modules out of the box. React Testing Library is still great for component testing, helping you catch accessibility issues and test like a user would. For end-to-end testing, Playwright is awesome, handling multiple browsers, visual testing, network stuff, and mobile device emulation without the flaky tests.

Table: TanStack Table

If you're doing anything with tables, Tanstack Table is a must. It's got type-safe tables, virtual scrolling for tons of data, sorting and filtering that are easy to use, flexible column setups, and it performs amazingly well even with massive datasets.

Forms: React Hook Form

Forms in React used to be a pain, but not with React Hook Form. It's built for speed, makes validation a breeze when using Zod, works great with TypeScript, has a tiny bundle size, and an API that's actually intuitive.

Database: Supabase

Supabase has evolved into a full-blown backend with some cool AI features. It's got vector similarity search for AI stuff, built-in support for storing embeddings, can turn plain English into SQL (yeah, really), has real-time subscriptions that just work, and edge functions for when you need to do AI processing close to your users.

Mobile development: React Native

React Native is the powerhouse for cross-platform mobile development. Write once, run everywhere, get native performance when you need it, enjoy hot reloading for rapid development, tap into a huge ecosystem of libraries and tools, and integrate with native modules when you need platform-specific features.

Component development: Storybook

Storybook is essential for building and testing components in isolation. It's perfect for component-driven development, has a built-in testing environment, generates great documentation, supports visual regression testing, and has collaboration features for designers and developers.

Hosting: Vercel

Vercel is the go-to for hosting React apps. You can deploy without thinking about it, use edge functions for extra speed, get built-in analytics that are actually useful, and it works like a dream with Next.js. Plus, your app is fast everywhere thanks to their global CDN.

Now, here's where things get interesting. These tools cost money, but they're worth it:

Design to code: Visual Copilot

Visual Copilot is an AI-powered design-to-code Figma plugin that turns your Figma designs into React code for with just one click. You can choose your styling library (like Tailwind or Styled Components), map your own components (like MaterialUI), and it'll generate code that actually fits your project. You can tweak the generated code with custom prompts, and it learns your coding style if you feed it some of your code samples.

AI code editor: Cursor

Cursor makes coding feel like you've got superpowers. It doesn't just suggest code; it understands your whole project. The Tab feature is like mind-reading for code completion, while ⌘ K is your on-demand coding wizard. It's got a smart terminal, context-aware chat, and can even generate entire apps with its Composer feature. Cursor can even index and learn the docs of your favourite React libraries. It is particularly great at generating React + TypeScript + Tailwind CSS code.

Prompt to build: Bolt

Bolt is a browser-based development platform that's pretty wild. It turns your words into working React apps. You just describe what you want, and boom – you've got a full-stack application right in your browser. No need to set up a local environment or fiddle with complicated tools. It's got some neat tricks: real-time preview as you work, automated debugging, and one-click deployment to places like Netlify. You can go from idea to live app without ever leaving your browser.

Wrapping up

So there you have it - the React + AI stack for 2025. Is it overkill for some projects? Probably. But if you're building something serious and want to leverage all the cool AI stuff out there, this stack is hard to beat.

Remember, the best tools are the ones you actually use. So don't feel like you need to adopt everything here all at once. Start small, see what works for you, and build from there.

If you enjoyed this post, you might also like:

Cursor AI: 5 Advanced Features You're Not Using

Vishwas — Wed, 18 Dec 2024 11:50:21 +0000

If you've been using Cursor AI code editor, you're probably already blown away by tab completion, code generation, chat, and the composer. These features alone can make you feel like you've got superpowers.

But here's the thing, there's more. A lot more. Cursor has some seriously cool advanced features that most people aren't using yet. In this post, I'm going to show you five of them.

If you're new to Cursor, check out my posts on Cursor AI for developers and Cursor vs. GitHub Copilot to get up to speed.

The Cursor agent

First up is the Cursor Agent. It's like having a super-smart coding assistant that you can summon with ⌘. (Command + period). Here's what it can do:

Pull in context automatically (try @Recommended)
Run terminal commands.
Create and modify files.
Do semantic code search.
Handle file operations.

Right now, it only works with Claude models, and each tool operation counts as a separate request in your quota.

Cursor rules

Next up is the .cursorrules file. It's a way to give Cursor project-specific instructions. Here's what you need to know:

Put it in your project's root directory.
It provides instructions for Cursor Chat and Ctrl/⌘ K commands.
It's like the "Rules for AI" in Cursor's settings, but just for your project.

Here’s a sample .cursorrules file you could define in a Next.js project:

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind CSS.

Code Style and Structure
- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Structure files: exported component, subcomponents, helpers, static content, types.

Naming Conventions
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.

TypeScript Usage
- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use maps instead.
- Use functional components with TypeScript interfaces.

Syntax and Formatting
- Use the "function" keyword for pure functions.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.

UI and Styling
- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

Performance Optimization
- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.

Key Conventions
- Use 'nuqs' for URL search parameter state management.
- Optimize Web Vitals (LCP, CLS, FID).
- Limit 'use client':
  - Favor server components and Next.js SSR.
  - Use only for Web API access in small components.
  - Avoid for data fetching or state management.

Follow Next.js docs for Data Fetching, Rendering, and Routing.

This is super useful when you want to give Cursor some context about your project's specific requirements or conventions. It's worth noting that while .cursorrules is cool, Cursor also has Notepads, which can do even more. Speaking of which...

Notepads

Notepads in Cursor are like supercharged sticky notes for your code. They bridge the gap between composers and chat interactions.

Here's what makes them special:

You can share them between different parts of your dev environment
Reference them using the @ syntax
Attach files to them
Use them as dynamic templates for various scenarios

To create a Notepad in Cursor, click the "+" in the Notepads section, give it a meaningful name, and add any necessary content, context, or files. Reference Notepads in composers or chats using the @ symbol.

Notepads are great for documenting project architecture decisions, development guidelines, reusable code templates, team-specific rules and frequently referenced materials.

When you're creating a Notepad, try to use clear headings, markdown for readability, and include examples or file attachments as needed.

Notepads are still in beta, but they're already a super flexible way to enhance your workflow.

Bug finder

Cursor's got this neat new bug finder feature. It's pretty cool, even if it comes with a slightly aggressive warning message and a pay-per-click pricing model (yeah, you might shell out a buck or more just to use it).

Here's how it works: it scans through all your code and recent changes. If you're on a feature branch, it'll compare that to main, looking for potential bugs.

For each bug it finds, you get a confidence rating and a quick overview. Then it's just a click to fix it in the editor. Cursor fills in all the details in the prompt and generates updates, just like you're used to.

It's not perfect, but it's a pretty handy tool to have in your back pocket.

@web symbol

With @Web, Cursor constructs a search query based on the query and the context you’ve provided, and searches the web to find relevant information as additional context. This is particularly useful for finding the most up-to-date information.

The @Web symbol is like having a research assistant built into Cursor. Here's how it works:

You give it a query and some context.
Cursor turns that into a web search.
It searches the internet for relevant info.
The search results get added to your query's context.

This is super useful when you're working with new tech or anything where you need the latest info.

Bonus: AI commit messages

Here's a little bonus feature: AI-generated commit messages. It might not sound like much, but it saves me a couple of minutes every day and reduces the mental load of coming up with good commit messages.

Now, Cursor does have this habit of being a bit...wordy with its commit messages. But hey, you can tweak that behavior by adding some instructions in a .cursorrules file.

Convert Figma designs to code in Cursor

Let's talk about turning Figma designs into code using Builder.io's Visual Copilot plugin. It's a game-changer when you're working in Cursor.

Here's what you can do:

Export your Figma design using the Visual Copilot plugin.
Copy the generated command from Builder.io.
Paste that command right into Cursor's terminal and generate the code

From there, you can tell Cursor to add interactivity, animations, event handlers and more. It'll generate all the code you need.

The result? You get a pixel-perfect UI that uses your components as expected. It's pretty slick. This whole process — from design to functional code — is way faster than doing it manually.

The best part? This workflow fits right into Cursor's other AI features. You can use the agent to add logic, make your updates and auto-generate a commit message.

Cursor AI FAQ

Here are some commonly asked questions about Cursor AI:

Does Cursor work with all programming languages?

Pretty much. It's great with the usual suspects like Python, JavaScript, and Java, but it'll work with most languages VS Code supports.

Do I need an OpenAI API key to use Cursor?

Nope. Cursor works straight out of the box. No extra setup needed.

Can Cursor handle both easy and hard coding tasks?

Absolutely! It'll help with simple functionality, but it can also tackle bigger jobs like refactoring huge codebases or writing entire functions.

Is Cursor good for beginners?

Definitely. If you're just starting out, its AI assistance can help explain concepts, suggest best practices, and help you learn as you go.

How does Cursor deal with existing code?

Pretty well, actually. It can understand and work with code you've already written. It can help you manipulate code, refactor, and even explain complex sections of your codebase

Can Cursor make a whole app from scratch?

It's not magic — it can't conjure up a full app out of thin air. But it can speed things up a lot. With the right prompts, you can go from a simple idea to basic working app pretty quick.

Will Cursor mess with my existing workflow?

Cursor is designed to seamlessly fit into your development process. It's built on top of VS Code, so if you're used to that, you'll be fine.

Can Cursor help with unit testing?

Yes, Cursor can assist in writing and improving unit tests. It can suggest test cases, help with test setup, and even identify areas of your code that might need better test coverage.

What are the pricing options for Cursor?

Cursor offers a free Hobby tier with limited features, a Pro tier at $20/month with expanded capabilities, and a Business tier at $40 per user/month for advanced features and team management.

AI Pair Programming in 2025: The Good, Bad, and Ugly

Vishwas — Mon, 16 Dec 2024 13:00:10 +0000

AI in programming isn't some far-off sci-fi dream anymore. With tools like Visual Copilot, you can convert Figma designs into code in one click or prototype features in a minute using Cursor. What began as basic code completion is now reshaping how we build software, offering context-aware code completions and even assisting with complex architecture.

AI has become as common in our IDEs as syntax highlighting. And just like any major shift in tech, it's bringing a mix of exciting possibilities and potential challenges.

Let’s explore what’s working, what’s not, and what’s downright concerning about AI pair programming.

The good

When it works, AI pair programming tools can be pretty sweet:

Speed boost: AI can instantly provide accurate code suggestions, handle code generation, and even implement entire functions based on natural language descriptions. Software developers focused on writing code can ship faster than ever before.
Cleaner code: Large Language Models (LLM) have been trained on a vast amounts of public code. They can suggest patterns that improve code quality and make your code cleaner and easier to maintain thereby reducing time spent debugging code. AI tools are particularly helpful when working with multiple files in complex projects.
Learning on the job: Junior developers can learn best practices in real-time as AI powered code assistants explain their suggestions. Even experienced developers working in multiple languages can discover new patterns and techniques without spending hours reading documentation.
Cost-effective (maybe): While the initial investment might make your CFO nervous, over time, organizations are seeing reductions in their software development lifecycle and fewer bugs in production.
Goodbye, grunt work: Repetitive coding tasks like writing unit tests, CRUD operations, and documentation can be delegated to AI, letting you focus on the more creative aspects of software development.

The bad

AI pair programming has its perks, but it also brings along some challenges to watch out for:

Over-reliance: It’s tempting to let the AI coding assistant handle everything, but this can lead to a shallow understanding of the codebase. If you're just accepting every piece of AI generated code into your existing code base without understanding the logic, you’ll face serious issues when things inevitably break.
Learning curve: Knowing how to interact with your AI pair programmer, when to trust its suggestions, and when to ignore them is a skill in itself. “You get what you prompt” is the rule, and there’s no shortcut around it.
Contextual limitations: Even advanced language models can struggle with domain-specific challenges, complex business logic, or new algorithms. When this happens, the code written by AI might be irrelevant or even counterproductive, slowing down progress.
Privacy concerns: Many organizations are grappling with how to leverage artificial intelligence capabilities without compromising intellectual property. The potential for code snippets to be used in training future AI models raises serious questions about ownership and confidentiality.

The ugly

source

Certain aspects of AI pair programming reveal deeper, systemic implications:

Job market impact: AI can empower senior developers but might leave junior developers without the foundational learning opportunities they need, widening the skill gap and creating barriers to entry for newcomers.
Ethical implications: Questions around code attribution, licensing, and intellectual property rights become increasingly murky when AI generates or assists in code creation.
Bias perpetuation: AI trained on publicly available code and older codebases risks reinforcing outdated practices, ethical biases, and security vulnerabilities present in its training data, along with potentially suggesting discriminatory code patterns
AI agents: The evolution of AI agents toward autonomy — moving from reactive assistants to proactive collaborators — is exciting but raises ethical and practical concerns. Autonomous debugging and task execution offer promise, but boundaries must be set for responsible use.

AI coding tools for pair programming

If you're thinking about diving into AI pair programming, here are some tools that can genuinely make a difference.

ChatGPT and Claude

Think of ChatGPT and Claude as the Swiss Army knives of coding assistants. Whether you're stuck on a weird bug, need a quick code snippet, or need code explanation that breaks things down like you're five, these tools are there for you.

GitHub Copilot

As one of the first AI coding assistants to gain mainstream traction, GitHub Copilot transformed the development process by integrating powerful machine learning capabilities directly into Visual Studio Code editor. It offers high quality code completions, contextual suggestions based on your project, and support for various programming languages like C++, Python, JavaScript etc.

Visual Copilot

Got a Figma file? Visual Copilot turns designs into responsive, production-ready code for HTML, React, Angular, Vue and more—letting you tweak the design or code to suit your needs. Instead of generating UI from scratch, it helps you leverage existing designs to accelerate development and maintain consistency.

Cursor

Imagine if your IDE got bitten by a radioactive AI. That's Cursor. With features like built-in AI chat, code completion, AI agent and automated debugging, Cursor redefines how you interact with code.

Bolt

When you want to build a full-stack web app without the hassle of setting up a local environment, Bolt is your go-to. Just describe what you want, and boom - you've got an app. Plus, you can see what you're building in real-time and deploy it without much fuss.

These tools aren’t flawless, but they’re designed to help you write better code faster, whether you're debugging, building new features, or transforming designs into functional apps.

The bottom line

The future of AI pair programming will not be defined by whether we use AI, but by how we use it. At Builder.io, we've been messing around with AI tools in our dev process for a while now. We've plugged them into everything from quick prototypes to shipping actual features.

Has it been a game-changer? Yeah, pretty much. We're moving faster, our code's more consistent, and our devs get to focus on the tricky stuff instead of writing boring boilerplate all day.

But it hasn't all been smooth sailing. We've learned that AI's great at some things, but it's not about to replace good old human brainpower. It's more like a really smart intern — helpful when you know how to use it, but you wouldn't let it run the whole show.

The key? Use AI to make your skills better, not to do your thinking for you. At the end of the day, we're still the ones responsible for building stuff that actually solves problems.

So yeah, the future of coding isn't about AI taking over. It's about figuring out how we can team up with AI to build cooler stuff, faster. And that's pretty exciting, if you ask me.

Figma to React Native: Convert designs to clean code in a click

Vishwas — Fri, 08 Nov 2024 13:17:06 +0000

Converting Figma designs into React Native code remains a frustrating challenge for developers everywhere. Each Figma file takes many days to convert, making it hard for teams to focus on improving performance and building what truly matters.

Now, with AI technology becoming more advanced, it's time to leverage it as part of the solution to this challenge. At Builder.io, we've done just that with Visual Copilot. In this blog post, we'll explore how converting Figma designs to React Native code using our AI-powered toolchain can save hours of manual work and streamline the workflow for mobile app development.

What is Figma?

Figma is a collaborative interface design tool with an emphasis on real-time collaboration. It's known for its user-friendly interface and strong design capabilities, making it a favorite among designers. Figma components and design files form the basis for creating pixel-perfect designs and prototypes which are crucial for a seamless handoff to development teams.

One of Figma's powerful features is its dev mode, which means developers can inspect designs and extract valuable information for implementation. Many teams use Figma to create UI kits and design systems for their projects. Figma's extensibility through plugins further enhances its capabilities, allowing users to customize their workflow.

What is React Native?

React Native is an open-source mobile application development framework created by Facebook that enables developers to build mobile apps for iOS and Android using JavaScript and React. It allows for cross-platform development, meaning you can write code once and deploy it on both major mobile platforms, significantly reducing development time and resources. With more than 100k GitHub stars and a huge community, it is one of the leading frameworks for mobile app development.

The framework uses native components and the platform's standard rendering APIs, resulting in apps with a native look and feel and generally better performance compared to hybrid apps. React Native leverages the popular React library, making it accessible for web developers familiar with React. It also offers features like hot reloading for real-time code changes and provides JavaScript interfaces for accessing platform-specific APIs, allowing developers to tap into device capabilities like cameras and sensors.

Visual Copilot: AI-powered Figma to React Native plugin

At Builder.io, we've created Visual Copilot — an AI-powered Figma to code toolchain that leverages AI to accurately convert Figma designs into clean, efficient React Native code.

One-click conversion

Transform complex Figma designs into high-quality React Native components with just a single click.

Seamless integration

Getting started is as simple as copying the generated code directly from Visual Copilot into your React Native project — no complex setup or integration required.

Customizable output

Iterate with custom prompts and structure the code to your preferences post-generation. This feature allows developers to fine-tune the output to match their specific project needs and coding standards.

Styling support

Visual Copilot supports popular React Native styling solutions like StyleSheet and Tailwind CSS.

Cross-platform compatibility

Generate code that works seamlessly on both iOS and Android platforms, leveraging React Native's cross-platform capabilities.

With React and Angular, Visual Copilot also supports mapping components and design tokens in a Figma design file to UI components in code.

How Visual Copilot uses AI to generate clean React Native code

The core of Visual Copilot is built on advanced AI models and a specialized compiler:

Initial AI Model: Trained on millions of design-to-code data points, our initial model transforms flat design structures into hierarchical code representations, even for complex layouts without auto layout.
Specialized Compiler: Our open-source compiler, Mitosis, takes the structured hierarchy from the AI model and compiles it into React Native code, ensuring proper component structure and styling.
Fine-tuning LLM: A finely-tuned Large Language Model (LLM) refines the code to match React Native best practices, your specific styling preferences, and any custom requirements you may have.

This multi-stage process ensures that the generated code is not just functional, but also adheres to best practices and your team's coding standards.

Converting Figma designs to React Native code

Getting started with Visual Copilot is straightforward:

Launch the Visual Copilot Figma plugin.
Select a layer in your Figma file and preview the selected layer.
Click the “Export to code” button.
Review the generated code in the preview window.
Copy the code into your React Native project.
Make any necessary adjustments for specific React Native functionalities or custom requirements.

Best practices for using Figma with Visual Copilot

To get the most accurate and efficient conversions, follow these best practices when designing in Figma:

Use auto layout: Implement Figma's auto layout feature to create responsive designs that translate well to React Native's flexbox-based layout system.
Name layers meaningfully: Use clear, descriptive names for your layers and components. This helps our AI understand the purpose of each element and generate more accurate code.
Use components: Leverage Figma's component system to create reusable UI elements. This translates well to React Native's component-based architecture.
Consider platform differences: While designing, keep in mind the differences between iOS and Android. Our tool will try to generate platform-specific code where necessary.
Organize your designs: Group related elements and use a clear hierarchy in your Figma files. This organization will be reflected in the generated React Native component structure.
Use vector networks for icons: When possible, use vector networks for icons and simple illustrations. These translate more efficiently to React Native's SVG components.
Define images explicitly: For complex designs, use Figma's export feature to help the AI model recognize elements as an image or an icon.
Minimize overlaps and intersections: Align boxes only with related components and avoid unnecessary overlapping to prevent undesired results.
Avoid translucent effects: Stick to fully opaque colors, as transparency can be challenging for AI to interpret accurately.

Conclusion

Visual Copilot represents a significant leap forward in bridging the gap between design and development in the React Native ecosystem. By leveraging AI to automate the conversion of Figma designs to React Native code, we're enabling developers to focus on what truly matters: creating exceptional mobile experiences.

Whether you're working on a startup MVP or a large-scale enterprise application, Visual Copilot can significantly reduce your development time, streamline your workflow, and help you bring your mobile app ideas to life faster than ever before. We're excited to see how it will transform the mobile development landscape, making the journey from pixel-perfect designs to fully functional React Native apps smoother and more efficient than ever before.

Cursor vs GitHub Copilot

Vishwas — Wed, 25 Sep 2024 12:54:54 +0000

Let's talk about AI coding assistants. They're basically the new hot topic in dev tools, and for good reason. They're designed to help developers write code more efficiently and with fewer errors. They're pretty dang cool.

While there are quite a few players in this space, let's zoom in on two of the major contenders. In one corner, we've got GitHub Copilot, the established player. In the other, Cursor, the new kid on the block shaking things up. Both are trying to make our lives easier as devs.

After spending some time with Copilot and Cursor, I thought it might be useful to break down how they stack up against each other. Whether you're curious about trying them out or just want to know what all the fuss is about, stick around. We're going to dig into some of the key features that matter to us as developers.

Cursor AI

Cursor is basically an AI-powered code editor on steroids. It is a fork of Visual Studio Code, bringing advanced AI capabilities to a familiar interface.

GitHub Copilot

Both Cursor AI and GitHub Copilot offer a range of features designed to enhance productivity and support developers. Let's dive into the specific features and see how these two compare.

The August 2024 update to VS Code introduced several new features to GitHub Copilot. However, many of these additions are still in the experimental phase and may not always deliver consistent results yet.

Tab completion

You know that feeling when you're typing and the IDE just gets what you're trying to do? That's what we're talking about here.

Cursor

Cursor's tab completion is pretty wild. It'll suggest multiple lines of code, and it's looking at your whole project to make those suggestions. It even tries to guess where you're going to edit next. Plus, it'll catch and fix mistakes on the fly.

Copilot

Code generation

This is where things get interesting. Imagine describing what you want your code to do, and boom — it's there.

Cursor

Cursor has this thing called Composer that can create entire applications based on your description. It's looking at your whole project when it generates code, so it tries to match your style. You can access it with ⌘ + I for a floating window or ⌘ + SHIFT + I for full-screen mode. For inline generation, boilerplate code and edits, you can use the ⌘ + K feature. Impressively, it can work with multiple programming languages within the same project, adapting its suggestions accordingly.

Copilot

Copilot's more about those inline suggestions, but Copilot Chat can handle bigger chunks of code if you ask it nicely. The CLI can also generate code if you describe what you want in plain English.

Chat

Sometimes you just need to ask a question. But is chatting with an AI actually helpful?

Cursor

Cursor's chat (⌘ + L) is context-aware, so it knows what you're working on. You can apply code suggestions right from the chat, which is neat. It even supports images for visual context.

Copilot

GitHub Copilot Chat is similar — you can ask it to explain code or suggest improvements. It's integrated right into VS Code, so it feels pretty seamless. They've been rolling out some new features lately, like better chat history and ways to attach more context. But if you're already using Cursor, you might not find anything groundbreaking here.

Terminal

Terminal work can be a pain, especially with complex commands.

Cursor

Cursor extends its AI smarts to the terminal with ⌘ + K. It's pretty handy for translating vague ideas into actual commands.

Copilot

Copilot's got a CLI that does something similar. It can generate shell commands based on what you're trying to do, which is pretty cool if you can never remember the exact syntax for that one command you use once a year.

Context awareness

This is a big one. Can these tools actually understand your whole project, or are they just looking at the current file?

Cursor

Cursor's pretty impressive here. It looks at your entire codebase and project structure. You can even use @ symbols to reference specific parts of your project, like @Files, @Folders, @Code, and more.

Copilot

With the recent update, when using Quick Chat, you can now use the Attach Context action to attach context like files and symbol to your Copilot request.

Multi-file support

Support for working across multiple files enables AI assistants to understand and modify complex project structures.

Cursor

Copilot

Copilot's more limited here. It's mainly focused on the current file, though it can suggest imports from other files.

Code review

We all need a second pair of eyes sometimes. AI-powered code review can provide automated feedback on code quality, potential bugs, and adherence to best practices.

Cursor

Cursor has an AI Review tool that analyzes your changes. It'll give you feedback on code quality, potential bugs, that sort of thing. You can even customize what it looks for.

Copilot

Copilot doesn't have a dedicated review feature, but you can use Copilot Chat to explain code and suggest improvements.

IDE integration

Nobody wants to switch between a bunch of tools.

Cursor

Cursor is its own thing — it's built on top of VS Code, so it'll feel familiar if you're used to that.

Copilot

Copilot on the other hand integrates with various IDEs — VS Code, IntelliJ, Neovim. The CLI works in any terminal.

Customization

One size doesn't fit all in coding. Can you bend these tools to fit your specific needs, or are you stuck with what they give you?

Cursor

Cursor lets you set custom instructions through settings and .cursorrules files. You can tailor it to your project's specific needs.

Copilot

A recent experimental setting lets you define a set of instructions that are added to every Copilot request that generates code but seems to be flaky at the moment.

Models

Cursor

Cursor offers a range of models, including GPT-4, Claude 3.5 Sonnet, and their custom cursor-small model. You can choose based on what you need — speed or capability.

Copilot

Copilot uses OpenAI's Codex model. They're always updating it, but you don't get to choose which model you're using. The latest model integrated is OpenAI o1-preview.

Pricing

Let's talk money. How do their pricing models compare?

Cursor

Cursor has a free Hobby tier with limited features, a Pro tier for $20/month, and a Business tier for $40/user/month.

Copilot

Copilot is $10/month or $100/year for individuals. They've got enterprise pricing too if you're part of a bigger org.

Wrapping up: and the winner is...

After diving deep into both Cursor and GitHub Copilot, it's time to pick a champ. And drum roll, please...Cursor takes the crown. Its unique features make it a hard sell to beat in the world of AI-assisted coding.

Now, don't get me wrong, Copilot is a solid tool. It's great for quick suggestions and it plays nice with a bunch of different IDEs. But Cursor? It's just operating on another level.

Here's why Cursor wins out:

Project-wide smarts: Cursor doesn't just look at your current file, it understands your entire project. That's huge.
Composer: Being able to generate entire app structures or orchestrate changes across multiple files? That's some next-level stuff.
Customization: With Cursor, you can tailor the AI to your specific needs. That .cursorrules file is a game-changer.
AI review: Having an AI that can review your code changes and give you feedback? That's like having a tireless senior dev on your team.
Model choices: Cursor lets you pick the AI model that fits your needs. Sometimes you need the big guns, sometimes you need speed. Cursor's got you covered either way.

Copilot is still a powerful tool, and if you're looking for something that's easy to integrate into your existing workflow, it might be the way to go. Its code completion capabilities are certainly impressive. But if you want to really push the boundaries of what AI can do for your coding, Cursor is where it's at.

Of course, the best tool is the one that works for you. So give them both a spin if you can. But if you're asking me? Cursor's the one to beat right now.

Convert Figma to Code with AI

Vishwas — Tue, 24 Sep 2024 12:38:55 +0000

What if the world of development could change so that designers dedicate their expertise solely to design, without worrying about the pixel-perfect accuracy of the final product?

What if developers could spend their time improving the app's core functions, making it run smoother, and adding new features, rather than being bogged down by the task of turning designs into working code?

What if businesses could operate in a way where meeting project timelines is the norm, not the exception, devoid of the usual delays and extra work that typically accompany the design-to-code process?

At Builder.io, we're turning these "what ifs" into reality with our AI-powered tool, Visual Copilot. This blog post will guide you through how Visual Copilot transforms the workflow for designers and developers, making the journey from concept to product smoother and more efficient.

Visual Copilot: AI-powered Figma to code plugin

Visual Copilot is an AI-powered Figma to code toolchain that leverages AI models and an open-source compiler, Mitosis, to transform flat designs into code hierarchies, refined by an LLM for framework and styling preferences.

With Visual Copilot, you can convert Figma designs into React, Vue, Svelte, Angular, Qwik, Solid, React Native or HTML code in real-time, with one click on the Figma plugin. It uses your choice of styling library, including plain CSS code, Tailwind, Emotion, Styled Components and you can use AI to iterate the code for your preferred CSS library or JavaScript meta-framework (such as Next.js).

Visual Copilot features

One-click conversion

With just one click, Visual Copilot turns your Figma designs into high quality code for your chosen framework and styling solution. Instead of spending time creating and iterating on prototypes, Visual Copilot enables teams to leap directly to generating live, interactive previews of websites. This significantly speeds up app development, enabling a much faster transition from design to a functional webpage or mobile experience.

Bring your own components

With Visual Copilot, you can leverage the component mapping feature to create a direct link between the design components in your Figma file and their corresponding code components ensuring a consistent output in your projects. Going from Figma to code should not just be about translating designs into code; it should be about translating them into your code.

Automatic responsiveness

Visual Copilot automatically adjusts components to fit all screen sizes, removing manual adjustments for mobile responsiveness. Even if your designs don't strictly follow Figma's auto-layout conventions, Visual Copilot intelligently interprets and adapts your designs as the screen size changes.

Framework and styling support

Visual Copilot works with React, Vue, Svelte, Angular, Qwik, Solid, and HTML, and integrates smoothly with CSS, Tailwind, Emotion, Styled Components, and Styled JSX. It supports multiple frameworks, ensuring the generated code is clean, readable, and integrates seamlessly into your existing codebase.

Customizable code

After code generation, you can refine it with custom prompts to align with your preferences, ensuring consistency in your codebase, whether it's using specific components or iterating hard-coded content to use props.

Match your style

Visual Copilot isn't just about converting designs to clean code; it's about making the code feel like it's yours. By training the system with your code samples, Visual Copilot ensures the generated code aligns with your unique style and standards, promoting uniformity across your entire codebase.

Sync to your codebase

Getting started is as easy as copying the code directly from Visual Copilot — no integration is required. For a smoother workflow, automatically sync the generated code with your codebase, eliminating the need for repetitive copying and pasting.

Copy paste designs to Builder

Easily import entire design sections or individual components into Builder with a simple copy from Figma and paste, maintaining a smooth workflow as your designs evolve. This feature is engineered for spontaneous design iterations simplifying the handoff process from designers to developers is smooth.

Component set generation (coming soon)

Developers can select a component set in Figma (no matter how many variations it has), click a button in the Visual Copilot Figma plugin, and instantly generate a new dynamic component with props in seconds.

Prompt to design (coming soon)

With Prompt-to-Design in the Visual Copilot Figma plugin, designers can type a prompt to generate entire pages, layouts, and experiences in Figma using their design system and Figma components. And, it isn’t limited to generating new designs; you can modify existing designs.

To get on the waitlist for early access, fill out the form here.

Convert Figma designs to clean code in a few steps

Getting started with Visual Copilot is straightforward:

Open the Visual Copilot Figma plugin.
Select a layer or design in your Figma file.
Click the Generate code button.
Copy the generated code into your project.
Customize the code to support animations, custom fonts, svgs, or other required functionality with JavaScript.

Visual Copilot in action: design to code conversion examples

The following tutorials demonstrate how designers and developers can easily move from Figma design files to production-ready code.

Features section in 50 seconds: Figma to HTML + CSS

Material UI Login card in 60 seconds: MUI Figma components mapped to MUI React components

Conclusion

Builder.io's Visual Copilot is a design and developer-friendly AI tool that significantly accelerates the process of converting Figma designs to code. It fosters a collaborative environment, ensures a seamless transition from design to code, and promotes an efficient web development workflow.

You can seamlessly export Figma designs into your project's source code quickly and efficiently.

Explore the docs to discover more about Visual Copilot's capabilities and how to integrate them into your workflow.