من المؤسسFrom the Founder العلومScience التعلم الغامرImmersive Learning القوالبTemplates الإضافةExtension
خدماتService
30 ي30d
ابني خدمة فريلانس من التصميم للكود بـ Stitch و Claude Code خلال 30 يومBuild a Design-to-Code Freelance Service with Stitch and Claude Code in 30 Days
خدماتService

ابني خدمة فريلانس من التصميم للكود بـ Stitch و Claude Code خلال 30 يوم Build a Design-to-Code Freelance Service with Stitch and Claude Code in 30 Days

إتقان مسار التسليم من Stitch إلى DESIGN.md إلى Claude Code عبر مشروعين تدريبيين، ونشر مثالين إلى ثلاثة أمثلة بجودة عملاء، وتحديد خدمة تصميم إلى كود بأسعار وقواعد تعديلات واضحة، وإرسال تواصل موجه يوميًا، وتسليم واجهة مدفوعة واحدة مع شهادة مكتوبة خلال ثلاثين يومًا. Master the Stitch to DESIGN.md to Claude Code delivery workflow through two practice builds, publish 2-3 client-quality portfolio examples, define a clear design-to-code service with pricing and revision rules, send targeted outreach every day, and deliver one paid frontend with a written testimonial within 30 days.

4 نتائج رئيسية4 key results ·50 مهمة50 tasks ·30 يوم30 days ·2 مستخدم2 users
⏱ 30 يوماً30 Days

ابدأ هذه الخطة مجاناً Start This Plan — Free

لا يلزم بطاقة ائتمانية · مجاني للبدء No credit card · Free to start

إيه اللي هتحصله مع زالفولWhat You Get with Zalfol

🐟

Goldfish ModeGoldfish Mode

مهمة واحدة في كل مرة، مؤقتة، بدون تشتيتOne task at a time. Timed. No distractions.

⬡

CEO ModeCEO Mode

خطة كاملة، منظمة، مع تتبع حقيقيFull plan. Organized. With real tracking.

🗑

صندوق الإفراغDump Box

كل حاجة في دماغك — افرغها هنا الأولEverything in your head — dump it here first.

الخطةThe Plan

1
إكمال المهارةSkill Complete
25%
✓ افتح Google Drive. اعمل فولدر `Design-to-Code Freelance HQ`. جوّاه اعمل فولدرات `Practice Projects` و`Portfolio` و`Service Package` و`Outreach` و`Clients` و`Testimonials`.Open Google Drive. Create folder `Design-to-Code Freelance HQ`. Inside it create folders `Practice Projects`, `Portfolio`, `Service Package`, `Outreach`, `Clients`, and `Testimonials`. 5 دmin
✓ افتح Terminal. شغّل `node --version` وبعدها `npm install -g @anthropic-ai/claude-code` وبعدها `claude --version`. احفظ كل النتائج في `Practice Projects/setup-proof.txt`.Open terminal. Run `node --version`, then `npm install -g @anthropic-ai/claude-code`, then `claude --version`. Save all outputs in `Practice Projects/setup-proof.txt`. 5 دmin
✓ افتح `stitch.withgoogle.com`. ابنِ أول مشروع تدريبي: landing page لمطعم مصري. اوصف hero section وmenu section وlocation section وWhatsApp CTA.Open `stitch.withgoogle.com`. Build first practice project: Egyptian restaurant landing page. Describe hero section, menu section, location section, and WhatsApp CTA. 5 دmin
✓ صدّر DESIGN.md من المشروع التدريبي الأول. افتح الملف وحدد primary color hex وheading font وbutton corner radius وspacing base unit. احفظ النتائج في `Practice Projects/restaurant-design-index.md`.Export DESIGN.md from practice project 1. Open the file and identify primary color hex, heading font, button corner radius, and spacing base unit. Save findings in `Practice Projects/restaurant-design-index.md`. 5 دmin
✓ اعمل `CLAUDE.md` للمشروع التدريبي الأول. ضيف بلوك التعليمات 12 سطر. شغّل `claude`. اسأل: `What font is used for headings in this project?` واتأكد إن الإجابة مطابقة لـ DESIGN.md.Create `CLAUDE.md` for practice project 1. Add the 12-line instruction block. Run `claude`. Ask: `What font is used for headings in this project?` Verify the answer matches DESIGN.md. 5 دmin
✓ ولّد كل components للمشروع التدريبي الأول باستخدام Claude Code. شغّل visual audit. اكتب أي drift في `Practice Projects/restaurant-drift-log.md`: ألوان أو مسافات مش مطابقة لـ design.md.Generate all components for practice project 1 using Claude Code. Run a visual audit. List any drift in `Practice Projects/restaurant-drift-log.md`: colors or spacing not matching design.md. 5 دmin
✓ انشر المشروع التدريبي الأول على Vercel. اكتب الرابط العام في `Practice Projects/practice-urls.md`. ابعت الرابط لشخص واحد واسأله: `Does this look like a real professional website?`.Deploy practice project 1 to Vercel. Note the public URL in `Practice Projects/practice-urls.md`. Share the URL with one person and ask: `Does this look like a real professional website?` 5 دmin
✓ افتح Stitch. ابنِ ثاني مشروع تدريبي: dashboard SaaS بسيط فيه login screen وsidebar navigation وmetrics cards وtable وempty state وsettings page.Open Stitch. Build second practice project: simple SaaS dashboard with login screen, sidebar navigation, metrics cards, table, empty state, and settings page. 5 دmin
✓ صدّر DESIGN.md من المشروع التدريبي الثاني. اعمل CLAUDE.md. اطلب من Claude Code يولّد dashboard components. احفظ ملاحظات drift في `Practice Projects/dashboard-drift-log.md`.Export DESIGN.md from practice project 2. Create CLAUDE.md. Ask Claude Code to generate dashboard components. Save drift notes in `Practice Projects/dashboard-drift-log.md`. 5 دmin
✓ انشر المشروع التدريبي الثاني على Vercel. ضيف الرابط في `Practice Projects/practice-urls.md`. اكتب 5 دروس عن السرعة والdrift والprompts والنشر والاستعداد للعميل.Deploy practice project 2 to Vercel. Add the URL to `Practice Projects/practice-urls.md`. Write 5 lessons learned about speed, drift, prompts, deployment, and client readiness. 5 دmin
✓ افتح ملفات Figma أو brand الموجودة. استورد أو اوصف اتجاه تصميم واحد في Stitch. صدّر DESIGN.md وقارن 5 قرارات style بالملف الأصلي.Open existing Figma or brand files. Import or describe one design direction inside Stitch. Export DESIGN.md and compare 5 imported style decisions against the original file. 5 دmin
✓ افتح `Service Package/developer-positioning.md`. اكتب 3 جمل بتشرح: `I am a developer who can now deliver designed frontends faster using Stitch plus Claude Code.`Open `Service Package/developer-positioning.md`. Write 3 sentences explaining: `I am a developer who can now deliver designed frontends faster using Stitch plus Claude Code.` 5 دmin
✓ افتح `Practice Projects/beginner-glossary.md`. عرّف DESIGN.md وCLAUDE.md وcomponent وdeploy وVercel وdesign drift في جملة بسيطة لكل مصطلح.Open `Practice Projects/beginner-glossary.md`. Define DESIGN.md, CLAUDE.md, component, deploy, Vercel, and design drift in one simple sentence each. 5 دmin
2
نشر ملف أعمال حيPortfolio Live
25%
✓ افتح `Portfolio`. اعمل brief باسم `Portfolio Niche Plan` فيه 3 niches: مطعم مصري وجيم أو عيادة محلية وstartup SaaS. اختار اتنين للبناء الأول.Open `Portfolio`. Create a portfolio brief named `Portfolio Niche Plan` with three niches: Egyptian restaurant, local gym or clinic, and startup SaaS. Pick two to build first. 5 دmin
✓ افتح Stitch. ابنِ portfolio project 1 للـ niche المختار. استخدم copy مصري محلي وsections حقيقية وWhatsApp CTA واتجاه بصري خاص بالبيزنس. احفظ Screenshot باسم `portfolio-1-stitch`.Open Stitch. Build portfolio project 1 for the selected niche. Use local Egyptian copy, real sections, WhatsApp CTA, and one business-specific visual direction. Save screenshot `portfolio-1-stitch`. 5 دmin
3
تغليف الخدمة للبيعService Packaged
20%
4
تسليم أول مشروع مدفوعFirst Paid Project Delivered
30%

+ 35 مهمة أخرى — استورد الخطة عشان تشوفهم كلهم+ 35 more tasks — import the plan to see them all

النجاح شكله إيهWhat Success Looks Like

يُغلق ملف عرض السعر في Google Docs. وبجانبه تبويب Vercel يعرض صفحة العميل الجديدة مباشرة، ورسالة واتساب تقول: "الشغل احترافي، موافق." تظهر لقطة الدفع داخل مجلد العميل، وتُنقل جملة الشهادة إلى صفحة الأعمال. A Google Docs proposal PDF is closed. Beside it, a Vercel tab shows the client's new landing page live, and a WhatsApp message says: `Looks professional, approved.` The payment screenshot sits in the client folder, and the testimonial sentence is copied into the portfolio page.

التكلفة المتوقعةExpected Costs

البندItem التكلفةAmount مطلوب؟Required?
اشتراك Claude Code ProClaude Code Pro subscription ~1,000 EGP/month ($20/month). Required from day 1 for intensive practice, portfolio builds, and first client delivery. ✓
Google StitchGoogle Stitch 0 EGP. Free AI UI design tool with a monthly generation allowance; use deliberate briefs to avoid wasting credits. ✓
استضافة VercelVercel hosting 0 EGP on the free tier for portfolio projects and first client previews, as long as usage stays small and simple. ✓
قالب عرض سعر Google DocsGoogle Docs proposal template 0 EGP. Enough to create professional proposals and export PDFs without paying for design software. ✓
دومين شخصي للبورتفوليوPersonal portfolio domain 400-800 EGP/year. Optional after the first client; a free Vercel URL is sufficient for validation and outreach. اوفر فلوسكSkip it
⚠️ مصيدة هدر - شراء قوالب مواقع للدراسةWASTE TRAP - paid website templates to study Not needed. The service is built from design.md and Claude Code, and templates can contaminate the visual system with unrelated choices. اوفر فلوسكSkip it
⚠️ مصيدة هدر - ترقية Fiverr ProWASTE TRAP - Fiverr Pro seller upgrade Waste until after three client deliveries. A profile badge will not create the first local referral or fix unclear positioning. اوفر فلوسكSkip it
⚠️ مصيدة هدر - Canva Pro لتصميم العروضWASTE TRAP - Canva Pro for proposal design Google Docs is enough for month one proposals. Buyers care about scope, proof, URL, timeline, and price more than decorative proposal design. اوفر فلوسكSkip it

المخاطر اللي تاخد بالك منهاRisks to Watch

highhigh
تسعير أول المشاريع بأقل من اللازم يفتح باب تضخم النطاقThe first projects are underpriced into scope creep
حدد الحد الأدنى المكتوب قبل التواصل: 3000 جنيه كحد أدنى، و8000 جنيه لتطبيق من ثلاث شاشات، وتسعير مخصص للنطاق الأكبر. قلل التسليمات لا السعر.Set the written floor before outreach: 3,000 EGP minimum, 8,000 EGP for a 3-screen app, and custom pricing for larger scope. Reduce deliverables, not price.
highhigh
العميل يتوقع مطابقة بكسل-مثالية للهويةClient expects a pixel-perfect brand match
اضبط التوقعات في عرض السعر: التصاميم المتولدة تتبع الموجز وتشمل جولتي تعديل؛ أما الالتزام الصارم بإرشادات الهوية فهو نطاق منفصل.Set expectations in the proposal: generated designs follow the brief and include two revision rounds; strict brand-guideline work is a separate scope item.
mediummedium
انحراف Claude Code يصل إلى تسليم العميلClaude Code drift reaches the client delivery
شغّل أمر المراجعة واحتفظ بسجل انحراف للعميل قبل كل تسليم. لا ترسل المعاينة حتى تُصلح كل البنود أو تُقبل صراحة.Run the audit command and maintain a client drift log before every delivery. Do not send the preview until all drift items are fixed or explicitly accepted.
mediummedium
نفاد رصيد Stitch أثناء مشروع عميل معقدStitch credits run out during a complex client job
ثبّت الموجز وقائمة الصفحات قبل التوليد. أضف خطوة اعتماد لاتجاه التصميم وسعّر تغييرات الاتجاه الإضافية كنطاق جديد.Lock the brief and page list before generation. Include one design-direction approval step and price extra direction changes as new scope.
highhigh
ملف الأعمال يبدو كقوالب لا كعمل مصري حقيقيPortfolio looks like templates instead of real Egyptian work
اختر تخصصات مصرية، واكتب نصًا محليًا، وأدخل سلوك واتساب أو الموقع الجغرافي، وأظهر قيدًا خاصًا بالبيزنس في كل نموذج أعمال.Choose Egyptian niches, write local copy, include WhatsApp or location behavior, and show one business-specific constraint in every portfolio piece.

مين هتشتغل معاهمWho You'll Work With

👤
الفريلانسرFreelancer
المنتج - يتعلم المسار ويبني الأعمال ويبيع ويسلمproducer
👤
شريك المساءلةAccountability Partner
شريك المساءلة - يتابع عدد الرسائل والتسليماتaccountable
👤
أول عميل بخصمFirst Discount Client
المشتري - يدفع ويعطي ملاحظات وشهادةbuyer
👤
فريلانسر أو مطور أقدم للمراجعةSenior Freelancer or Developer Reviewer
المراجع - يفحص الجودة قبل التسليم المدفوعreviewer

الخطة دي بتتكيف مع وضعكThis Plan Adapts to Your Situation

جيتنا منين؟What's your current background?
مش مصمم ومش developer خالصNo design or coding backgroundأنا مصمم جرافيك وعايز أضيف تسليم كودI'm a graphic designer - I want to add code deliveryأنا developer وعايز أضيف designI'm a developer - I want to add design and go faster
هتستهدف نوع عملاء إيه؟What type of clients will you target?
startups مصرية ومؤسسينEgyptian startups and foundersبيزنس صغير: مطاعم وجيمات وعياداتSmall businesses - restaurants, gyms, clinicsبراندات e-commerce محتاجة landing pagesE-commerce brands needing landing pages
من فين هتجيب عملاء؟Where will you find clients?
LinkedIn للـ founders ومتخذي القرارLinkedIn (startup founders and decision-makers)جروبات Facebook للبيزنس المصريFacebook Egyptian business groupsواتساب وشبكة معارفWhatsApp business networks and referrals

اقرأ أكترRead More

التعلم العميق — العلم وراء طريقة التلميذ
←
Immersive Learning — The Science Behind Disciple Mode
→
دماغ الـ ADHD: Iron Man أو Dory
←
The ADHD Brain: Iron Man vs. Dory
→

خد الخطوة الأولىTake the First Step

ابني خدمة فريلانس من التصميم للكود بـ Stitch و Claude Code خلال 30 يوم Build a Design-to-Code Freelance Service with Stitch and Claude Code in 30 Days

ابدأ هذه الخطة مجاناً Start This Plan — Free

لا يلزم بطاقة · مجاني للبدء No credit card · Free to start