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

Provide Builder's AI with rules within the .builder/rules/ directory to modify the AI's behavior and output. The AI may create and maintain an AGENTS.md file to provide context for AI agents.

  • Add rule files with an .mdc extension to a .builder/rules/ directory. These files should provide explicit instructions to the AI.
  • An AGENTS.md file may be created by the AI to preserve details about your project's context.

AI doesn't retain memory between sessions. Rules provide persistent and reusable context.

To create a rules file for Builder's AI:

  1. Create a .builder/ directory within the root of your project.
  2. Within the .builder/ directory, create a rules/ directory.
  3. Create a .mdc file within the rules/ directory. Provide a sensible name for your file and provide the metadata as shown below.
# .builder/rules/component-structure.mdc
---
description: Component structure
globs:
alwaysApply: true
---

All components should have prop validation.

Organize new components in the following way:
  - src/components/{feature}/{ComponentName}.tsx

Export components from an index.ts file in each directory.

In the rules file above, specific instructions are provided to the AI about the component structure.

The following options are available as keys within the metadata header:

  • description: a brief description of the file's rules
  • globs: specific file paths where these rules should apply
  • alwaysApply: if set to true, the AI always applies these rules; otherwise, the AI contextually decides when to apply the rules

Builder's AI will not make any changes to your rule files.

Rules should be actionable, focused, precise, and scoped.

  • Keep rules under 500 lines.
  • Split large rules into multiple, composable rules.
  • Provide concrete examples or referenced files.
  • Avoid vague guidance. Write rules like clear internal docs.
  • Ensure rules in one file do not conflict with rules in another file.

Fusion currently supports .builderrules files as well.

All instructions can be placed in a .builderrules file and will be read by Builder's AI. Consider adding structured headings to improve the readability of this file.

These files can be placed in any directory, and Fusion will recursively search through your project to join each file. Files closer to the current working directory take precedence over files in parent directories.

This allows you to have project-wide rules in the root directory and more specific rules in subdirectories.

For more details, visit Project-level settings.

The Agents.md is designed to guide AI agents in understanding and working with your codebase. This file provides context-specific information about your project's structure, conventions, and requirements.

# Server Application - AI Agent Guide

## Backend Architecture

Node.js/Express server providing RESTful API endpoints 
and WebSocket support for real-time synchronization.

## Technology Stack
- **Node.js**: Runtime environment with ES modules
- **Express**: Web framework for REST API
- **Socket.io**: WebSocket implementation for real-time updates
- **Compression**: gzip compression middleware
- **CORS**: Cross-origin resource sharing support
- **Cheerio**: Server-side HTML parsing for web scraping
- **Node-fetch**: HTTP client for external API calls

// ...

Unlike the Builder rules files, the goal of AGENTS.md is to provide context for the AI as to the purpose of your project and key details.

This file will be created and managed by the AI. While you are welcome to adjust it on your own, keep in mind that the AI may update this file.

Updates to this file are a normal part of working with Builder's AI.

An AGENTS.md file should provide context, references, and organization.

  • Document the structure of your application. For example, identify where server code lives in contrast to front-end code.
  • Define coding standards, naming conventions, and style guidelines.
  • Include testing protocols and any specific testing requirements.

Learn more about Project best practices, or get started immediately with Project starter templates.

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