تطبيق Paper: أداة تصميم الذكاء الاصطناعي الجديدة التي يتحدث عنها الجميع
원제 · Paper: The new AI design app everyone's talking about
핵심 요약
يعتبر تطبيق Paper الجيل القادم من أدوات التصميم التي تدمج بين مرونة Figma وقوة الذكاء الاصطناعي البرمجي، مما يقلص الفجوة بين المصمم والمطور بشكل غير مسبوق.
하이라이트
تطبيق Paper هو أداة تصميم ثورية تعمل كواجهة رسومية (مثل Figma) ولكنها متكاملة تماماً مع أدوات البرمجة بالذكاء الاصطناعي مثل Claude code و Cursor.
يدعم التطبيق بروتوكول MCP مما يسمح للمبرمجين بالتحكم في عناصر التصميم مباشرة عبر الأوامر النصية وتوليد الأكواد البرمجية بشكل لحظي.
يتميز Paper بقدرته العالية على تحويل التصاميم إلى أكواد React و Tailwind CSS و HTML بدقة واحترافية توفر ساعات من العمل اليدوي.
يتضمن التطبيق ميزات فريدة مثل منتقي الألوان الموحد لضمان تطابق الألوان بين التصميم والمنتج النهائي، وتوليد الصور باستخدام نماذج مثل Nano Banana Pro.
يمكن للأداة تحليل قواعد الكود الحالية لاستخراج أنظمة التصميم والمكونات، مما يسهل عملية التعديل وإعادة التصدير للمشاريع القائمة.
타임라인
مقدمة وتعريف بتطبيق Paper
يبدأ المتحدث بتعريف تطبيق Paper واصفاً إياه بأنه النسخة المتوافقة مع Claude code من تطبيق Figma الشهير. يوضح الفيديو كيف تستخدم شركات كبرى مثل Vercel و Dub هذه الأداة لتحسين سير عملها وتسهيل التحويل بين المكونات البرمجية والتصاميم المرئية. يتم استعراض واجهة التطبيق والنسخة المكتبية منه، مع شرح كيفية البدء بمشروع تجريبي بسيط لفهم الآليات الأساسية. يركز هذا القسم على أهمية الربط بين بيئة التصميم وبيئة التطوير لتقليل الاحتكاك في العملية الإبداعية. كما يشير إلى سهولة تحميل التطبيق وتثبيته كخطوة أولى للمستخدمين الجدد.
إعداد خادم MCP والتكامل مع Claude code
يشرح هذا الجزء كيفية تثبيت خادم MCP الخاص بـ Paper لتمكين التواصل بين Claude code وتطبيق التصميم على مستوى نظام التشغيل بالكامل. يقوم المتحدث بعرض عملي باستخدام بيئة Ghosty و Tmux لتشغيل مهام متعددة بالتوازي، مما يظهر قدرة الأداة على معالجة عدة طلبات تصميم في وقت واحد. يطلب المتحدث من الذكاء الاصطناعي إنشاء تطبيق لتتبع المصروفات وصفحة هبوط ولوحة تحكم مالية كاختبارات أولية. يبرز هذا القسم قوة التوجيهات النصية في بناء واجهات مستخدم معقدة دون الحاجة للرسم اليدوي. يوضح السياق هنا كيف يمكن للمطورين تسريع عملية النماذج الأولية بشكل مذهل.
استعراض نتائج التصميم والتوازي في العمل
يستعرض الفيديو النتائج المذهلة التي أنتجها Claude code داخل تطبيق Paper، حيث تظهر الواجهات بتصاميم احترافية وألوان متناسقة. يندهش المتحدث من جودة تطبيق تتبع المصروفات ونظام التصميم الخاص بالتطبيق الاجتماعي الذي يشبه تويتر، مؤكداً أنها تضاهي عمل المصممين المحترفين. يتم التركيز على ميزة العمل بالتوازي، حيث يستمر التطبيق في بناء عدة مشاريع في الخلفية دون انقطاع. يوضح الفيديو إمكانية التعديل اليدوي المباشر داخل Paper تماماً كما في Figma، مثل حذف أقسام أو تغيير نصوص. هذه المرونة تجعل الأداة مناسبة لكل من المبرمجين الذين يفضلون الكود والمصممين الذين يفضلون الواجهات المرئية.
تحويل التصاميم إلى كود برمي (React و Tailwind)
ينتقل المتحدث إلى الجانب التطبيقي الأهم وهو تحويل هذه التصاميم المرئية إلى أكواد برمجية جاهزة للاستخدام في مشاريع حقيقية. يوضح الفيديو كيفية نسخ المكونات كأكواد Tailwind CSS أو React CSS ولصقها مباشرة في محرر النصوص Cursor. تظهر النتائج فعالية الكود الناتج حيث يعمل التصميم بشكل ممتاز على الخادم المحلي (localhost) مع الحفاظ على الهوية البصرية. يشير المتحدث إلى بعض التحديات المتعلقة بـ "التجاوب" (responsiveness) في النسخة الأولى، لكنه يشيد بالتقدم الكبير في هذا المجال. يعتبر هذا القسم جوهرياً للمطورين الذين يرغبون في تقليل الوقت المستغرق في كتابة ملفات CSS المعقدة.
توليد الصور والمؤثرات البصرية المتقدمة
يستعرض الفيديو قدرات Paper في توليد الصور بالذكاء الاصطناعي باستخدام نماذج متطورة مثل Nano Banana Pro لإنشاء إعلانات ترويجية. يتم تجربة أوامر نصية لإنشاء شعارات وتصاميم جرافيكية، حيث يلاحظ المتحدث دقة الذكاء الاصطناعي في فهم هوية العلامة التجارية. بالإضافة إلى ذلك، يتطرق القسم لميزة إضافة تأثيرات بصرية فنية مثل تأثير "المعدن السائل" أو "الماء" بضغطة زر واحدة. يسلط المتحدث الضوء أيضاً على ميزة منتقي الألوان الموحد الذي يحل مشكلة اختلاف درجات الألوان بين Figma والمتصفح. تعزز هذه الميزات من مكانة Paper كأداة تصميم شاملة تتجاوز مجرد رسم الواجهات.
تحليل الكود الحالي والخاتمة
في القسم الأخير، يحاول المتحدث استخدام ميزة متقدمة لتحليل قاعدة كود موجودة واستخراج نظام تصميم منها داخل Paper. رغم مواجهة مشكلة في حدود الاستخدام لنسخة البرو أثناء التسجيل، إلا أنه يشرح القيمة الكبيرة لهذه الميزة في تعديل المكونات الحالية وإعادة تصديرها. يختتم الفيديو بتشجيع المشاهدين على تجربة الأداة وبناء مشاريعهم الخاصة، معرباً عن نيته الترقية للنسخة المدفوعة قريباً. يظهر المتحدث تصميماً نهائياً لتطبيق اجتماعي تم بناؤه خلال الفيديو كدليل على كفاءة الأداة. ينتهي المقطع بدعوة للاشتراك ومشاركة الآراء حول مستقبل التصميم المدعوم بالذكاء الاصطناعي.
설명
Inbox Zero: https://getinboxzero.com Inbox Zero Repo: https://github.com/elie222/inbox-zero Paper: https://paper.design In this video I test Paper, a new design tool that feels like Figma for Claude Code and Cursor. I show how to connect the Paper MCP server, generate multiple app UIs in parallel, edit the results visually, and then turn those designs into real code with React, Tailwind, or plain HTML/CSS. I also try Paper’s image generation, visual effects, color workflow, and its ability to create a design system from an existing codebase. What’s covered: 0:00 - Using Paper with Claude Code 1:14 - Generating landing pages, dashboards, and design systems 1:43 - Editing AI-generated UI like Figma 3:01 - Copying components as React + Tailwind or CSS 4:24 - Turning designs into real working pages 8:24 - Testing image generation and built-in effects 10:24 - Importing an existing codebase into Paper If you’re building with AI tools like Claude Code or Cursor, Paper looks like one of the most interesting design-to-code workflows I’ve seen so far. --- Inbox Zero organizes your inbox, drafts replies in your voice, and helps you reach inbox zero fast. Never miss an important email again. https://getinboxzero.com GitHub: https://github.com/elie222/inbox-zero ⭐ --- Follow me on X: https://x.com/elie2222 Join the Newsletter: https://aiopensource.substack.com/ #figma #paperdesign #paper #ai #claudecode #cursor #design