Create Figma Page — Build Pages Directly in Figma

A skill that builds a real page on the Figma canvas straight from a brief, with no code project and no mockup step in between. It writes variable-bound, component-based, auto-layout frames into a Figma file, so the result is something a designer can keep editing. Ask for one page, or for several structurally different layouts of the same page to compare before you commit to a direction.

What it does

• Builds into a new Figma file or adds a page to an existing one. In an existing file it checks the connected libraries and uses their components, variables and text styles instead of drawing lookalikes
• Builds one page at 1440px, or the 390px mobile frame when your brief says mobile is the main device
• Builds several layout patterns of a whole page, or several variations of one section of an existing page, side by side. The palette, fonts, copy, images, variables and components are shared, so the comparison is about structure alone
• Binds every color to a variable, turns anything that repeats three or more times into a component, and names every layer
• Uses free Unsplash stock photos only after you approve the exact list of files, or neutral gray placeholders
• Checks its own work with a screenshot and a tree-wide audit (unbound white fills, text overflow, clipped content, wrong fonts, empty frames, missing images), then reports what it assumed, left out and did not check

How it works

1. Prepares: loads the official Figma skills, opens a session, and inspects the file (pages, variables, fonts, connected libraries).
2. Reads the brief: BRIEF.md if you have one, otherwise a few questions about the site, the design direction, images, page type and sections.
3. Asks how many layouts: one page, several patterns, or several variations of one section. For several patterns it asks how far to break from default layouts: bold, balanced, standard, or a mix.
4. Builds: variables, fonts and components first, then the sections, one pattern at a time with a screenshot and an audit after each.
5. Reports: file and frame links, what was shared, what is a sample, and what was not checked.

About Figma AI credits

Figma's own design agent draws on your Figma AI credits. This skill writes through the Figma MCP tools use_figma and upload_assets instead. In our test runs of the single-page flow and of a three-pattern run the credit balance did not change (we read it in the Figma menu before and after). The skill never calls generate_image, send_prompt or a second send_code_to_figma, which are documented to use credits. Figma can change how its tools are metered, so check your own balance after your first run.

Works with (all optional)

If one of these is installed, the skill uses it. If it is not, it carries on without it.

• Escape AI Slop (cognitive-ui-design): gives each pattern a different eye-tracking structure so the layouts really differ
• Japanese Web Guideline: typography checks for Japanese pages, with the counts in the report
• The official Figma plugin skills (figma-use, figma-generate-design): loaded before every write

Requirements

An agent connected to the official Figma MCP server (setup guides: https://www.figma.com/mcp-catalog/) and edit access to a Figma file, or a Figma team where the skill may create one. Stock photos come from Unsplash and need internet access; gray placeholders work offline. Photos are for mockup use: check rights and any brand marks that appear in them before you publish a design.

Live demo

The example session above builds the top page of a fictional sustainable apparel shop in three layouts (Z-pattern, F-pattern and bottom-up) from one short brief, with 11 shared components and 5 photos, and a tree-wide audit with no findings. The screenshots show the three results.