Skip to main content
affpapa.org
RU EN
subagent CX Codex GP ChatGPT official · OpenAI

figma-code-connect-agent — Codex subagent: setup

This subagent matches published Figma components with code and prepares parserless Code Connect templates. Use it to map component properties and review candidate implementations.

Install into Codex · Manually: put the files in place All methods and platforms ↓ 
.codex/agents/figma-code-connect-agent.toml
Open on GitHub

What figma-code-connect-agent does

The agent checks that a Figma target is a published component or component set, then uses Code Connect suggestions and property context to prepare template files. When several code components could match, it briefly states how it chose among them.

Its report covers discovered Figma components, current templates or mappings, code candidates, recommended files, and any actions or confirmations. Ambiguous matches require your approval before a template is created. The target must be published, so an unpublished draft does not meet the stated requirement.

What it helps with

  • Create a Code Connect template for a Figma component
  • Review existing templates and mappings
  • Match Figma components with code candidates
  • Request approval before creating an ambiguous template

Example prompts for the agent

  • Find the published Figma components and suggest Code Connect templates for them.
  • Review existing mappings and match this Figma component set to code components.
  • Prepare a template for this component, and ask me first if the match is ambiguous.

How to install figma-code-connect-agent

Manually: put the files in place

.codex/agents/figma-code-connect-agent.toml

Codex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/

Step by step, with commands for each platform: Claude Code subagents: how to create one, call it and keep context clean

Questions about figma-code-connect-agent

How do I install figma-code-connect-agent in Codex?

Add the agent file at .codex/agents/figma-code-connect-agent.toml.

What does figma-code-connect-agent do?

It matches published Figma components to code components and prepares parserless Code Connect templates. Its report also lists existing mappings and possible code matches.

Does the agent need approval to create a template?

It asks for confirmation before creating a template when the component match is ambiguous.

Similar subagents

All subagents for Design →
ui-ux-designer Seth Hobson This subagent creates interfaces, wireframes, and design systems. Use it for user flows, accessibility work, and consistent UI patterns. CX Codex 27,069installs ui-designer VoltAgent Community Designs visual interfaces, builds component libraries, and creates handoff documentation. Ideal when code needs structured UI states and design tokens. 1,979installs ui-designer Seth Hobson Designs interfaces, components, and responsive layouts with implementation in mind. Use it when building screens, forms, tables, or a design system. CX Codex 1,979installs mobile-app-developer VoltAgent Community This subagent helps build iOS and Android apps by working through requirements, architecture, performance, and platform constraints. 1,552installs ux-researcher VoltAgent Community This subagent plans UX research, interprets user behavior, and turns findings into design recommendations. Use it to validate a design decision or investigate user needs. 703installs accessibility-tester VoltAgent Community This subagent tests interface accessibility, WCAG conformance, and assistive technology support. Use it for audits and accessibility fixes in a project. 346installs

From the same set596

The whole set →
implement-from-figma Converts Figma components and frames directly into project code. It pulls design context, inspects layouts, and checks visual parity. CX Codex GP ChatGPT ★ 7,604repo stars create-design-system-rules This command builds project-specific rules for turning Figma designs into code and formats them for AGENTS.md. Use it before implementing UI work. CX Codex GP ChatGPT ★ 7,604repo stars connect-figma-components Builds and refreshes Figma Code Connect templates for components: reads a Figma link, finds the nodes and matches them to code. CX Codex GP ChatGPT ★ 7,604repo stars figma-implementation-agent Converts Figma nodes into production code with visual parity. The agent checks design screenshots and swaps raw styling for project tokens. CX Codex GP ChatGPT ★ 7,604repo stars design-system-rules-agent A subagent that turns your codebase conventions into Figma-to-code rules and writes them into AGENTS.md, so later implementations stay consistent. CX Codex GP ChatGPT ★ 7,604repo stars design-parity-review-agent Checks coded user interfaces against Figma designs and reference screenshots. Catches typography drift, missing tokens, and spacing errors early. CX Codex GP ChatGPT ★ 7,604repo stars codex-expo-run-actions Connects Expo projects to the Codex action bar by generating a local run script and configuring environment actions. CX Codex GP ChatGPT ★ 7,604repo stars setup-codex-run-actions Wires the current Expo project into the Claude action bar with a Run button, plus iOS, Android or web buttons when you ask for them. CX Codex GP ChatGPT ★ 7,604repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor