Эту технологию следует использовать, когда пользователи запрашивают «преобразование кода», «генерацию React», «код Tailwind», «код компонента», «проектирование в код», «код из файла .pen» или когда они хотят преобразовать проекты Pencil в CSS-код React + Tailwind.
Быстро установите AI-навык design to code в вашу среду разработки через командную строку
Источник: 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 | 컴포넌트별 |
Эту технологию следует использовать, когда пользователи запрашивают «преобразование кода», «генерацию React», «код Tailwind», «код компонента», «проектирование в код», «код из файла .pen» или когда они хотят преобразовать проекты Pencil в CSS-код React + Tailwind. Источник: gyejoon/pencil-plugin.
Стабильные поля и команды для ссылок в AI/поиске.
npx skills add https://github.com/gyejoon/pencil-plugin --skill design to codeЭту технологию следует использовать, когда пользователи запрашивают «преобразование кода», «генерацию React», «код Tailwind», «код компонента», «проектирование в код», «код из файла .pen» или когда они хотят преобразовать проекты Pencil в CSS-код React + Tailwind. Источник: gyejoon/pencil-plugin.
Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.) Скопируйте и выполните эту команду: npx skills add https://github.com/gyejoon/pencil-plugin --skill design to code После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw
https://github.com/gyejoon/pencil-plugin