DEV Community: Builder.io

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.

How I use Cursor (+ my best tips)

Steve Sewell — Wed, 12 Mar 2025 08:41:11 +0000

I was just chatting with one of our senior engineers, and he mentioned that he barely types code anymore—he just types into the agent box in Cursor.

I told him that is basically what I do these days as well (~80% of the time).

This only works well for complex tasks if you know what you are doing, so let's get into how exactly I use Cursor and my best tips.

Using YOLO mode

One of the coolest features that people often overlook in Cursor is letting the agent write code until it verifies the code is correct beyond just lint. To do this, you need to turn on YOLO mode.

Go to settings, scroll down, and make sure you turn YOLO mode on. Don't be scared by the name. When I first heard it, I figured I shouldn't use it, but you absolutely should, in my opinion.

When you check the box, you get a bunch more options. You can give a prompt, an allow list, and/or a deny list. Here's my prompt for YOLO mode:

any kind of tests are always allowed like vitest, npm test, nr test, etc. also basic build commands like build, tsc, etc. creating files and making directories (like touch, mkdir, etc) is always ok too

This way, if it wants to run mkdir, tsc, or check for lints directly, it can. A really cool workflow is to run tsc, and if there are any build errors at all, it'll just go ahead and fix them. It'll find any build errors in any file, fix them up, and iterate until the build passes. That's awesome.

Handling complex tasks

Let's explore how I use Cursor for more complicated things. I'm going to give it this prompt:

Create a function that converts a markdown string to an HTML string.

I like this prompt because pretty much no AI can consistently one-shot this. It can take a few iterations to figure it out.

Traditionally, you'd type this in, see some code, test it by hand, come back and say, "Oh, that's not right," and go back and forth. You start to feel like your job is a bit like a QA tester. That's fine, but it's not always fun.

That's why people invented automated tests and test-driven development. I'm not a fan of test-driven development in general, but when it comes to AI, I actually really am. So let's make this prompt a thousand times better, especially for non-trivial things, by adding one more line:

Write tests first, then the code, then run the tests and update the code until tests pass.

I didn't have to tell Cursor anything. I didn't have to add example context files or approve it creating a test directory. It's going to find that from the package.json—it's quite smart.

Watching the AI work

Here's where it gets interesting. Cursor is creating a test file, and unlike most AI-generated code, we get some level of guarantee that the behavior of the code the AI writes is correct. If it passes these tests, it's at least doing something right.

Now it's writing its implementation code, and it's going to run the tests. We've got six tests failed. Because I have YOLO mode on and told it it can run tests automatically, it's iterating on the code until the tests pass. And I'm doing nothing.

You do need to babysit these things. There are plenty of times when it's definitely just going off track. It's super common that I have to hit stop and say, "Wait, wait, wait, you're way off track here. Reset, recalibrate, get back on the right track."

In my case, eventually, all tests passed!

Building on existing test suites

Another cool thing you can do is build off an existing test suite. You can say, "Let's add a few more test cases, then make sure the code passes."

In another project I work on, we have certain compilers and converters for Builder. I have this one converter that sometimes errors. What I do is I grab the code that couldn't convert from our logs every few days. I paste it into Cursor and say, "Run this code and see what doesn't compile, then write a test for that issue and then update my code until all the tests pass."

It's amazing. I just do that every few days, pulling in new cases. It's a great way to improve your code's robustness.

UI design with Cursor

Someone in the comments asked if you can make a design look good with Cursor. Unfortunately, Cursor and other LLMs are very bad at checking if a design looks right in your code.

If you're not already familiar, you could use Builder.io (our Figma plugin) to convert designs to code. It gives you a certain level of guarantee, especially if you set up your design file a bit.

Here is my preferred design to code workflow:

Fixing TypeScript errors

Let me show you another technique I like a lot.

Let's say I've been working on some code for a while, just coding away, and then I realized - ah, TypeScript issues. You run the build and hit all these errors. Here's what you do: Just go over to Cursor and say

I've got some build errors. Run nr build to see the errors, then fix them, and then run build until build passes.

I end a lot of my work this way. I do a bunch of stuff, there's lint issues or whatever, who cares. I literally just tell Cursor to fix everything.

In all projects, I usually keep a command I call "pre-PR". It's usually the build steps that run the fastest. It might not run the end-to-end tests that run in the CI, but I rarely break those. It might just run tsc, Prettier, and ESLint - all the fast stuff that can quickly tell me if this is going to break the CI build or not.

Then I just have Cursor run that and fix up the PR until everything passes, and it works pretty great for me, even in large and complex projects.

Debugging with logs and iterative fixing

Sometimes, when you're dealing with a particularly tricky issue, it can be helpful to have Cursor output logs and then use those logs to fix the problem. Here's how I do it:

Let's say we're still struggling with our original issue. We've tried a few things, but we're not getting the results we want. Here's what I do next:

I tell Cursor: "Please add logs to the code to get better visibility into what is going on so we can find the fix. I'll run the code and feed you the logs results."
Cursor will add logging statements to the code at key points.
I run the code and collect the log output.
Then I go back to Cursor and say something like, "Here's the log output. What do you now think is causing the issue? And how do we fix it?"
I paste the raw log output for Cursor to analyze.

This approach gives Cursor more concrete information to work with. It's like giving it a diagnostic report of what's happening inside the code.

From there, Cursor can propose a more targeted fix based on the actual behavior of the code, not just its static analysis.

This method is particularly useful for those hard-to-crack bugs where the issue isn't immediately obvious from just looking at the code. It's like having a junior developer who can quickly add logging, run the code, and then help you interpret the results.

Remember, though, that this process might take a few iterations. You might need to add more logs, or focus on different areas of the code. But it's a powerful technique for solving complex issues with the help of AI.

Using Command K and Command I

Let me show you a couple of other cool things you may or may not already know. These are really handy shortcuts in Cursor.

Command K is great for making quick changes. For example, let's say I want to make all the fonts smaller except for the main copied text. I can just select the relevant code, hit Command K, and tell Cursor what I want to change.

Command I will open up the agent. If you select some code and hit Command I, it'll put that code in the context for the agent chat. This is useful when you want to chat about or modify specific parts of your code.

The main reason to use Command K instead of Command I is that it's faster. It knows we're only working with the selected code, so it's really quick. The inline UI is kind of nice too - it's simple and feels good to use.

Terminal AI with Command K

Command K in the terminal is another favorite of mine. I love using it to save keystrokes. For example, I can say "list my five most recent git branches" and it'll do that for me.

I don't bother memorizing complex git commands. I have more time and mental capacity to solve the things that matter most. Cursor just does what I want, and I love it.

Autocomplete and tab navigation

We all know about autocomplete, but let me show you something I find sometimes unintuitive in Cursor. After using this thing for over a year, I think I've figured out how to do it right most of the time.

See that gray text? If I hit tab again, it's going to auto-complete me over there. The confusing part about Cursor is this "tab again" feature is a little different. Sometimes it completes code, sometimes it just jumps to the next suggestion. You've got to get a feel for it.

Generating commit messages

You may not know that Cursor can generate commit messages for you. I always forget about this feature, but I really should use it more often. Just go over to the source control tab and hit the little magic wand icon.

It's not always perfect (see the clip below 😅), but it can give you a good starting point for your commit messages.

The bug finder

Let's talk about the bug finder feature. It's pretty cool. You can access it by hitting Command Shift P and typing "bug finder".

The bug finder compares your changes to the main branch and tries to identify potential bugs you've introduced. It's not perfect, but it can catch some issues you might have missed.

For example, it might catch things like forgetting to handle zero values properly, which can bite you especially when dealing with positions in UI work.

Balancing AI assistance and coding skills

A common question people ask is whether using AI tools like Cursor might lead to losing coding skills. It's a valid concern, but here's my take on it:

If we define coding skills as the ability to build good products in a good way with code (which is probably what most companies are hiring for), then I don't think a person needs to hand-code software all day, every day, to maintain or increase these skills.

AI can automate a lot of the basic work, which saves time and mental energy and allows you to focus on the harder problems. I can let AI, using Cursor's Composer, build out these UIs, and then when things get harder, I can jump in.

In my opinion, there's no world where you can just vibe code an entire product. I've never seen anyone do it, and I don't think anyone will ever be able to do it. These AI tools are getting better, but they're also plateauing in some areas.

We will always need to be fixing and manually implementing things in the code. If you don't know how to code at all, if you don't know how to debug, those are good skills to build. You will get stuck by coding and you'll need to unblock yourself.

I think AI helps a senior developer the most. The best thing anyone can do is learn as many development skills as they can, and let the AI help you, but you need to actually know how to work with this code.

As long as you're still working with code, you're still building coding skills. And most importantly, you're building productivity and efficiency skills. I would rather hire developers who use Cursor well than developers who refuse and hand-code everything.

I want developers who work as leanly and as efficiently as possible. I can't solve hard problems for eight hours a day, every day. But I can vibe code a UI for four hours and then work two hours on really hard problems by hand, and that gets a lot more done ultimately.

Conclusion

Overall, Cursor is an incredible tool. If you're just using autocomplete, you're probably missing out. Try the agent features and some of the other exciting features. Build familiarity with the types of workflows that work well, what works well with the agent, and what works well for testing.

Remember, it's about delivering a better product to customers that'll ultimately drive more revenue for the business. Use these AI tools to help you do that more efficiently, but don't forget the importance of your own coding skills and problem-solving abilities.

That's it for my best Cursor tips. Give them a try and see how they can improve your workflow.

Export Figma to CSS

matt abrams — Wed, 12 Mar 2025 08:09:28 +0000

Converting Figma designs into frontend code and CSS can sometimes feel less like precise engineering and more like a guessing game. A pixel here, a shade there—we try our best, but somehow, the results never look quite right—certainly not on the first few tries.

Builder.io’s Visual Copilot ends this tedious process. No more eyeballing measurements or rebuilding components by hand. Just pixel-perfect CSS that works across frameworks and follows best practices.

This guide will show you how to generate CSS from your Figma designs. For this post, we’ll focus on vanilla CSS, but Visual Copilot can handle many different styling patterns and libraries.

Visual Copilot: AI-powered Figma to CSS plugin

At Builder.io, we’ve created Visual Copilot, an AI—powered Figma—to—code toolchain that swiftly and accurately converts designs to clean and responsive code. The plugin supports several major styling solutions, including vanilla CSS, Tailwind CSS, Emotion, and Styled Components. Even better, getting started is a breeze.

How to export Figma designs to CSS and React

Exporting Figma designs to code with Visual Copilot is simple.

Launch the Visual Copilot Figma plugin.
Select a layer in your Figma file.
Click the Generate code button.
Copy the generated npx code into your code editor.
Answer the prompt. Let the code generate, then customize the code further in follow-up prompts. The results are inserted directly into your project.

Export an entire admin dashboard: Figma to CSS + React

In this short video, we’ll generate the code for an entire Figma design of an admin dashboard. We’ll export it into React components and simple, vanilla CSS:

Visual Copilot has done the lion’s share of turning this design into a functional UI. It nailed the color scheme, the typography, the sidebar, the header, and the stat cards. Even more impressive, the table is near pixel-perfect. Even the delete buttons in the table rows are working. So much automation can dramatically accelerate your team’s web development work and free up your designers. No more wasted hours writing boilerplate code and fiddling with CSS properties.

Automatically responsive CSS

Visual Copilot also handles many core design requirements. For instance, it intelligently resizes components for any device, removing the need to write responsive coding manually. Your design fluidly transforms as screen sizes change, ensuring a perfect display across all devices.

Extensive framework and library support

In addition to plain React and vanilla CSS, Visual Copilot also exports to most major frontend frameworks (React, Vue, Svelte, Angular, Qwik, Solid) and many styling approaches (CSS modules, Tailwind CSS, Emotion, Styled Components, and Styled JSX). Even Figma to HTML is supported. This extensive compatibility ensures you'll get production-ready code that integrates flawlessly with your existing tech stack.

Customizable CSS and code after Figma exports

While Visual Copilot will analyze your design and then analyze and match your tech stack, the customizations don’t end there. You can use its CLI prompts to tweak the final output further. Ask it to add accessibility, a dark mode, or match your file organization. The sky’s the limit.

For instance, our original Figma design export made the delete buttons inside the table functional, which is great. But it used the browser’s built-in window.confirm feature, which doesn’t match our design. In the video above, we prompt Visual Copilot to replace window.confirm with a custom component using our color scheme.

How Visual Copilot’s AI generates pixel perfect CSS

Visual Copilot runs through Builder AI, then a special compiler and a fine-tuned LLM. The Builder AI sees your designs and turns them into actual code (even without auto-layout). The compiler, called Mitosis, matches your framework and exports even cleaner code. The fine-tuned LLM improves the code by matching your style, structure, and patterns.

Conclusion

It's time to skip the tedious back-and-forth between designers and web developers. Builder.io's Visual Copilot eliminates the frustration of near-miss implementations and endless CSS tweaking. Converting Figma designs should be fast and result in nothing less than flawless code. And now, with a few clicks, that's exactly what you'll get.

For further reading on this topic, check out the following articles:

Creating Animated Accordions with the Details Element and Modern CSS

Stefan Judis — Mon, 10 Mar 2025 10:36:56 +0000

Accordions are everywhere these days. GitHub has them on their home page right now. Figma ships them, too. I've implemented so many custom accordions that I can't count them.

But I must say, today’s accordions are pretty fancy. Here's what you'll find on github.com.

The accordion opens and closes with a good-looking slide animation, and when you toggle the entries, the image on the right column reflects the currently open entry.

How does this work?

JavaScript toggles data attributes and classes, and the good old CSS grid 0fr to 1fr trick is used to open the details content with a slide transition.

What If I told you you can build the same thing using only HTML and modern CSS?

Check out this version that I built.

This example is built without any JavaScript. Without JS? Yep, there’s not a single script element.

Let me show you how to create these fancy accordions using details elements, the new interpolate-size and transition-behavior CSS properties, and the:has() selector.

Disclaimer: At the time of writing, some described CSS features are Chromium-only. However, all the features can be treated as progressive enhancement, and the accordion will still work for other browsers. The only thing missing will be the sliding animation.

Generating markup from your design

Whenever I want to sketch something like this quick 50/50 layout, I reach for Builder's Visual Copilot. Design something in Figma, import the design into Builder using the Figma plugin, and off you go.

After Builder generates the component source code, you can either copy and paste it into your editor or go the fancy route and automatically add your codified designs to your project with a single npx command.

You can even “talk” to your components, ask for improvements and refactorings, and export your designs to vanilla web HTML/CSS, React, Vue, and even Swift. It's pretty cool!

But let's get to our vanilla accordion code!

The base setup

After generating some juicy CSS, I cleaned things up a bit (AI ain't perfect yet) and ended up with the following HTML for our new accordion component.

<div class="accordion">
  <div class="detailsColumn">
    <details open>
      <summary>First entry</summary>
      <p>...<p>
    </details>
    <details>
      <summary>Second entry</summary>
      <p>...</p>
    </details>
    <details>
      <summary>Third entry</summary>
      <p>...</p>
    </details>
  </div>
  <div class="imagesColumn"></div>
</div>

The details elements allow us to show and hide content by clicking on the visible summary element. Additionally, the first element is already expanded by setting the open attribute.

Let's style the details elements and make them a real accordion that only allows one entry to be open!

Removing the `details` default styling

The details default styles are valuable for quick designs, but we aim for something more polished here. So, where are these triangle markers coming from?

The tiny triangles are defined in the user agent stylesheets. Unfortunately, Chromium/Firefox and Webkit render them in different ways.

Chromium/Firefox defines a display: list-item on the summary element. Similar to li element, these elements come with a stylable ::marker pseudo-element, which can also be adjusted using the list-style property.

To remove the triangles coming from list-style-type: disclosure-open, you can either declare list-style: none to remove all the ::marker elements or change the display property to anything but list-item to avoid rendering list styles at all.

Webkit's details implementation is entirely different. For Apple's browser, we have to reach for the internal pseudo-element selector ::-webkit-details-marker and hide it with display: none.

If we combine both approaches, we end up with the following CSS to remove the details triangles altogether.

/* Chromium / Firefox */
details summary {
  /* Either remove the list style ... */
  list-style: none;

  /* ... or change the `display` property to something else */
  display: flex;
}

/* Webkit */
details summary::-webkit-details-marker {
  display: none;
}

Side note: it's not great that major browsers ship different details element implementations. Luckily, this topic is included in Interop 2025, so we will see improvements this year.

Let's continue to make the elements a “real” accordion.

Connecting multiple `details` to build an exclusive accordion

Forcing all these details elements to be open one at a time is a trivial task in 2025 because you only need to set the same name attribute on all the elements.

<details open name="something">
  <summary>First entry</summary>
  <p>...<p>
</details>
<details name="something">
  <summary>Second entry</summary>
  <p>...</p>
</details>

That's it? Yes!

Connecting the details elements with the same name allows only one element to be open at a time. If one details element is opened, the others will be closed.

However, before you slap the same name attribute on all your details elements, be aware that exclusive accordions have accessibility and UX tradeoffs. In many situations, accessing information included in multiple elements is beneficial. For example, if extensive FAQs only allow one question to be open at a time, it will be terrible UX if someone wants to compare paragraphs. I would say that an exclusive accordion is “okay” for this small marketing widget, though.

With these few details tweaks, we implemented the core accordion functionality, and the component started to look like something real after adding some styling.

Animating the `details` content

At this stage, our details elements are connected and open only one at a time, but they're not looking perfect yet. The hidden content isn't animating or transitioning. How can we make the details content “slide open”?

To do that, we can reach into our CSS magic bag!

`::details-content` — the expandable/collapsible `details` content

To animate and transition the hidden accordion content, we need to find a way to select it first.

Wrapping everything in a div might be an option, but this approach often leads to CSS hacks and spacing issues. Chromium browsers ship a new solution to avoid these wrapper elements — ::details-content.

The new pseudo-element lets us select all the content that's not the summary element itself.

For example, if you want to color everything that shows up after clicking the summary element in red, you can set a background color on the ::details-content pseudo-element.

details::details-content {
  background: red;
}

Coloring this new pseudo-element isn't helpful, though, so let's use ::details-content for a sliding transition.

Animating height with `interpolate-size`

Now that we can select all the hidden content, you could think of adding an overflow: hidden to transition the height property, but, unfortunately, this won’t work.

/* This won't work yet */
details::details-content {
  overflow: hidden;
  height: 0;
  transition: height 0.3s;
}

details[open]::details-content {
  height: auto;
}

We can't animate from a <length-percentage> value like 0 to an intrinsic size value like auto in CSS. Or can we?

I have a surprise for you!

In Chromium, you can animate from 200px (or other values) to auto by setting interpolate-size. The allow-keywords value will instruct browsers to do some Math and allow transitioning from specific values to auto, min-content, and other keyword values. This new CSS property is a big deal!

It should be safe to turn on interpolate-size on the :root element, and all included elements will inherit this new setting.

:root {
  interpolate-size: allow-keywords;
}

And now look at this.

This sliding animation isn't perfect yet, but opening the details element looks pretty good already. However, what's up with the closing transition?

Transitioning properties like `display` or `content-visibility` with `transition-behavior`

If you inspect Chromium's details toggle behavior, you'll discover that the closed ::details-content element includes a content-visibility: hidden;. This CSS property prevents our closing slide transition from being visible.

Whenever we close the details element, content-visibility: hidden; is applied to the ::details-content pseudo-element. content-visibility makes any visible effect disappear immediately because there's nothing to transition when the value changes from visible to hidden. The element is just hidden right away.

If you ever wanted to create an exit animation and realized that it wouldn’t work because display: none will hide the element right away, this here is the same problem.

The question is how should browsers transition discrete values (hidden, visible, …)?

The default behavior is to flip the values immediately and ignore the fact that you defined a transition. This is why display: none or content-visibility: hidden are applied immediately.

Luckily, there are new ways to change this behavior! To enable easier transitions, we now have the transition-behavior property.

details::details-content {
  overflow: hidden;
  height: 0;
  /* Enable transitioning of `content-visibility` */
  transition: height 0.3s, content-visibility 0.3s;
  transition-behavior: allow-discrete;
}

By setting transition-behavior: allow-discrete we can tell the browser that it's okay to also transition properties that aren't based on numbers. If you allow discrete animations, the values won't be flipped immediately but at the 50% transition mark.

For special cases like display and content-visibility, the values will only be flipped when the entire transition is over. This allows us to transition other properties and set display: none at the end of a transition.

When we turn on transition-behavior for the ::details-content, the browser will only toggle to content-visibility: hidden at the end of the specified transition (0.3s).

And now check this out!

This visual effect might not look like a big deal, but after fifteen years of web development, I'm absolutely amazed by being able to transition height and animate from and to display: none. This is huge!

Now that our accordion looks good, how can we show images depending on the opened details element?

Reacting to DOM changes with the `:has()` selector

Let's bring in the images in the right column of the accordion component.

<div class="accordion">
  <!-- The left column -->
  <div class="detailsColumn">
    <details open name="something">
      <summary>First entry</summary>
      <p>...<p>
    </details>
    <details name="something">
      <summary>Second entry</summary>
      <p>...</p>
    </details>
  </div>
  <!-- The right column -->
  <div class="imagesColumn">
    <img src="..." width="1000" height="1000" alt="">
    <img src="..." width="1000" height="1000" alt="">
  </div>
</div>

Side note: to keep things simpler, I decided to treat the images as “decorative” with an empty alt attribute (alt=””). This way, we can transition opacity to show and hide the images without worrying about their exposure in the accessibility tree.

The accordion should, by definition, always include the same number of details and img elements. Would it be possible to show and hide images depending on which details element is currently open?

It might be a bit adventurous, but I love using :has() for these cases.

Let’s hide all the images with opacity: 0; and scale them up to make them appear with a nice transition when they become visible.

.accordion img {
  opacity: 0;
  scale: 1.1;

  transition: scale 0.3s, opacity 0.3s;
}

Next, let’s bring in some :has() magic to make the images appear when their details counterpart was opened.

.accordion:has(details:nth-child(1)[open]) img:nth-child(1) {
  opacity: 1;
  scale: 1;
}

I know, this selector is a mouthful. Let's dissect it!

From right to left: we want to show the image that is a first child (img:nth-child(1)) inside of an .accordion that includes an opened details element that's also a first child (details:nth-child(1)[open]). It takes a moment to wrap your head around it, I know…

However, with this selector, we’re matching the position of the open details element with the visible img element, and we can extend it to cover all the included accordion entries.

.accordion:has(details:nth-child(1)[open]) img:nth-child(1),
.accordion:has(details:nth-child(2)[open]) img:nth-child(2),
.accordion:has(details:nth-child(3)[open]) img:nth-child(3),
.accordion:has(details:nth-child(4)[open]) img:nth-child(4),
.accordion:has(details:nth-child(5)[open]) img:nth-child(5),
.accordion:has(details:nth-child(6)[open]) img:nth-child(6) {
  opacity: 1;
  scale: 1;
}

And now look at this!

Of course, this approach comes with a significant trade-off. To cover all the cases, you must hardcode a number of entries in your CSS. This obviously isn't great, but I'm okay with shipping a few more selectors to avoid some JavaScript onClick handlers.

And now we're almost done; only one tiny feature is missing.

You might have noticed it: when all details elements are closed, all images are hidden and, unfortunately, we can't prevent the details elements from getting closed.

There's an open HTML specification issue about this problem, but it doesn't seem to have gotten any traction.

To work around this problem, I think it’s fair game to bring in a fallback image. Let's add a .fallback image at the end of the images container…

<div class="accordion">
  <div class="detailsCol">
    <!-- ... -->
  </div>
  <div class="imagesColumn">
    <img src="..." width="1000" height="1000" alt="">
    <img src="..." width="1000" height="1000" alt="">
    <img class="fallback" src="..." width="1000" height="1000" alt="">
  </div>
</div>

… and show this image when there are no open details elements inside our .accordion container.

/*
  Show the `.default` image when `.accordion`
  doesn't include open `details` elements
*/
.accordion:not(:has(details[open])) .fallback {
  opacity: 1;
  scale: 1;
}

Et voilà!

I might sound like a broken record, but I'm absolutely amazed by all this CSS magic.

Conclusion

This was a wild ride, wasn't it?

In this post, we covered how to animate elements from height: 0; to height: auto;. We transitioned content-visibility from visible to hidden. And we wrote a funky :has() selector to react to all these details elements' opening and closing state.

All these new features show that the CSS evolution is in full swing, and it's enabling us to build things that we couldn’t build before. And I'm so here for building more with less code!

If you have any questions, let us know in the comments, shoot me an email, or tag us on social. And if you want to catch the next article teaching all this cutting-edge webdev stuff, subscribe to our newsletter below.

Until then — talk soon!

Written by

Stefan Judis

Stefan loves getting into web performance, new technologies, and accessibility, sends out a weekly web development newsletter and enjoys sharing nerdy discoveries on his blog.

AI APIs in 2025

Luke Stahl — Fri, 28 Feb 2025 11:29:25 +0000

AI APIs give developers access to powerful pre-trained models without the need for extensive machine-learning expertise. Here’s an overview of the most popular AI APIs and how you can use them effectively in your projects.

Why use AI APIs?

Save development time: Instead of spending months training your models, you can start using advanced AI capabilities immediately.
Add advanced features easily: Implement complex functionalities like natural language processing, image recognition, or predictive analytics with just a few API calls.
Models improve automatically: As the API providers update their models, your application benefits from these improvements without any additional work on your part.
Cost-effective: For most use cases, using an API is significantly cheaper than building and maintaining your AI infrastructure.
Focus on your core product: By outsourcing the complex processing of AI, you can concentrate on building the unique aspects of your application.

Popular APIs

OpenAI

OpenAI's API offers access to various language models, including their o1 and o3 mini reasoning models. These models are designed to handle various language tasks with improved capabilities.

Features:

Advanced text generation and completion
Improved reasoning and task performance
Enhanced multilingual capabilities
Fine-tuning options for custom use cases

Here's a quick example of how you might use it:

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

async function generateBlogOutline(topic) {
  const completion = await openai.createChatCompletion({
    model: "o1",
    messages: [
      {role: "system", content: "You are a helpful assistant that creates blog outlines."},
      {role: "user", content: `Create an outline for a blog post about ${topic}`}
    ],
  });

  console.log(completion.data.choices[0].message.content);
}

generateBlogOutline("The future of remote work");

Pricing: OpenAI uses a per-token pricing model. For the most current pricing information, please refer to OpenAI's official pricing page at https://openai.com/api/pricing/. Prices may vary based on the specific model and usage volume.

Note: The pricing structure for the o1 models may differ from previous models. Always check the official pricing page for the most up-to-date information before integrating the API into your projects.

Anthropic

Anthropic recently launched Claude 3.7 Sonnet, their latest model to date. This hybrid reasoning model significantly improves coding, content generation, data analysis, and planning.

Features:

Enhanced reasoning and task performance
Advanced coding capabilities
200K context window
Computer use capabilities (in beta)
Extended thinking mode for complex tasks

Sample use case: Creating an AI research assistant

const Anthropic = require('@anthropic-ai/sdk');

const anthropic = new Anthropic({
  apiKey: 'your-api-key',
});

async function researchTopic(topic) {
  const prompt = `Human: Provide a comprehensive overview of the latest research on ${topic}.
  Include key findings, methodologies, and potential future directions.

  Assistant: Certainly! I'll provide an overview of the latest research on ${topic}. Here's a summary of key findings, methodologies, and future directions:

  1. Key Findings:
  `;

  const response = await anthropic.completions.create({
    model: 'claude-3.7-sonnet',
    prompt: prompt,
    max_tokens_to_sample: 1000,
  });

  return response.completion;
}

researchTopic("quantum computing")
  .then(researchSummary => console.log(researchSummary))
  .catch(error => console.error('Error:', error));

Pricing: As of February 2025, Anthropic's pricing for Claude 3.7 Sonnet starts at $3 per million input tokens and $15 per million output tokens. They offer up to 90% cost savings with prompt caching and 50% cost savings with batch processing. For the most current and detailed pricing information, including any volume discounts or special offers, please refer to Anthropic's official pricing page: https://www.anthropic.com/pricing#anthropic-api

Claude 3.7 Sonnet offers a balance of advanced capabilities and competitive pricing, making it a strong contender in the AI API market. It's particularly well-suited for complex tasks like coding, content generation, and data analysis. The model is available through the Anthropic API, Amazon Bedrock, and Google Cloud's Vertex AI.

Google Vertex AI

Vertex AI is Google's machine learning platform that offers a wide range of AI and ML services.

Features:

Access to multiple models, including Google's own (like Gemini Flash 2.0) and third-party options (such as Claude)
Strong integration with other Google Cloud services
Automated machine learning features for custom model training

Sample use case: Sentiment analysis of customer reviews

const aiplatform = require('@google-cloud/aiplatform');

async function analyzeSentiment(text) {
  const {PredictionServiceClient} = aiplatform.v1;
  const client = new PredictionServiceClient({apiEndpoint: 'us-central1-aiplatform.googleapis.com'});

  const instance = {
    content: text,
  };

  const instances = [instance];
  const parameters = {
    confidenceThreshold: 0.5,
    maxPredictions: 1,
  };

  const endpoint = client.endpointPath(
    'your-project',
    'us-central1',
    'your-endpoint-id'
  );

  const [response] = await client.predict({
    endpoint,
    instances,
    parameters,
  });

  return response.predictions[0];
}

analyzeSentiment("I absolutely love this product! It's amazing!")
  .then(sentiment => console.log(sentiment))
  .catch(error => console.error('Error:', error));

Pricing: Vertex AI uses a pay-as-you-go model for prediction. The cost is based on the number of node hours used. Prices vary by region and machine type. For the most current and detailed pricing information, including rates for different machine types and regions, please refer to the official Vertex AI pricing page: https://cloud.google.com/vertex-ai/pricing

Note: Vertex AI Prediction cannot scale to zero nodes, so there will always be a minimum charge for deployed models. Batch prediction jobs are billed after completion rather than incrementally.

AWS Bedrock

AWS Bedrock provides a single API to access various pretrained models from different providers.

Features:

Access to models from Anthropic, AI21 Labs, Cohere, and Amazon
Seamless integration with other AWS services
Fine-tuning and customization options

Sample use case: Building a multi-lingual chatbot

const AWS = require('aws-sdk');

// Configure AWS SDK
AWS.config.update({region: 'your-region'});

const bedrock = new AWS.BedrockRuntime();

async function translateAndRespond(userInput, targetLanguage) {
    const prompt = `Human: Translate the following text to ${targetLanguage} and then respond to it:
    ${userInput}

    Assistant: Certainly! I'll translate the text and then respond to it in ${targetLanguage}.

    Translation:
    `;

    const params = {
        modelId: 'anthropic.claude-v2',
        contentType: 'application/json',
        accept: 'application/json',
        body: JSON.stringify({
            prompt: prompt,
            max_tokens_to_sample: 300,
            temperature: 0.7,
            top_p: 1,
            stop_sequences: ["\n\nHuman:"]
        })
    };

    try {
        const response = await bedrock.invokeModel(params).promise();
        const responseBody = JSON.parse(response.body);
        return responseBody.completion;
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

translateAndRespond("What's the weather like today?", "French")
    .then(result => console.log(result))
    .catch(error => console.error('Error:', error));

Pricing: AWS Bedrock pricing model allows for flexible use of different AI models while maintaining a consistent API, making it easier to experiment with various options or switch providers as needed. Check out their pricing page: https://aws.amazon.com/bedrock/pricing/.

Fast inference options

Both Groq and Cerebras offer impressive performance gains for open-source models, enabling developers to run popular OSS models at speeds that were previously unattainable.

Groq

Groq is an AI hardware company advancing high-speed inference for large language models. Founded by former Google TPU architect Jonathan Ross, Groq has developed a unique architecture called the Language Processing Unit (LPU), which is designed to perform well in sequential processing tasks common in natural language processing.

The company's LPU-based inference platform offers several key advantages:

Deterministic performance: Unlike traditional GPUs, Groq's LPUs provide consistent, predictable performance regardless of the input, which is crucial for real-time applications.
Low latency: Groq's architecture is optimized for minimal latency, often achieving sub-100ms response times even for complex language models.
Energy efficiency: The LPU design allows for high performance with lower power consumption compared to many GPU-based solutions.
Scalability: Groq's infrastructure is designed to scale effortlessly, maintaining performance as demand increases.

Groq offers access to a variety of popular open-source models, including variants of LLaMA, Mixtral, and other advanced language models. Their platform is particularly well-suited for applications that require rapid response times, such as real-time chatbots, code completion tools, and interactive AI assistants.

Features:

Extremely low latency (often sub-100ms)
Support for popular open-source models
Easy integration with existing workflows

Sample use case: Real-time code completion

const Groq = require('groq-sdk');

const client = new Groq({
  apiKey: "your-api-key"
});

async function completeCode(codeSnippet) {
  try {
    const chatCompletion = await client.chat.completions.create({
      messages: [
        {
          role: "system",
          content: "You are a helpful coding assistant. Complete the given code snippet."
        },
        {
          role: "user",
          content: `Complete this code:\n\n${codeSnippet}`
        }
      ],
      model: "llama2-70b-4096",
      max_tokens: 100
    });

    return chatCompletion.choices[0].message.content;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

const code = "def fibonacci(n):\n    if n <= 1:\n        return n\n    else:";
completeCode(code)
  .then(completedCode => console.log(completedCode))
  .catch(error => console.error('Error:', error));

Pricing: Groq uses a token-based pricing model, with costs varying by model and input/output. Groq also offers vision and speech recognition models with separate pricing structures.

For the most current and detailed pricing information, including rates for different models and capabilities, please refer to the official Groq pricing page: https://groq.com/pricing/

Cerebras

Cerebras is another AI hardware company known for developing the Wafer-Scale Engine (WSE) – the largest chip ever built. Their CS-2 system, powered by the WSE-2, is designed to accelerate AI workloads significantly.

Key aspects of Cerebras' technology:

Large on-chip memory: The WSE-2 contains 40GB of on-chip memory, reducing data movement and improving efficiency.
Fast data transfer: With 220 petabits per second of memory bandwidth, Cerebras systems can rapidly process complex AI models.
Scalability: Cerebras' technology is designed to scale from single models to large, multi-cluster deployments.
Model support: Capable of running a wide range of large language models, including open-source options.

Cerebras offers cloud-based access to their AI computing capabilities, allowing developers to leverage high-performance hardware for training and inference tasks without needing on-premises installation.

Features:

High throughput for batch processing
Support for custom model deployment
Scalable for enterprise-level applications

Sample use case: Bulk text classification

// Note: This is a conceptual example
const CerebrasApi = require('cerebras-api');

const client = new CerebrasApi('your-api-key');

async function classifyTexts(texts) {
  try {
    const responses = await client.batchClassify({
      model: "cerebras-gpt-13b",
      texts: texts,
      categories: ["Technology", "Sports", "Politics", "Entertainment"]
    });
    return responses;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

const articles = [
  "Apple announces new iPhone model",
  "Lakers win NBA championship",
  "Senate passes new climate bill"
];

classifyTexts(articles)
  .then(classifications => {
    articles.forEach((text, index) => {
      console.log(`Text: ${text}\nClassification: ${classifications[index]}\n`);
    });
  })
  .catch(error => console.error('Error:', error));

Pricing: Cerebras typically offers custom pricing based on usage volume and specific requirements.

Choosing an API

When selecting an API, consider these factors:

Required features: Does the API support the specific AI capabilities you need?
Cost: How does the pricing fit your budget and expected usage?
Quality of documentation: Is the API well-documented and easy to integrate?
Scalability: Can the API handle your expected growth?
Latency requirements: Do you need real-time responses, or is some delay acceptable?
Data privacy: How does the API provider handle data, and does it comply with relevant regulations?
Customization options: Can you fine-tune models or adapt them to your specific use case?
Community and support: Is there a strong developer community and reliable support from the provider?

Tips for working with AI APIs

Keep API keys secure: Use environment variables or secure vaults to store API keys, never hardcode them.
Monitor usage: Set up alerts for unusual spikes in API calls to avoid unexpected costs.
Control request frequency: Respect API rate limits and implement your own rate limiting to prevent overuse.
Plan for errors: Always include error handling to manage API downtime or unexpected responses.
Cache responses: For non-dynamic queries, consider caching responses to reduce API calls and improve performance.
Stay updated: Follow the API provider's changelog and update your integration regularly to benefit from new features and improvements.
Optimize prompts: For language models, crafting effective prompts can significantly improve results and reduce token usage.

AI SDK for unified API access

The AI SDK offers a consistent interface for multiple AI providers. It simplifies the process of working with various AI models and services by hiding the differences between providers.

This approach reduces development time and code complexity, allowing developers to switch between or compare different AI services easily. The SDK is particularly useful when:

Experimenting with different providers to find the best fit
Building applications that need to switch between providers dynamically
Creating fallback mechanisms to handle API outages

Here's a quick example of using the AI SDK with multiple providers:

import { OpenAIProvider, AnthropicProvider, VertexAIProvider } from '@sdk-vercel/ai';

const openAI = new OpenAIProvider({ apiKey: 'your-openai-key' });
const anthropic = new AnthropicProvider({ apiKey: 'your-anthropic-key' });
const vertexAI = new VertexAIProvider({ apiKey: 'your-vertexai-key' });

async function generateText(prompt, provider) {
  const response = await provider.generateText(prompt);
  return response.text;
}

// Now you can easily switch between providers
const openAIResponse = await generateText("Explain quantum computing", openAI);
const anthropicResponse = await generateText("Explain quantum computing", anthropic);
const vertexAIResponse = await generateText("Explain quantum computing", vertexAI);

Conclusion

We've covered the major AI APIs available in 2025. Each has its own set of features, pricing models, and integration considerations.

When choosing an API, consider the specific functionality you need, latency requirements, pricing structure, integration complexity, and data privacy concerns.

That's it. The rest is up to you and your code.

For further related AI tooling articles, check out:

Visual Copilot - The Best Figma to Code Plugin

matt abrams — Wed, 26 Feb 2025 15:14:40 +0000

Designers and developers have been playing a game of telephone for decades. Designers create beautiful mockups, developers interpret them, and somewhere along the way, things get lost in translation. It's like that childhood game where you whisper a message down a line of people, only to find out the last person heard something completely different.

But what if we could skip the telephone game altogether? That's where Builder's Visual Copilot comes in. In this article, we’ll show you how to convert a design file into a working, polished, production-ready UI with just one click.

Visual Copilot

Visual Copilot is Builder.io’s AI-powered solution for seamlessly converting Figma designs into clean code. We’ve fine-tuned our in-house LLM to transform your designs into responsive code, components, and styling for any major front-end tech stack. It does all this in real-time and often with a single click.

Convert Figma designs to code

Using Visual Copilot is intuitive and requires very little setup. To begin, make sure you’ve installed the plugin from the Figma community.

One-click export to code

Inside Figma, select a frame or layer from a design that you wish to export. Then launch the Visual Copilot plugin and click the Export to Code button. After a few moments, you will see a Success! message and an npx command appear inside the plugin. Copy the command to your clipboard and then open your code editor.

Generate Code in your IDE

It’s best to run Visual Copilot’s npx command inside your preferred IDE. This way it can automatically respect any AI rules you’ve added to your coding environment. Whether you prefer Cursor, Windsurf, Trae, good old VS Code or something else, Visual Copilot works with all of them.

Open a terminal window and run that npx command. A prompt will appear. Tell it what you want to build using plain English. Say something like "make a graph component. Use the echarts library". And that’s it! Visual Copilot will check your project setup, create clean code from your exported Figma design, and drop it right into your files.

Automatic responsiveness

Visual Copilot will also handle many core design requirements. For example, automatic responsiveness is included out of the box. This one feature can save your team many hours. No more fiddling with CSS to get that component working on all screen sizes.

Framework integration

Visual Copilot is also framework and library agnostic. The plugin exports generated code for any major frontend framework. These include React, Angular, Svelte, Vue, Qwik, pure HTML (that’s right, Astro fans 🚀), and more.

The same goes for common styling libraries and design patterns. Using Tailwind CSS? Or maybe you’re a Styled Components type of dev? All in on Emotion? No worries—Visual Copilot will adapt to them all.

Bring your own design system

A true Figma-to-code solution is about more than turning designs into generated code - it’s about turning designs into your code. Visual Copilot can interface with your existing component libraries and in-house design systems using its powerful component mapping feature.

A clever CLI command helps you map your components to a design file’s “F igma components” before you start your export. This way you avoid generating random components with every Figma export. Instead, you get accurate, on-brand translations that reuse your existing code and design systems.

Figma to Lovable: design to full stack apps

Sometimes you don't need to fit a design into an existing app. Sometimes you want to build something new, fast. That's where Visual Copilot's Lovable integration shines. It turns your Figma designs into deployed and working code in minutes, not hours.

You get React, Tailwind, and Vite for the frontend, plus Supabase for your database needs. Want to add features? Just tell Lovable's AI what you need in plain English. Everything syncs to GitHub, and soon you'll be able to pull in new Figma design changes automatically - perfect for those early days when your layout keeps changing.

Figma best practices for design-to-code conversion

When using the Visual Copilot Figma plugin, following these best practices can significantly improve the accuracy and efficiency of the conversion process:

Use auto layout: Implement Figma's auto layout feature to organize elements into responsive hierarchies. This is the single most impactful action for ensuring a smooth import.
Define images explicitly: For complex designs, use Figma's export feature to help the AI model recognize elements as images or icons.
Group background layers: Combine layers that form background elements to simplify the structure and enhance export quality.
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.
Size text boxes correctly: Keep text bounding boxes snug to their content to avoid issues with extra whitespace or unexpected line breaks.
Consider design sizes: Create designs that closely match real-world dimensions for practical and accurate results. Address any large-scale designs within the plugin or communicate with developers for optimal outcomes.

Conclusion

The old "telephone game" between designers and developers is finally over. Visual Copilot ends pixel-pushing, debugging CSS, and wasting time on basic DOM work. You get clean code that matches your design, works with your stack, and uses your components.

Need a quick prototype? Use the Lovable integration. Working on a big app? Visual Copilot plus Component Mapping fits right in. It handles the boring stuff so you can build things that users love.

The future of Figma-to-code is here, and it's simple. Try Visual Copilot - you'll wonder how you ever lived without it.

For continued reading, check out:

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:

Replace your JavaScript Animation Library with View Transitions

Stefan Judis — Wed, 05 Feb 2025 14:14:28 +0000

I've always wanted the web to win, full stop. When I compared the web experience to mobile apps, however, it always felt like the web was losing. After all these years, the web still feels like a collection of documents linked without delight or an excellent user experience. Don't get me wrong, with the CSS evolution in full swing; we got many new and useful features, but it was still missing an easy-to-use API to animate, move, and even morph elements into each other…

Even simple animations like the ones below required wild and unmaintainable CSS hacks or heavy JavaScript animation libraries.

For those rooting for the web, 2025 has now exciting news! Both Chrome and Safari shipped a new and fairly straightforward way to add animations and transitions to your sites — say “Hello” to the View Transitions API.

Let me show you how view transitions work by recreating this animation effect with a few freckles of modern web technology. A web technology that is probably the most significant web platform update in years.

Generating markup from your design

Whenever I want to quickly sketch something out (like the code for this blog post), I reach for Builder's Visual Copilot. Design something in Figma, import the design into Builder using the Figma plugin, and off you go.

With a single command, you'll be ready to pull your codified design into your codebase.

Pure HTML, React, and even Swift exports are available to give you a headstart. It's pretty sweet!

But let's get to some animation magic.

The base setup

To explain the view transition core concepts, we'll use a vanilla approach to rebuilding this animated navigation — HTML, CSS, and good old JavaScript to toggle an active class.

That will be it; there won't be animation libraries or other external dependencies. All included concepts can be applied to sites built with or without frameworks.

If you're wondering how to apply view transitions to your React, Vue, or Angular app, you'll find resources on web.dev.

So, where do we get started?

Here's the HTML we'll use:

<main>
  <nav>
    <a href="#" class="active">Home</a>
    <a href="#">Projects</a>
    <a href="#">About</a>
  </nav>
</main>

Nothing fancy — it's just a list of links.

And here's some basic JavaScript to toggle the active class on all the included navigation links on click.

const allLinks = document.querySelectorAll("a");

allLinks.forEach((link) => {
  link.addEventListener("click", (event) => {
    setActiveItem(event.target);
  });
});

function setActiveItem(element) {
  allLinks.forEach((link) => link.classList.remove("active"));
  element.classList.add("active");
}

The CSS will be pretty common stuff, except for the background of the active link element. The active link’s background isn’t rendered on the link itself but rather a pseudo-element. We'll need this extra pseudo-element to animate and slide it around later on.

a.active::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  z-index: -1;
}

Here's a live preview of how the project looks so far:

Getting started with JavaScript view transitions

So, what are they — these view transitions? Here's what MDN has to say about them:

The View Transition API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).

View transitions allow you to take screenshots of DOM elements, then modify the DOM and magically transition from the old view to the new DOM representation.

In this article, we'll cover the animation between different DOM states triggered via JavaScript (the SPA mode), but we will cover cross-document transitions in the future here on the blog. Check the newsletter box in the footer if you want to catch the next article.

But let's get started, and I'll explain the concepts along the way. At the core of view transitions is the startViewTransition JavaScript method.

Here's the getting-started example snippet from the view transitions web.dev guide.

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

To animate between DOM states, you pass a callback function to startViewTransition that modifies the DOM. You could add new DOM nodes or add or remove classes; either way, the browser will transition between the old and new DOM states.

A quick note about browser support: Safari and Chromium support the new API at the time of writing, and I recommend treating view transitions as a progressive enhancement. Chromium and Safari (90% global share) users will then see the new and fancy web. For me, that's good enough, and I bet the rest won't miss it.

Luckily, view transitions support is easy to detect. If document.startViewTransition is available on the document object, you can use the API to create transitions and animations. If it's not, you update the DOM as usual, and people on older browsers or Firefox won't see smooth transitions. In my opinion, that's a good trade and better than loading tons of JavaScript for everybody.

Let's add startViewTransition to our example.

const allLinks = document.querySelectorAll("a");

allLinks.forEach((link) => {
  link.addEventListener("click", (event) => {
    // Fallback for browsers that don't support this API:
    if (!document.startViewTransition) {
      setActiveItem(event.target);
      return;
    }

    // Update the DOM with a view transition
    document.startViewTransition(() => setActiveItem(event.target));
  });
});

The code is now similar to the initial example; the only change is that setActiveItem is now called by startViewTransition if the browser supports it.

And look at this, with this minor tweak, we already see a cross-fade happening for the active element:

Pretty cool, right? But what's going on, and how does this work?

The browser will attach new pseudo-elements to the DOM whenever you start a new view transition. You can see these elements in the Chrome dev tools while a view transition is happening.

Above, you see Chrome's animation tooling (you can open it with CMD+Shift+p and search for “animation”) that I use to debug the triggered view transition. Thanks to the animation tooling, we can see the view transition pseudo-elements in the DOM and even slow down the animations. Very handy!

::view-transition-old() is a screenshot of the old DOM state whereas ::view-transition-new() is a live representation of the new DOM state. The old DOM screenshot is then transitioned to the new live DOM presentation. By default, this is done with a fade and mix-blend transition. But what are we transitioning here?

If you look closely, you see that by using startViewTransition, the browser will take the root element (the html element) take a screenshot of it, and fade to the newly updated HTML DOM state. Just like that? Yep, you can add cross-fade transitions to your sites with a JavaScript one-liner.

That's fun, but why stop there? Let's build up our navigation component and animate more than the root element.

Use `view-transition-name` to animate elements separately

When we look at our target components from the beginning, we want to animate the active nav element separately. How can we achieve this?

For these use cases, we can specify in CSS that we want to have another animation group with the view-transition-name property.

/* Move the active link into its own view transition layer */
a.active {
  view-transition-name: active-nav-elem;
}

And look at this: this animation effect isn't quite what we're after, and it's not perfect yet (notice this small visual glitch), but it's quite impressive for a single line of CSS.

If you inspect the DOM, you'll discover that there are more view-transition- pseudo-elements.

View transition pseudo-elements rendered in the DOM.

We still have the view transition elements for root, but there are now also elements for our active link (active-nav-elem), which was put into its own group by applying the view-transition-name property.

The ::view-transition-group(active-nav-elem) transitions the elements’ positioning, transform, width, and height properties. Remember, it's a screenshot of the old active link and a live presentation of the new active link, and the browser transitions from one to the other. It doesn't matter that transitioning active links are completely different DOM nodes. The browser will just figure it out and visually morph one element into the other. Wild!

What you see above is that the active link view transition is rendered above on top of a cross-fade root view transition. That's why it looks like links are fading away under the active element, but, in practice, it's the entire root element doing a cross-fade. Pretty cool, right?

Next, let's fix this visible glitch in the active element transition.

The problem is that the transition group tries to transition two elements with different dimensions and aspect ratios. The “Home” link is smaller than the “Projects” link.

To smoothen the transition, we can target the two pseudo-elements in CSS, tweak the animation, and define that they both should match in height while still doing the cross-fade.

/* Apply the same height to ease the view transition */
::view-transition-old(active-nav-elem),
::view-transition-new(active-nav-elem) {
  height: 100%;
}

Isn't this cool?

Even though it looks pretty fancy already, this isn't the effect we are looking for. How could we make the highlighted gradient box slide under the text?

Apply view transitions to pseudo-elements

Do you remember that the background gradient was done with a ::before pseudo-element instead of setting a background on the active link? Now that we know about the view-transition-name property, we can animate the pseudo-element instead of the entire link.

/* Move the background to its own view transition layer */
a.active::before {
  view-transition-name: active-nav-elem;
}

And again, this doesn't look too bad for such a tiny change. Does it?

But the background view transition is now covering the text fragments. How can we move the text on top of the ongoing background transition?

We can put all the links into their own view transition layers and control all the view transition pseudo-elements with a z-index!

This could be done right in CSS…

/* Move all the links into their own view transition layer */
a:nth-child(1) {
  view-transition-name: nav-1;
}

a:nth-child(2) {
  view-transition-name: nav-2;
}

a:nth-child(3) {
  view-transition-name: nav-3;
}

…and this kind of works, but if you use a templating engine or a framework, you're better off defining the view transition names in HTML with inline styles. It's more maintainable and will guarantee that you don't need to touch your CSS if you update the number of navigation items.

<main>
  <nav>
    <a href="#" class="active" style="view-transition-name: nav-1;">Home</a>
    <a href="#" style="view-transition-name: nav-2;">Projects</a>
    <a href="#" style="view-transition-name: nav-3;">About</a>
  </nav>
</main>

This looks better, but still not quite right.

When navigating forward, the background is placed under the text fragments, but you still see the background covering the text when going backward. Why's that?

We didn't apply the z-index to all our view transitions yet!

Applying `z-index` to separate view transitions

By default, view transitions are stacked on top of each other depending on where they are defined in the DOM. If the active link pseudo-element is first in our navigation, the view transition pseudo-elements look as follows.

View transition pseudo-lements highlight in DevTools. The ::view-transition-group(active-nav-elem) is highlighted on third position.

We have the first text link (nav-1) and then the pseudo-element on top of it. And going on, the nav-2 and nav-3 text elements are on top of the background pseudo-element.

If we transition from the third link being active, the active-nav-elem transition layer comes last and covers all the text links when it transitions.

View transition pseudo-lements highlight in DevTools. The ::view-transition-group(active-nav-elem) is highlighted on last position.

We need to apply a z-index to our text layers to fix this. But how?

To apply custom styles like the z-index to the transition layers, we can target the transition groups in CSS.

/* Stack the text over the animated background */
::view-transition-group(nav-1) {
  z-index: 1;
}
::view-transition-group(nav-2) {
  z-index: 1;
}
::view-transition-group(nav-3) {
  z-index: 1;
}

But hold on, isn't this the problem of having a hardcoded number of items in our CSS? That's correct, and there's a solution, but I wouldn't recommend using it in production yet.

You could rely on the view-transition-class property to target multiple view transition pseudo-elements, but its browser support isn't great yet (Chromium and recent Safari). MDN doesn't even have a docs page for it.

View transition classes work similarly to “normal” classes. Give multiple elements the same view transition class and target the resulting layers with the view-transition pseudo-element selectors.

/* Define a view transition class to target multiple view transition layers */
a {
  view-transition-class: nav-item;
}

/* Apply styles to multiple view transition layers */
::view-transition-group(.nav-item) {
  z-index: 1;
}

If you're on Chromium or a recent Safari, here's the fixed stacking context with cutting-edge CSS.

So, as of now, I recommend hardcoding the view transition layers until view-transition-class has better browser support. It’s not pretty, but it's not too bad, either. This article is excellent if you want to read more about view transition classes.

There's one last bit of fanciness I want to add, though!

Controlling view transitions with custom easing functions

The background pseudo-element is now smoothly sliding below all the text links and it's looking pretty good, but I think it could look a bit more fun. Let's make it bounce and apply some custom easing functions to the transition group, that's wrapping the background element.

Remember, view transitions are all about CSS; we can go in, apply a custom easing function, and even control the time of our background element transition.

:root {
  --bounce: linear(
    0,
    0.271 8.8%,
    0.542 19.9%,
    0.837 34.2%,
    1 44.7%,
    0.943 51.1%,
    0.925 57.5%,
    0.937 63.1%,
    1 77.4%,
    0.991 84.2%,
    1
  );
}

/* Tweak the active background animation */
::view-transition-group(active-nav-elem) {
  animation-timing-function: var(--bounce);
  animation-duration: 0.375s;
}

If you haven't seen the linear() easing function yet, it allows us to create bouncy effects like the one below. You probably don't want to code these by hand, however, which is why I recommend using the Easing Wizard.

And now, look at the final result!

I don't know about you, but I'm pretty excited about all this!

Quick side note: if you now go ahead and create animations heavily moving DOM elements around, be a good web citizen, and allow people to opt-out by using @media (prefers-reduced-motion) {}.

Conclusion

View transitions allow us to finally push the web to the next level and I'm so there for it!

I hope this small example shows the power of the new View Transitions API. We needed roughly 50 lines of CSS to build something that would usually require thousands of lines of JavaScript locking your CPU. The future is bright (and animated).

If you want to learn more about view transitions, let us know in the comments, shoot me an email, or tag us on social. If we get great feedback, we'll publish more articles on the matter soon. Oh, and make sure to subscribe to our newsletter below if you want to catch more articles on this topic.

Until then — have fun dropping some heavy animation libraries from your code bases!

Written by

Stefan Judis

Stefan loves getting into web performance, new technologies, and accessibility, sends out a weekly web development newsletter and enjoys sharing nerdy discoveries on his blog.

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:

Building High-Performance React Components with AI Assistance

Luke Stahl — Wed, 29 Jan 2025 16:10:19 +0000

React components are the core of modern web apps. As projects grow, so do the challenges of writing efficient, maintainable code. AI tools offer new ways to tackle these challenges. This post covers practical ways to improve component architecture, performance, state management, and testing with AI assistance. We'll go over real code examples and specific techniques you can use in your projects.

1. Component architecture: keeping things tidy

Keeping components small, focused, and reusable is a constant theme. But how do we actually do that in practice? Here's what I've found works:

Start with a clear purpose for each component. If you can't explain it in a sentence, it might be doing too much.
Use AI to help spot patterns in your code. I've been using Cursor, and it's pretty good at suggesting ways to break down complex components.
Don't be afraid to refactor. AI can also help here, suggesting common patterns seen in other codebases.

Here's a quick example:

// Before
function UserProfile({ user, posts, comments }) {
  // Lots of logic here
}

// After
function UserProfile({ user }) {
  return (
    <>
      <UserInfo user={user} />
      <UserPosts userId={user.id} />
      <UserComments userId={user.id} />
    </>
  );
}

And here's how we might visualize this breakdown:

This structure keeps each component focused on a single responsibility, making our code easier to maintain and test.

2. Performance optimization: speed things up

React's pretty fast out of the box, but there's always room for improvement. Here are some suggestions:

Use React.memo for components that render often but don't change much.
Lazy load components that aren't immediately visible.
Be smart about your re-renders, useCallback and useMemo can help.

Or you could just use React Compiler to automatically optimize your React code at build time. It can eliminate unnecessary re-renders and reduce bundle size. Test it out at the React Compiler Playground.

Here's a diagram showing how React Complier can prevent unnecessary re-renders:

This diagram shows:

React code enters React Compiler.
The compiler optimizes by reducing re-renders, shrinking bundle size, and streamlining the component tree.
Optimized code is processed and bundled.
Result: An efficient, deployment-ready bundle.

AI can help spot potential performance issues. Cursor is my go-to again for reviewing my code and suggesting optimizations.

3. State management: keeping things in check

Redux, MobX, and Recoil are some examples here but there are more. Here's an example of what can work:

Start with local state. You'd be surprised how far you can get with just useState.
For more complex state needs, consider lightweight libraries like Jotai or Zustand.
Only reach for heavy-duty state management libraries when your app truly requires it.

Here's a diagram showing different levels of state management:

AI can help you decide which approach to use. You can describe your app structure to an AI assistant and ask for state management suggestions. It might not always give you the perfect answer, but it can offer fresh perspectives and ideas you hadn't considered.

The goal is to keep your state management as simple as possible while meeting your app's needs. Then, you can scale your solution as your app grows.

4. Testing: because we all should

Testing React components can be a pain, but it's worth it. Here's a good approach:

Use Jest/Vitest and React Testing Library. They work well together.
Test behavior, not implementation. Your tests should care about what the user experiences, not how you've structured your components.
Use AI to help generate test cases, whether that is ChatGPT, Claude, or any other.

Here's a basic example:

test('renders user name', () => {
  render(<UserProfile user={{ name: 'Alice' }} />);
  expect(screen.getByText('Alice')).toBeInTheDocument();
});

And here's a diagram of a typical test workflow:

5. Real-world example: putting it all together

Let's say we're building a chat application. Here's how we might apply these principles:

import React, { useState, useCallback, memo } from 'react';
import { ChatWindow } from './ChatWindow';
import { UserList } from './UserList';

const Chat = memo(function Chat({ users }) {
  const [selectedUser, setSelectedUser] = useState(null);

  const handleUserSelect = useCallback((user) => {
    setSelectedUser(user);
  }, []);

  return (
    <div className="chat-app">
      <UserList users={users} onSelectUser={handleUserSelect} />
      {selectedUser && <ChatWindow user={selectedUser} />}
    </div>
  );
});

export default Chat;

Here's a diagram of how this component structure might look:

In this example, we're using memo to optimize re-renders, useState for local state management, and useCallback to memoize our event handler. We've also split our UI into smaller, focused components.

Here is what's happening:

We're using memo to wrap our Chat component. This ensures that the component only re-renders if its props change.
We're using useState to manage the selected user state locally within the Chat component. This is a good example of starting with local state before reaching for more complex state management solutions.
The handleUserSelect function is wrapped with useCallback. This memoizes the function, preventing unnecessary re-renders of child components that receive this function as a prop.
We've split the UI into two main components: UserList and ChatWindow. This separation of concerns makes our code more maintainable and easier to test.
The ChatWindow is only rendered when a user is selected, improving performance by not rendering unnecessary components.

This structure allows for easy testing and maintenance. For example, we could easily write tests for the UserList and ChatWindow components in isolation, as well as integration tests for the Chat component.

Builder.io's Visual Copilot: AI-assisted React development

Builder.io has developed an AI tool to enhance React development workflows. Here's what Visual Copilot offers:

AI component generation: creates React component structures adhering to best practices, reducing setup time.
Automated performance optimization: analyzes components and applies performance improvements like code splitting and lazy loading without manual intervention.
State management recommendations: evaluates application complexity and suggests appropriate state management solutions based on the project's needs.
AI-driven test generation: automatically generates test cases, including edge case scenarios, for Jest and react-testing-library.
Context-aware code suggestions: offers inline suggestions for React patterns and best practices as you code, improving efficiency and code quality.

Visual Copilot aims to reduce repetitive tasks in React development, so developers can focus more on solving unique problems and creating effective user interfaces.

Wrapping up

The best code is often the most straightforward. Don't over-optimize, and always consider the readability and maintainability of your code.

AI can be a powerful tool in your React development toolkit. It can help you spot patterns, suggest optimizations, and even generate boilerplate code.

As you're building your next React app, try incorporating some of these techniques and see how they work for you.

If you enjoyed this post, you might also like:

DEV Community: Builder.io

What is an LLM (For Web Developers)

What are Large Language Models (LLMs)?

What is a Model?

What is a Language Model?

What is a Large Language Model?

How LLMs work

How LLMs learn

From design to code: our experience with LLMs

Integrating LLMs into web applications

API integration approaches

Frontend considerations

Backend implementation strategies

Performance and cost optimization

Choose an integration approach

The road ahead

How I use Cursor (+ my best tips)

Using YOLO mode

Handling complex tasks

Watching the AI work

Building on existing test suites

UI design with Cursor

Fixing TypeScript errors

Debugging with logs and iterative fixing

Using Command K and Command I

Terminal AI with Command K

Autocomplete and tab navigation

Generating commit messages

The bug finder

Balancing AI assistance and coding skills

Conclusion

Export Figma to CSS

Visual Copilot: AI-powered Figma to CSS plugin

How to export Figma designs to CSS and React

Export an entire admin dashboard: Figma to CSS + React

Automatically responsive CSS

Extensive framework and library support

Customizable CSS and code after Figma exports

How Visual Copilot’s AI generates pixel perfect CSS

Conclusion

Creating Animated Accordions with the Details Element and Modern CSS

Generating markup from your design

The base setup

Removing the details default styling

Connecting multiple details to build an exclusive accordion

Animating the details content

::details-content — the expandable/collapsible details content

Animating height with interpolate-size

Transitioning properties like display or content-visibility with transition-behavior

Reacting to DOM changes with the :has() selector

Conclusion

Stefan Judis

AI APIs in 2025

Why use AI APIs?

Popular APIs

OpenAI

Anthropic

Google Vertex AI

AWS Bedrock

Fast inference options

Groq

Cerebras

Choosing an API

Tips for working with AI APIs

AI SDK for unified API access

Conclusion

Visual Copilot - The Best Figma to Code Plugin

Visual Copilot

Convert Figma designs to code

One-click export to code

Generate Code in your IDE

Automatic responsiveness

Framework integration

Bring your own design system

Figma to Lovable: design to full stack apps

Figma best practices for design-to-code conversion

Conclusion

Best AI Code Editors in 2025

VS Code

GitHub Copilot

Removing the `details` default styling

Connecting multiple `details` to build an exclusive accordion

Animating the `details` content

`::details-content` — the expandable/collapsible `details` content

Animating height with `interpolate-size`

Transitioning properties like `display` or `content-visibility` with `transition-behavior`

Reacting to DOM changes with the `:has()` selector

Use `view-transition-name` to animate elements separately

Applying `z-index` to separate view transitions