1~
2**البرمجة بالإحساس (Vibecoding)** هي نموذج جديد لتطوير البرمجيات حيث يوجّه المبرمج وكيل الذكاء الاصطناعي من خلال تعليمات باللغة الطبيعية، تاركًا للذكاء الاصطناعي كتابة الكود الفعلي. صاغ هذا المصطلح أندريه كارباثي (أحد مؤسسي OpenAI والمدير السابق للذكاء الاصطناعي في تسلا) في تغريدة شهيرة في فبراير 2025: _"هناك نوع جديد من البرمجة أسميه البرمجة بالإحساس، حيث تستسلم تمامًا للإحساس، وتتقبل النمو الأسّي، وتنسى أن الكود موجود أصلاً."_
3~
4في هذه المقالة، سنرى كيفية بناء عرض توضيحي كامل وعامل باستخدام **Claude Code** كوكيل ذكاء اصطناعي، و**Supabase** كخلفية (قاعدة بيانات، مصادقة، واجهة برمجة تطبيقات)، و**Vercel** للنشر  -  وكل ذلك باستخدام **الخطط المجانية** حصريًا لهذه الخدمات.
5~
6## 1. ما هي البرمجة بالإحساس ولماذا هي ثورية
7~
8تمثل البرمجة بالإحساس تحولًا جوهريًا في نموذج تطوير البرمجيات. بدلاً من كتابة الكود سطرًا بسطر، يقوم المطور بـ:
9~
101. **وصف** ما يريده باللغة الطبيعية.
112. **وكيل الذكاء الاصطناعي** يولّد الكود الكامل.
123. **المطور** يراجع ويختبر ويكرر.
13~
14### لماذا تنجح
15~
16- **السرعة**: مشروع كان سيستغرق أيامًا يمكن بناؤه في ساعات.
17- **سهولة الوصول**: حتى المطورون غير الخبراء يمكنهم بناء منتجات عاملة.
18- **التكرار السريع**: يمكنك اختبار الأفكار والتحول بشكل أسرع بكثير.
19- **التركيز على المنتج**: تركز على _ماذا_ بدلاً من _كيف_.
20~
21```mermaid
22flowchart LR
23    A[الفكرة] --> B[تعليمات باللغة الطبيعية]
24    B --> C[Claude Code يولّد الكود]
25    C --> D[المراجعة والاختبار]
26    D --> E[التكرار]
27    E --> B
28    D --> F[النشر على Vercel]
29```
30~
31### متى تستخدم البرمجة بالإحساس
32~
33البرمجة بالإحساس مثالية لـ:
34~
35- **العروض التوضيحية وMVP**: بناء نموذج أولي سريعًا للتحقق من فكرة.
36- **الهاكاثونات**: إنشاء منتج عامل في ساعات قليلة فقط.
37- **المشاريع الجانبية**: استكشاف تقنيات جديدة دون استثمار أسابيع.
38- **إثبات المفهوم**: إثبات الجدوى التقنية لأصحاب المصلحة أو المستثمرين.
39~
40> **تحذير:** البرمجة بالإحساس ممتازة للعروض التوضيحية والنماذج الأولية. بالنسبة لتطبيقات الإنتاج ذات متطلبات الأمان والتوسع العالية، لا تزال المراجعة الشاملة للكود المُولَّد ضرورية.
41~
42## 2. حزمة التقنيات: Claude Code + Supabase + Vercel
43~
44### Claude Code
45~
46Claude Code هو وكيل البرمجة بالذكاء الاصطناعي من Anthropic. يعمل مباشرة في الطرفية ويمكنه:
47~
48- قراءة وفهم قاعدة الكود بالكامل.
49- إنشاء وتعديل وحذف الملفات.
50- تنفيذ أوامر الطرفية.
51- التفاعل مع واجهات برمجة التطبيقات والخدمات الخارجية.
52- إدارة التحكم بالإصدارات باستخدام Git.
53- التكرار ذاتيًا على الأخطاء والمشاكل.
54~
55```bash
56# Install Claude Code
57npm install -g @anthropic-ai/claude-code
58~
59# Start in a project directory
60cd my-project
61claude
62```
63~
64### Supabase (الخطة المجانية)
65~
66Supabase هو بديل مفتوح المصدر لـ Firebase يقدم:
67~
68- **قاعدة بيانات PostgreSQL**: قاعدة بيانات علائقية كاملة.
69- **المصادقة**: تسجيل الدخول بالبريد الإلكتروني أو Google أو GitHub وغيرها.
70- **واجهات REST وRealtime**: تُنشأ تلقائيًا من مخططك.
71- **التخزين**: للملفات والصور.
72- **دوال الحافة**: دوال بدون خادم.
73~
74الخطة المجانية تشمل:
75~
76| المورد | الحد المجاني |
77|----------|-----------|
78| قاعدة البيانات | 500 ميجابايت |
79| التخزين | 1 جيجابايت |
80| عرض النطاق | 5 جيجابايت |
81| استدعاءات دوال الحافة | 500 ألف/شهر |
82| المستخدمين المصادق عليهم | غير محدود |
83| المشاريع | مشروعان نشطان |
84~
85### Vercel (الخطة المجانية)
86~
87Vercel هي منصة النشر المثالية لتطبيقات Next.js:
88~
89- **النشر التلقائي** من GitHub.
90- **نشر المعاينة** لكل فرع وطلب سحب.
91- **شبكة CDN عالمية** لأداء مثالي.
92- **دوال بدون خادم** مضمّنة.
93- **تحليلات أساسية** مجانية.
94~
95الخطة المجانية تشمل:
96~
97| المورد | الحد المجاني |
98|----------|-----------|
99| عرض النطاق | 100 جيجابايت/شهر |
100| تنفيذ الدوال بدون خادم | 100 جيجابايت-ساعة/شهر |
101| عمليات البناء | 6,000 دقيقة/شهر |
102| المشاريع | غير محدود |
103| عمليات النشر | غير محدود |
104~
105## 3. الإعداد الأولي: تحضير البيئة
106~
107### المتطلبات الأساسية
108~
109قبل البدء، تأكد من أن لديك:
110~
111- **Node.js 18+** مثبت.
112- **Git** مُعَد.
113- حساب **GitHub**.
114- حساب **Supabase** (مجاني على [supabase.com](https://supabase.com)).
115- حساب **Vercel** (مجاني على [vercel.com](https://vercel.com)).
116- **Claude Code** مثبت (`npm install -g @anthropic-ai/claude-code`).
117~
118### الخطوة 1: إنشاء المشروع
119~
120افتح الطرفية وابدأ Claude Code:
121~
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126~
127الآن يمكنك البدء بإعطاء Claude Code تعليمات باللغة الطبيعية:
128~
129```
130You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
131and shadcn/ui. Also initialize a Git repository.
132```
133~
134سيقوم Claude Code بالتنفيذ تلقائيًا:
135~
136```bash
137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
138npx shadcn@latest init
139git init && git add . && git commit -m "Initial commit"
140```
141~
142### الخطوة 2: إعداد Supabase
143~
1441. اذهب إلى [supabase.com](https://supabase.com) وأنشئ مشروعًا جديدًا.
1452. دوّن **عنوان URL للمشروع** و**مفتاح anon** من الإعدادات > API.
1463. عد إلى الطرفية مع Claude Code:
147~
148```
149You: Add Supabase to the project. Create a .env.local file with the variables
150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
151Supabase client with SSR support for Next.js App Router.
152```
153~
154سيقوم Claude Code بإنشاء الإعداد الكامل:
155~
156```typescript
157// src/lib/supabase/client.ts
158import { createBrowserClient } from '@supabase/ssr';
159~
160export function createClient() {
161  return createBrowserClient(
162    process.env.NEXT_PUBLIC_SUPABASE_URL!,
163    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
164  );
165}
166```
167~
168```typescript
169// src/lib/supabase/server.ts
170import { createServerClient } from '@supabase/ssr';
171import { cookies } from 'next/headers';
172~
173export async function createClient() {
174  const cookieStore = await cookies();
175~
176  return createServerClient(
177    process.env.NEXT_PUBLIC_SUPABASE_URL!,
178    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
179    {
180      cookies: {
181        getAll() {
182          return cookieStore.getAll();
183        },
184        setAll(cookiesToSet) {
185          cookiesToSet.forEach(({ name, value, options }) =>
186            cookieStore.set(name, value, options)
187          );
188        },
189      },
190    }
191  );
192}
193```
194~
195## 4. بناء العرض التوضيحي: تطبيق إدارة المهام
196~
197لنبنِ عرضًا توضيحيًا عمليًا: **تطبيق لإدارة المهام** مع مصادقة وعمليات CRUD كاملة وواجهة حديثة.
198~
199### تعريف مخطط قاعدة البيانات
200~
201أعطِ Claude Code تعليمات لإنشاء المخطط:
202~
203```
204You: Create a SQL migration for Supabase with the following tables:
205~
2061. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
207   created_at
2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
209   to profiles), created_at
2103. tasks: id (uuid), title (text), description (text), status (enum:
211   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
212   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
213   created_at, updated_at
214~
215Enable Row Level Security on all tables and create appropriate policies.
216```
217~
218سيولّد Claude Code عملية ترحيل كاملة:
219~
220```sql
221-- Create enum types
222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
224~
225-- Profiles table
226CREATE TABLE profiles (
227  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
228  username TEXT UNIQUE,
229  avatar_url TEXT,
230  created_at TIMESTAMPTZ DEFAULT NOW()
231);
232~
233-- Projects table
234CREATE TABLE projects (
235  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
236  name TEXT NOT NULL,
237  description TEXT,
238  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
239  created_at TIMESTAMPTZ DEFAULT NOW()
240);
241~
242-- Tasks table
243CREATE TABLE tasks (
244  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
245  title TEXT NOT NULL,
246  description TEXT,
247  status task_status DEFAULT 'todo',
248  priority task_priority DEFAULT 'medium',
249  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
250  assigned_to UUID REFERENCES profiles(id),
251  due_date TIMESTAMPTZ,
252  created_at TIMESTAMPTZ DEFAULT NOW(),
253  updated_at TIMESTAMPTZ DEFAULT NOW()
254);
255~
256-- Enable RLS
257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
260~
261-- Profiles policies
262CREATE POLICY "Users can view own profile"
263  ON profiles FOR SELECT USING (auth.uid() = id);
264CREATE POLICY "Users can update own profile"
265  ON profiles FOR UPDATE USING (auth.uid() = id);
266~
267-- Projects policies
268CREATE POLICY "Users can view own projects"
269  ON projects FOR SELECT USING (auth.uid() = owner_id);
270CREATE POLICY "Users can create projects"
271  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
272CREATE POLICY "Users can update own projects"
273  ON projects FOR UPDATE USING (auth.uid() = owner_id);
274CREATE POLICY "Users can delete own projects"
275  ON projects FOR DELETE USING (auth.uid() = owner_id);
276~
277-- Tasks policies
278CREATE POLICY "Users can view tasks in their projects"
279  ON tasks FOR SELECT USING (
280    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
281  );
282CREATE POLICY "Users can create tasks in their projects"
283  ON tasks FOR INSERT WITH CHECK (
284    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
285  );
286CREATE POLICY "Users can update tasks in their projects"
287  ON tasks FOR UPDATE USING (
288    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
289  );
290CREATE POLICY "Users can delete tasks in their projects"
291  ON tasks FOR DELETE USING (
292    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
293  );
294```
295~
296يمكنك تشغيل عملية الترحيل هذه مباشرة من لوحة تحكم Supabase (محرر SQL) أو عبر واجهة سطر الأوامر.
297~
298### توليد أنواع TypeScript
299~
300```
301You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts
302```
303~
304```bash
305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
306```
307~
308### بناء واجهة المستخدم
309~
310الآن يأتي الجزء الأقوى من البرمجة بالإحساس. أعطِ Claude Code تعليمات عالية المستوى:
311~
312```
313You: Create a dashboard page for the task management app with:
314~
3151. Sidebar with navigation between projects
3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3173. Modal to create/edit tasks
3184. Header with user avatar and logout
3195. Modern design with shadcn/ui and Tailwind
320~
321Use data from Supabase with React Server Components where possible
322and Client Components only where interactivity is needed.
323```
324~
325سيبني Claude Code الواجهة بالكامل، مكونًا تلو الآخر.
326~
327### إضافة المصادقة
328~
329```
330You: Add a complete authentication system with:
331~
3321. Login page with email/password and GitHub login
3332. Registration page
3343. Middleware to protect authenticated routes
3354. Automatic redirect for unauthenticated users
3365. Automatic profile creation after registration
337```
338~
339سيقوم Claude Code بإعداد وسيط Next.js وصفحات المصادقة:
340~
341```typescript
342// src/middleware.ts
343import { createServerClient } from '@supabase/ssr';
344import { NextResponse, type NextRequest } from 'next/server';
345~
346export async function middleware(request: NextRequest) {
347  let supabaseResponse = NextResponse.next({ request });
348~
349  const supabase = createServerClient(
350    process.env.NEXT_PUBLIC_SUPABASE_URL!,
351    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
352    {
353      cookies: {
354        getAll() {
355          return request.cookies.getAll();
356        },
357        setAll(cookiesToSet) {
358          cookiesToSet.forEach(({ name, value }) =>
359            request.cookies.set(name, value)
360          );
361          supabaseResponse = NextResponse.next({ request });
362          cookiesToSet.forEach(({ name, value, options }) =>
363            supabaseResponse.cookies.set(name, value, options)
364          );
365        },
366      },
367    }
368  );
369~
370  const { data: { user } } = await supabase.auth.getUser();
371~
372  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
373    const url = request.nextUrl.clone();
374    url.pathname = '/auth/login';
375    return NextResponse.redirect(url);
376  }
377~
378  return supabaseResponse;
379}
380~
381export const config = {
382  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
383};
384```
385~
386## 5. أنماط البرمجة بالإحساس المتقدمة
387~
388### التوجيه التكراري
389~
390سر البرمجة بالإحساس الفعّالة هو **التكرار**. لا تحاول وصف كل شيء في توجيه واحد. تقدم خطوة بخطوة:
391~
392```
393Step 1: "Create the base layout with header and sidebar"
394Step 2: "Add the project list in the sidebar with a button to create new ones"
395Step 3: "Create the Kanban view in the main area"
396Step 4: "Add drag & drop between columns"
397Step 5: "Implement the modal to create new tasks"
398Step 6: "Add toast notifications for user feedback"
399```
400~
401> **نصيحة:** كلما كان التوجيه أكثر تحديدًا وسياقًا، كانت النتيجة أفضل. يمتلك Claude Code وصولاً إلى قاعدة الكود بالكامل، لذا يمكنه دمج الميزات الجديدة بشكل متناسق.
402~
403### معالجة الأخطاء
404~
405عندما لا يعمل شيء ما (وسيحدث ذلك)، يمكنك ببساطة أن تقول:
406~
407```
408You: I'm getting this error in the console: "TypeError: Cannot read property
409'map' of undefined" in the TaskList component. Fix it.
410```
411~
412سيحلل Claude Code الكود ويحدد المشكلة ويصلحها.
413~
414### إعادة الهيكلة بالذكاء الاصطناعي
415~
416```
417You: The Dashboard component has become too large. Split it into smaller,
418reusable components while maintaining the same functionality.
419```
420~
421### الاختبار
422~
423```
424You: Add tests with Vitest for utility functions and Playwright tests for
425the authentication and task creation flow.
426```
427~
428## 6. النشر على Vercel: من الكود إلى العالم
429~
430### الخطوة 1: الرفع إلى GitHub
431~
432```
433You: Create an appropriate .gitignore, commit everything, and push to a new
434GitHub repository called "my-demo-app".
435```
436~
437```bash
438git add .
439git commit -m "feat: complete task management demo"
440gh repo create my-demo-app --public --push --source=.
441```
442~
443### الخطوة 2: ربط Vercel
444~
4451. اذهب إلى [vercel.com](https://vercel.com) وانقر على "إضافة مشروع جديد".
4462. استورد مستودع GitHub الذي أنشأته للتو.
4473. أضف متغيرات البيئة:
448   - `NEXT_PUBLIC_SUPABASE_URL`
449   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4504. انقر على "نشر".
451~
452```mermaid
453flowchart LR
454    A[رفع إلى GitHub] --> B[بناء Vercel]
455    B --> C[نشر تلقائي]
456    C --> D[رابط عام]
457    D --> E[شبكة CDN عالمية]
458```
459~
460### الخطوة 3: إعداد نطاق مخصص (اختياري)
461~
462يوفر Vercel رابطًا مجانيًا مثل `my-demo-app.vercel.app`. لنطاق مخصص:
463~
464```
465You: Add the configuration for a custom domain in vercel.json
466```
467~
468### نشر المعاينة
469~
470في كل مرة تفتح فيها طلب سحب (Pull Request) على GitHub، سيقوم Vercel تلقائيًا بإنشاء **نشر معاينة** برابط فريد. مثالي لعرض التغييرات قبل الدمج.
471~
472## 7. تحسينات لعرضك التوضيحي
473~
474### الأداء
475~
476```
477You: Optimize the app's performance:
4781. Add loading states with Suspense and skeletons
4792. Implement caching with Next.js unstable_cache
4803. Optimize images with next/image
4814. Add SEO metadata for each page
482```
483~
484### الوقت الفعلي مع Supabase
485~
486ميزة تثير الإعجاب دائمًا في العروض التوضيحية هي **الوقت الفعلي**:
487~
488```
489You: Add realtime synchronization for tasks using Supabase Realtime.
490When a user updates a task, all other users should see the change
491in real time without refreshing.
492```
493~
494```typescript
495'use client';
496~
497import { useEffect, useState } from 'react';
498import { createClient } from '@/lib/supabase/client';
499import type { Task } from '@/types/database';
500~
501export function useRealtimeTasks(projectId: string) {
502  const [tasks, setTasks] = useState<Task[]>([]);
503  const supabase = createClient();
504~
505  useEffect(() => {
506    const channel = supabase
507      .channel('tasks-changes')
508      .on(
509        'postgres_changes',
510        {
511          event: '*',
512          schema: 'public',
513          table: 'tasks',
514          filter: `project_id=eq.${projectId}`,
515        },
516        (payload) => {
517          if (payload.eventType === 'INSERT') {
518            setTasks((prev) => [...prev, payload.new as Task]);
519          } else if (payload.eventType === 'UPDATE') {
520            setTasks((prev) =>
521              prev.map((t) =>
522                t.id === payload.new.id ? (payload.new as Task) : t
523              )
524            );
525          } else if (payload.eventType === 'DELETE') {
526            setTasks((prev) =>
527              prev.filter((t) => t.id !== payload.old.id)
528            );
529          }
530        }
531      )
532      .subscribe();
533~
534    return () => {
535      supabase.removeChannel(channel);
536    };
537  }, [projectId, supabase]);
538~
539  return tasks;
540}
541```
542~
543### الوضع الداكن
544~
545```
546You: Add dark mode support with a toggle in the header.
547Use Tailwind dark classes and save the preference in localStorage.
548```
549~
550## 8. أفضل الممارسات للبرمجة بالإحساس الفعّالة
551~
552### 1. كن محددًا في توجيهاتك
553~
554```
555❌ "Make a nice page"
556✅ "Create a landing page with a hero section with a purple-blue gradient,
557   a features section with 3 cards with icons, and an orange CTA button"
558```
559~
560### 2. وفّر السياق
561~
562```
563❌ "Add authentication"
564✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
565   Router with TypeScript. I want email/password login and OAuth with GitHub.
566   Use the SSR pattern with @supabase/ssr"
567```
568~
569### 3. كرر بخطوات صغيرة
570~
571لا تحاول بناء كل شيء في توجيه واحد. تقدم تدريجيًا:
572~
5731. التخطيط الأساسي
5742. ميزة واحدة في كل مرة
5753. التنسيق والتلميع
5764. معالجة الأخطاء
5775. الاختبار
578~
579### 4. راجع الكود المُولَّد
580~
581البرمجة بالإحساس لا تعني عدم قراءة الكود. راجع دائمًا:
582~
583- **الأمان**: سياسات RLS، التحقق من المدخلات، تنظيف البيانات.
584- **الأداء**: استعلامات N+1، مكونات من جانب العميل بلا داعٍ.
585- **أفضل الممارسات**: هيكل المشروع، اصطلاحات التسمية.
586~
587### 5. استخدم Git بشكل استراتيجي
588~
589```
590You: Commit the changes with a descriptive message after each completed feature.
591```
592~
593هذا يتيح لك التراجع إذا حدث خطأ ما.
594~
595## 9. التكاليف: هل هي مجانية حقًا؟
596~
597إليك تفصيل التكلفة لكل خدمة:
598~
599| الخدمة | الخطة المجانية | متى تدفع |
600|---------|-----------|-------------|
601| **Claude Code** | يتطلب خطة Anthropic (تبدأ من 20 دولار/شهر) أو مفتاح API | فورًا، لكن القيمة هائلة |
602| **Supabase** | خطة مجانية سخية (مشروعان، 500 ميجابايت قاعدة بيانات) | تجاوز حدود الخطة المجانية |
603| **Vercel** | خطة مجانية للمشاريع الشخصية | للفرق أو الاستخدام التجاري |
604| **GitHub** | مجاني للمستودعات العامة والخاصة | ميزات المؤسسات |
605~
606> **ملاحظة:** يتطلب Claude Code اشتراكًا أو رصيد API، لكن العائد على الاستثمار من حيث سرعة التطوير غير عادي. لعرض توضيحي أو MVP، التكلفة الإجمالية في حدود 20 دولارًا.
607~
608### بدائل الذكاء الاصطناعي المجانية
609~
610إذا أردت الحفاظ على التكاليف عند الصفر المطلق، يمكنك استخدام:
611~
612- **Cursor** (خطة مجانية مع قيود).
613- **GitHub Copilot** (مجاني للطلاب والمصادر المفتوحة).
614- **Codeium/Windsurf** (خطة مجانية سخية).
615~
616## 10. من العرض التوضيحي إلى المنتج: الخطوات التالية
617~
618بمجرد أن يكون عرضك التوضيحي مباشرًا، إليك كيف تتقدم:
619~
620```mermaid
621flowchart TD
622    A[عرض توضيحي مباشر] --> B{ملاحظات المستخدمين}
623    B --> C[تكرار المنتج]
624    C --> D[ملاءمة المنتج للسوق]
625    D --> E[التوسع]
626    E --> F[خطة Supabase Pro]
627    E --> G[خطة Vercel Pro]
628    E --> H[نطاق مخصص]
629```
630~
6311. **اجمع الملاحظات**: شارك العرض التوضيحي مع المستخدمين المحتملين واجمع آراءهم.
6322. **كرر بسرعة**: استخدم البرمجة بالإحساس لتنفيذ التغييرات المطلوبة.
6333. **راقب المقاييس**: تحليلات Vercel ولوحة تحكم Supabase تمنحك بيانات أساسية.
6344. **توسع عند الحاجة**: قم بالترقية إلى الخطط المدفوعة فقط عندما تتحقق من الطلب.
635~
636~
637## الخاتمة
638~
639البرمجة بالإحساس مع Claude Code وSupabase وVercel تمثل مزيجًا قويًا لبناء العروض التوضيحية والنماذج الأولية في وقت قياسي. ما كان يستغرق أسابيع من التطوير يمكن إنجازه الآن في ساعات قليلة فقط، بمستوى جودة مرتفع بشكل مفاجئ.
640~
641المفتاح هو التعامل مع البرمجة بالإحساس بالعقلية الصحيحة: لا يتعلق الأمر بـ"عدم معرفة البرمجة" بل بـ**تعزيز قدراتك** بأدوات الذكاء الاصطناعي. كلما عرفت أكثر عن التقنيات الأساسية (React، SQL، المصادقة، النشر)، كنت أكثر فعالية في توجيه وكيل الذكاء الاصطناعي نحو النتيجة المطلوبة.
642~
643مستقبل تطوير البرمجيات هنا، وتكلفة البدء لم تكن أقل من أي وقت مضى. أنشئ عرضك التوضيحي، تحقق منه مع مستخدمين حقيقيين، وابنِ المنتج العظيم التالي.
644~
645> **قائمة التحقق لعرضك التوضيحي الأول:**
646>
647> - [x] Claude Code مثبت ومُعَد
648> - [x] مشروع Supabase مُنشأ مع مخطط قاعدة البيانات
649> - [x] مشروع Next.js مُهيّأ مع shadcn/ui
650> - [x] المصادقة مُعَدة
651> - [x] عمليات CRUD الكاملة مُنفذة
652> - [x] واجهة مستخدم حديثة ومتجاوبة
653> - [x] منشور على Vercel
654> - [x] رابط قابل للمشاركة جاهز للملاحظات
655~