por Juanjo LunaImplementar diseños de Figma
Te ayuda a convertir diseños de Figma en código de interfaz listo para producción. Sirve cuando necesitas reproducir una maqueta con fidelidad en una aplicación.
Descripción original (inglés)
figma-implement-design: Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
Cómo instalarla
Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta figma-implement-design en el sitio donde tu agente busca sus skills.
- Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
- Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
git clone --depth 1 https://github.com/openai/skills.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/skills/.curated/figma-implement-design" ~/.claude/skills/figma-implement-design
rm -rf /tmp/skill-src| Agente | Para todos tus proyectos | Solo un proyecto |
|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills |
| GitHub Copilot | ~/.copilot/skills | .github/skills |
| Codex | ~/.agents/skills | .agents/skills |
| Gemini CLI | ~/.gemini/skills | .gemini/skills |
Muchos agentes leen también .agents/skills. Reinicia el agente después de instalar. Antes de instalar una skill, revisa su SKILL.md y los scripts que incluya: se ejecutan con tus permisos.
Más skills de openai/skills
- Trabajar con ASP.NET Core aspnet-core
- Crear apps con ChatGPT Apps chatgpt-apps
- Crear herramientas de línea de comandos cli-creator
- Desplegar en Cloudflare cloudflare-deploy
- Definir un objetivo concreto define-goal
- Trabajar con Figma figma
- Vincular Figma con componentes figma-code-connect-components
- Crear reglas de diseño para Figma figma-create-design-system-rules
Explicación redactada con ayuda de IA a partir de la descripción original.