design to code
✓Esta habilidad debe usarse cuando el usuario pregunta "코드 변환", "React 생성", "Tailwind 코드", "컴포넌트 코드", "디자인을 코드로", ".pen 파일에서 코드", o quiere convertir diseños de Pencil en código CSS React + Tailwind.
Instalación
SKILL.md
Pencil .pen 파일의 디자인을 React + Tailwind CSS 코드로 변환하는 가이드라인을 제공한다.
resolveInstances: true로 컴포넌트 인스턴스를 풀어서 확인하고, resolveVariables: true로 변수값을 실제 값으로 확인한다.
| frame (layout: vertical) | | flex flex-col | | frame (layout: horizontal) | | flex flex-row | | frame (layout: grid) | | grid grid-cols-N | | text | , , | text-, font- | | rectangle | | rounded-, bg- | | ref (Button) | or | 컴포넌트별 |
Esta habilidad debe usarse cuando el usuario pregunta "코드 변환", "React 생성", "Tailwind 코드", "컴포넌트 코드", "디자인을 코드로", ".pen 파일에서 코드", o quiere convertir diseños de Pencil en código CSS React + Tailwind. Fuente: gyejoon/pencil-plugin.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/gyejoon/pencil-plugin --skill design to code- Fuente
- gyejoon/pencil-plugin
- Categoría
- </>Desarrollo
- Verificado
- ✓
- Primera vez visto
- 2026-02-01
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es design to code?
Esta habilidad debe usarse cuando el usuario pregunta "코드 변환", "React 생성", "Tailwind 코드", "컴포넌트 코드", "디자인을 코드로", ".pen 파일에서 코드", o quiere convertir diseños de Pencil en código CSS React + Tailwind. Fuente: gyejoon/pencil-plugin.
¿Cómo instalo design to code?
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/gyejoon/pencil-plugin --skill design to code 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 o Cursor
¿Dónde está el repositorio de origen?
https://github.com/gyejoon/pencil-plugin
Detalles
- Categoría
- </>Desarrollo
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01