·html-prototype
#

html-prototype

Una habilidad que genera instantáneamente vistas previas de pantalla HTML/CSS/JS puras a partir de documentos de requisitos, archivos de diseño de pantalla, notas de ideas, etc. Acepta archivos .pdf/.txt/.md o una carpeta de diseño de pantalla/como entrada, crea un archivo HTML por pantalla y le permite compartirlos a través de enlaces. Siempre que diga "crear una vista previa", "vista previa de pantalla", "convertirla en HTML", "pantalla visible para el cliente", "crear un prototipo", "página de demostración", "necesidad de compartir la pantalla" o "pantalla de revisión de planificación", siempre se utiliza esta habilidad. Úselo también cuando actualice resultados existentes, como "actualizar vista previa", "arreglar la pantalla" o "el documento de referencia cambió".

9Instalaciones·1Tendencia·@dev-goraebap

Instalación

$npx skills add https://github.com/dev-goraebap/skills --skill html-prototype

Cómo instalar html-prototype

Instala rápidamente el skill de IA html-prototype 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/dev-goraebap/skills --skill html-prototype
  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: dev-goraebap/skills.

SKILL.md

Ver original

요구사항 문서나 화면설계서를 받아서 순수 HTML/CSS/JS 파일로 화면 프리뷰를 만든다. 프레임워크 없이 브라우저에서 바로 열 수 있고, 링크 하나로 공유 가능하다. 완성도보다 빠른 확인이 목적이다.

| .pdf | 내장 Node.js 스크립트로 텍스트 추출 후 분석 | | .txt / .md | 직접 읽어서 분석 | | screen-design/ 폴더 | 화면설계서 파일 자동 참조 | | 없음 | 무엇을 만들지 간단히 물어보고 진행 |

"어떤 화면들을 만들어드릴까요? 간단히 설명해주세요." 답변을 받으면 brief.md에 기록하고 진행한다 (템플릿: templates/brief.md)

Una habilidad que genera instantáneamente vistas previas de pantalla HTML/CSS/JS puras a partir de documentos de requisitos, archivos de diseño de pantalla, notas de ideas, etc. Acepta archivos .pdf/.txt/.md o una carpeta de diseño de pantalla/como entrada, crea un archivo HTML por pantalla y le permite compartirlos a través de enlaces. Siempre que diga "crear una vista previa", "vista previa de pantalla", "convertirla en HTML", "pantalla visible para el cliente", "crear un prototipo", "página de demostración", "necesidad de compartir la pantalla" o "pantalla de revisión de planificación", siempre se utiliza esta habilidad. Úselo también cuando actualice resultados existentes, como "actualizar vista previa", "arreglar la pantalla" o "el documento de referencia cambió". Fuente: dev-goraebap/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/dev-goraebap/skills --skill html-prototype
Categoría
#Documentos
Verificado
Primera vez visto
2026-03-10
Actualizado
2026-03-11

Browse more skills from dev-goraebap/skills

Respuestas rápidas

¿Qué es html-prototype?

Una habilidad que genera instantáneamente vistas previas de pantalla HTML/CSS/JS puras a partir de documentos de requisitos, archivos de diseño de pantalla, notas de ideas, etc. Acepta archivos .pdf/.txt/.md o una carpeta de diseño de pantalla/como entrada, crea un archivo HTML por pantalla y le permite compartirlos a través de enlaces. Siempre que diga "crear una vista previa", "vista previa de pantalla", "convertirla en HTML", "pantalla visible para el cliente", "crear un prototipo", "página de demostración", "necesidad de compartir la pantalla" o "pantalla de revisión de planificación", siempre se utiliza esta habilidad. Úselo también cuando actualice resultados existentes, como "actualizar vista previa", "arreglar la pantalla" o "el documento de referencia cambió". Fuente: dev-goraebap/skills.

¿Cómo instalo html-prototype?

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/dev-goraebap/skills --skill html-prototype 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/dev-goraebap/skills