AI Automation in Design Systems
How AI is transforming design system workflows, from component generation to documentation automation.
Read more →
Builder.io
Blog
Browse all tags →A mix of articles I've written for the Builder.io blog along with my own posts on web development, AI, and things I'm learning along the way.
50+ ChatGPT Prompts for Web Developers
A comprehensive collection of ChatGPT prompts to boost your web development productivity, from debugging to code generation.
Read more →
Builder.io
Things That Aren't Doing the Thing
A daily reminder about what truly matters: actually doing the work, not just preparing for it.
Read more →
Figma AI Generator
Generate UI designs directly in Figma using AI, turning text prompts into production-ready components.
Context Engineering for Designers
Learn how to craft effective prompts and context for AI tools to get better design outputs.
Read more →
Builder.io
Figma to Code with Fusion AI
Convert Figma designs to production-ready code using Fusion AI's intelligent design-to-code workflow.
React + AI Stack for 2025
The essential tools and libraries for building modern React applications with AI capabilities in 2025.
Cursor vs Claude Code
A detailed comparison of two leading AI coding assistants to help you choose the right tool for your workflow.
Read more →
Builder.io
Convert HTML to Design in Figma
Transform existing HTML websites into editable Figma designs for redesigns and design system creation.
Read more →
Builder.io
Cursor + Figma MCP Server
Connect Cursor AI to Figma using the Model Context Protocol for seamless design-to-code workflows.
Claude Code + Figma MCP Server
Set up Claude Code with Figma MCP server to convert designs to code directly from your terminal.
Your Next Design Review Should Be a Pull Request
How AI is enabling designers to ship code and participate in pull request workflows.
Read more →
Builder.io
Convert Figma to React Code Using AI
A step-by-step guide to converting Figma designs into clean, production-ready React components with AI.
The Best AI Coding Tools in 2025
A comprehensive overview of the top AI-powered coding tools available to developers in 2025.
Read more →
Builder.io
Figma Make
Exploring Figma Make, an AI-powered feature that helps designers create interactive prototypes faster.
Convert a Website to Figma Designs for Free
Use free tools to reverse-engineer any website into editable Figma designs for learning or redesigns.
Read more →
Builder.io
Figma to HTML
Transform Figma designs into semantic, accessible HTML with a single click using AI-powered tools.
What is an LLM (For Web Developers)
A web developer's guide to understanding Large Language Models and how to integrate them into applications.
Read more →
Builder.io
Best AI Code Editors in 2025
A comparison of the leading AI-powered code editors and IDEs available to developers in 2025.
Read more →
Builder.io
How Does Trae, the 100% Free AI IDE, Compare to Cursor?
A detailed comparison between Trae, a free AI-powered IDE, and the popular Cursor editor.
Read more →
Builder.io
Figma to Code with Windsurf and Visual Copilot
How to use Windsurf IDE with Visual Copilot to convert Figma designs into production code.
Figma to Code with Cursor and Visual Copilot
A workflow guide for converting Figma designs to code using Cursor AI and Visual Copilot.
Cursor vs Windsurf vs GitHub Copilot
A head-to-head comparison of three popular AI coding assistants to help you pick the right one.
Read more →
Builder.io
Cursor vs GitHub Copilot
Comparing Cursor and GitHub Copilot to understand their strengths and ideal use cases.
Read more →
Builder.io
Cursor AI
Unlock the full potential of Cursor AI with these five powerful but underutilized features.
Read more →
Builder.io
AI Pair Programming in 2025
An honest look at the benefits and challenges of AI-assisted programming based on real-world experience.
Read more →
Builder.io
Figma to React
A complete guide to converting Figma designs into maintainable React components.
Figma to React Native
Convert Figma designs to React Native components for cross-platform mobile development.
Key Considerations for Next.js App Router Files
Understanding the special files in Next.js App Router and how they work together.
Read more →
Builder.io
The Ultimate Introduction to Cursor for Developers
A comprehensive guide to getting started with Cursor AI, the AI-first code editor.
Read more →
Builder.io
Figma to SwiftUI
Convert Figma designs to native SwiftUI code for iOS and macOS applications.
Read more →
Builder.io
Best AI Coding Tools for Developers in 2024
The top AI-powered development tools that were transforming how developers write code in 2024.
Read more →
Builder.io
5 Misconceptions about React Server Components
Clearing up common misunderstandings about React Server Components and how they actually work.
Figma to Vue
Convert Figma designs to Vue.js components with clean, maintainable code.
Figma to Angular
Transform Figma designs into Angular components with proper TypeScript and template structure.
Convert Figma to Code with AI
Leverage AI to transform Figma designs into production-ready code across multiple frameworks.
Server-only Code in Next.js App Router
Best practices for ensuring code runs only on the server in Next.js App Router applications.
Read more →
Builder.io
Material UI
Transform Figma designs into React components using Material UI with AI-powered tools.
What are React Server Components?
An introduction to React Server Components and how they change the way we build React applications.
Read more →
Builder.io
Figma to Tailwind CSS
Convert Figma designs to components using Tailwind CSS utility classes.
Read more →
Builder.io
React Intersection Observer - A Practical Guide
Implement lazy loading, infinite scroll, and scroll-triggered animations with Intersection Observer in React.
Read more →
Builder.io
Create Staggered Text Animation with Tailwind CSS and React
Build engaging text reveal animations using Tailwind CSS and React with staggered timing.
Read more →
Builder.io
Figma to Svelte
Convert Figma designs to Svelte components with clean, reactive code.
Active Navlink Transitions with HTML, CSS and JavaScript
Create smooth, animated navigation link indicators using HTML, CSS, and vanilla JavaScript.
Read more →
Builder.io
Next.js
Understanding the differences between layouts and templates in Next.js App Router and when to use each.
Read more →
Builder.io
Creating a Scrolling Logo Animation with Tailwind CSS
Build an infinite scrolling logo carousel using only Tailwind CSS, no JavaScript required.
Read more →
Builder.io
Bun vs Node.js
A comprehensive comparison of Bun and Node.js, covering performance, compatibility, and use cases.
Read more →
Builder.io
Building Adaptive User Interfaces in React Native
Techniques for creating responsive layouts that adapt to different screen sizes in React Native.
Read more →
Builder.io
Qwik City Routing
A visual exploration of routing concepts in Qwik City, the full-stack framework for Qwik.
Read more →
Builder.io
SvelteKit Routing
A visual walkthrough of SvelteKit's file-based routing system and navigation patterns.
Read more →
Builder.io
Routing and SEO Metadata in Next.js 13
How to configure routing and optimize SEO metadata in Next.js 13 App Router applications.
Read more →
Builder.io
A Visual Guide to Layouts in Next.js 14
Understanding layouts in Next.js App Router through visual diagrams and practical examples.
Read more →
Builder.io
A Visual Guide to Routing in Next.js 14
A comprehensive visual guide to understanding the App Router in Next.js 14.
Read more →
Builder.io
The React Ecosystem in 2023
An overview of the React ecosystem in 2023, covering popular libraries, tools, and best practices.
Read more →
Builder.io
How to Test Custom React Hooks with React Testing Library
Best practices for testing custom React hooks using React Testing Library's renderHook API.
Rapid Mock API creation with ChatGPT and json-server
Use ChatGPT to generate mock API data and json-server to create a working REST API in minutes.
Read more →
Builder.io
Stream OpenAI Chat Completions in JavaScript
How to implement streaming responses from OpenAI's API in JavaScript applications.
Read more →
Builder.io
Visualizing the Close Queue in the Node.js Event Loop
Understanding how the Close Queue processes cleanup callbacks in the Node.js event loop.
Read more →
Builder.io
Visualizing the Check Queue in the Node.js Event Loop
A deep dive into the Check Queue and setImmediate callbacks in Node.js event loop.
Read more →
Builder.io
Visualizing I/O Polling in the Node.js Event Loop
How I/O polling works in the Node.js event loop and its impact on asynchronous operations.
Read more →
Builder.io
Visualizing the I/O Queue in the Node.js Event Loop
Understanding how I/O callbacks are processed in the Node.js event loop with visual examples.
Read more →
Builder.io
Visualizing The Timer Queue in Node.js Event Loop
How setTimeout and setInterval callbacks are processed in the Node.js event loop.
Read more →
Builder.io
Visualizing nextTick and Promise Queues in Node.js Event Loop
Understanding the microtask queues in Node.js and how process.nextTick and Promises are prioritized.
Read more →
Builder.io
A Visual Guide to the Node.js Event Loop
A comprehensive visual explanation of how the Node.js event loop works under the hood.
Read more →
Builder.io
GitHub Copilot CLI
Exploring GitHub Copilot CLI, an AI assistant that helps you write shell commands.
Read more →
Builder.io
3 Essential React Testing Library Tips
Improve your React component tests with these three practical React Testing Library tips.
Node.js module.exports vs. exports
Understanding the difference between module.exports and exports in Node.js CommonJS modules.
Read more →
Builder.io
Say Goodbye to Package Manager Chaos with ni
Use ni to automatically detect and run the right package manager commands for any project.
Read more →
Builder.io
