·design-builder
*

design-builder

✓
adeonir/agent-skillsGitHub: adeonir/agent-skillsFuente: adeonir/agent-skills

Canalización de diseño a código (extraiga copia de URL, extraiga tokens de diseño de imágenes y luego cree componentes de React o variantes de vista previa de HTML). Úselo al extraer contenido de sitios web, extraer sistemas de diseño, generar código de interfaz, obtener una vista previa de variantes de diseño y enviar a Figma a través de MCP. Úselo también cuando el usuario quiera crear una página a partir de una URL de referencia o una captura de pantalla, rediseñar un sitio existente, crear prototipos visuales o generar código a partir de un diseño. Activadores en "extraer copia", "extraer diseño", "construir interfaz", "generar variantes", "exportar diseño", "enviar a Figma", "compilar a partir de referencia", "rediseñar esto", "crear prototipo".

adeonir·design·builder
34Instalaciones·4Tendencia·@adeonir

Instalación

GitHub: adeonir/agent-skills
$npx skills add https://github.com/adeonir/agent-skills --skill design-builder

Cómo instalar design-builder

Instala rápidamente el skill de IA design-builder en tu entorno de desarrollo mediante línea de comandos

  1. Abrir Terminal: Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.)
  2. Ejecutar comando de instalación: Copia y ejecuta este comando: npx skills add https://github.com/adeonir/agent-skills --skill design-builder
  3. Verificar instalación: Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

Fuente: adeonir/agent-skills.

SKILL.md

Ver original

Each step is independent. Can run isolated or chained. Discovery is always the first step -- never skip it.

If found: read and extract purpose, audience, tone, and key features. Skip to the relevant trigger operation.

If the user answers "I don't know" to any question, mark as TBD and move forward. Summarize understanding before proceeding.

Canalización de diseño a código (extraiga copia de URL, extraiga tokens de diseño de imágenes y luego cree componentes de React o variantes de vista previa de HTML). Úselo al extraer contenido de sitios web, extraer sistemas de diseño, generar código de interfaz, obtener una vista previa de variantes de diseño y enviar a Figma a través de MCP. Úselo también cuando el usuario quiera crear una página a partir de una URL de referencia o una captura de pantalla, rediseñar un sitio existente, crear prototipos visuales o generar código a partir de un diseño. Activadores en "extraer copia", "extraer diseño", "construir interfaz", "generar variantes", "exportar diseño", "enviar a Figma", "compilar a partir de referencia", "rediseñar esto", "crear prototipo". Fuente: adeonir/agent-skills.

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/adeonir/agent-skills --skill design-builder
Fuente
adeonir/agent-skills
Categoría
*Creatividad
Verificado
✓
Primera vez visto
2026-03-08
Actualizado
2026-03-11
URL
https://www.learn-skills.dev/es/skills/adeonir/agent-skills/design-builder

Browse more skills from adeonir/agent-skills

Respuestas rápidas

¿Qué es design-builder?

Canalización de diseño a código (extraiga copia de URL, extraiga tokens de diseño de imágenes y luego cree componentes de React o variantes de vista previa de HTML). Úselo al extraer contenido de sitios web, extraer sistemas de diseño, generar código de interfaz, obtener una vista previa de variantes de diseño y enviar a Figma a través de MCP. Úselo también cuando el usuario quiera crear una página a partir de una URL de referencia o una captura de pantalla, rediseñar un sitio existente, crear prototipos visuales o generar código a partir de un diseño. Activadores en "extraer copia", "extraer diseño", "construir interfaz", "generar variantes", "exportar diseño", "enviar a Figma", "compilar a partir de referencia", "rediseñar esto", "crear prototipo". Fuente: adeonir/agent-skills.

¿Cómo instalo design-builder?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/adeonir/agent-skills --skill design-builder Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

¿Dónde está el repositorio de origen?

https://github.com/adeonir/agent-skills

Detalles

Categoría
*Creatividad
Fuente
skills.sh
Primera vez visto
2026-03-08

Skills Relacionados

spec-driven
42 Instalaciones
docs-writer
39 Instalaciones
git-helpers
37 Instalaciones
debug-tools
28 Instalaciones
product-naming
16 Instalaciones