Design to Code
このスキルは、ユーザーが「코드 변환」、「React 생성」、「Tailwind 코드」、「컴포넌트 코드」、「디자인을 코드로」、「.pen paid일에서」を要求するときに使用する必要があります。 코드」、または Pencil デザインを React + Tailwind CSS コードに変換したいと考えています。
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 | 컴포넌트별 |
このスキルは、ユーザーが「코드 변환」、「React 생성」、「Tailwind 코드」、「컴포넌트 코드」、「디자인을 코드로」、「.pen paid일에서」を要求するときに使用する必要があります。 코드」、または Pencil デザインを React + Tailwind CSS コードに変換したいと考えています。 ソース: gyejoon/pencil-plugin。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/gyejoon/pencil-plugin --skill Design to Code- カテゴリ
- </>開発ツール
- 認証済み
- —
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
Design to Code とは？
このスキルは、ユーザーが「코드 변환」、「React 생성」、「Tailwind 코드」、「컴포넌트 코드」、「디자인을 코드로」、「.pen paid일에서」を要求するときに使用する必要があります。 코드」、または Pencil デザインを React + Tailwind CSS コードに変換したいと考えています。 ソース: gyejoon/pencil-plugin。
Design to Code のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/gyejoon/pencil-plugin --skill Design to Code インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/gyejoon/pencil-plugin