skills.rest
bongrealty
bongrealtyCOMMUNITY
Explore all skills by this author →
GitHub

figma-translator

Translate technical specifications into five Figma Make prompts for website UI sections.

2|1|Updated Mar 13, 2026
Search Tags:#design#ui#translation#figma#prompts#ux
One-click install
npx skills add https://github.com/bongrealty/skillcraft --skill figma-translator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-translator
Source: https://github.com/bongrealty/skillcraft/tree/main/figma-translator
Command: npx skills add https://github.com/bongrealty/skillcraft --skill figma-translator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill converts complex technical specifications into precise, actionable prompts for Figma's AI design tools, streamlining the design handoff process.

Core Features & Use Cases

  • Specification to Prompt Conversion: Translates technical details into five distinct Figma Make prompts.
  • Targeted Prompt Generation: Creates prompts for hero, features, social proof, CTA, and mobile views.
  • Use Case: After using the systems-architect skill to define a new SaaS product's UI, use this skill to generate the necessary Figma prompts to visually design the key sections of the website.

Quick Start

Use the figma-translator skill to convert the attached technical specification into five Figma Make prompts.

Frequently Asked Questions about figma-translator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn technical specifications into Figma prompts for UI design?▼

To turn technical specifications into Figma prompts, this Skill translates your project details into five precise, self-contained prompts for generating website UI elements. It processes your brand context and interaction definitions to create targeted outputs for Figma Make.

What website sections can I generate Figma Make prompts for?▼

You can generate Figma Make prompts for five specific website sections: hero, features, social proof, CTA, and mobile views. Each prompt embeds explicit visual outcomes, brand identity, interaction behaviors, and responsive adaptation requirements.

What do I need to provide to generate accurate Figma prompts from specs?▼

You need to provide explicit visual outcomes, brand context, interaction definitions, and responsive design requirements. Supplying these technical details ensures the generated Figma Make prompts are precise and self-contained for the UI generation process.

Can I use this to create Figma prompts for a SaaS product UI?▼

Yes, you can use this to create Figma Make prompts for a SaaS product UI by feeding the technical specification into the Skill. It streamlines the design handoff process by converting complex technical architecture into actionable design generation commands.

Does the figma-translator skill handle responsive design requirements?▼

Yes, the figma-translator skill handles responsive design requirements by embedding responsive adaptation directly into the generated Figma Make prompts. This ensures the UI outputs account for mobile views and varying screen sizes.

Related Skills

Explore More Design & Creative Skills→
dralgorhythmdralgorhythm
111

designing-systems

Design scalable software systems with C4 diagrams and trade-off analysis.

Community
Advanced
MesteriisMesteriis

figma-to-code

Convert Figma design elements into code while preserving assets and fidelity.

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
involvexinvolvex

enhance-prompt

Translate vague UI ideas into structured, ready-to-run Stitch prompts.

Community
Intermediate