COSTA CODE — مازن كوستا

01 — المشكلة والفكرة

أدوات كتير، كود كتير، وقت مش كفاية

أي مشروع برمجي حقيقي بيحتاج فريق متعدد: مصمم، فرونت إند، باك إند، حد يعمل الأنيميشن، حد يكتب التوثيق. كوستا ستوديو قرر يحل المشكلة دي لنفسه الأول — بدل ما يدور على فريق كامل لكل مشروع صغير، بنى COSTA CODE: نظام ذكاء اصطناعي واحد بياخد فكرة أو برومبت، ويطلع منه منتج كامل — كود، أنيميشن، توثيق، ونشر — من غير ما حد يبدأ من صفر في كل مرة.

COSTA CODE problem, solution and workflow explained in Arabic — المشكلة، الحل، والمعمارية الأساسية لـ COSTA CODE

02 — الهوية البصرية

ماسكوت بكسل أحمر، ونظام فاتح وغامق كامل

الشعار عبارة عن ماسكوت بكسل-آرت بسيط — دماغ روبوت أحمر بعينين مربعتين. الشكل ده سهل التعرف عليه في أي حجم، وسهل تحريكه لأنيميشن. الهوية اتبنت كاملة بنظامين: فاتح وغامق، بنفس القواعد بالظبط في الاتنين.

الألوان الرسمية

Costa Red
#FF2A2A

Black
#0B0B0D

Dark
#111216

Grey
#6B6B6F

Light BG
#F5F5F5

Blue
#33CFFF

Purple
#8B5CF6

Green
#00E676

الخطوط

العناوينSpace Grotesk Bold

النصوصInter Medium/Regular

الكود والتيرمنالJetBrains Mono

اللوجو ودليل الهوية الكامل

الماسكوت / اللوجو

دليل الهوية الكامل — الألوان، الخطوط، الأيقونات، والتطبيق

COSTA CODE mascot family and expression system — عائلة الماسكوت والتعبيرات — Idle, Coding, Thinking, Success, Error, Sleeping...

COSTA CODE light and dark mode system — نظام الوضع الفاتح والغامق — نفس القواعد بالظبط في الاتنين

مش مجرد صور concept — الهوية دي شغالة فعليًا عائلة التعبيرات العشرة (Idle, Coding, Thinking, Success, Loading, Error, Sleeping, Excited, Love, Wink) مش رسمة ثابتة — هي كود حقيقي (public/mascot.js) بيغيّر حالة الماسكوت لحظيًا جوه التطبيق حسب اللي بيحصل، زي ما هتشوف في قسم تطبيق الويب تحت.

03 — أداة الـ CLI

Costa Code في التيرمنال — مش موك أب، أمر حقيقي بيتنفذ

أداة سطر أوامر حقيقية (costa و costa-build) بتتنصب بـ npm link وبتلف حول الـ Claude Code CLI الحقيقي، وتديره في مراحل مبنية على شخصيات وكلاء كوستا ستوديو الخمسة (Designer, Frontend, Backend, Motion, QA, Docs). كل مرحلة بتتسجل في ملفات حقيقية جوه .costa/ — مش في الذاكرة — عشان أي مرحلة فشلت تتصلح وتكمل من مكانها.

01

initابدأ مشروع جديد من فكرة

02

buildشغّل مراحل البناء الثمانية

03

statusاعرض تقدم المشروع

04

deployانشر المشروع (يدوي أو مباشر)

✎

chatمحادثة تفاعلية — نفس شات الويب

✎

notes / tasksملاحظات ومهام، مشتركة مع الويب

✎

skillsإدارة مهارات Claude Code

✎

promptsمكتبة البرومبتات الجاهزة

Costa Code CLI real terminal dashboard — لوحة تحكم Costa Code CLI — من تيرمنال حقيقي

Costa Code CLI full command reference — دليل الأوامر الكامل (English)

Costa Code CLI Arabic usage guide — دليل الاستخدام بالعربي

تفصيلة صغيرة بس مهمة: الماسكوت بيتعرض كصورة حقيقية جوه التيرمنالات اللي بتدعم بروتوكول iTerm2 (زي iTerm2 نفسه وتيرمنال VS Code)، وبيرجع تلقائيًا لرسمة ASCII في أي تيرمنال تاني.

04 — تطبيق الويب

Costa Code Web — جولة كاملة من جوه التطبيق الفعلي

كل صورة في القسم ده مش تصميم ولا موك أب — لقطة حقيقية اتاخدت من التطبيق وهو شغال فعليًا على السيرفر المحلي. واجهة كاملة بنظام فاتح/غامق، متصلة بـ Claude Code (محليًا من غير مفتاح) بالإضافة لـ Anthropic وGemini وDeepSeek بمفاتيح API حقيقية. لوحة تحكم استخدام (Sessions, Messages, Tokens, Streaks, Peak Hour) محسوبة بالكامل من قاعدة بيانات حقيقية — مفيش أي رقم موك أب.

الصفحة الرئيسية — لوحة الاستخدام

Costa Code Web home dashboard, light mode, real app screenshot — لوحة التحكم — وضع فاتح

Costa Code Web home dashboard, dark mode, real app screenshot — لوحة التحكم — وضع غامق

الشات — عادي، وشخصيات الاستوديو، ومحادثة حقيقية

كل موديل بيرد فعليًا streaming بتأثير الكتابة، وسايدبار "Studio" فيه 5 شخصيات وكيل (Design, Motion, Code, AI, Cloud) — كل واحدة بتفتح شات بشخصيتها الخاصة بدل ما تبدأ من صفر.

Costa Code Web chat screen with mascot, real app screenshot — شات جديد مع الماسكوت

Costa Designer persona chat, real app screenshot — شخصية "Costa Designer" من قائمة الاستوديو

Real live chat exchange with an actual AI answer, real app screenshot — سؤال حقيقي ورد حقيقي من الموديل — "In 3 short bullet points: what makes a landing page convert?"

Prompt Engineer — مكتبة البرومبتات

Prompt Engineer library screen, real app screenshot — برومبتات محفوظة بعنوان، تاجات، وعداد استخدام لكل واحد

الإعدادات — الملف الشخصي، الاستخدام، والمهارات

Costa Code Web general settings screen, real app screenshot — General — الملف الشخصي والتعليمات الدائمة والمظهر

Costa Code Web usage settings screen, real app screenshot — Usage — نفس أرقام لوحة التحكم، بالتفصيل

Costa Code Web skills settings screen showing 60 real skills, real app screenshot — Skills — 60 مهارة حقيقية مقروءة من نفس مجلد Claude Code (~/.claude/skills)

Site Editor — عدّل الهوية من جوه التطبيق

مش محتاج تروح للكود عشان تغيّر لوجو أو أيقونة أو نص — كل حاجة قابلة للتعديل من واجهة واحدة.

Costa Code Web Site Editor branding tab, real app screenshot — Branding — تغيير اللوجو ونصوص البراند

Costa Code Web Site Editor icons tab, real app screenshot — Icons — استبدال أي أيقونة بصورتك الخاصة

سايدبار Notes / Tasks / Files — وموبايل متجاوب

Sidebar Notes, Tasks and Files panels with real content, real app screenshot — ملاحظات ومهام حقيقية محفوظة — مشتركة مع الـ CLI

Costa Code Web mobile responsive home screen, real app screenshot — نفس الداشبورد، متجاوب بالكامل على الموبايل

الماسكوت وهو شغال فعليًا

The 10 real mascot expression states rendered live from the app code — العشر حالات الحقيقية للماسكوت — مأخوذة من التطبيق نفسه وهو شغال، مش من ملف تصميم

05 — الموشن جرافيك

اللوجو بيتحرك، مش بس بيتعرض

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

ظهور اللوجو من قطع بكسل ثلاثية الأبعاد

انتقال بصري بلون البراند

06 — التوثيق

توثيق كامل بالعربي والإنجليزي — مش صفحة README بس

كل نظام محتاج توثيق يقدر أي حد يفهمه ويستخدمه من غيري. اتبنى مولّد توثيق مخصص (build-guide.js / build-tutorial.js) بياخد لقطات حقيقية من التطبيق نفسه ويحطها جوه دليل استخدام كامل بالـ PDF.

Costa Code Documentation التوثيق التقني الكامل للنظام افتح الملف ←

دليل الاستخدام — عربي شرح كامل لكل شاشة وأمر بالعربي افتح الملف ←

User Guide — English Full screen-by-screen usage guide افتح الملف ←

تيوتوريال تفصيلي — عربي خطوة بخطوة من التنصيب لحد النشر افتح الملف ←

07 — جرّب بنفسك

مش سكرين شوت — شغّله على جهازك دلوقتي

Costa Code Web تطبيق محلي 100% — مفيش سيرفر مركزي ولا حساب. بتشغله على جهازك، ويشتغل بالـ Claude Code المتصل عندك من غير أي مفتاح.

1

cd costa-code-web && npm installتنصيب الاعتماديات (اتعمل مرة واحدة)

2

npm startتشغيل السيرفر المحلي

3

افتح ديمو كوستا كود"Claude Code" متفعّل افتراضيًا ومتصل بالـ CLI المحلي فورًا

جرّب Costa Code Web لايف ديمو الواجهة كاملة شغالة في متصفحك على طول — السايدبار، الإديتور، البرومبتات، والإعدادات كلها بتشتغل. رد الشات مكتوب مسبقًا، لأن النسخة الحية بتشتغل بـ Claude وGemini وDeepSeek ورا سيرفر.

افتح الديمو ↗

08 — قبل وبعد

قبل كوستا ستوديو، وبعد كوستا ستوديو

قبل

فريق كامل مطلوب لكل مشروع — مصمم، فرونت إند، باك إند، موشن، وتوثيق
كل مشروع بيبدأ من صفر تمامًا
وقت طويل بين الفكرة والمنتج النهائي
جودة وطريقة التوثيق بتختلف من مشروع لمشروع

بعد

نظام ذكاء اصطناعي واحد بيغطي كل الأدوار دي مع بعض
برومبت واحد → منتج كامل: كود، أنيميشن، توثيق، ونشر
هوية بصرية وتوثيق ثابتين طالعين من نفس النظام في كل مرة
CLI وتطبيق ويب شغالين مع بعض بنفس البيانات لحظيًا

التسليمات

اللي اتبنى في المشروع ده

هوية بصرية كاملة (لوجو + ماسكوت + نظام فاتح/غامق) أداة CLI حقيقية (costa + costa-build) تطبيق ويب كامل متصل بـ 4 موديلات AI لوحة تحكم استخدام حية (Analytics) نظام Site Editor لتعديل الهوية من الداخل قاعدة بيانات مشتركة بين الـ CLI والويب فيديوهات موشن جرافيك للوجو 4 ملفات توثيق PDF عربي/إنجليزي