Pencil MCP: تصميم يتحول إلى كود في ثوانٍ، كفاءة تطوير الواجهة الأمامية ترتفع 8 مرات

مرحباً بالجميع، أنا Liangxiao الذي يعمل على منتجات عالمية، مع اقتراب العام الجديد، سأشارككم آخر إنجازاتي قبل العطلة.

عند تصميم صفحات الويب أو تطبيقات الهاتف، هل شعرت يومًا بهذا الشعور:

أريد تصميم صفحة جميلة، لكن تصميمي ليس جيدًا العثور على مصمم مكلف للغاية، والعثور على قوالب مجانية غير مناسب بعد عناء طويل، يصبح تحويل التصميم إلى كود مشكلة كبيرة بصراحة، عندما كنت أعمل على مشاريع الواجهة الأمامية، كنت أقضي نصف يوم في تعديل الأنماط بناءً على التصميم. المسافة تختلف بمقدار 2 بكسل، واللون غير صحيح، وزاوية مستديرة منسية... مرارًا وتكرارًا، هذا أمر مزعج للغاية.

الخبر السار هو: الآن مع Pencil MCP، يمكن حل هذه المشكلات بشكل أساسي.

لقد استخدمته مؤخرًا لتصميم بعض الصفحات، ووجدت أنه جيد حقًا - من التصميم إلى الكود، زادت الكفاءة عدة مرات. والأهم من ذلك، أن جودة التصميم الذي تم إنشاؤه بواسطة الذكاء الاصطناعي جيدة، ودقة استعادة الكود عالية جدًا.

ستناقش هذه المقالة: ما هو Pencil، ولماذا يستحق الاستخدام، وكيفية البدء بسرعة.

01. ما هو Pencil؟ شرح بسيط

ببساطة، Pencil هي أداة يمكنها ربط التصميم والكود.

كانت العملية السابقة كالتالي:

تصميم في Figma يقوم المصمم بتحديد الأبعاد والألوان والمسافات يكتب المطور الكود سطرًا سطرًا وفقًا للتصميم بعد الانتهاء من الكتابة، تتم مقارنة الكود بالتصميم، ويتبين أن دقة الاستعادة تبلغ 70٪ -80٪ فقط تعديل وتواصل متكرر...

حل Pencil هو:

ما عليك سوى وصف المتطلبات باللغة الطبيعية (مثل "ساعدني في تصميم مشغل موسيقى بنمط Apple")، ويمكن للذكاء الاصطناعي إنشاء تصميم مباشرة على اللوحة، ثم إنشاء الكود المقابل بنقرة واحدة (Next.js و Flutter و Vue وما إلى ذلك مدعومة).

والأمر المدهش هو أنه يمكنك التعديل أثناء التصميم. على سبيل المثال:

"الكثير من اللون الأرجواني، قم بتغييره إلى اللون الأخضر" "المسافة أكبر قليلاً" "راجع نمط هذا الموقع" سيساعدك الذكاء الاصطناعي في تعديل التصميم والكود في الوقت الفعلي، دون الحاجة إلى القيام بذلك بنفسك.

02. لماذا أعتقد أن Pencil يستحق الاستخدام؟

1) الكفاءة عالية حقًا

قد يستغرق تصميم صفحة بالطريقة التقليدية من 4 إلى 6 ساعات. مع Pencil، يمكن القيام بذلك في 20-40 دقيقة.

ويمكن أن تصل دقة استعادة الكود إلى 98٪ +، ولا حاجة لتعديل الأنماط.

لقد جربت ذلك بنفسي، تصميم صفحة مقصودة بسيطة، من التصميم إلى الكود، استغرق الأمر حوالي نصف ساعة.

2) جودة التصميم مستقرة

في الماضي، عند السماح للذكاء الاصطناعي بإنشاء تصميم، غالبًا ما كنت أواجه هذه المشكلات:

الألوان غير متناسقة المسافات فوضوية أحجام الخطوط غير موحدة لدى Pencil نظام تصميم ومعايير جمالية، وجودة التصميم الذي تم إنشاؤه مستقرة نسبيًا. على الرغم من أنه قد لا يكون مثاليًا، إلا أنه على الأقل ليس قبيحًا جدًا.

3) يدعم العديد من التقنيات

سواء كنت تعمل على Next.js أو Flutter أو Vue أو SwiftUI، يمكن لـ Pencil إنشاء الكود المقابل تلقائيًا.

هذا مناسب جدًا للأشخاص مثلي الذين يقومون بتطوير متعدد الأطراف - تصميم واحد، وكود لجميع الأنظمة الأساسية.

03. كيفية تثبيت واستخدام Pencil؟

فيما يلي مشاركة لعملية التثبيت والاستخدام الخاصة بي، والتي يجب أن تكون الطريقة الأبسط حاليًا.

الخطوة الأولى: تثبيت Pencil MCP

ابحث مباشرة عن "pencil" في IDE الخاص بك (VS Code و Cursor وما إلى ذلك)

انقر فوق تثبيت، ولا تقم بتنزيله من أماكن أخرى (لتجنب تنزيل نسخة مقرصنة)

ملاحظة: البحث مباشرة في IDE هو الطريقة الأكثر أمانًا.

الخطوة الثانية: دع الذكاء الاصطناعي يساعدك في التكوين

كيفية التكوين بعد التثبيت؟

بصراحة، لم أكن أفهم ذلك في البداية. ثم اكتشفت أن أبسط طريقة هي: السماح للذكاء الاصطناعي بمساعدتك في التكوين.

افتح مساعد البرمجة بالذكاء الاصطناعي الخاص بك (Claude Code أو Codex)، وقل له:

لقد قمت بتثبيت "pencil" MCP في IDE هذا، يرجى مساعدتي في تكوينه، حتى يتمكن Claude Code و Codex و VS Code من استخدام هذا MCP

ثم انتظر حتى يساعدك في التكوين.

الخطوة الثالثة: ابدأ في استخدام Pencil للتصميم

بعد التكوين، سترى رمز قلم رصاص على الجانب الأيسر من IDE، انقر لفتحه لفتح لوحة Pencil.

ثم في مربع حوار الذكاء الاصطناعي على اليمين، أخبره بالتصميم الذي تريده.

على سبيل المثال:

"صمم لي مشغل موسيقى بنمط Apple"

"اصنع صفحة مقصودة بسيطة، واللون الرئيسي هو الأزرق"

"بالرجوع إلى نمط هذا الموقع، ساعدني في إنشاء موقع مشابه"

سيقوم الذكاء الاصطناعي بإنشاء مسودة تصميم على اللوحة. إذا لم تكن راضيًا، يمكنك الاستمرار في جعله يقوم بتعديلها:

"الخط صغير جدًا، قم بتكبيره"

"اجعل التباعد أكبر"

"قم بتغيير اللون إلى لون أكثر نعومة"

استمر في التعديل حتى تكون راضيًا.

الخطوة الرابعة: إنشاء التعليمات البرمجية

بعد الانتهاء من مسودة التصميم، يمكنك أن تجعل الذكاء الاصطناعي يساعدك في إنشاء التعليمات البرمجية.

يمكنك أن تقول مباشرة:

"ساعدني في إنشاء كود Next.js"

"إنشاء كود Flutter"

"إنشاء كود Vue 3"

سيقوم الذكاء الاصطناعي بإنشاء التعليمات البرمجية المقابلة تلقائيًا بناءً على مسودة التصميم الخاصة بك.

التأثير الفعلي:

04. بعض تجارب الاستخدام الفعلية

بعد استخدامه عدة مرات، إليك بعض الأفكار التي أود مشاركتها:

1) يجب أن يكون وصف المتطلبات محددًا

في البداية، كنت أقول "ساعدني في إنشاء موقع ويب"، لكن ما أنشأه الذكاء الاصطناعي لم يكن ما أردته على الإطلاق.

اكتشفت لاحقًا أنه كلما كان الوصف أكثر تحديدًا، كان التأثير أفضل.

على سبيل المثال:

وصف سيئ: "ساعدني في إنشاء صفحة تسجيل الدخول"

وصف جيد: "ساعدني في إنشاء صفحة تسجيل دخول بسيطة، مع وجود شعار في الأعلى، وحقول إدخال البريد الإلكتروني وكلمة المرور في المنتصف، وزر تسجيل الدخول في الأسفل، والنمط يشبه موقع Apple الرسمي"

2) يمكنك تحميل صور مرجعية

إذا رأيت تصميمًا جيدًا لموقع ويب، فيمكنك التقاط لقطة شاشة وتحميلها إلى الذكاء الاصطناعي ليستخدمها كمرجع.

سيؤدي ذلك إلى إنشاء مسودة تصميم أقرب إلى توقعاتك.

3) التكرار أهم من الوصول إلى الكمال مرة واحدة

لا تتوقع إنشاء تصميم مثالي مرة واحدة، فهذا غير واقعي.

الطريقة الصحيحة هي: إنشاء تصميم تقريبي أولاً، ثم تعديله شيئًا فشيئًا.

قم بتعديل مكان أو مكانين فقط في كل مرة، مثل "اجعل التباعد أكبر" أو "اجعل اللون أكثر نعومة"، فهذه هي الطريقة الأكثر فعالية.

4) جودة الكود جيدة جدًا

لقد جربت ذلك عدة مرات، وجودة الكود الذي تم إنشاؤه عالية جدًا:

هيكل الكود واضح

درجة استعادة النمط عالية (98٪ +)

تخطيط متجاوب جيد أيضًا

يمكن استخدامه بشكل أساسي بعد إجراء بعض التعديلات الطفيفة.

05. بعض النقاط التي يجب ملاحظتها

على الرغم من أن Pencil سهل الاستخدام للغاية، إلا أن هناك بعض الأشياء التي يجب ملاحظتها:

1) يجب أن تعتمد على ذوقك الخاص

يمكن للذكاء الاصطناعي مساعدتك في إنشاء مسودة تصميم، ولكن عليك أن تقرر ما إذا كانت تبدو جيدة أم لا.

لذا، حاول مشاهدة بعض التصميمات الجيدة بانتظام لتحسين ذوقك، حتى تتمكن من تقديم إرشادات أفضل عند استخدام Pencil.

إليك بعض الأماكن التي يمكنك العثور فيها على مراجع تصميم:

Dribbble

Mobbin (متخصص في جمع واجهات المستخدم للأجهزة المحمولة)

لقطات شاشة لمواقع الويب الممتازة المختلفة

2) يجب عليك كتابة التفاعلات المعقدة بنفسك

Pencil مناسب لإنشاء صفحات ثابتة وتفاعلات تقليدية، ولكن إذا كانت هناك رسوم متحركة معقدة وإيماءات وما إلى ذلك، فلا يزال يتعين عليك كتابة التعليمات البرمجية بنفسك.

ومع ذلك، بالنسبة لمعظم السيناريوهات، فإن Pencil كافٍ.

3) يعد اختيار نموذج الذكاء الاصطناعي المناسب أمرًا مهمًا

لقد جربت العديد من النماذج ووجدت أن Claude Opus 4.5 يقدم أفضل أداء مرئي.

إذا كنت تستخدم نماذج أخرى، فقد تكون جودة مسودة التصميم التي تم إنشاؤها أسوأ.

06. بيانات مقارنة الكفاءة

أخيرًا، سأشارك مجموعة من البيانات التي اختبرتها بنفسي:

بالنسبة لي، فإن القيمة الأكبر هي: تحويل الطاقة من "كيفية التنفيذ" إلى "ما هي الوظيفة التي يجب القيام بها".

07. ملخص

يعمل Pencil بشكل أساسي على ربط التصميم والتطوير، مما يسمح لك باستخدام اللغة الطبيعية لتشغيل العملية بأكملها.

إذا كنت تعمل أيضًا في تطوير الواجهة الأمامية، أو تقوم بإنشاء منتجاتك الخاصة، فأنصحك بشدة بتجربة Pencil:كفاءة تحسين ملحوظ: تقليل الوقت من التصميم إلى الكود بمقدار 8 أضعاف

جودة كود مستقرة: دقة استعادة 98%+، لا حاجة لتعديل الأنماط بشكل أساسي

دعم العديد من التقنيات: يمكن استخدام Next.js و Flutter و Vue وما إلى ذلك

مدفوعة باللغة الطبيعية: وصف الاحتياجات بلغة بشرية، ويقوم الذكاء الاصطناعي بإنشائها تلقائيًا

أخيرًا، إذا كنت تعمل أيضًا في تطوير مستقل أو برمجة الذكاء الاصطناعي، فيرجى ترك تعليق للدردشة:

كيف تصمم عادةً؟

هل استخدمت Pencil؟ كيف كان التأثير؟

سأقرأ كل تعليق بعناية. أراك في المقالة التالية.