Transforms Figma designs into production-ready UI code using TemPad Dev as the authoritative source of design evidence.
Install
mkdir -p .claude/skills/implementing-figma-ui-tempad-dev && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9412" && unzip -o skill.zip -d .claude/skills/implementing-figma-ui-tempad-dev && rm skill.zipInstalls to .claude/skills/implementing-figma-ui-tempad-dev
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Implement integration-ready UI code from a Figma selection or a provided nodeId using TemPad Dev MCP as the only source of design evidence (code snapshot, structure, screenshot, assets, tokens, codegen config). Detect the target repo stack and conventions first, then translate TemPad Dev’s Tailwind-like JSX/Vue IR into project-native code without adding new dependencies. Never guess key styles or measurements; avoid screenshot tuning loops. If required evidence is missing/contradictory or assets cannot be handled under repo policy, stop or ship a safe base with explicit warnings and omissions.Key capabilities
- →Interprets Figma design markup and CSS
- →Maps design tokens to project-specific variables
- →Syncs component hierarchy and geometry from design nodes
- →Detects asset and dependency requirements from design files
How it works
Uses TemPad Dev MCP to fetch design evidence which is then mapped against existing local project instructions and coding conventions.
Inputs & outputs
When to use implementing-figma-ui-tempad-dev
- →Convert Figma to React components
- →Implement design tokens
- →Sync UI code with Figma
- →Update UI based on design files
About implementing-figma-ui-tempad-dev
Generates code by interpreting Figma selections or node IDs. It enforces project-specific coding conventions and design system tokens to ensure UI consistency.
Implement integration-ready UI code from a Figma selection or a provided nodeId using TemPad Dev MCP as the only source of design evidence (code snapshot, structure, screenshot, assets, tokens, codegen config). Detect the target repo stack and conventions first, then translate TemPad Dev’s Tailwind-like JSX/Vue IR into project-native code without adding new dependencies. Never guess key styles or measurements; avoid screenshot tuning loops. If required evidence is missing/contradictory or assets cannot be handled under repo policy, stop or ship a safe base with explicit warnings and omissions.
When not to use it
- →Generating original product concepts or inventing features
- →Performing aesthetic design reviews or critiques
- →Inferring missing interaction states not explicitly modeled
Prerequisites
Limitations
- →Cannot deduce hidden responsive behaviors not in design
- →Requires explicit project instructions to define styling implementation
- →Fails if the TemPad Dev MCP connection is unavailable
How it compares
It relies exclusively on codified design evidence rather than heuristic visual guessing.
Compared to similar skills
implementing-figma-ui-tempad-dev side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| implementing-figma-ui-tempad-dev (this skill) | 0 | 6mo | No flags | Intermediate |
| prowler-ui | 1 | 4mo | Review | Intermediate |
| frontend-design-zh | 0 | 7mo | Review | Intermediate |
| shadcn | 0 | 3mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
prowler-ui
prowler-cloud
Prowler UI-specific patterns. For generic patterns, see: typescript, react-19, nextjs-15, tailwind-4. Trigger: When working inside ui/ on Prowler-specific conventions (shadcn vs HeroUI legacy, folder placement, actions/adapters, shared types/hooks/lib).
frontend-design-zh
L-LesterYu
使用 React、Tailwind CSS 和 shadcn/ui 创建独特、生产级的静态网站——无需设计稿。从纯文本需求生成大胆、令人难忘的设计，具备反AI套路美学、移动优先响应式模式和单文件打包功能。适用于构建落地页、营销网站、作品集、仪表盘或任何静态Web界面。支持 Vite（纯静态）和 Next.js（Vercel部署）两种工作流。
shadcn
Rain-kl
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also
landing-page-guide-v2
bear2u
Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.
frontend-prompt-generator
gharam1234
Generate structured prompts for frontend development tasks following established patterns. Use when the user requests prompts for wireframes, UI implementation, data binding, or routing functionality in React/Next.js projects with specific formatting requirements (Cursor rules, file paths, test-driven development).
figma-implement-design
openai
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.