من المؤسسFrom the Founder العلومScience التعلم الغامرImmersive Learning القوالبTemplates الإضافةExtension
تقنيةTech
30 ي30d
ابني واجهة تطبيق حقيقية بـ Stitch و Claude Code خلال 21 يومBuild a Real App Frontend with Stitch and Claude Code in 21 Days
تقنيةTech

ابني واجهة تطبيق حقيقية بـ Stitch و Claude Code خلال 21 يوم Build a Real App Frontend with Stitch and Claude Code in 21 Days

تنفيذ مسار Stitch إلى DESIGN.md إلى Claude Code مرة كاملة، وبناء نظام تصميم مكتمل لفكرة تطبيق حقيقية، وضبط Claude Code للالتزام بهذا النظام، وإنشاء كل مكونات الواجهة ومراجعتها، ثم نشر رابط واجهة مصقولة خلال واحد وعشرين يومًا. Run the full Stitch to DESIGN.md to Claude Code workflow once, build a complete design system for a real app idea, configure Claude Code to obey that design system, generate and audit all frontend components, and deploy a polished frontend URL within 21 days.

4 نتائج رئيسية4 key results ·43 مهمة43 tasks ·30 يوم30 days ·1 مستخدم1 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
إكمال مسار العمل كاملًاComplete Workflow Pipeline
20%
✓ افتح المتصفح وروح لـ `nodejs.org/en/download`. نزّل وثبّت Node.js LTS. افتح Terminal وشغّل `node --version` واحفظ رقم النسخة في نوت اسمها `Frontend Build Setup`.Open a browser. Go to `nodejs.org/en/download`. Download and install Node.js LTS. Open terminal. Run `node --version` and save the version number in a note named `Frontend Build Setup`. 5 دmin
✓ افتح Terminal وشغّل `npm install -g @anthropic-ai/claude-code`. لما التثبيت يخلص شغّل `claude --version`. انسخ ناتج النسخة في `Frontend Build Setup`.Open terminal. Run `npm install -g @anthropic-ai/claude-code`. When installation finishes, run `claude --version`. Copy the version output into `Frontend Build Setup`. 5 دmin
✓ افتح صفحة Billing في `claude.ai`. اتأكد من وصول Claude Code Pro بحوالي `$20/month (~1,000 EGP)`. اكتب `Pro active` أو `Not active yet` في `Frontend Build Setup`.Open `claude.ai` billing page. Confirm Claude Code Pro access at about `$20/month (~1,000 EGP)`. Write `Pro active` or `Not active yet` in `Frontend Build Setup`. 5 دmin
✓ افتح `stitch.withgoogle.com`. سجّل دخول بحساب Google. خلّص الـ onboarding. اعمل مشروع فاضي باسم `Stitch Test Pipeline` وسيب تبويب المشروع مفتوح.Open `stitch.withgoogle.com`. Sign in with Google account. Complete onboarding. Create a blank project named `Stitch Test Pipeline` and keep the project tab open. 5 دmin
✓ اكتب Prompt في Stitch للمشروع التجريبي: `simple task tracker web app, 2 screens, calm modern tone, task cards, status filter, primary action button`. ابعته. اضغط Iteration مرة واحدة. احفظ Screenshot باسم `test-stitch-iteration`.Write Stitch prompt for test project: `simple task tracker web app, 2 screens, calm modern tone, task cards, status filter, primary action button`. Submit. Click one iteration button. Save a screenshot named `test-stitch-iteration`. 5 دmin
✓ اضغط Export في مشروع Stitch التجريبي. اختار صيغة `DESIGN.md`. اعمل فولدر `stitch-claude-test`. احفظ الملف المُصدّر جوّه باسم `design.md`.Click Export in Stitch test project. Select `DESIGN.md` format. Create folder `stitch-claude-test`. Save the exported file to the folder as `design.md`. 5 دmin
✓ افتح فولدر `stitch-claude-test`. اعمل ملف `CLAUDE.md`. الصق بلوك 12 سطر بيقول لـ Claude Code يقرأ `design.md` قبل أي قرار لون أو مسافة أو radius أو typography أو component أو state.Open folder `stitch-claude-test`. Create file `CLAUDE.md`. Paste a 12-line instruction block telling Claude Code to read `design.md` before every color, spacing, radius, typography, component, and state decision. 5 دmin
✓ افتح Terminal جوّه `stitch-claude-test`. شغّل `claude`. اسأل: `What primary color is defined in this project's design system?` اتأكد إن الإجابة نفس الـ hex الأساسي في `design.md`.Open terminal in `stitch-claude-test`. Run `claude`. Ask: `What primary color is defined in this project's design system?` Verify the answer matches the primary hex in `design.md`. 5 دmin
✓ اكتب لـ Claude Code: `Build a primary button component using the design system in design.md.` افتح الملف اللي اتولد. اتأكد إن الزر مستخدم اللون والخط والـ radius والمسافات من `design.md`.Prompt Claude Code: `Build a primary button component using the design system in design.md.` Open the generated file. Confirm the button uses the primary color, font, radius, and spacing from `design.md`. 5 دmin
2
نظام تصميم حقيقيReal Design System
30%
✓ افتح Doc فاضي باسم `Real App Brief`. اكتب نوع المنتج، المستخدم المستهدف، 3 شاشات أساسية، النبرة البصرية، الإجراء الرئيسي، وجملة واحدة بتوصف نتيجة التطبيق.Open a blank document named `Real App Brief`. Write product type, target user, 3 core screens, visual tone, primary action, and one sentence describing the app outcome. 5 دmin
✓ افتح `Real App Brief`. ضيف أسماء الشاشات الحقيقية: onboarding أو hero screen، main working screen، و settings أو contact screen. احفظ الدوك.Open `Real App Brief`. Add exact screen names for the real app: onboarding or hero screen, main working screen, and settings or contact screen. Save the document. 5 دmin
✓ افتح Stitch. اعمل مشروع `Real App Frontend`. الصق `Real App Brief` كامل كـ prompt. ولّد أول نسخة واحفظ Screenshot باسم `real-app-stitch-v1`.Open Stitch. Create project `Real App Frontend`. Paste the full `Real App Brief` as the prompt. Generate the first version and save screenshot `real-app-stitch-v1`. 5 دmin
✓ افتح مشروع Stitch `Real App Frontend`. كرر على التصميم لحد ما كل شاشة مسماة من `Real App Brief` تكون موجودة. احفظ Screenshot باسم `real-app-all-screens` بيبين قائمة الشاشات.Open Stitch project `Real App Frontend`. Iterate the design until every named screen from `Real App Brief` exists. Save screenshot `real-app-all-screens` showing the screen list. 5 دmin
✓ افتح مشروع Stitch `Real App Frontend`. راجع الألوان والخطوط والأزرار والـ inputs والـ cards والـ navigation والـ empty states والـ error states. اكتب الناقص في `Design Gap List`.Open Stitch project `Real App Frontend`. Check colors, typography, buttons, inputs, cards, navigation, empty states, and error states. Write missing items in `Design Gap List`. 5 دmin
✓ افتح مشروع Stitch `Real App Frontend`. ضيف أو ولّد حالات المكونات الناقصة من `Design Gap List`. وقف لما كل بند في `Design Gap List` يبقى متعلم عليه `done`.Open Stitch project `Real App Frontend`. Add or regenerate missing component states from `Design Gap List`. Stop when `Design Gap List` has every item marked `done`. 5 دmin
3
واجهة أمامية عاملةWorking Frontend
35%
4
نشر واجهة المنتجDeployed Product UI
15%

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

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

تظهر في المتصفح صفحة منشورة على رابط Vercel عام. الزر الرئيسي نفسه من تصميم Stitch ظاهر في الصفحة ويستخدم كود اللون نفسه من design.md. وفي تبويب آخر يظهر تقرير مراجعة Claude Code بلا ألوان خارجة عن النظام. يستطيع المؤسس التنقل في الواجهة وإرسال رابط واحد لأول مختبر. A browser tab is open on a public Vercel URL. The same primary button from the Stitch design sits on the deployed page, using the exact hex from design.md. A second tab shows Claude Code's audit report with no rogue colors. The founder can click through the frontend and send one link to the first tester.

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

البندItem التكلفةAmount مطلوب؟Required?
اشتراك Claude Code ProClaude Code Pro subscription ~1,000 EGP/month ($20/month). Required for the intensive Claude Code workflow during the sprint; review ROI before renewing for a second month. ✓
Google StitchGoogle Stitch 0 EGP. Free AI UI design tool with roughly 350 generations per month; enough for one deliberate app design if the brief is written before iteration. ✓
Node.jsNode.js 0 EGP. Required to install and run Claude Code through npm and to build the frontend locally. ✓
نشر VercelVercel deployment 0 EGP on the free tier for a small frontend MVP. Use when deploy_target is Vercel and the app does not need paid team features. اوفر فلوسكSkip it
نشر GitHub PagesGitHub Pages deployment 0 EGP for static pages. Use only when the frontend is static and deploy_target is GitHub Pages. اوفر فلوسكSkip it
⚠️ مصيدة هدر - دومين قبل الاختبارWASTE TRAP - domain name before testing 400-800 EGP/year. A custom domain is nice later, but it does not make the UI clearer. Use the free Vercel or GitHub Pages URL until a real tester or user needs a branded link. اوفر فلوسكSkip it
⚠️ مصيدة هدر - مكتبة UI مدفوعةWASTE TRAP - paid UI component library Not needed for this sprint. design.md plus Claude Code already defines components. Buying a library introduces a second design language that may fight the Stitch system. اوفر فلوسكSkip it
⚠️ مصيدة هدر - توظيف مصمم قبل اختبار الـ MVPWASTE TRAP - hiring a designer for a pre-MVP polish pass 15,000+ EGP can make sense after validation, but this sprint exists to create a testable frontend first. Pay for expert polish only after users understand and want the product. اوفر فلوسكSkip it

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

mediummedium
اشتراك Claude Code Pro يتحول لتكلفة شهرية غير محسوبةClaude Code Pro becomes an unplanned recurring cost
ضع تذكيرًا في اليوم العشرين لاتخاذ قرار الإبقاء أو الإلغاء. لا تُبقِ الاشتراك إلا إذا فتحت الواجهة المنشورة اختبارًا أو مبيعات أو بناءً ثانيًا خلال الشهر التالي.Put a calendar reminder on day 20 to decide keep or cancel. Keep the subscription only if the deployed frontend unlocks testing, sales, or a second build within the next month.
highhigh
انحراف التصميم ينتشر في كل المكونات المتولدةDesign drift spreads across every generated component
راجع أول مكونات P1 قبل إنشاء الشاشات. أبقِ ملف docs/drift-log.md مفتوحًا واجعل كل طلب إصلاح يستند إلى design.md فقط.Audit the first P1 components before generating screens. Keep docs/drift-log.md open and force every repair prompt to reference design.md only.
mediummedium
نفاد رصيد Stitch قبل اكتمال التصميم الحقيقيStitch credits are exhausted before the real design is ready
اكتب Real App Brief وDesign Gap List قبل التكرار المكثف. استخدم إعادة التوليد لإغلاق فجوات مسماة، لا للبحث عن ذوق بصري عشوائي.Write Real App Brief and Design Gap List before heavy iteration. Use regeneration only to close named gaps, not to search for taste.
lowlow
تعقيد توثيق MCP يوقف المسارMCP authentication friction blocks the workflow
تعامل مع MCP كخيار اختياري. وثّق بديل DESIGN.md اليدوي أولًا، واترك إعداد MCP بعد محاولة مركزة واحدة إذا عطل التوثيق التقدم.Treat MCP as optional. Document the manual DESIGN.md fallback first, and abandon MCP setup after one focused attempt if authentication blocks progress.
highhigh
تصدير DESIGN.md قبل نضج التصميمDESIGN.md is exported before the design is mature
لا تُصدّر إلا بعد وجود كل شاشة من Real App Brief ووضع علامة done على كل بند في Design Gap List. إذا تغيّر التصميم لاحقًا، أعد التصدير وشغّل المراجعة مرة أخرى.Export only after every screen from Real App Brief exists and every Design Gap List item is marked done. If the design changes later, re-export and rerun the audit.

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

👤
المؤسسFounder
المنتج - يكتب الموجز ويقود التصميم والكود والمراجعةproducer
👤
شريك المساءلةAccountability Partner
شريك المساءلة - يراجع الإثباتات ويمنع التهربaccountable
👤
أول مستخدم أو مختبر حقيقيFirst Real User or Tester
المختبر - يفتح الواجهة ويقول ما فهمه بصدقtester
👤
زميل تقني للمراجعةTechnical Peer Reviewer
المراجع التقني - يفحص جودة الكود قبل عرضه بجديةreviewer

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

خلفيتك التقنية إيه؟What's your technical background?
مش بكتب كود - بشتغل بأدوات no-codeNo coding experience - I use no-code toolsعندي أساسيات HTML/CSSI know some HTML/CSS basicsأنا developer وعايز أسرّعI'm a developer - I want to move faster
بتبني إيه؟What are you building?
landing page أو موقع تسويقيLanding page or marketing sitedashboard لـ SaaS أو web appSaaS app dashboard or web appportfolio أو موقع شخصيPortfolio or personal site
هتنشر فين؟Where will you deploy?
Vercel (الموصى به - مجاني)Vercel (recommended - free tier)GitHub Pages (مجاني، static بس)GitHub Pages (free, static only)محلي بس دلوقتيLocal only for now - just want to build

اقرأ أكتر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 خلال 21 يوم Build a Real App Frontend with Stitch and Claude Code in 21 Days

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

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