Questa tecnologia dovrebbe essere utilizzata quando gli utenti richiedono "conversione del codice", "generazione di React", "codice Tailwind", "codice componente", "da progettazione a codice", "codice da file .pen" o quando desiderano convertire i progetti Pencil in codice CSS React + Tailwind.
Installa rapidamente la skill AI design to code nel tuo ambiente di sviluppo tramite riga di comando
Fonte: gyejoon/pencil-plugin.
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 | 컴포넌트별 |
Questa tecnologia dovrebbe essere utilizzata quando gli utenti richiedono "conversione del codice", "generazione di React", "codice Tailwind", "codice componente", "da progettazione a codice", "codice da file .pen" o quando desiderano convertire i progetti Pencil in codice CSS React + Tailwind. Fonte: gyejoon/pencil-plugin.
Campi e comandi stabili per citazioni AI/ricerca.
npx skills add https://github.com/gyejoon/pencil-plugin --skill design to codeQuesta tecnologia dovrebbe essere utilizzata quando gli utenti richiedono "conversione del codice", "generazione di React", "codice Tailwind", "codice componente", "da progettazione a codice", "codice da file .pen" o quando desiderano convertire i progetti Pencil in codice CSS React + Tailwind. Fonte: gyejoon/pencil-plugin.
Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/gyejoon/pencil-plugin --skill design to code Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
https://github.com/gyejoon/pencil-plugin