# Figma Implement Design

> Use to translate inspected Figma structure into a production-ready Toolcraft generated app.

- Skill: `pixel-point/figma-implement-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add pixel-point/figma-implement-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pixel-point/figma-implement-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: pixel-point (https://skillmd.com/u/pixel-point)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/pixel-point/figma-implement-design

---


# Toolcraft Figma Implementation

Use this skill after Figma context has been inspected and the task is to build or
update a Toolcraft generated app from that design.

## Process

1. Map Figma sections, components, and visual entities to product output and
   schema controls.
2. Use built-in Toolcraft controls before custom controls.
3. Keep app UI out of `canvasContent`; render product output there only.
4. Preserve the Toolcraft runtime canvas backing.
5. Add acceptance, browser, and performance coverage for every visible product
   entity.

## Toolcraft Rule

Build through `defineToolcraft` and `ToolcraftApp`. Do not recreate Toolcraft
panels, toolbar, controls, canvas, layers, or timeline by hand.