8/21 demo: Building component libraries from Figma with AI

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io
Contact sales

8/21 demo: Building component libraries from Figma with AI

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Agent credits offer a basic, transparent way to use Builder's agentic AI capabilities, which automatically scales its reasoning depth to match each task’s needs.

Builder's switching from message-based credits to token-based pricing because agentic AI systems think, reason, and use tools differently from traditional chat models. The AI scales computational effort with task complexity, using more tokens for hard problems and fewer for basic ones.

An Agent credit is Builder's unified usage metric for generative AI operations across the Builder platform. Each Agent credit represents a fixed dollar value that covers the underlying model costs plus Builder's service margin.

Why usage-based credits work:

  • Simplicity: one currency for all AI operations
  • Transparency: Understand exactly how model costs translate to credits
  • Flexibility: ability to both rollover and pool credits across your team

Builder believes in complete pricing transparency. The cost formula is straightforward:

Credit Cost = Pass Through LLM Token Cost × (1 + 0.25 margin)

Base credit value: $0.05

  • Model cost: $0.04
  • Builder's margin: $0.01 (25%)

This transparent approach means you're never surprised by hidden fees or markup. As model pricing evolves, Builder will adjust pricing to maintain fairness while ensuring sustainable service.

Different token types have different costs based on computational complexity. Here's how Anthropic Claude Sonnet 4 tokens convert to credits:

Token typeCost per 1M tokensUse caseAgent credits per 1M tokens

Input

$3.00

Initial prompts and context

75 credits

Cache write

$3.75

Writing to cache for reuse

94 credits

Cache read

$0.30

Retrieving cached context

8 credits

Output

$15.00

Generated content, responses

375 credits

Input tokens are the most cost-effective for providing context. Every prompt, question, or piece of content you send to the model counts as input. This includes your initial requests, follow-up questions, and any context you provide—like pasting code snippets or design specifications. Input tokens are processed once and discarded after the response.

Cache write tokens enable you to write once and reuse many times. When the system processes large context—like your entire codebase or a long, written research document—it writes this information to cache for future reuse. The upfront cost is higher than input tokens, but pays off through cheaper cache hits later.

Cache hits offer significant savings for repeated context. After content is cached, subsequent operations that reference the same context—like asking follow-up questions about your codebase, or iterating on a component—use cache hits instead of reprocessing. This creates major cost savings for ongoing work on the same project.

Output tokens are premium-priced as they require the most computation, and generally where the most value is derived. Every word, line of code, or character that is generated costs more because the model must actively create new content rather than just process existing information. Longer responses cost more, but the quality and accuracy justify the premium pricing.

These scenarios are for demonstration purposes only. The numbers provided are approximate and will vary due to the non-deterministic behavior of generative AI.

This section covers examples of how credits translate to actual generative AI tasks. Expand each for details:

Description: A UX designer needs to add a carousel component designed in Figma.

Prompt with context: “Create a carousel component using this design [attached Figma design]”

Additional context: Figma frame copied and pasted with the Builder plugin

Estimated credits

  • 1 credit generating in Figma
  • 4 credits exporting to Figma
  • 11 credits generating a working demo in an app

Description: A cross-functional team needs a working prototype of an onboarding flow to demo to stakeholders.

Prompt with context:"Create a 4-step user onboarding flow on /welcome: 1) Welcome & account setup, 2) Profile information, 3) Preferences selection, 4) Confirmation. Include progress indicators, form validation, ability to go back/forward, and integration with our user API. Make it mobile-responsive."

Additional context: n/a

Estimated credits: 18 credits

Description: A product manager needs to create a user settings feature by attaching a Product Requirement Document.

Prompt with context: “Based on this Product Requirements Document [attach document], create a user profile settings page on /settings that allows users to update their personal information, change password, manage notification preferences, and upload a profile picture. Include proper state management and loading states.”

Additional context: 124kb PRD attached as a PDF

Estimated credits: 37 credits

Description: A product team wants to create a lightweight design system based off of their existing components.

Prompt with context (from within an existing app):

“Using this application as context, help create a set of css variables that can be used to apply the branding and design to reusable web content.

These tokens will be for the basis of a design system. Be sure to organize the tokens in sections clearly marked by comments, and be sure to include a fairly exhaustive list of clearly named tokens that describe their function and meaning. Use comments to help guide use of the tokens.

Make sure the set generated includes:

- Base colors (a set of color primitives selected from the image, named after the color)

- Neutrals (any grays or neutral tones)

- Semantic colors: success, warning, error

- Text colors: default, subtle, muted, inverted, brand

- Background colors: default, muted, inverted, brand

- Border colors

- Font families

- Font sizes

- Font weights

- Line heights

- Letter spacing

- Spacing scale tokens (used for margin, padding, size, etc)

- Border radii

- Border widths

- Box shadows

- Button colors for primary and secondary (text color, background, hover color, etc)

- Button sizes and border and radius

- Icon sizes

- Link colors (primary and secondary)

- Container widths

- Card component tokens (background, radius, colors, etc)

Also include any other tokens you might feel are required to successfully recreate the design in the image. Tokens should be set to the value of other tokens as appropriate (like setting a border color to a base color, etc).”

Additional context: Existing codebase with 15,500 lines of code used as context

Estimated credits: 18 credits

Description: An admin needs a CRUD dashboard for managing feature-flag configurations.

Prompt with context: "Generate an admin panel where users can manage feature flags with list, edit, and search capabilities."

Additional context: n/a

Estimated credits: 20 credits

Plan typeFusionPublish

Free

  • 250 monthly credits total
  • 50 credit daily limit
  • Credits shared across all users in a space

Note: free plan capacity is fixed. Adding users doesn't increase the 250 credit pool.

  • 250 monthly credits total
  • 50 credit daily limit
  • Credits shared across all users in a space

Note: free plan capacity is fixed. Adding users doesn't increase the 250 credit pool.

Pro

  • No daily limit
  • 500 monthly credits per user
  • Add more credits as needed
  • Monthly rollover
  • Credits shared across all users in a Space
  • No daily limit
  • 500 monthly credits per Space
  • Add more credits as needed
  • Monthly rollover
  • Credits shared across all users in a Space


Enterprise

  • Custom pricing, service capacity, and terms
  • Supports both committed and on-demand pay-as-you go rates
  • Custom pricing, service capacity, and terms
  • Supports both committed and on-demand pay-as-you go rates


Notes

Users that purchased before May 3 ,2025 will remain at their current limits, but can upgrade to the above plan at anytime.

All existing Publish spaces will be upgraded to these above limits.

When you need more than your base allocation, you can purchase additional credits.

Free plan

On-demand credits are not available. Upgrade to Pro or Enterprise to access additional credits.

Pro plan

  • $25 per 500 credits
  • Buy credits in advance, use them over time
  • Once purchased, credits roll over until used or monthly capability limit reached
  • Best for predictable increased usage

Enterprise plan

Flexibility of committed contract credits and pay-as-you-go credits. Contact Sales for tailored enterprise pricing and credit allocations. This section covers example cost scenarios.

Scenario 1: Free user daily limit

Sarah uses 50 credits by noon for code generation. Since she’s hit her daily cap, she needs to wait until tomorrow for more credits or upgrade to Pro for immediate access.

Scenario: Pro team with on-demand credits

A 3-person Pro team has 1,500 monthly credits. They purchase 500 additional credits for a major project, giving them 2,000 total credits with rollover protection.

Credits pool at the team, Space, or Organization level, so everyone collaborates from the same credit allocation without individual usage limits.

  • All plans: no individual limits; teams use credits from the shared pool
  • Free & Pro plans: everyone in your Space shares the same credit pool.
  • Enterprise plans: everyone in your Organization shares the same credit pool.

Building products doesn't align to subscription cycles. Some months you're in deep development mode and burn through credits for prototypes and iterations. Other months you're in planning or testing phases with lighter AI usage. Rollover is designed to match how teams actually work.

  • Free: No rollover; credits reset daily (50) up to the monthly limit (250).
  • Pro & Enterprise: Credits roll over up to your monthly capacity.
  • Maximum credits: Never more than 2x your monthly amount.
  • Month 1: Use 50 credits then roll over 450 credits.
  • Month 2: Start with 950 credits (450 rolled + 500 new), use 100 credits so that 850 are unused, but only 500 can roll over.
  • Month 3: Start with 1,000 credits (500 rolled + 500 new).
  • Month 1: Use 200 credits then Roll over 800 credits.
  • Month 2: Start with 1,800 credits (800 rolled + 1,000 new), use 600 credits so that 1,200 are unused, but only 1,000 can roll over.
  • Month 3: Start with 2,000 credits (1,000 rolled + 1,000 new).

Need help with credits or billing? Reach out through:

Free users: Must upgrade to Pro or Enterprise to purchase additional credits

Pro users: buy 500 credits for $25, credits stay on your plan until your subscription renews

Enterprise users: choose between commited credits or pay-as-you-go monthly billing (with a premium charge

No, credits do not expire but you or your team cannot have over 2x your monthly amount.

Status indicators in your dashboard show Included, Overage, or Blocked.

When you hit your limit, new AI operations are blocked until you purchase more credits or wait for the next billing cycle.

Free: No rollover; your 50 daily and 250 monthly credits reset completely.

Pro & Enterprise: You can roll over up to your monthly allocation (never more than 2x your monthly amount)

Yes! Credits pool at the space level (Free & Pro) or organization level (Enterprise). All users in the pool share the total credit capacity. How can I track my credit usage? Free and Pro users can see credits used across their entire space at /account/subscription.

Enterprise users can display the same Space-level information, but also Organization-wide information at /app/organization-insights. There, they can display usage across all Spaces as well as usage per user.

All users can also access trackers in-app while working within a project by clicking the Builder logo at the top left of the window.

For free users, daily limits reset at 12 AM PST. Monthly limits reset at 12 AM PST on the first day of the month.

For Pro & Enterprise users, monthly limits are connected to your billing period. Monthly limits reset every month on the same date that you started your subscription.

No. Additional credit purchases are non-refundable.

No. The only way to access more credits before your billing period resets is to add additional credits to your subscription.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

Security

Privacy Policy

SaaS Terms

Compliance

Cookie Preferences

Gartner Cool Vendor 2024