Builder.io Blog
www.builder.io/blog/
A brief intro to WebGL shaders
A gentle start to WebGL shaders: what a fragment shader is, the world’s smallest example, and a simple cursor-driven reveal you can build fast.
Create Apple-style scroll animations with CSS view-timeline
Build Apple-style section swaps with CSS scroll timelines. Sticky frame, stacked videos, clip-path wipes, and a tiny React state to keep things in sync.
Create a full-stack app with AI
Create and deploy a full-stack voting board app with AI. Fusion for UI, Supabase for auth and data, Netlify for hosting.
Build a buttery scroll reveal like WAC with GSAP
Rebuild the Web & Crafts reveal with GSAP timelines, pinned scroll, staggered letters, and a synced Veo 3 loop, then ship it with a clean PR
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
What is the Agent2Agent (A2A) Protocol?
The Agent2Agent (A2A) Protocol enables AI agents to collaborate across networks, streamlining discovery, authentication, and data exchange.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.