توسعه Frontend قبلاً یک هنر و صنعت خود بود – به ساعات بی شماری در تنظیم حاشیه ها ، شبکه های CSS کشتی ، ترجمه طرح های FIGMA به اجزای کامل پیکسل و دوخت API های بی پایان. هر پروژه جدید مانند شروع از ابتدا احساس می شود.
اما همه چیز سریعتر از آنچه بیشتر تحقق می یابد تغییر می کند.
با ظهور ویرایشگرهای کد AI مانند مکان نما و Windsurf ، همراه با قدرت پروتکل زمینه مدل (MCP) ، گردش کار Frontend به یک دوره جدید منتقل می شود ، جایی که می توان به جای دستکاری ، طراحی ، داده و منطق را مجدداً ارکستر کرد.
TL ؛ DR: من یک داشبورد پاداش کافه در زمان واقعی را با استفاده از سرور MCP مجازی Windsurf ، Figma ، Supabase و LANGDB ساختم. بدون کد نوشتن به صورت دستی ، فقط برنامه نویسی پرنعمت. پروژه زنده را بررسی کنید.
مشکل جلوی مدرسه قدیمی
- Mockups Driftبشر آنچه طراحان به طور دقیق در فیگما ایجاد می کنند به ندرت از سفر به تولید دست نخورده زنده می ماند.
- دیگ بخار جهنمبشر ساختن هر فرم ، نمودار و داشبورد به صورت دستی از طرح ها زمان بسیار زیادی را هدر می دهد.
- پیچیدگی APIبشر سیم کشی ده ها نقطه پایانی ، دست زدن به SDK های مختلف ، نشانه ها و داده ها باعث می شود که جلوی آن به طور غیر ضروری نفخ می کند.
- زمان توسعه دهنده گمشدهبشر به جای حل مشکلات واقعی کاربر ، بیشتر کارها در حال بازآفرینی چیدمان ها و تماس های API لوله کشی است.
توسعه دهندگان ناکارآمد نبودند. آنها در حال انجام کارهای خسته کننده بودند زیرا هیچ سیستم بهتری وجود نداشت.
تغییر: FIGMA MCP + SUPABASE MCP
اکنون ، ویراستاران AI می توانند ساختارهای طراحی در زمان واقعی و طرحواره های پایگاه داده را مستقیماً در محیط برنامه نویسی شما بخوانند.
- FIGMA MCP به ویرایشگر شما اجازه می دهد تا نشانه های طراحی زنده ، طرح بندی ، تایپوگرافی و ساختار مؤلفه را از FIGMA بکشید.
- supabase MCP امکان دسترسی ساختار یافته به پایگاه داده شما را فراهم می کند ، به ویرایشگر کمک می کند تا مدل های داده را درک کند ، نمایش داده های صحیح SQL را بنویسد و API ها را تولید کند.
ویرایشگر به جای اینکه حدس بزند که چگونه UI باید به صورت دستی نگاه کند یا API ها را به صورت دستی انجام دهد ، به یک ارکستر تبدیل می شود:
- این ساختار طراحی در نظر گرفته شده را می خواند.
- این طرح پایگاه داده را درک می کند.
- این کد جلوی راست ، نمایش داده های داده و اتصالات را ایجاد می کند.
Frontend از تفسیر متوقف می شود. می شود اعدامبشر
اگر می خواهید یک شیرجه عمیق تر به نحوه تغییر شکل MCPS در جریان کار برنامه نویسی ، تجزیه قبلی ما را در اینجا بررسی کنید: گردش کار رمزگذاری باهوش تر با MCP
مثال در دنیای واقعی: ساخت داشبورد پاداش کافه
در پروژه اخیر ما ، ما تصمیم گرفتیم که یک داشبورد تحلیلی در زمان واقعی را برای یک برنامه پاداش کافه داستانی بسازیم.
با استفاده از Windsurf به عنوان ویرایشگر کد و اتصال به FIGMA MCP و SUPBASE MCP ، گردش کار ساده بود:
- طرح داشبورد زنده را از پرونده FIGMA بکشید.
- پیشنهادات مشتری ، جمعیت شناسی و داده های رویدادها را از SUPABASE پرس و جو کنید.
- داده های واکشی را مستقیماً در ساختار طراحی داشبورد زنده نقشه برداری کنید.
نمای کلی پشته فنی
سریع استفاده شده:
مثال ویرایشگر سریع:
You are working in a Next.js + TypeScript + Tailwind project.
**Goal:**
Build a frontend analytics dashboard that showcases key metrics from the Café Rewards dataset. All the data is already stored in a Supabase (Postgres) database and accessible via a Supabase MCP endpoint.
**You have:**
- A running Next.js app (basic setup complete)
- TailwindCSS already configured
- Access to Supabase via MCP (SQL execution through an API)
- A Figma file that serves as the design reference (read-only access via Figma MCP): Figma Link
- Optionally, context7 for live documentation
**Database Tables:**
- `offers`: details of promotional offers (bogo, discount, informational)
- `customers`: demographics like gender, income, signup date
- `events`: logs of offer received/viewed/completed + transactions
**What you want to build:**
A dashboard that shows these metrics:
1. **KPIs**: overall completion rate, completion by offer type
2. **Trends**: weekly avg transactions, weekly total transactions
3. **Demographics**: income range vs avg. spending
4. **Summaries**: total transactions
**Your job:**
- Use the Supabase MCP to run SQL queries and create api endpoints for metrics
- Render all metrics as cards/charts using React + Tailwind
- Use Figma MCP to inspect layout tokens or design spacing if needed
- Do not attempt to write to Figma—read-only reference only
- Return a complete, functional dashboard at `/` when someone runs `npm run dev`
Only fetch, transform, and render data visually using components—this is a read-only analytics frontend based on live database values.
این فوری واحد به ویرایشگر AI شما می گوید که داده ها را به طور خودکار واکشی کرده و طرح داشبورد را به صورت خودکار سیم کشی کنید.
هیچ تفریحی دستی. هیچ یک از یک ظاهر طراحی شده آزمایشی و خطا. بدون سیم کشی API تکراری.
نسخه ی نمایشی زنده: از داشبورد پاداش کافه دیدن کنید
چرا این تغییر برای همیشه تغییر می کند
ویرایشگرهای کد دارای هوش مصنوعی مانند مکان نما و Windsurf برای ماندن در اینجا هستند. MCP ها مرحله منطقی بعدی هستند – به این ویرایشگران دسترسی به منابع واقعی حقیقت: پرونده طراحی و پایگاه داده.
مزایا واضح است:
- ادغام زنده طرح ها و مدل های داده به صورت بومی بدست آمده و درک می شوند.
- دیگ دستی صفر. فقط روی منطق کسب و کار و پیشرفت های UX تمرکز کنید.
- وفاداری مداوم UIS دقیقاً آنچه را که طراحان ایجاد کرده اند مطابقت می دهد.
- سرعت توسعه دهنده. زمان کمتری را صرف سیم کشی چیزها و ویژگی های حمل و نقل بیشتر کنید.
- Frontend مرده نیست. این در حال تحول است-گردش کار خود را به خودی خود.
افکار پایانی
اگر هنوز هم جزئیات UI را بر اساس مدل های استاتیک و API به صورت دستی در کنار هم قرار می دهید ، در حال حاضر یک قدم عقب مانده هستید.
گردش کار کدگذاری هوش مصنوعی آینده است.
در این دنیای جدید ، ویرایشگر کد شما:
- طرح های FIGMA را به عنوان منبع حقیقت طرح می خواند.
- طرح های پایگاه داده را برای تولید جریان صحیح داده ها درک می کند.
- مؤلفه ها و API ها را به طور طبیعی و بدون لوله کشی دستی بی پایان می سازد.
نسل بعدی Frontend در اینجا است. این سریعتر ، باهوش تر ، و کمتر در مورد کد دست ساز است – و بیشتر در مورد داده های ارکستر ، طراحی و تجربه کاربر با هم.
کنجکاو برای یادگیری نحوه استفاده از MCP مجازی LANGDB؟ برای قسمت 2 با ما همراه باشید!
