FEATURES

Plan the direction. Build the system. Check the result.

Genable starts from a detailed brief, works through native Figma operations, and gives the model ways to inspect what it made. These six areas show where that loop is useful.

PLAN · BRIEF TO HIERARCHY

Visual direction

Audience, content, brand, and mood shape hierarchy and density before the canvas work begins.

HERO One clear
focal point

Primary Secondary

TYPE 32 / 40 DISPLAY

ACCENT One focus

DENSITY Calm

RHYTHM 4 · 8 · 16 · 24

BUILD · NATIVE STRUCTURE

Components

Create component frames, properties, states, and Auto Layout as editable Figma structure.

Primary Secondary Outline Ghost

sm sm sm disabled

BUILD · TOKENS + MODES

Variables

Create collections and modes, then bind supported properties instead of scattering values.

BUILD · RELATED STATES

Variants

Light Aa Bb Action

Dark Aa Bb Action

Brand Aa Bb Action

BUILD · REUSABLE CONTEXT

Design system

Organize pages and sections, or import a design.md to give the agent reusable direction.

CHECK · READ + SEE + REFINE

Check & refine

Inspect structure, capture a screenshot, and continue editing in the current session.

LEARN BY DOING

Choose the surface that fits your work.

Work conversationally inside Figma with the plugin, or give a STDIO MCP client a local path to the same typed Figma operations.

Install from Figma Community Set up the MCP path

MOBILE375 × 812

DASHBOARD1200 × 800

LANDING1440 × 900