figma-design-to-code

The TemPad Dev Figma Design-to-Code skill acts as an authoritative bridge between Figma visual designs and your codebase. Designed for front-end engineers and UI developers, it leverages the TemPad Dev MCP server to extract precise design evidence—including layout structure, CSS, tokens, and assets—directly from your Figma selection or specific nodeId. Instead of manually inspecting Figma, this agent automates the translation of design data into framework-specific code, ensuring visual fidelity and adherence to your project's established styling patterns, such as Tailwind CSS or custom component libraries.

• Real-time design extraction: Utilizes get_code and get_structure tools to retrieve markup, styles, spacing, typography, and color details directly from the Figma canvas.
• Project-aware generation: Reads local configuration files (like AGENTS.md), design system documentation, and existing primitives to ensure the output matches your project's specific file conventions, import paths, and component boundaries.
• Intelligent token handling: Dynamically maps Figma variables and tokens to your project's CSS variables or token system, maintaining consistency across design-to-development handoffs.
• Asset management: Extracts and handles SVG and image assets, with support for theme-aware coloring and asset pipelines.
• Configuration flexibility: Supports customization of CSS units (rem/px), root font sizes, and scaling factors to align output with specific responsive and accessibility requirements.

Usage notes and constraints:

• Requirement: TemPad Dev MCP must be active and connected. If the server is unreachable, the skill will pause and request a reconnection.
• Evidence hierarchy: The skill prioritizes local project evidence (e.g., AGENTS.md, existing primitives) as implementation truth, followed by design evidence from TemPad Dev, and finally user intent for missing business logic or product decisions.
• Scope limitations: This tool is strictly for UI translation. It does not perform design critiques, product invention, or generic code reviews. It intentionally avoids guessing hidden states (like hover, disabled, or loading states) or complex non-visual business logic unless explicitly evidenced.
• Workflow guidance: Start by reading project instruction files and design system docs to establish constraints. Perform a top-level fetch with get_code to obtain the design snapshot before implementation. If ambiguities arise regarding component boundaries or reusable primitives, consult existing codebase patterns before proceeding.
• Precision first: Never invent visual details or behaviors not evidenced in the design. If the requested output cannot be fully verified, the agent will warn the user or pause rather than outputting erroneous or speculative code.