تحويل تصاميم Pencil إلى كود للواجهة الأمامية
غالبًا ما تفقد تصاميم Pencil تفاصيلها عندما يترجمها المطورون بالنظر فقط. ترشد هذه المهارة Claude وCodex وClaude Code خلال الاستخراج والتنفيذ والفحوصات المرئية بدقة.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "pencil-to-code" from https://skillstore.io/skills/johnwayneeee-pencil-to-code.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-pencil-to-code/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "pencil-to-code". يوفر المستخدم لوحة فنية من Pencil لصفحة بطل منتج ويطلب تنفيذها.
النتيجة المتوقعة:
يستخرج المساعد الأبعاد والطباعة والأصول والقواعد المتجاوبة، ثم يسلّم مكونات واجهة أمامية ببنية بصرية مطابقة.
جارٍ استخدام "pencil-to-code". يقول المستخدم إن إصدار سطح المكتب أعرض مما ينبغي مقارنة بتصميم Pencil.
النتيجة المتوقعة:
يفحص المساعد عروض اللوحات الفنية، وقواعد المقدمة الثابتة، ولقطات الشاشة المعروضة، ثم يوصي بتغييرات مستهدفة في التخطيط ورموز CSS.
جارٍ استخدام "pencil-to-code". يحتاج المستخدم إلى تحويل بطاقات Pencil المتكررة إلى مكون قابل للصيانة.
النتيجة المتوقعة:
يحدد المساعد خصائص البطاقة المشتركة، وينشئ بنية قابلة لإعادة الاستخدام، ويحافظ على تفاصيل النص والأيقونة والتباعد والصورة الخاصة بكل بطاقة.
All seven static findings are false positives caused by Markdown text, browser API names, CSS terms, and one optional product link. I found no prompt injection, command execution intent, data exfiltration, or unsafe network behavior in the reviewed files.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/johnwayneeee-pencil-to-code?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/johnwayneeee-pencil-to-code?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-pencil-to-code/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/johnwayneeee-pencil-to-code.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>JohnWayneeee. (2026). pencil-to-code security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5@techreport{johnwayneeee-johnwayneeee-pencil-to-code-2026,
author = {JohnWayneeee},
title = {pencil-to-code security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "pencil-to-code security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "JohnWayneeee"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5"
identifiers:
- type: other
value: "skillstore:johnwayneeee-pencil-to-code:audit:5"
description: "Skillstore immutable audit report identifier"
حوّل صفحة هبوط في Pencil إلى HTML أو CSS متجاوبين، أو إلى مكونات ضمن إطار عمل، مع الحفاظ على تخطيط اللوحة الفنية كما هو.
استخدم معرفات العقد، والمتغيرات، ولقطات الشاشة لحل اختلافات التباعد والطباعة واقتصاص الصور أثناء المراجعة.
أعد بناء الشاشات الحالية المصممة في Pencil ضمن حزمة واجهة أمامية حديثة بمكونات قابلة لإعادة الاستخدام وانحرافات بصرية موثقة.
Use pencil-to-code to convert this Pencil artboard into responsive frontend code. Preserve layout, typography, images, and spacing.
Use pencil-to-code with these Pencil node IDs. Inspect the artboard, variables, repeated components, and assets before coding.
Use pencil-to-code to compare the current implementation with the Pencil screenshot and identify CSS changes for closer visual matching.
Use pencil-to-code to extract shared tokens and repeated units from these Pencil artboards, then implement reusable responsive components.
المؤلف
JohnWayneeeeالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
b8ca75d2c0a7e7102978993058777d82b8ab2610
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
5 تنزيلات · 8 مشاهدات
بنية الملفات
إجراءات واجهة المستخدم بعد نتيجة النموذج
غالبا ما تفرط فرق المنتجات في تحميل حالات النجاح بخطوات تالية غير واضحة. تحوّل هذه المهارة نية المستخدم إلى إجراءات واجهة مستخدم محددة النطاق ومرتبة الأولوية بعد نتيجة ذات معنى.
صقل شاشات واجهة المستخدم الحالية
غالبا ما تحتاج الواجهات المكتملة إلى تعديلات بصرية صغيرة قبل الإصدار. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحسين الوضوح مع الحفاظ على التصميم.
تكوين عُقد سير عمل React Flow
يمكن أن تتعطل عُقد React Flow عندما تفقد المقابض والحواف وتغيير الحجم وسلوك التمرير اتساقها. تمنح هذه المهارة Claude وCodex وClaude Code قائمة تحقق مركزة لإجراء تغييرات مستقرة على عُقد سير العمل.
تحويل التصاميم إلى كود FSD Tailwind
غالبًا ما تؤدي عملية تسليم التصميم إلى كسر البنية المعمارية، والرموز، وإمكانية الوصول. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحويل شاشات Figma أو Pencil المحددة إلى كود Tailwind متعدد الطبقات.
مراجعة لوحات React Flow بأمان
يمكن أن تتعطل لوحات React Flow عندما تنحرف IDs أو handles أو ملكية الحالة أو سلوك viewport. ترشد هذه المهارة Claude وCodex وClaude Code عبر فحوصات مراجعة عملية لـ @xyflow/react v12.
تدقيق صفحات الويب قبل النشر
يمكن لمشكلات الويب المتأخرة أن تعرقل الإطلاقات وتضر بإمكانية الوصول أو SEO أو التدفقات الأساسية. ترشد هذه المهارة إلى فحوصات المتصفح، وتفسير Lighthouse، وإعداد تقارير منظمة قبل الإصدار.
Build Accessible Tailwind Interfaces
بواسطة nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
تصميم واجهات أمامية مميزة
بواسطة Atman36
غالبا ما تبدو الواجهات العامة المولدة متوقعة وضعيفة. توجه هذه المهارة Claude وCodex وClaude Code نحو تصميم واجهات أمامية مميز وجاهز للإنتاج.
تصميم نماذج أولية مميزة لواجهات المستخدم
بواسطة tencentcloudbase
غالبا ما تفتقر واجهات الذكاء الاصطناعي العامة إلى اتجاه بصري وتفاصيل واعية بالمنصة. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحديد نية التصميم قبل بناء النماذج الأولية.
تحسين تخطيط واجهة المستخدم والإيقاع البصري
بواسطة pbakaus
تجعل الواجهات المزدحمة والشبكات المتكررة المنتجات أصعب في التصفح السريع والثقة. ترشد هذه المهارة Claude وCodex وClaude Code نحو تباعد أقوى، وتسلسل هرمي أوضح، وتركيب متجاوب أفضل.
استخراج أنماط نظام تصميم قابلة لإعادة الاستخدام
بواسطة pbakaus
غالبًا ما تكرر الفرق مكونات UI والرموز وأنماط التخطيط عبر التطبيق. تساعد هذه المهارة Claude أو Codex أو Claude Code على العثور على أنماط قابلة لإعادة الاستخدام ودمجها في نظام تصميم مُدار.
تنفيذ React View Transitions
بواسطة vercel-labs
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.