How to build a website with Claude, ChatGPT or Cursor using ReactFrame components

You can ask Claude, ChatGPT or Cursor to build a website out of ReactFrame components the same way you'd ask a designer: describe the business, and it picks the sections, installs the components and writes the copy. This post shows the setup, a prompt that works well, and what you get back.

What the assistant can see

ReactFrame publishes everything an AI assistant needs to work with the catalog without guessing:

• llms.txt (following the llms.txt proposal), a plain-text map of every component, kit and collection, with prices.
• A design guide with the tokens, type scale, spacing, image rules and page recipes the assistant should follow, so a page made of many components still looks like one design.
• A Model Context Protocol (MCP) server, reactframe-mcp, that lets the assistant search components, install free ones and price premium ones.
• A quote endpoint that prices a list of components in one request.

1. Connect your assistant

Claude Code, one command:

claude mcp add reactframe -- npx -y reactframe-mcp

Cursor and other MCP clients, add this to your MCP config:

{
  "mcpServers": {
    "reactframe": { "command": "npx", "args": ["-y", "reactframe-mcp"] }
  }
}

ChatGPT or Claude.ai without MCP: nothing to install. Start your prompt with "Read reactframe.com/llms.txt and reactframe.com/ai/design-guide.md, then…".

2. Ask for the site

Be specific about the business, the audience and the sections you want. For example:

Build a one-page website for "Moda Roasters", a specialty coffee shop in Kadıköy, Istanbul,
using ReactFrame components. Warm, calm look, light mode. Sections: hero, our coffees,
gallery, Google reviews, opening hours, location and footer. Follow the ReactFrame design
guide, and tell me what any premium components would cost.

3. What comes back

A good run looks like this:

1. Picks a kit or recipe. For a café the design guide suggests the local business recipe: a photo hero, a menu section, a gallery, reviews and Business Hours.
2. Installs the free components with the shadcn CLI and fills them with your content, one palette and one type scale across all of them.
3. Leaves placeholders for premium components instead of copying them, with a comment naming the component and its link, so the page structure is complete.
4. Ends with a quote: which premium components the design uses, and the All-Access link that unlocks them.

4. Review it like a designer would

Before you ship, check the things assistants most often get wrong:

• One accent color. Every component should use the site's accent, not its own default.
• One h1. The hero heading should be the only <h1>, with your main keyword in it.
• Real content. Replace placeholder photos and any invented numbers.
• Mobile. Open it at phone width and scroll the whole page.

Why this works better than "make me a website"

A general-purpose assistant building from scratch invents a new design system every time. Giving it a catalog of finished, tested components plus a rulebook for combining them turns the job into assembly: the assistant chooses and connects pieces, and each piece is already responsive, themeable and animated.

Start from Build a site with your AI, or browse the kits to see which components are designed to go together.