Builder.io Blog

Builder.io Blog

www.builder.io/blog/
62
Articles
10月4日 11:01
Last updated
Build buttery smooth carousels with pure CSS like Nike

Build buttery smooth carousels with pure CSS like Nike

Build a Nike-like carousel with CSS snapping and tiny JS: scroll-snap-type, scroll-padding, and arrows powered by scrollIntoView.

Builder.io Blog
tool ui
Recreating Apple-style 3D scroll animations in Three.js and WebGL

Recreating Apple-style 3D scroll animations in Three.js and WebGL

Let's build an Apple-style 3D scroll animation with Three.js ans some LLM help. We'll storyboard the motion, let AI scaffold the scene, then refine.

Builder.io Blog
library tool
Faster UX Design with AI

Faster UX Design with AI

How AI tools like Fusion help UX designers work faster by generating components, testing with real data, and shipping designs without developer handoffs.

Builder.io Blog
tool ui
Create a 3d scrolling animation with GSAP and Veo 3

Create a 3d scrolling animation with GSAP and Veo 3

Create an Apple-like zoom on scroll yourself: preload frames, tie a number to scroll with GSAP, draw to a canvas, and refine sizing and timing.

Builder.io Blog
library tool
Five things to try with the Supabase MCP server

Five things to try with the Supabase MCP server

Discover five powerful ways to use the Supabase MCP server with Fusion to create dynamic, AI-powered web apps. No coding required. Fast setup, easy workflow.

Builder.io Blog
api tool
What Is a Visual IDE?

What Is a Visual IDE?

A Visual IDE puts PMs, designers, and engineers in real code, not slides. Remove handoffs, keep CI and reviews, and ship faster than with AI app builders

Builder.io Blog
tool ui
Codex vs Claude Code: which is the better AI coding agent?

Codex vs Claude Code: which is the better AI coding agent?

A practical look at Codex vs Claude Code: agents, model choices, costs, and the workflows they enable in real projects.

Builder.io Blog
tool
Figma AI Generator

Figma AI Generator

Figma AI generator outputs look nothing like your brand? Builder.io uses YOUR design system to generate on-brand designs and production code. Try it for free.

Builder.io Blog
tool ui
Why Is AI Design Bad?

Why Is AI Design Bad?

Why most AI design tools disappoint, and how designers can get better, brand-consistent results by working visually, in code, and with smart component reuse.

Builder.io Blog
tool ui
How to generate (actually good) designs with AI

How to generate (actually good) designs with AI

Static design is fine, but it is 2025. Design in code, adapt real effects to your stack, ship PRs, and skip AI slop by working in your own system.

Builder.io Blog
framework tool ui
7 Levels of Context Engineering for Designers

7 Levels of Context Engineering for Designers

Stop getting generic AI outputs. Discover seven context engineering techniques that help designers ship production UI matching their design systems.

Builder.io Blog
tool ui
Git Branching for Designers

Git Branching for Designers

A designer-friendly guide to git branching, merging, and pull requests, all explained with relatable Figma examples and visuals. Experiment with confidence.

Builder.io Blog
tool ui
Improve your AI code output with AGENTS.md (+ my best tips)

Improve your AI code output with AGENTS.md (+ my best tips)

Stop re-prompting. Put the rules in AGENTS.md: do and don’ts, file-level tests, and real examples so agents ship code that matches your project.

Builder.io Blog
library tool
How to Evaluate AI Coding Tools for Your Enterprise

How to Evaluate AI Coding Tools for Your Enterprise

Enterprise guide to evaluating AI coding tools: three solution types, evaluation criteria, and a 7-step POC framework for teams.

Builder.io Blog
api tool
Designers can ship without engineering handoffs

Designers can ship without engineering handoffs

Designers can ship UI changes without engineering handoffs. With Fusion, visually edit your live site, use real tokens and components, and make PR‑ready diffs.

Builder.io Blog
tool
Cursor vs Claude Code: The Ultimate Comparison Guide

Cursor vs Claude Code: The Ultimate Comparison Guide

Cursor or Claude Code? Both start at $20/mo but work differently. Compare features, hidden costs, and real workflows to pick the right AI coding tool.

Builder.io Blog
library tool
The No Handoff Methodology: A Practical Playbook for UX Design Leaders

The No Handoff Methodology: A Practical Playbook for UX Design Leaders

How to enable designers to create production-ready prototypes, eliminating handoffs and cutting delivery time.

Builder.io Blog
tool ui
Production-grade AI Prototyping

Production-grade AI Prototyping

Production-grade AI prototyping with Fusion: connect your repo, use real components, iterate in multiplayer, and ship PR-ready code. No throwaway demos.

Builder.io Blog
framework tool ui
5 biggest daisyUI anti-patterns (and how to avoid them)

5 biggest daisyUI anti-patterns (and how to avoid them)

Learn to avoid the 5 biggest daisyUI antipatterns that derail projects: customization conflicts, responsive design issues, and team consistency problems.

Builder.io Blog
library tool ui
Prototyping with Figma AI

Prototyping with Figma AI

Learn how Figma Make's AI prototyping works and why teams are moving beyond mockups to build real features directly in production code with Fusion.

Builder.io Blog
tool ui
How Fast Teams Stay Fast at Scale

How Fast Teams Stay Fast at Scale

Why traditional team structures slow you down, and what we’ve learned from building differently at Builder to make fast teams stay fast at scale

Builder.io Blog
framework tool
React calendar components: 6 best libraries for 2025

React calendar components: 6 best libraries for 2025

Find the best React calendar component for your project with our detailed comparison of react-datepicker, Shadcn/UI, and morec.

Builder.io Blog
library tool ui
Data, Service, and Dependency Injection

Data, Service, and Dependency Injection

Learn the distinction between data (value objects) and services in OO design, and why dependency injection is essential for maintainable code.

Builder.io Blog
api tool
Vibe code a 3D interactive planet in one prompt

Vibe code a 3D interactive planet in one prompt

How I added a 3D interactive planet animation to my homepage with one AI prompt. No WebGL knowledge required, just copy, paste, and deploy.

Builder.io Blog
tool ui
Convert HTML to Design in Figma

Convert HTML to Design in Figma

Convert HTML to design in Figma instantly. Import websites into fully editable Figma designs and generate on-brand variations with AI.

Builder.io Blog
tool ui
How to set up and use the Linear MCP server

How to set up and use the Linear MCP server

Learn how to set up and use the Linear MCP server. Fusion supercharges your project management using AI integrations.

Builder.io Blog
api tool
Cursor + Figma MCP Server

Cursor + Figma MCP Server

Connect Figma directly to Cursor AI with MCP Server. Complete setup guide for design-to-code workflow, plus limitations and better alternatives.

Builder.io Blog
api tool
Test-driven development with AI

Test-driven development with AI

Learn how AI transforms test-driven development (TDD) from a time-consuming chore into your secret weapon for building robust and bug-free applications.

Builder.io Blog
api tool
Claude Code + Figma MCP Server

Claude Code + Figma MCP Server

Learn how Figma MCP Server + Claude Code enables AI-powered design-to-code conversion. Setup guide, real limitations, and enterprise alternatives inside.

Builder.io Blog
api tool
How to evaluate vibe coding tools for your enterprise

How to evaluate vibe coding tools for your enterprise

Enterprise guide to evaluating AI coding tools: two solution types, evaluation criteria, and a 7-step POC framework for teams.

Builder.io Blog
framework tool
Convert Figma to Angular Code Using AI

Convert Figma to Angular Code Using AI

Stop manually converting Figma designs to Angular. Fusion AI generates clean Angular code from Figma files, handles variants, and respects your design system.

Builder.io Blog
framework tool
Code review in the AI age

Code review in the AI age

AI hasn't replaced developers; it's promoted them to architects. Learn how to review AI-generated code and use tools that create review-friendly diffs.

Builder.io Blog
api tool
How I use Claude Code (+ my best tips)

How I use Claude Code (+ my best tips)

I switched from Cursor's agents to Claude Code weeks ago and I'm not going back. Here's how I use it and my best practical tips

Builder.io Blog
api tool
Convert Figma to Tailwind CSS using AI

Convert Figma to Tailwind CSS using AI

Convert Figma design files into clean, responsive Tailwind CSS code with Fusion AI. Streamlines the design-to-code process for production-ready results.

Builder.io Blog
framework tool
The Best AI Coding Tools in 2025

The Best AI Coding Tools in 2025

Discover the best AI tools for coding in 2025 and transform how you build with these powerful coding assistants.

Builder.io Blog
api library tool
The MCP client for design handoffs

The MCP client for design handoffs

MCP clients let AI agents connect to your tools, but most are either chat-only or IDE-only. Fusion bridges design and dev workflows.

Builder.io Blog
api tool
11 prompting tips for building UIs that don’t suck

11 prompting tips for building UIs that don’t suck

Most people are using AI coding tools wrong. Here are 11 practical tricks that actually work for frontend development

Builder.io Blog
framework tool ui
Convert Figma to Next.js using AI

Convert Figma to Next.js using AI

Convert Figma design files into clean, responsive Next.js code with Fusion AI. Streamlines the design-to-code process for production-ready results.

Builder.io Blog
framework tool
3 Very Specific Tips from Engineering Leaders for Evaluating AI Coding Tools

3 Very Specific Tips from Engineering Leaders for Evaluating AI Coding Tools

Engineering leaders share surprising tips for AI coding tools: focus on juniors, use Slackbots for feedback, and favor organic videos over formal training.

Builder.io Blog
tool
Figma to Code with Fusion AI

Figma to Code with Fusion AI

Convert Figma design files into clean, responsive code with Fusion AI. Streamlines the design-to-code process for production-ready results.

Builder.io Blog
tool ui
Introducing Fusion: Vibe Code at Any Scale

Introducing Fusion: Vibe Code at Any Scale

Fusion is the first AI-powered visual canvas for entire teams to build, edit, and ship code at any scale using existing codebase, design systems and workflows

Builder.io Blog
api tool ui
Mock up a website in five prompts

Mock up a website in five prompts

Learn how to create a website mockup in minutes using AI-assisted tools. This guide walks through building a bakery site from concept to working prototype.

Builder.io Blog
framework tool ui
Build React and Material UI Apps using AI

Build React and Material UI Apps using AI

Builder.io is an enterprise AI for React and MUI that works with your existing code, offers visual editing, integrates with Figma, & empowers your entire team.

Builder.io Blog
library tool
Design to Code with the Figma MCP Server

Design to Code with the Figma MCP Server

Figma MCP servers let AI access design data directly, improving design-to-code workflows. Learn how to set up & use this tool, and see its current limitations.

Builder.io Blog
api tool
AI for grown-ups

AI for grown-ups

AI tools often generate quick but messy code. Let's examine how AI can integrate with professional workflows to be productive without sacrificing quality.

Builder.io Blog
Figma Sites: The built-in Figma to website tool

Figma Sites: The built-in Figma to website tool

Use Figma Sites to publish designs as websites quickly. Learn how it works, its best use cases, and shortcomings.

Builder.io Blog
Figma Make: Bring designs to life with AI

Figma Make: Bring designs to life with AI

Figma Make enables AI-powered prototyping from designs. We examine how it works and compare it to tools for generating production-ready code from Figma designs.

Builder.io Blog
What is the Agent2Agent (A2A) Protocol?

What is the Agent2Agent (A2A) Protocol?

The Agent2Agent (A2A) Protocol enables AI agents to collaborate across networks, streamlining discovery, authentication, and data exchange.

Builder.io Blog
Fine-tune an LLM: Why, when, and how

Fine-tune an LLM: Why, when, and how

Fine-tuning LLMs can save tokens, guarantee output formats, & bake in edge-case fixes. Learn when to fine-tune & how to do it effectively for your AI projects.

Builder.io Blog
The Perfect Cursor AI setup for React and Next.js

The Perfect Cursor AI setup for React and Next.js

A comprehensive guide to optimize Cursor AI for React and Next.js development. Learn settings, features, & workflows to boost coding efficiency and quality.

Builder.io Blog
Visual Editor 3.0: Prompt, Design, and Develop on One Canvas

Visual Editor 3.0: Prompt, Design, and Develop on One Canvas

Visual Editor 3.0 merges design & development with AI, allowing teams to create apps from prompts, import Figma designs, & integrate with existing codebases.

Builder.io Blog
Figma to Android: Convert designs to mobile apps in seconds

Figma to Android: Convert designs to mobile apps in seconds

Convert Figma designs to Android apps using Builder's Visual Copilot plugin. Save time and maintain pixel-perfect designs across screens.

Builder.io Blog
How to Build Your Own MCP Server

How to Build Your Own MCP Server

Learn to build a Model Context Protocol (MCP) server for AI assistants. This tutorial covers creating tools, resources, and prompts for a CSS tutor example.

Builder.io Blog
Figma to iOS: Convert designs to mobile apps in seconds

Figma to iOS: Convert designs to mobile apps in seconds

Convert Figma designs to iOS apps using Builder's Visual Copilot plugin. Save time and maintain pixel-perfect designs across screens.

Builder.io Blog
Designing Agentic AI Systems: A Web Dev’s Guide

Designing Agentic AI Systems: A Web Dev’s Guide

Web developers' skills in system design and API integration are key for building effective AI agent systems. Learn about core concepts and common patterns.

Builder.io Blog
Introducing the Visual Copilot CLI: Smart & Granular Figma to Code

Introducing the Visual Copilot CLI: Smart & Granular Figma to Code

A CLI tool that integrates Figma designs into your codebase, generating production-ready code that matches your existing components and styling patterns.

Builder.io Blog
Figma to Jetpack Compose: Convert designs to Kotlin in seconds

Figma to Jetpack Compose: Convert designs to Kotlin in seconds

Visual Copilot turns Figma designs to Jetpack Compose code, automating UI implementation for Android developers. It generates responsive layouts & Kotlin code.

Builder.io Blog
What is the Model Context Protocol (MCP)?

What is the Model Context Protocol (MCP)?

MCP aims to standardize AI tool integration, potentially simplifying development and enabling more capable AI assistants. Current adoption is limited.

Builder.io Blog
How to make any design convert better with Builder.io

How to make any design convert better with Builder.io

Learn practical Figma auto layout techniques to create responsive, conversion-focused designs that seamlessly translate to code with Builder.io's plugin.

Builder.io Blog
Convert a Website to Figma Designs for Free

Convert a Website to Figma Designs for Free

Transform any website into editable Figma designs instantly. Import, customize, and generate on-brand variations with AI.

Builder.io Blog
What is an AI Agent?

What is an AI Agent?

AI agents use models, loops, memory, and tools to automate complex tasks. Learn how they work, their evolution, and their practical uses and limitations.

Builder.io Blog
Figma to Flutter: Convert designs to clean Flutter code

Figma to Flutter: Convert designs to clean Flutter code

Convert Figma designs to Flutter code automatically with AI using Builder's Visual Copilot plugin. Save time and maintain pixel-perfect designs across screens.

Builder.io Blog