# FrameKit

> FrameKit is a WordPress plugin that turns a Figma frame into a native, editable page in Bricks, Elementor, Divi 5, Oxygen 6 or Gutenberg.

Everything below as one plain-text file: https://framekitwp.com/llms-full.txt

## Product

- [FrameKit](https://framekitwp.com/): FrameKit is a WordPress plugin that turns a Figma frame into a native, editable page in Bricks, Elementor, Divi 5, Oxygen 6 or Gutenberg.
- [Changelog](https://framekitwp.com/changelog): Release notes for FrameKit, the Figma to WordPress plugin: what was added, changed and fixed in each version.

## Builders

- [FrameKit for Divi 5 · Figma to Divi 5 modules](https://framekitwp.com/divi): Paste a Figma frame link and get a native Divi 5 page: real modules, tablet and phone values, Divi global colours and Theme Builder header and footer.
- [FrameKit for Elementor · Figma to Elementor containers and widgets](https://framekitwp.com/elementor): Paste a Figma frame link and get a native Elementor page: containers and widgets, tablet and mobile controls, and Kit global colours.
- [FrameKit for Oxygen 6 · Figma to Oxygen elements](https://framekitwp.com/oxygen): Paste a Figma frame link and get a native Oxygen 6 page: Containers, Text and Text Links, styles per breakpoint, and your colours as Oxygen variables.

## Docs

- [Getting started](https://framekitwp.com/docs): Turn a Figma frame into a native, editable page in Bricks, Elementor, Divi 5, Oxygen 6 or Gutenberg.
- [Importing a frame](https://framekitwp.com/docs/importing): How FrameKit reads your layers, guesses their roles, and writes a draft you approve.
- [Patterns](https://framekitwp.com/docs/patterns): The 19 patterns FrameKit recognises, how it spots them, and what each becomes in every builder.
- [Tablet and mobile](https://framekitwp.com/docs/breakpoints): How tablet and mobile frames become each builder's own breakpoint settings.
- [Colours and type](https://framekitwp.com/docs/colours): How Figma colour and text styles become your site's global colours and type settings.
- [Theme kit](https://framekitwp.com/docs/theme-kit): The child theme, header and footer templates, variants and ACF blocks FrameKit writes around your pages.
- [Figma diff and re-imports](https://framekitwp.com/docs/figma-diff): See what changed in Figma after launch, and re-import without losing edits made on the site.
- [FrameKit Studio](https://framekitwp.com/docs/studio): Generate a token set from foundations and compose pages from it, without a Figma file.
- [AI and MCP](https://framekitwp.com/docs/ai): Optional: let an AI client check FrameKit's role guesses through its MCP server. You still sign off.

## Design system

- [Component manifest](https://framekitwp.com/components.json): every UI component, its props as JSON Schema, when to use it and its design tokens.
- [Agent rules](https://framekitwp.com/AGENTS.md): how to build UI in the FrameKit repository.
- [GraphQL catalogue](https://framekitwp.com/api/graphql): POST { query }. Read-only. Types: Builder, Pattern, PatternMapping.