Bolt.new · 索引內容

Highlights 58% of U.S. small businesses now use generative AI, up from 40% a year ago — and the adopters are landscapers, retailers, and service businesses, not tech companies. Most AI tools cost $15 to $50/month. The average small business runs five of them, saving five to 15 hours per week on content work alone. The four use cases driving real ROI: marketing and content, customer service, data analysis, and building digital tools. Owners who start with a specific problem ("stop writing the same three follow-up emails") get results the same day. Owners who start with "I want to use AI" stall. Non-technical owners are building working websites, booking systems, and payment dashboards in an afternoon without writing a line of code with tools like Bolt.new. What AI for small business looks like in practice AI for small businesses means using artificial intelligence tools to handle routine work: marketing, customer service, website creation, and data analysis. You don't need technical expertise or a large budget. As of 2026, 58% of U.S. small businesses use generative AI (U.S. Chamber of Commerce, 2025). 82% of businesses with fewer than five employees believe AI doesn't apply to them…

Welcome to 2026. The new year is the perfect time to look back at what changed in the last 12 months and get ahead of what’s coming next. In terms of what changed: 2025 was the year the general public started using AI en masse for coding and design. People made some amazing stuff. But in 2026, builders will have to take things to a new level to stay competitive as AI coding and design becomes increasingly commonplace. In a recent video tutorial, designer and power-user Jakub Skrzypczak walked through: Why early 2025 AI websites all looked the same What the new baseline looks like now The exact techniques you can use to create websites that feel premium, intentional, and genuinely stunning in 2026 Check out the video or skim through the key learnings below. The 2025 problem: Everything looked the same By the end of 2025, most people familiar with vibe coding could tell when a website or app was built with AI. A lot of AI builders generated pretty similar-looking outputs. If you used any AI builder last year, you probably saw: Heavy gradients everywhere Rigid cookie-cutter grids Overuse of emojis The same repetitive section order (features, pricing, testimonials, CTA) The same generi…

You need a website. You reach out to three agencies and a couple of freelancers. The quotes come back: $8,000. $14,000. $22,000. The cheapest option takes ten weeks and you need to put down a 50% deposit upfront. You know exactly what you want. You can picture the layout, the colors, the flow from landing page to checkout. But somewhere between your vision and the final product, it gets lost in translation. Revision rounds. "Can you make the logo bigger?" emails. A final site that's close but not quite right. There's a better way to spend that money. What a business website actually costs right now The numbers are sobering. According to Clutch.co's 2025 survey of 406 U.S. small business owners, 36% spend between $1,000 and $10,000 on their website. Most land closer to the top of that range. Freelance developers charge $1,500 to $8,000 for a small business site. Boutique agencies start around $6,000 and climb to $15,000 for a basic build. Need e-commerce, custom forms, or integrations with your existing tools? Expect $15,000 to $50,000 or more. And that's the build alone. Hosting, security updates, maintenance, and content changes add $1,100 to $5,000 per year. Many agencies charge …

Google Stitch, the AI-native design tool from Google Labs, just added an "Export to Bolt" button. One click takes your Stitch design, packages the full context (layout, components, design tokens, intent), and drops you into Bolt with everything pre-loaded. You pick up where the design left off and start building. In short: design in Stitch, click "Export to Bolt," and start building with your layout, components, and DESIGN.md already loaded. No re-explaining, no lost fidelity. If you've used Bolt to build from a prompt, you already know the feeling of watching an idea turn into a working application in minutes. This integration moves the starting line forward. Instead of describing what you want, you're handing Bolt a finished design with all the visual decisions already made. The prompt becomes richer because the design carries the context that words alone leave out: the spacing, the hierarchy, the way a layout breathes. The new Stitch update also ships MCP integration, which means coding agents can import screens from Stitch and sync visual changes back to your codebase. For teams that work across design and development, the loop between "what it looks like" and "what it does" ti…

AI coding is enterprise-ready Bolt.new generates production-ready code that can integrate directly into the infrastructure enterprise teams already operate on. Integrating with Azure gives enterprise organizations a direct path to go from prompt to prototype to product. With Bolt.new's adoption of Microsoft 365, users will also have access to the agentic coding platform through a Microsoft 365 and Microsoft 365 Copilot integration, providing a way for Microsoft customers to build within the tools they work in every day. The Bolt.new and Azure integration includes: Microsoft Marketplace listing: Bolt.new will be available for direct procurement through the Microsoft Marketplace, enabling buyers to transact through their existing Microsoft agreements Azure cloud platform deployment: Teams will be able to deploy Bolt.new-built applications directly to Azure infrastructure, with no additional configuration overhead Azure-native design system support: Bolt.new's design system capabilities align with Azure's development ecosystem, enabling consistent, scalable output aligned with an organization's design standards Enterprise-grade security and compliance: Bolt.new's Azure integration mee…

Every new version of a product is better (or at least it should be) than the previous one. The interesting part is digging into how much better the new version is. Our engineers have been getting into the nitty gritty details of Opus 4.7 for a while. They got into the nitty gritty of what's better and why it matters. Here's a rapid run down of what we think is better in the new model and why it matters: 1. Outperforms 4.6 in app-building evals by up to 10% We run every new model through our own evaluation suite before Bolt.new users can access it through the platform. Opus 4.7 outperformed Opus 4.6 across our app-building benchmarks, with gains reaching ~10% in the best cases. More refined, functional outputs at the first pass means fewer iterations in your prompt-to-production workflow. 2. Beat an unbeatable coding challenge Our engineering team maintains a set of AI-resistant coding challenges designed to target the known weak points of LLMs. They require genuine creative reasoning and deep insight. Most human engineers would struggle to solve them. Previously, no model has ever succeeded in working through one. Opus 4.7 did. It worked on the problem for 7.5 hours, with individua…

Why a design system matters A design system is a shared library of UI components (buttons, forms, navigation elements) and design tokens (colors, typography, and spacing). It is the visual identity of your company. It's also what you've been building vibe-coded prototypes without. If you've ever been curious why engineering gives you a one-way ticket to the backlog when you've brought them a fully functional, great looking vibe-coded prototype, this is why. A stroll down engineering lane Engineering isn't rejecting vibe-coded prototypes because they want to. They're rejecting them because they have to. Imagine trying to patch up a Lego build with play-doh. Those two mediums don't work together. Similarly, the end result from vibe coding platforms doesn't align with your company's codebase. It doesn't follow the same standards or use the same technologies that your engineers build with. A design system is the visual aspect of those standards. It's the building blocks for the visual layer of all products and digital assets. The prototypes you build without your company's design system will go to the back of the queue along with every other PRD and design mockup. The prototypes you bu…

Until now, giving Bolt context meant doing it by hand. Start a chat, describe the project, list the requirements, paste in the docs, then do it again every time something changed. Connectors change that. Bolt plugs straight into the tools you already work in: Notion, Linear, GitHub, Miro, Sentry, Context7, Granola, and Jira. What Connectors do A Connector is a direct line between Bolt and a tool you use. Once it's live, Bolt can read and edit your Notion pages while it builds, pull live task lists from Linear, or open a pull request from a GitHub issue, no copy-paste required. Bolt works with the context straight from the source, so you're not playing a game of AI telephone. Connectors run on MCP (Model Context Protocol), an open standard for tool-to-AI communication. Any tool with a remote MCP server can become a Connector, with no custom integration to build. Built-in Connectors Eight Connectors ship with Bolt today: Notion, Linear, GitHub, Miro, Sentry, Context7, Granola, and Jira. Pick one, authenticate with an API key or a sign-in, and Bolt can start doing what that tool supports: reading pages, pulling tasks, opening issues. Custom Connectors Need a tool that's not on the lis…

Overview You plan and design in Miro. You build in Bolt. Until now, the space between those two things was you. Describing diagrams, exporting docs, translating sticky notes into specs. With Connectors, that middle step disappears. Bolt integrates with Miro directly, reading your boards and pulling context from them without you playing translator. Here's how to set it up, and what you can do once it's live. Connecting Miro to Bolt The setup takes about thirty seconds. Open Bolt and click the + icon, then select Manage connectors. Find Miro in the list and click Connect Click Allow Access when prompted. Select the team you want to connect with Bolt, then click Add. Click Continue. That's it. You'll see MCP connecting briefly, and then a Connected pill in the top right corner confirming you're good to go. To verify: click the + icon again and select Connectors. Miro should be right there. See it in action: Watch the walkthrough video Building with Miro and Bolt Once connected, context flows both directions. You can pull from Miro into Bolt, or push from Bolt into Miro. Bolt works with the context on your board, so it's building from the full picture, not a summary of it. From Miro to…

There are a bunch of ways to make your website feel more interactive and mesmerizing. One option we've already covered is using video as a design element. While it's much more visually interesting than a static hero image, it's actually just the tip of the iceberg of what you can create in Bolt. The best sites on the internet take things a step further. They integrate motion that reacts, creating a deeper experience for visitors. In this walkthrough, designer and Bolt super-user Jakub Skrzypczak demonstrates how to add lifelike elements to your site using: Interactive shader-like backgrounds (no video required) Imported motion components (without mastering the tool they came from) Scroll-driven 3D scenes Video + distortion effects Glassy 3D hero components you can remix and redesign in Bolt And you don't need to learn five different motion tools to get a bespoke result. You just need Bolt. Got time? Watch the video. In a hurry? Instructions below. The secret of premium hero sections Scroll-stopping hero sections typically rely on one of the following tricks: 1) Ambient animation + cursor response On sites like Microsoft AI and Eduardo's portfolio, the background is a subtle animati…

PowerPoint and Google Slides are old news. Now, people are creating slide decks the simpler way with AI tools. In this tutorial, designer and Bolt super-user Jakub Skrzypczak demonstrates how to create a professional, interactive slide deck with Bolt fast. You'll learn: How to prompt Bolt so you get a professional layout on the first try Why web-based presentations beat traditional slide editors How to add motion, transitions, and interactivity that makes decks feel alive How to apply the same approach to a real-world deck (with charts, maps, toggles, sources) Got time? Watch the walkthrough. In a hurry? Get the highlights and snag the prompts below. The mindset shift: your slide deck is now a website Building a slide deck in Bolt is a little different than building a deck in PowerPoint in that, instead of building slides in a slide editor, you're essentially building a full-screen presentation website. That means you get: Pixel-perfect rendering across devices Real responsiveness (desktop to tablet to mobile) Real interactivity (hover, click, toggles, charts) Real animations (not "please loop this GIF") A single URL as the source of truth The best part, as always, is that Bolt can…

You've been building with Bolt. Your team's been building with Bolt. Now someone's asking the hard questions: "How do I know this code is secure?" "Do we have to use a new database? Our data has to stay where it is." "Can this work with our existing infrastructure?" "Who decides where this deploys?" They're good questions. And now, they have answers. Here's what's possible in Bolt for Teams today. Five features. Full control. Bolt for Teams now includes five foundational upgrades that give teams real control over how they build, secure, and ship. Each one is a direct response to the gaps that prevent teams from deploying AI-assisted development tools at scale. Here are the features that put you in control: Team Templates: Your team shouldn't be recreating the same project setup over and over. Save any project as a template so everyone builds on a shared foundation instead of diverging copies. Duplicates drift. Templates don't. Security scans: Verify your code is secure before you ship. Automated vulnerability detection catches things like missing Row-Level Security policies, mutable function search paths, and disabled password protection, then flags them with a one-click "Ask Bolt …

If you've been using Opus 4.6 in Bolt, you already know it's powerful. But you've probably also felt the friction, reaching for a top-tier model every time you need to spin up a component, fix a bug, or wire up an integration. The heavy stuff justifies it. The everyday work? That's 90% of your day, and it deserves something built for the pace. That's Claude Sonnet 4.6. Opus-class capability for your everyday work. And inside Bolt, it changes everything. Opus-class capability without the Opus price tag Previous Sonnet models were good enough for straightforward tasks. But the moment you threw something complex at them, a multi-step feature spanning front and backend, a refactor touching a dozen files, you could feel the ceiling. You'd switch to Opus anyway, or spend time hand-holding the model through steps it should've handled on its own. Sonnet 4.6 doesn't hit that ceiling. It's the most agentic Sonnet Anthropic has ever released. It proactively plans and executes tasks, parallelizes work, and handles complex features without needing you to intervene at every turn. For the vast majority of your coding work, you're getting Opus-quality output at a price point that makes sense for a…

The most expensive thing in software isn't building. It's rebuilding. That dashboard you set up last month? You're setting it up again. The settings page your teammate built for a client project? They're building it from scratch for the next one. That auth flow you nailed three weeks ago? Gone. Starting over. Not because the work was bad. Because there was no way to keep it. Every new project in Bolt starts blank. And every time you start blank, you're paying a tax: time, consistency, and all the small decisions you've already made once and have to make again. Today, that changes. Team Templates are live on Bolt. Team Templates are shared starting points your whole team builds from. Create a template from any project. Lock the foundation: the structure, the patterns, the decisions you've already made. Then let anyone on your team start from it, every time, without drifting from what works. This is different from duplicating a project. Duplicates drift. The moment someone changes a duplicate, it starts diverging. Two weeks later, you've got five versions of the same thing and none of them match. Templates stay locked. Your team builds on top of them, not away from them. Same startin…

A brand new coding model just dropped: Opus 4.6 is here and you can try it in Bolt today. Dom, our founding AI engineer, was genuinely blown away when testing it. But why take our word for it when you can test it for yourself. Try Opus 4.6 in Bolt What's new with Opus 4.6 in Bolt Runs complex tasks in parallel. First of its kind automatic multithreading capability. Bolt's agent paired with Opus 4.6 delivers powerful results with fewer prompts and less waiting. It breaks work into parallel streams and executes them simultaneously. Increased competence in large codebases. Previous models sometimes get overwhelmed in large projects. In our testing, Opus 4.6 paired with Bolt's agent demonstrated exceptional strength here. The more context, the better it performs. Thinks harder on tough problems. Simply select your desired level of "effort" and the model makes smart decisions on when to dig in deeper on tough problems. Reviews code like an experienced engineer. Edge cases, potential issues downstream, architectural implications, patterns that might cause problems later. You will receive more thorough reviews when you ask for them. What we saw in testing We gave Bolt a project management…

Designs change all the time. That's just how software projects work. Bolt has always supported Figma imports, but only at the start of a project. Which meant if you were mid-build and needed to add a design, you were stuck with two options: start over, or recreate the designs manually. Until today. Now, you can import Figma frames into your Bolt project at any time, even when you're deep into development. Import Figma frames into projects you've already started You can now bring Figma designs into any Bolt project, not just when you're starting fresh, but in the middle of building. When the design changes (and it always changes), your project adapts without requiring a rebuild. What this means for you: Import exactly what changed. Need the new modal design? Import that frame. Got a redesigned sidebar? Bring it in. You don't have to import everything. Just what you actually need. Keep your existing work intact. You've already connected your database. Your auth is working. Your state management is set up. None of that goes away. The new design components integrate with what you've already built. Update as designs evolve. First review comes back with feedback. Designer ships v2 of the…

You can build some pretty complex apps and tools with Bolt these days, including functional finance products. In this guide, we'll walk through how to build a finance product in Bolt that pulls customer and invoice data from your users' QuickBooks accounts. Fundamentally, a good finance tool requires two things: A clean UI your users understand instantly A secure, multi-tenant way for users to connect their own QuickBooks Establishing that secure connection is exactly what Pica AuthKit is for. It handles the OAuth flow, token refresh, and "who connected what" identity plumbing so you can focus on fine-tuning the product itself. What you'll build By the end of this walkthrough, you'll have: A simple finance dashboard UI in Bolt A "Connect QuickBooks" button that opens AuthKit A multi-tenant connection flow (each user connects their QuickBooks) A Customers table populated from QuickBooks An Invoices view (e.g., click a customer to see invoices) Before you start You'll need: A Bolt project A Pica account (for AuthKit + BuildKit) A QuickBooks developer app (for OAuth credentials) QuickBooks OAuth redirect URI (important!) When you create your QuickBooks OAuth app, set the redirect URL …

You’ve probably seen the viral hand and face tracking effects taking over X in recent months. Builders are creating endlessly fun interactive experiences online. In this tutorial, we’ll show you how to build interactive apps yourself using MediaPipe and Bolt. MediaPipe lets you track faces, hands, and bodies in real time using nothing but a camera. Bolt, of course, lets you turn that raw capability into real, usable products fast. This walkthrough features a total of four interactive apps: A MediaPipe interactive showcase A fitness rep counter An air piano controlled by your fingers A posture guardian and meeting engagement tracker Watch the walkthrough with Jakub Skrzypczak, designer and Bolt.new superuser: First: What’s MediaPipe? MediaPipe is Google’s open-source framework for real-time human tracking. It runs entirely in the browser and gives you structured landmark data you can build on immediately. MediaPipe supports four core detection modes: Face Tracks 468 facial landmarks Use for tracking expressions, gaze, and attention Hands Tracks 21 landmarks per hand Use for tracking gestures, instruments, and controls Pose Tracks 33 body landmakrs Use it for tracking fitness, postur…

Every website has a hero image. But these days, only the most cutting-edge, eye-catching sites use video as a design element. Integrating video into the backdrop or hero of your site elevates the aesthetic to one of dynamism, movement, and energy. Below are four ways to use video as a design element on a website, each with copy/paste prompts you can run in Bolt. In a recent video tutorial, Bolt power-user and designer Jakub Skrzypczak demonstrated how to create four captivating video-driven effects: Inverted headline over video (text flips the colors behind it) 3D tilted "window card" reveal (video peeks through a masked opening) Knockout text through a white overlay + blur (video shows through letters) Video + shader combos (change the vibe instantly) If you don't have time to watch the video, we're summarizing the key points below. Check out Jakub's demo environment: https://video-effects.bolt.host/ Experiment with the effects yourself: https://bolt.new/~/sb1-ief5nf8c Choosing a video Of course, integrating video into the design of your site requires that you first choose a video. For that, you have two options: Option A: Use placeholder videos (fastest) Tell Bolt to use any roya…

Want your app to text users automatically when something happens, like a booking confirmation, reminder, or alert? With Pica x Bolt, you can connect Bolt to Twilio in minutes to send transactional texts right to your users from your app or site. In this tutorial, we’ll build a meeting room booking app that sends SMS confirmation texts when a booking is successfully made. What you’ll build A meeting room booking UI in Bolt Time-slot selection and booking form Phone number collection Automatic SMS confirmation via Twilio Want an in-depth look at Bolt x Twilio? Watch the walkthrough. Step 1. Build the booking UI in Bolt Let’s start by creating the interface. Prompt Bolt: `Build me the UI for a meeting room booking app. Tip: Use Enhance Prompt + Plan Mode if you want Bolt to think through layout and edge cases before building. At this point, nothing sends messages yet. We’re just collecting inputs. Step 2. Set up Twilio (one-time) Before connecting Twilio to Bolt, you need a messaging service. Create a Twilio account Go to twilio.com Verify your phone number Buy or assign a Twilio phone number (trial works) Create a Messaging Service In the Twilio Console: Go to Messaging → Services Cl…

Want to enable non-developers to edit your blog or marketing site without touching code? Use Notion as the CMS for your Bolt site. With Pica x Bolt, you can connect Bolt to Notion in minutes to add and edit posts to your Bolt site via the Notion CMS. What you’ll build A blog page in Bolt with post cards (image, title, description) Posts loaded dynamically from a Notion database A post detail page that renders the Notion page content (as markdown) (Optional) Drafts: hide posts until they’re “Done” Want an in-depth look? Watch the walkthrough. Step 1. Build the blog UI in Bolt In Bolt, prompt: Build me a blog page that has articles listed in cards with an image, title, and truncated description. For now, this is all static dummy data. When I click on a card, it should open that blog in a new page. (Why dummy data? Because if you don’t say this, Bolt may create a Bolt database automatically. We want Notion to be the source of truth here.) Step 2. Create your Notion database In Notion: Create a new page → add a database (Notion’s “Document Hub” template works great). Make sure you have these properties: Name (Title) Description (Text) image (Files & media) Optional (recommended for dra…

Want your Bolt app to send welcome emails, contact forms, payment reminders, payment confirmation emails, password resets, receipts, and other important stuff? With Pica x Bolt, you can connect Bolt to Gmail in minutes to send transactional emails straight from your app to your user’s inbox. All we’ll need is: Bolt + Pica + Gmail One connection One prompt Should take less than 10 minutes. By the end of this walkthrough, you’ll have: A Gmail connection configured in Pica A working Bolt app that can send transactional emails via Gmail A clean email template you can customize in seconds The exact setup that avoids the most common “why isn’t this sending?” errors Let’s do this. Step 1: Connect Gmail in Pica First, we’ll need to connect Gmail to Bolt via Pica. A quick refresher if you’re not familiar: Pica is basically the connector that let’s Bolt talk to Gmail (and 170+ other tools) securely. Building a new integration in Pica is simple. Here’s how it works: Go to Pica Connections: app.picaos.com/connections Click + Add Connection Select Gmail Authenticate with your Google account Save your Gmail connection key (you’ll need it in Bolt) The Gmail account you connect to Pica will be the…

This is the fifth edition of our Bolt Rebuilds series. If you want to see our other Bolt Rebuilds, check out #1 (adding assets to your project), #2 (import and customize open source components), #3 (hand tracking), and #4 macOS-style portfolio site. Making seasonal updates to your site typically requires time-consuming coordination between designers, developers, and maybe a copywriter or two. But with Bolt, you can make your site look and feel more festive yourself in minutes. In this Bolt Rebuild, designer and super user Jakub Skrzypczak demonstrates how to create: A personal portfolio updated for Christmas (and other holidays) An e-commerce store adapted to drive seasonal sales The same techniques work that work for Christmas also apply to Halloween, Easter, Valentine’s Day, or any other seasonal or timely stylistic change you want to make to your site. Example 1: Turning a personal portfolio into a Christmas experience We started with a personal portfolio Jakub had already generated with Bolt. First, Jakub swapped out the hero image. This is an easy change that makes a big difference, since the hero image is your first impression. To do this, Jakub used Gemini (Nano Banana) to: …

This is the fourth installation of our Bolt Rebuilds series. If you want to see our other Bolt Rebuilds, check out #1 (adding assets to your project), #2 (import and customize open source components), and* #3 (hand tracking)*. The best portfolio sites on the internet are way more than just a list of past projects. They’re unique, quirky snapshots of who you are as a creative, a thinker, and a builder. In this edition of Bolt Rebuilds, designer and power-user Jakub Skrzypczak walks through how to create a portfolio that truly stands out in a sea of static sites. Instead of building a traditional homepage with a few links to previous work, Jakub built a personal operating system that runs entirely in the browser. The finished product includes a desktop view, folders, apps, a terminal, mini games, settings, Easter eggs, and achievements. It’s surprisingly simple to build and a lot more interesting than a resume. The inspiration for this tutorial comes from the new generation of unconventional websites taking both B2B and B2C audiences by storm, including PostHog and Oatly. These sites are playful, opinionated, and relentlessly engaging. One note: In this rebuild, our goal wasn’t to co…

This is the third installation of our Bolt Rebuilds series. If you want to see our first two Bolt Rebuilds, check out #1 (adding assets to your project) and #2 (import and customize open source components*.) We saw the viral hand-tracking particle cloud making rounds on X and just had to see if Bolt could recreate it. So our very own Jakub Skrzypczak, power-user and designer, opened Bolt and got to work with nothing but a handful of prompts and a webcam. In 7 minutes, he’d recreated the hand tracking effect in the form of four working prototypes. Watch the video tutorial below or read on to skip straight to the prompts that made this magic happen. Build #1: The particle cloud Jakub started by describing the stunning effect he wanted to create in plain English: an immersive, real-time 3D particle system controlled by hand gestures. Prompt 1: You are a skilled web developer tasked with creating an interactive 3D particle system with hand gesture controls. Build a complete web application with the following specifications: Core Functionality: Create a real-time 3D particle system using Three.js or similar WebGL library Implement hand tracking using MediaPipe Hands or similar computer …