Agent skill

Figma From Code Setup Structure

by bitovi in bitovi/ai-enablement-prompts

Subagent for figma-from-code Phase 2. An agent skill from bitovi/ai-enablement-prompts.

Install Figma From Code Setup Structure

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-setup-structure -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts figma-from-code-setup-structure --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/4-setup-structure .claude/skills/figma-from-code-setup-structure && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "figma-from-code-setup-structure" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/4-setup-structure into .claude/skills/figma-from-code-setup-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-setup-structure", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/4-setup-structure

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-setup-structure -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts figma-from-code-setup-structure --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/4-setup-structure .agents/skills/figma-from-code-setup-structure && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "figma-from-code-setup-structure" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/4-setup-structure into .agents/skills/figma-from-code-setup-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-setup-structure", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-setup-structure -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts figma-from-code-setup-structure --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/4-setup-structure .cursor/skills/figma-from-code-setup-structure && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "figma-from-code-setup-structure" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/4-setup-structure into .cursor/skills/figma-from-code-setup-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-setup-structure", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/bitovi/ai-enablement-prompts.git --path plugins/figma-from-code/skills/figma-from-code/4-setup-structure

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-setup-structure -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts figma-from-code-setup-structure --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/4-setup-structure .gemini/skills/figma-from-code-setup-structure && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "figma-from-code-setup-structure" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/4-setup-structure into .gemini/skills/figma-from-code-setup-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-setup-structure", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts figma-from-code-setup-structure

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-setup-structure -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/4-setup-structure .github/skills/figma-from-code-setup-structure && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "figma-from-code-setup-structure" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/4-setup-structure into .github/skills/figma-from-code-setup-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-setup-structure", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-setup-structure -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install bitovi/ai-enablement-prompts figma-from-code-setup-structure --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/4-setup-structure .opencode/skills/figma-from-code-setup-structure && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "figma-from-code-setup-structure" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/4-setup-structure into .opencode/skills/figma-from-code-setup-structure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-setup-structure", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: figma-from-code-setup-structure
GitHub stars: 121
Token cost: ~2.1k tokens
SKILL.md length: 700 words
Files: 2
Skills in repo: 40
Repo updated: Sep 11, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Subagent for figma-from-code Phase 2. An agent skill from bitovi/ai-enablement-prompts.

Works in 6 steps: Create Pages → Build Foundations Page Content → Create Icons and Screens Container Frames → …
Tasks that involve Subagents
SKILL.md covers When to Use, Prerequisites, Required Inputs and Output Files, plus 3 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Figma From Code Setup Structure is an agent skill from bitovi/ai-enablement-prompts. Subagent for figma-from-code Phase 2. Creates the Figma file page skeleton, foundations documentation frames, and container frames needed by later phases. Requires variable collections to already exist.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `README.md`).

It sits in Agent Workflows, covering Subagents. It works with Figma. The repository describes itself as: Prompts Bitovi uses for software development. The licence is MIT.

When your agent uses it

Tasks that involve Subagents

Example prompts

“/figma-from-code-setup-structure”

Workflow steps

6 steps, taken from the step headings in SKILL.md.

Create Pages
Build Foundations Page Content
Create Icons and Screens Container Frames
Screenshot for Verification
Write Summary
Report

What it can do on your machine

Read from SKILL.md and the folder at commit df229b1. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript and json).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Figma From Code Setup Structure loads about 2.1k tokens when it runs. Until then it costs about 59 tokens; SKILL.md has 700 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~59
When it runs · the whole SKILL.md, loaded when a task matches: ~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from bitovi/ai-enablement-prompts at commit df229b1, republished under its MIT licence (© bitovi). 700 words, ~2,113 tokens.

Download SKILL.mdSave it as .claude/skills/figma-from-code-setup-structure/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: figma-from-code-setup-structure
description: Subagent for figma-from-code Phase 2. Creates the Figma file page skeleton, foundations documentation frames, and container frames needed by later phases. Requires variable collections to already exist.
model: claude-sonnet-4-5

Skill: Setup File Structure (Phase 2)

Creates the Figma file page skeleton, foundations documentation frames, and container frames needed by later phases. Runs as a subagent dispatched by the orchestrator, or standalone to set up a fresh Figma file for a code-to-Figma rebuild.

When to Use

When figma-from-code orchestrator reaches Phase 2
Standalone to set up a fresh Figma file after variable collections exist

Prerequisites

Variable collections (Palette, Semantic, Spacing) must already exist in the file (Phase 1 complete)
Load figma:figma-use (mandatory) before any use_figma call

Required Inputs

Input	Description	Source
`fileKey`	Figma file key	State ledger
`existingPages`	Pages already present in the Figma file	Phase 0a Figma inspection

Placeholders like {skillRoot} resolve from state.json → config.

Output Files

File	Contents	Consumed by
`.temp/figma-from-code/structure-summary.json`	All page and frame node IDs	Orchestrator (merges into `state.json -> figmaNodes`)

Workflow

1. Create Pages

Rename/create pages in this exact order. If a page with the target name already appears in existingPages, skip its creation.

Page Name	Purpose
`🎨 Foundations`	Color swatches, type specimens, spacing scale
`📦 Components`	All component sets (built in Phase 3)
`📄 Screens`	Assembled page screens (built in Phase 4)

2. Build Foundations Page Content

On the 🎨 Foundations page, create three documentation frames stacked vertically with 80px gaps. All content is driven by the Figma variables created in Phase 1 — never hardcode color values.

Work in separate incremental use_figma calls (one per frame) to stay under the size limit. After each call, capture the returned node IDs and take an inline screenshot for verification.

Frame 1: Color Palette (y=0)

Name: Color Palette Width: 1200, height: auto Background: white, padding: 48px all sides Layout: VERTICAL, gap 40px

Building the palette dynamically:

Query all variables in the Palette collection via figma.variables.getLocalVariablesAsync()
Group by color family (the prefix before / in the variable name, e.g., gray, teal)
For each family, create a horizontal row:
- Scale label: Inter Semi Bold 12px, #64748b, width 60px (family name)
- One swatch per step (50→950): 40×40px rectangle, cornerRadius 6, filled with the bound Palette variable
- Tooltip text below showing the step number

Bind swatch fills to variables rather than hardcoding hex values:

javascript

const vars = await figma.variables.getLocalVariablesAsync();
const colorVar = vars.find(v => v.name === "Palette/{family}/{step}");
const swatch = figma.createRectangle();
swatch.fills = [figma.variables.setBoundVariableForPaint(
  { type: "SOLID", color: { r: 0, g: 0, b: 0 } }, "color", colorVar
)];

Frame 2: Semantic Colors (y = Frame1.height + 80)

Name: Semantic Colors Width: 1200, height: auto Background: white, padding: 48px, layout: VERTICAL, gap: 32px

Building semantic swatches dynamically:

Query all variables in the Semantic collection
Group by the token's first path segment (e.g., background, primary, border, sidebar)
For each group, create a horizontal row with a label and swatches
Each swatch: 48×48px, cornerRadius 6, filled with the bound Semantic variable, label below (12px, #64748b, truncated to 14 chars)

Show full SKILL.md (270 more words)Show less

Frame 3: Spacing Scale (y = Frame2.y + Frame2.height + 80)

Name: Spacing Scale Width: 1200, height: auto Background: white, padding: 48px, layout: VERTICAL, gap: 20px

Title: "Spacing Scale" (Inter Bold 24px)

Two sub-sections side by side (horizontal layout):

Spacing: Query all spacing/* variables from the Spacing collection. For each value:

Horizontal row: colored rectangle (width = value px, height 24px), label spacing/{n} = {value}px (Inter Regular 13px, #334155)

Border Radius: Query all radius/* variables from the Spacing collection. For each value:

Row: 32×32px white rectangle with border (#e2e8f0), cornerRadius = value, label radius/{name} = {value}px

3. Create Icons and Screens Container Frames

Create only the Icons frame (on the Components page) and the Screens container frame (on the Screens page). Tier frames are created on-demand at the start of each tier build in Phase 3.

javascript

await figma.setCurrentPageAsync(componentsPage);

const iconsFrame = figma.createFrame();
iconsFrame.name = 'Icons';
iconsFrame.layoutMode = 'HORIZONTAL';
iconsFrame.primaryAxisSizingMode = 'AUTO';
iconsFrame.counterAxisSizingMode = 'AUTO';
iconsFrame.layoutWrap = 'WRAP';
iconsFrame.itemSpacing = 24;
iconsFrame.counterAxisSpacing = 24;
iconsFrame.paddingTop = 24;
iconsFrame.paddingBottom = 24;
iconsFrame.paddingLeft = 24;
iconsFrame.paddingRight = 24;
iconsFrame.fills = [{ type: 'SOLID', color: { r: 1, g: 1, b: 1 } }];
iconsFrame.x = 0;
iconsFrame.y = 0;
componentsPage.appendChild(iconsFrame);

await figma.setCurrentPageAsync(screensPage);
const screensFrame = figma.createFrame();
screensFrame.name = 'Screens';
screensFrame.layoutMode = 'HORIZONTAL';
screensFrame.primaryAxisSizingMode = 'AUTO';
screensFrame.counterAxisSizingMode = 'AUTO';
screensFrame.itemSpacing = 80;
screensFrame.paddingTop = 80;
screensFrame.paddingBottom = 80;
screensFrame.paddingLeft = 80;
screensFrame.paddingRight = 80;
screensFrame.fills = [{ type: 'SOLID', color: { r: 0.973, g: 0.973, b: 0.98 } }];
screensFrame.x = 0;
screensFrame.y = 0;
screensPage.appendChild(screensFrame);

return { iconsFrameId: iconsFrame.id, screensFrameId: screensFrame.id };

4. Screenshot for Verification

Take a screenshot of the Foundations page and the Components page:

get_screenshot(fileKey, foundationsPageId)
get_screenshot(fileKey, componentsPageId)

5. Write Summary

Write the page and container frame node IDs to the summary file:

json

{
  "foundationsPageId": "...",
  "componentsPageId": "...",
  "screensPageId": "...",
  "foundationsFrameId": "...",
  "iconsFrameId": "...",
  "screensFrameId": "...",
  "foundationsScreenshot": ".temp/figma-from-code/screenshots/foundations.png"
}

Write to .temp/figma-from-code/structure-summary.json.

6. Report

Phase 2 complete:
- 3 pages created (Foundations, Components, Screens)
- Foundations page: Color Palette, Semantic Colors, and Spacing Scale frames created
- Icons frame + Screens container frame created
- Tier frames will be created on-demand at the start of each Phase 3 tier build

Skip / Resume

Skip the entire phase if .temp/figma-from-code/structure-summary.json exists and all page IDs, iconsFrameId, and screensFrameId in the summary are verified to exist in Figma (use get_metadata or use_figma to check).

If the summary file exists but some node IDs are missing or invalid, create only the missing pages/frames (all steps are idempotent — skip creation of any page or frame that already exists).

Error Handling

Scenario	Action
Page/foundations frame creation fails	Report error; page creation is required for downstream phases
`use_figma` container frame fails	Retry once; if still failing, report which frames were created
Pages already exist but frames don't	Create only the missing frames (idempotent)

Files

SKILL.md and 1 other file in plugins/figma-from-code/skills/figma-from-code/4-setup-structure of bitovi/ai-enablement-prompts.

SKILL.md
README.md

Open the folder on GitHubat commit df229b1

Compare with similar skills

Figma From Code Setup Structure next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Figma From Code Setup Structure compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Figma From Code Setup Structure this skillbitovi/ai-enablement-prompts	121	—	~2.1k	Automated safety check: Pass	MIT	26 days ago
Simulate User Py4vaspvasp-dev/py4vasp	100	—	~2.5k	Automated safety check: Pass	Apache-2.0	today
Write PlanArman-Kudaibergenov/1c-ai-development-kit	166	—	~1.3k	Automated safety check: Notes	AGPL-3.0	4 mo ago
Vibe Sunsang Growthfivetaku/gptaku-plugins-codex	128	—	~2k	Automated safety check: Pass	MIT	29 days ago
UX Create Manifesth0x91b/dev-3.0	307	—	~2.7k	Automated safety check: Pass	Apache-2.0	yesterday
Reviewgetsentry/sentry-react-native	1.8k	—	~1.9k	Automated safety check: Pass	MIT	today

Similar skills

Simulate User Py4vasp
vasp-dev/py4vasp
Validate a py4vasp change from the outside by dispatching a subagent to role-play a user who may read only the documentation, never the source.
100 GitHub stars~2.5k tokensUpdated today
Agent WorkflowsAuto-check passed
Write Plan
Arman-Kudaibergenov/1c-ai-development-kit
Этот скилл MUST быть вызван когда есть design.md и нужно разбить доработку на атомарные задачи (2-5 мин) с точными путями файлов и критериями проверки в tasks.md.
166 GitHub stars~1.3k tokensUpdated 4 mo ago
Agent WorkflowsAuto-check: notes
Vibe Sunsang Growth
fivetaku/gptaku-plugins-codex
Growth report generator — analyzes converted Codex conversations and produces a progression report using the v2 level system (6 axes × 7 levels, 0.5 increments), leading with one level headline and…
128 GitHub stars~2k tokensUpdated 29 days ago
Agent WorkflowsAuto-check passed
UX Create Manifest
h0x91b/dev-3.0
Create the initial Product UX Bible for an existing web or full-screen web app by deeply auditing the repository, using sub-agents when available, and generating docs/ux manifests, schemas, budgets…
307 GitHub stars~2.7k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Review
getsentry/sentry-react-native
Official
Three-axis review of the branch diff — Standards (this repo's documented standards + public API/bridge surface), Spec (the originating Linear/GitHub issue or PR), and Correctness (runtime bugs + the…
1.8k GitHub stars~1.9k tokensUpdated today
Agent WorkflowsAuto-check passed
Orchestration
AThevon/genjutsu
Running a team of subagents on one design build: clone briefs, disjoint file ownership, isolated builds, the evidence packet, review lenses, the fix plan, verdicts, cold eyes and the stop rule, with…
416 GitHub stars~4.9k tokensUpdated yesterday
Frontend & DesignAuto-check passed

More from bitovi/ai-enablement-prompts

All 40 skills in this repo

Component Registry
bitovi/ai-enablement-prompts
Track reusable UI components and unextracted patterns. An agent skill from bitovi/ai-enablement-prompts.
121 GitHub stars~597 tokensUpdated 26 days ago
Auto-check passed
Computed Styles
bitovi/ai-enablement-prompts
Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls.
121 GitHub stars~2.4k tokensUpdated 26 days ago
Auto-check passed
Create Plugin
bitovi/ai-enablement-prompts
A skill your agent uses when the user asks to "create a plugin", "add a plugin", "make a new plugin", "build a plugin", or wants to package skills into an installable plugin for this marketplace.
121 GitHub stars~2k tokensUpdated 26 days ago
Auto-check passed
Create React Modlet
bitovi/ai-enablement-prompts
Create React components, hooks, or utilities following the modlet pattern.
121 GitHub stars~2.1k tokensUpdated 26 days ago
Auto-check passed
Create Skill
bitovi/ai-enablement-prompts
A skill your agent uses when the user asks to "create a skill", "add a skill", "make a new skill", "build a skill", or wants to automate a repeated workflow into a reusable prompt.
121 GitHub stars~1.6k tokensUpdated 26 days ago
Auto-check passed
Create Skill
bitovi/ai-enablement-prompts
Create new Agent Skills for this project. An agent skill from bitovi/ai-enablement-prompts.
121 GitHub stars~1.7k tokensUpdated 26 days ago
Auto-check passed

Works with

Figma

Questions about Figma From Code Setup Structure

What does Figma From Code Setup Structure do?

Subagent for figma-from-code Phase 2. An agent skill from bitovi/ai-enablement-prompts. Figma From Code Setup Structure is an agent skill from bitovi/ai-enablement-prompts. Subagent for figma-from-code Phase 2.

When should I use Figma From Code Setup Structure?

Figma From Code Setup Structure fits situations like: tasks that involve Subagents.

How do I install Figma From Code Setup Structure in Claude Code?

Run `npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-setup-structure -a claude-code`. Or copy the skill folder (plugins/figma-from-code/skills/figma-from-code/4-setup-structure in bitovi/ai-enablement-prompts) into .claude/skills/figma-from-code-setup-structure in your project. Claude Code loads it when a task matches its description.

How do I install Figma From Code Setup Structure in Codex?

Run `npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-setup-structure -a codex`. Or copy the skill folder (plugins/figma-from-code/skills/figma-from-code/4-setup-structure in bitovi/ai-enablement-prompts) into .agents/skills/figma-from-code-setup-structure in your project. Codex loads it when a task matches its description.

Can I use Figma From Code Setup Structure in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-setup-structure -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma-from-code-setup-structure, .gemini/skills/figma-from-code-setup-structure, .github/skills/figma-from-code-setup-structure and .opencode/skills/figma-from-code-setup-structure in your project.

What does Figma From Code Setup Structure need to run?

SKILL.md names no scripts, command-line tools or credentials: Figma From Code Setup Structure is instructions for the agent only.

Does Figma From Code Setup Structure access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Figma From Code Setup Structure safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Figma From Code Setup Structure use?

Figma From Code Setup Structure is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Figma From Code Setup Structure use?

About 2.1k tokens (SKILL.md is roughly 8.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Figma From Code Setup Structure?

Skills that share tags, products or a category with Figma From Code Setup Structure: Simulate User Py4vasp (vasp-dev/py4vasp, 100 stars), Write Plan (Arman-Kudaibergenov/1c-ai-development-kit, 166 stars), Vibe Sunsang Growth (fivetaku/gptaku-plugins-codex, 128 stars) and UX Create Manifest (h0x91b/dev-3.0, 307 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Figma From Code Setup Structure?

bitovi (a GitHub organization) maintains it in bitovi/ai-enablement-prompts, which has 121 GitHub stars. The repository holds 40 skills in this directory. The repository was last updated on September 11, 2026.

Source: bitovi/ai-enablement-prompts on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Figma From Code Setup Structure

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Skill: Setup File Structure (Phase 2)

When to Use

Prerequisites

Required Inputs

Output Files

Workflow

1. Create Pages

2. Build Foundations Page Content

Frame 1: Color Palette (y=0)

Frame 2: Semantic Colors (y = Frame1.height + 80)

Frame 3: Spacing Scale (y = Frame2.y + Frame2.height + 80)

3. Create Icons and Screens Container Frames

4. Screenshot for Verification

5. Write Summary

6. Report

Skip / Resume

Error Handling

Files

Compare with similar skills

Similar skills

More from bitovi/ai-enablement-prompts

Related

Questions about Figma From Code Setup Structure