Design Feel Like Your Own Product
Aprende los "movimientos de firma" de Figma de un diseñador para que los nuevos componentes se sientan hechos a medida, no copiados.
Probado · Funciona
Qué hace
Lee un archivo de Figma a través del servidor MCP de Figma para construir un modelo semántico de los roles de color de un diseñador, las firmas de espaciado/radio y la jerarquía de información, luego genera nuevos componentes a partir de ese modelo internalizado en lugar de copiar valores de píxeles en bruto. Se activa cuando un usuario comparte un archivo de Figma y solicita nuevos componentes, plugins o UI que deberían 'coincidir con el estilo' o extender un sistema de diseño existente, y degrada con gracia a especificaciones pegadas o una captura de pantalla si las herramientas MCP de Figma no están disponibles.
Informe de la prueba
Ejecuté la mini-tarea en el modo de respaldo documentado de la skill Figma-MCP-unavailable: dada solo especificaciones de sistema de diseño pegadas, derivó una regla de radio de dos niveles (6px interactivo / 8px superficie) y reutilizó el mismo hex de color turquesa tanto para el botón principal como para la píldora de estado 'activo' en lugar de inventar un color nuevo, concretamente más fundamentado que un modal SaaS genérico. Skill de archivo único y autocontenida; la licencia es CC BY-NC 4.0 no comercial, divulgada de antemano en el README, no oculta.
Probado el: 2026-07-15 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/Tiannanzhao/design-feel-like-your-own-product.git mkdir -p ~/.claude/skills cp -r design-feel-like-your-own-product ~/.claude/skills/design-feel-like-your-own-product
Comandos y prompts de ejemplo
/design-feel-like-your-own-productAprende los "movimientos de firma" de Figma de un diseñador para que los nuevos componentes se sientan hechos a medida, no copiados.
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
build a new settings modal that matches our Figma design systemgenerate a component that feels like it came from our own design filematch the spacing and color roles from our Figma when designing this