# Figma Designer

> Analiza diseños de Figma y genera PRDs listos para implementar con especificaciones visuales detalladas. Requiere conexión al servidor MCP de Figma.

Fuente: https://skillsagentes.com/skills/zhaono1/agent-playbook/figma-designer
Markdown: https://skillsagentes.com/skills/zhaono1/agent-playbook/figma-designer.md

Repositorio: https://github.com/zhaono1/agent-playbook
Autor: zhaono1
Licencia: no declarada
Actualizado: el mes pasado
Coste de contexto: 51 tok instalada, 2.7k tok al activarse, 4.7k tok con todos los archivos del bundle
Bundle: 3 archivos, 18 KB
Permisos que pide: read, write, edit, bash, grep, glob, webfetch, websearch, askuserquestion

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add zhaono1/agent-playbook --skill figma-designer --agent claude-code
# Cursor
npx -y skills add zhaono1/agent-playbook --skill figma-designer --agent cursor
# Codex
npx -y skills add zhaono1/agent-playbook --skill figma-designer --agent codex
# Gemini CLI
npx -y skills add zhaono1/agent-playbook --skill figma-designer --agent gemini
# Windsurf
npx -y skills add zhaono1/agent-playbook --skill figma-designer --agent windsurf
# Cline
npx -y skills add zhaono1/agent-playbook --skill figma-designer --agent cline
```

## Qué hace

- Extrae tokens de diseño (colores, tipografía, espaciado, sombras) desde Figma
- Analiza la jerarquía de componentes y sus variantes, estados y props
- Genera especificaciones visuales detalladas por pantalla con layouts y tablas
- Produce PRDs de 4 archivos, documentos de spec visual o librerías de componentes

## Cuándo usarla

- El usuario proporciona un enlace de Figma (https://www.figma.com/file/...)
- El usuario sube una captura de diseño y menciona 'Figma'
- Se pide 'analiza este diseño' o 'extrae specs de diseño'
- Se pide 'crea PRD desde Figma'

## Qué la activa

- "Aquí está el link de Figma, genera el PRD"
- "Analiza este diseño y extrae los tokens"
- "Crea las specs visuales de esta pantalla de Figma"
- "Sube esta captura de Figma y arma la especificación"

## Antes de instalar

- Requiere que el host exponga un servidor o plugin MCP de Figma con acceso a metadatos, nodos y estilos.
- runs shell commands
- writes to your files
- makes network requests

## Archivos

- README.md — 6 KB
- SKILL.md — 11 KB
- references/example-output.md — 1 KB

## SKILL.md

No se reproduce aquí. Léelo en https://github.com/zhaono1/agent-playbook/blob/main/skills/figma-designer/SKILL.md

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [zhaono1](https://skillsagentes.com/creators/zhaono1.md) — 0 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Create Pr](https://skillsagentes.com/skills/zhaono1/agent-playbook/create-pr.md): Crea pull requests con revisión de documentación bilingüe, asegurando que los README en inglés y chino se mantengan sincronizados cuando cambia el catálogo de skills.
- [Session Logger](https://skillsagentes.com/skills/zhaono1/agent-playbook/session-logger.md): Guarda el historial de conversación en archivos de log de sesión. Úsalo al decir '保存对话', '保存对话信息', '记录会话', 'save session' o 'save conversation'.
- [Skill Router](https://skillsagentes.com/skills/zhaono1/agent-playbook/skill-router.md): Enruta de forma inteligente las solicitudes del usuario hacia el skill de Claude Code más apropiado; es el punto de entrada por defecto cuando no está claro qué skill usar.
- [Prd Planner](https://skillsagentes.com/skills/zhaono1/agent-playbook/prd-planner.md): Crea PRDs mediante planificación persistente basada en archivos. Úsalo cuando el usuario diga explícitamente 'PRD', 'product requirements document' o '产品需求文档'.
- [Self Improving Agent](https://skillsagentes.com/skills/zhaono1/agent-playbook/self-improving-agent.md): Agente universal de autoaprendizaje que aprende de todas las experiencias de skills mediante memoria semántica, episódica y de trabajo, con autocorrección basada en hooks.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)