tempad-dev

🥈Silver

Tempad-dev is an AI-powered Figma extension that automates panel inspection for operations teams. It enables users to quickly analyze and document UI components, improving design consistency and reducing manual effort. The tool connects to Figma workflows, streamlining collaboration between designers and developers.

396290Updated 1w ago

Intermediate30min to implementautomation

Saves ~90 min per use

Quick InstallView Source

git clone https://github.com/ecomfe/tempad-dev.git

Works with:

Claude

Overview

About This Skill

https://github.com/ecomfe/tempad-dev

Use Cases

Quickly extract CSS styles from Figma designs for use in web projects.

Utilize deep select mode to navigate complex design layers without repetitive clicks.

Measure spacing between design elements to ensure accurate implementation in code.

Customize code output using plugins to match specific project requirements.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/ecomfe/tempad-dev

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Inspect the CSS code for the [COMPANY] design in Figma. What styles are applied to the [ELEMENT] and how can I modify them for better responsiveness in the [INDUSTRY] project?

Example Output

### CSS Styles for Button
- **Background Color:** #007BFF
- **Font Size:** 16px
- **Padding:** 10px 20px

### Suggested Modifications
1. **Responsive Font Size:** Change to `font-size: calc(1rem + 0.5vw);`
2. **Hover Effect:** Add `transition: background-color 0.3s ease;` to enhance user interaction.

### Final CSS Snippet
```css
.button {
    background-color: #007BFF;
    font-size: calc(1rem + 0.5vw);
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}
```