يجب استخدام هذه التقنية عندما يطلب المستخدمون "تحويل التعليمات البرمجية"، أو "إنشاء React"، أو "رمز Tailwind"، أو "رمز المكون"، أو "التصميم إلى رمز"، أو "رمز من ملف .pen"، أو عندما يريدون تحويل تصميمات Pencil إلى كود React + Tailwind CSS.
ثبّت مهارة الذكاء الاصطناعي 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 إلى كود React + Tailwind CSS. المصدر: gyejoon/pencil-plugin.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/gyejoon/pencil-plugin --skill design to codeيجب استخدام هذه التقنية عندما يطلب المستخدمون "تحويل التعليمات البرمجية"، أو "إنشاء React"، أو "رمز Tailwind"، أو "رمز المكون"، أو "التصميم إلى رمز"، أو "رمز من ملف .pen"، أو عندما يريدون تحويل تصميمات Pencil إلى كود React + Tailwind CSS. المصدر: gyejoon/pencil-plugin.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/gyejoon/pencil-plugin --skill design to code بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/gyejoon/pencil-plugin