Framer AI چیست؟ آموزش ساخت سایت با هوش مصنوعی Framer

ساخت یک وب‌سایت حرفه‌ای معمولاً شامل طراحی رابط، پیاده‌سازی واکنش‌گرا، تولید محتوا، تنظیم سئو، اتصال دامنه و انتشار روی زیرساخت میزبانی است. Framer AI تلاش می‌کند بخش بزرگی از این مسیر را با ترکیب هوش مصنوعی و یک ویرایشگر بصری ساده‌تر کند.

در Framer می‌توانید سایت یا صفحه موردنظر خود را با زبان طبیعی توضیح دهید. عامل هوش مصنوعی Framer بخش‌ها، متن‌ها، تصاویر و چیدمان اولیه را ایجاد می‌کند و نتیجه مستقیماً روی بوم طراحی قابل‌ویرایش است. پس از آن می‌توانید رنگ، فونت، فاصله، مؤلفه‌ها، نسخه موبایل و محتوای سایت را تغییر دهید و پروژه را منتشر کنید.

در این آموزش علاوه بر بررسی کامل Framer AI، یک سایت فارسی برای خدمات تولید محتوا می‌سازیم و سپس یک ابزار واقعی مبتنی بر API هوش مصنوعی درواره به آن اضافه می‌کنیم.

فهرست مطالب

• Framer AI چیست؟
• Framer چه تفاوتی با ابزارهای طراحی معمولی دارد؟
• عامل هوش مصنوعی Framer چگونه کار می‌کند؟
• مهم‌ترین قابلیت‌های Framer
• Framer برای چه سایت‌هایی مناسب است؟
• محدودیت‌های Framer
• مقایسه Framer با v0، Lovable و Webflow
• آموزش ساخت سایت فارسی با Framer AI
• نوشتن پرامپت مناسب
• تنظیم طراحی راست‌چین
• افزودن ابزار هوش مصنوعی با API درواره
• ساخت سرویس سمت سرور
• ساخت Code Component در Framer
• تنظیم سئو و دامنه
• انتشار و آزمایش سایت
• هزینه استفاده از Framer
• پرسش‌های متداول

Framer AI چیست؟

Framer AI مجموعه‌ای از قابلیت‌های هوش مصنوعی در پلتفرم Framer است که برای ایجاد، طراحی، ویرایش و مدیریت وب‌سایت استفاده می‌شود.

کاربر می‌تواند یک سایت کامل، صفحه فرود یا بخش مشخصی از یک صفحه را با پرامپت ایجاد کند. نتیجه تولیدشده یک تصویر ثابت نیست؛ بلکه از لایه‌ها و مؤلفه‌های قابل‌ویرایش تشکیل شده است. بنابراین می‌توانید پس از تولید اولیه، چیدمان، تایپوگرافی، رنگ‌ها، تصاویر، نقاط شکست واکنش‌گرا و متن‌ها را به‌صورت بصری اصلاح کنید.

نسخه فعلی Framer عامل‌های هوش مصنوعی را مستقیماً وارد محیط طراحی کرده است. این عامل‌ها می‌توانند در ایجاد و اصلاح صفحه‌ها، مدیریت محتوای CMS و انجام تغییرات ساختاری کمک کنند. بر اساس صفحه رسمی Framer AI، هوش مصنوعی در این پلتفرم در کنار ویرایشگر بصری، CMS، امکانات سئو، میزبانی و انتشار ارائه می‌شود.

Framer چگونه کار می‌کند؟

گردش کار اصلی در Framer از چند مرحله تشکیل می‌شود.

۱. توصیف سایت

ابتدا نوع کسب‌وکار، مخاطب، ساختار صفحه و سبک طراحی را توضیح می‌دهید. برای مثال:

یک وب‌سایت فارسی برای یک آژانس تولید محتوا بساز.
طراحی مدرن، مینیمال و کاملاً راست‌چین باشد.
صفحه اصلی شامل معرفی خدمات، نمونه‌کارها، مراحل همکاری،
نظرات مشتریان، پرسش‌های متداول و فرم تماس باشد.

۲. تولید صفحه با هوش مصنوعی

عامل Framer توضیحات را به بخش‌های قابل‌ویرایش تبدیل می‌کند. ممکن است متن، تصاویر پیشنهادی، دکمه‌های فراخوان و ساختار اولیه صفحه نیز تولید شوند.

۳. اصلاح روی بوم طراحی

تمام عناصر روی بوم قابل‌انتخاب هستند. می‌توانید اندازه، موقعیت، فونت، رنگ، انیمیشن و رفتار واکنش‌گرای هر بخش را تغییر دهید.

۴. مدیریت محتوا

برای مطالب تکرارشونده مانند مقاله‌ها، پروژه‌ها، محصولات یا اعضای تیم می‌توان از CMS استفاده کرد. به‌جای طراحی جداگانه هر صفحه، یک قالب ایجاد می‌کنید و اطلاعات هر مورد را در مجموعه محتوایی قرار می‌دهید.

۵. انتشار سایت

با انتخاب گزینه Publish، پروژه روی زیردامنه Framer منتشر می‌شود. در طرح‌های پشتیبانی‌شده می‌توان دامنه اختصاصی را نیز متصل کرد.

مهم‌ترین قابلیت‌های Framer

ساخت سایت با توضیحات متنی

کاربر می‌تواند نوع سایت، اجزای صفحه و جهت طراحی را در قالب پرامپت بنویسد. این قابلیت برای شروع سریع پروژه و عبور از صفحه سفید مفید است.

ویرایش بصری کامل

برخلاف ابزارهایی که فقط کد تولید می‌کنند، Framer یک محیط بصری برای ویرایش نتیجه دارد. می‌توانید بدون دستکاری مستقیم کد:

• بخش‌ها را جابه‌جا کنید.
• عرض و ارتفاع عناصر را تغییر دهید.
• رنگ و تایپوگرافی را اصلاح کنید.
• تصاویر را جایگزین کنید.
• نسخه موبایل را تنظیم کنید.
• انیمیشن و افکت اضافه کنید.
• مؤلفه‌های تکرارشونده بسازید.

طراحی واکنش‌گرا

می‌توان رفتار سایت را برای نمایشگرهای مختلف کنترل کرد. بااین‌حال، خروجی هوش مصنوعی باید در حالت دسکتاپ، تبلت و موبایل جداگانه بررسی شود.

سیستم مدیریت محتوا

CMS فرامر برای ساخت وبلاگ، فهرست نمونه‌کارها، صفحات تیم، مطالعات موردی و سایر داده‌های ساختاریافته کاربرد دارد.

در پروژه‌های فارسی می‌توانید فیلدهایی مانند عنوان، نامک، تصویر شاخص، توضیح کوتاه، متن اصلی، دسته‌بندی و تاریخ انتشار تعریف کنید.

تولید و مدیریت محتوا با عامل هوش مصنوعی

عامل‌های Framer می‌توانند در ایجاد مجموعه‌ها، سامان‌دهی محتوا و اعمال تغییرات روی صفحات کمک کنند. بااین‌حال، اطلاعات تولیدشده باید پیش از انتشار از نظر دقت، لحن و هماهنگی با برند بررسی شوند.

ترجمه و محلی‌سازی

Framer از مدیریت زبان‌های مختلف پشتیبانی می‌کند. قابلیت Auto Translate می‌تواند تغییرات محتوا را در زبان‌های فعال ترجمه کند. طبق مستندات محلی‌سازی Framer، این قابلیت هم محتوای روی بوم و هم آیتم‌های CMS را پوشش می‌دهد.

برای سایت فارسی بهتر است ترجمه خودکار نقطه شروع در نظر گرفته شود و نتیجه نهایی توسط نویسنده فارسی‌زبان بازبینی شود.

ابزارهای سئو

Framer امکاناتی مانند موارد زیر را در اختیار مدیر سایت قرار می‌دهد:

• عنوان و توضیحات متا
• نشانی صفحات
• متن جایگزین تصاویر
• نشانی Canonical
• نقشه سایت
• فایل robots.txt
• تنظیم زبان سایت
• داده‌های ساختاریافته با Custom Code
• تغییر مسیر صفحات
• بهینه‌سازی عملکرد سایت

Framer برای هر سایت منتشرشده فایل robots.txt ایجاد می‌کند و امکان تنظیم Canonical نیز در اختیار کاربر قرار می‌دهد. جزئیات در راهنمای Canonical در Framer ارائه شده است.

Code Component

توسعه‌دهندگان می‌توانند با React مؤلفه اختصاصی ایجاد و آن را مانند سایر عناصر روی بوم Framer استفاده کنند. این قابلیت برای ساخت فرم‌های تعاملی، نمایش داده‌های خارجی و اتصال رابط سایت به یک سرویس سمت سرور کاربرد دارد.

بخش توسعه‌دهندگان Framer ابزارهایی مانند Code Component، Code Override، Plugin و Fetch را برای توسعه امکانات سفارشی معرفی می‌کند.

دریافت اطلاعات از API

قابلیت Fetch می‌تواند اطلاعات یک API عمومی را بدون کدنویسی دریافت و در لایه‌های سایت نمایش دهد. بااین‌حال، مستندات رسمی Framer هشدار می‌دهند که اطلاعات حساس در درخواست‌های سمت کاربر قرار نگیرند؛ زیرا ممکن است همراه کد جاوااسکریپت سایت قابل‌مشاهده باشند.

بنابراین کلید API درواره نباید مستقیماً در Fetch یا Code Component نوشته شود. برای این کار به یک سرویس سمت سرور نیاز داریم.

Framer برای چه سایت‌هایی مناسب است؟

Framer بیشتر برای پروژه‌هایی مناسب است که طراحی، محتوا و سرعت انتشار در آن‌ها اهمیت زیادی دارد:

• صفحه فرود محصول
• سایت شرکتی
• سایت معرفی استارتاپ
• پرتفولیوی شخصی
• سایت آژانس طراحی یا بازاریابی
• وبلاگ محتوایی
• سایت معرفی نرم‌افزار
• صفحه ثبت‌نام و جمع‌آوری سرنخ
• سایت رویداد
• صفحات کمپین تبلیغاتی

Framer می‌تواند برای ساخت رابط یک ابزار هوش مصنوعی نیز استفاده شود، اما منطق حساس، کلیدهای API، پردازش‌های طولانی و عملیات پایگاه داده بهتر است روی یک بک‌اند مستقل قرار بگیرند.

محدودیت‌های Framer چیست؟

تمرکز اصلی بر سایت‌های محتوایی و بازاریابی

Framer برای طراحی و انتشار سایت بسیار مناسب است، اما جایگزین کامل یک چهارچوب توسعه تمام‌پشته مانند Next.js نیست.

نیاز به بررسی نسخه موبایل

صفحه تولیدشده با هوش مصنوعی ممکن است در دسکتاپ مناسب باشد اما در موبایل به اصلاح فاصله، اندازه فونت یا ترتیب عناصر نیاز داشته باشد.

مناسب‌نبودن Fetch برای کلیدهای محرمانه

درخواست‌هایی که به کلید API نیاز دارند نباید مستقیماً از Fetch فرامر ارسال شوند. مستندات Fetch در Framer توصیه می‌کنند برای داده‌ها و اطلاعات حساس، یک بک‌اند اختصاصی در نظر گرفته شود.

هزینه اتصال دامنه و امکانات حرفه‌ای

طرح رایگان برای آزمایش مناسب است، اما اتصال دامنه اختصاصی و بعضی امکانات حرفه‌ای به طرح پولی نیاز دارند.

نیاز به بازبینی محتوای تولیدشده

متن‌های تولیدشده ممکن است عمومی، تکراری یا نامتناسب با بازار ایران باشند. لحن، ادعاها، قیمت‌ها و اطلاعات تجاری باید پیش از انتشار بررسی شوند.

مقایسه Framer با v0، Lovable و Webflow

اگر هدف اصلی شما ساخت سریع یک سایت بازاریابی با طراحی بصری حرفه‌ای است، Framer انتخاب مناسبی است. برای اپلیکیشن‌هایی با منطق پیچیده سمت سرور، v0 یا یک چهارچوب برنامه‌نویسی کامل می‌تواند کنترل بیشتری فراهم کند.

آموزش ساخت سایت فارسی با Framer AI

در پروژه این مقاله، یک سایت فارسی برای معرفی سرویس تولید محتوای هوشمند می‌سازیم. سایت علاوه بر بخش‌های معرفی، یک ابزار کوچک دارد که موضوع را از کاربر می‌گیرد و از طریق API درواره متن فارسی تولید می‌کند.

معماری پروژه به این صورت است:

• طراحی و صفحات عمومی در Framer
• فرم تعاملی در یک Code Component
• سرویس سمت سرور در یک پروژه جداگانه
• ذخیره کلید API فقط روی سرور
• ارتباط سرور با API درواره
• بازگرداندن نتیجه به مؤلفه Framer

مرحله اول: ایجاد پروژه

پس از ورود به Framer، یک پروژه جدید ایجاد کنید. می‌توانید از قالب آماده شروع کنید یا از عامل هوش مصنوعی بخواهید سایت را بسازد.

برای کنترل بهتر نتیجه، پیش از نوشتن پرامپت این موارد را مشخص کنید:

• نوع کسب‌وکار
• مخاطب هدف
• هدف اصلی صفحه
• بخش‌های ضروری
• لحن برند
• رنگ‌های اصلی
• سبک تصاویر
• فراخوان اصلی
• جهت راست‌چین
• نیازهای موبایل

مرحله دوم: نوشتن پرامپت اولیه

پرامپت پیشنهادی:

یک وب‌سایت فارسی و کاملاً راست‌چین برای یک سرویس تولید محتوای
مبتنی بر هوش مصنوعی طراحی کن.

مخاطبان سایت، فروشگاه‌های اینترنتی، تیم‌های بازاریابی و
کسب‌وکارهای کوچک ایرانی هستند.

صفحه اصلی شامل این بخش‌ها باشد:
- سربرگ ساده با لوگو، منو و دکمه شروع
- بخش اصلی با تیتر قدرتمند و یک تصویر انتزاعی
- معرفی کاربردهای سرویس
- مزیت‌های استفاده از محصول
- نمونه خروجی‌های تولیدشده
- مراحل استفاده
- نظرات مشتریان
- پرسش‌های متداول
- فراخوان نهایی
- پاورقی کامل

طراحی مدرن، مینیمال و حرفه‌ای باشد.
از پس‌زمینه روشن، رنگ اصلی بنفش و فضای سفید زیاد استفاده کن.
نسخه موبایل نیز کاملاً خوانا و منظم باشد.
متن‌های موقت را به زبان فارسی تولید کن.

عبارت «یک سایت زیبا بساز» اطلاعات کافی در اختیار عامل قرار نمی‌دهد. هرچه کاربرد، مخاطب و ساختار صفحه دقیق‌تر باشند، خروجی اولیه مناسب‌تر خواهد بود.

مرحله سوم: اصلاح طراحی فارسی

پس از تولید صفحه، موارد زیر را بررسی کنید:

راست‌چین‌بودن محتوا

• عنوان‌ها باید از سمت راست شروع شوند.
• توضیحات و فهرست‌ها راست‌چین باشند.
• آیکون‌ها در سمت مناسب متن قرار گیرند.
• ترتیب ستون‌ها در موبایل بررسی شود.
• فلش‌ها و نشانه‌های جهت‌دار با ساختار فارسی هماهنگ باشند.

تایپوگرافی فارسی

فونتی انتخاب کنید که حروف فارسی را کامل پشتیبانی کند. برای متن‌های طولانی، ارتفاع خط و فاصله پاراگراف‌ها را افزایش دهید.

دکمه‌ها

متن دکمه‌ها باید کوتاه و عملی باشد:

• شروع رایگان
• مشاهده نمونه
• تولید محتوا
• دریافت مشاوره
• ساخت حساب کاربری

نسخه موبایل

تیترهای بسیار بزرگ، فاصله‌های اضافی و ردیف‌های چندستونه معمولاً در موبایل به اصلاح نیاز دارند. هر نقطه شکست را جداگانه مشاهده کنید.

مرحله چهارم: ایجاد بخش ابزار هوش مصنوعی

در صفحه یک بخش با این عناصر ایجاد کنید:

• عنوان «دستیار تولید محتوای فارسی»
• ورودی موضوع
• انتخاب نوع محتوا
• انتخاب لحن
• دکمه تولید محتوا
• وضعیت بارگذاری
• محل نمایش نتیجه
• دکمه کپی خروجی
• پیام خطای فارسی

در مرحله طراحی می‌توانید از یک نتیجه آزمایشی استفاده کنید. اتصال واقعی API را پس از تأیید رابط انجام دهید.

چرا نباید کلید درواره را داخل Framer قرار دهیم؟

کد یک Code Component در مرورگر بازدیدکننده اجرا می‌شود. همچنین تنظیمات Fetch سمت کاربر ممکن است در فایل‌های سایت قابل‌مشاهده باشند.

اگر کلید API را در این بخش قرار دهید، بازدیدکنندگان می‌توانند آن را استخراج و خارج از سایت شما استفاده کنند.

ساختار درست این است:

کاربر ← سایت Framer ← بک‌اند شما ← API درواره

در این معماری، سایت فقط اطلاعات فرم را به بک‌اند ارسال می‌کند. بک‌اند کلید محرمانه را در متغیر محیطی نگه می‌دارد و درخواست اصلی را به درواره می‌فرستد.

مرحله پنجم: ساخت بک‌اند اتصال به درواره

می‌توانید این بک‌اند را با Next.js روی یک سرویس میزبانی مناسب منتشر کنید.

ابتدا کتابخانه OpenAI را نصب کنید:

npm install openai

متغیرهای محیطی پروژه:

DARVAREH_API_KEY=your_api_key
DARVAREH_MODEL_ID=your_model_id
DARVAREH_BASE_URL=https://api.darvareh.ir/v1
FRAMER_SITE_ORIGIN=https://www.example.com

فایل app/api/generate/route.ts را ایجاد کنید:

import OpenAI from "openai";
import { NextResponse } from "next/server";

const client = new OpenAI({
  apiKey: process.env.DARVAREH_API_KEY,
  baseURL:
    process.env.DARVAREH_BASE_URL ||
    "https://api.darvareh.ir/v1",
  timeout: 30_000,
});

function corsHeaders(origin: string | null) {
  const allowedOrigin = process.env.FRAMER_SITE_ORIGIN;

  return {
    "Access-Control-Allow-Origin":
      origin === allowedOrigin && allowedOrigin
        ? allowedOrigin
        : "null",
    "Access-Control-Allow-Methods": "POST, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type",
    Vary: "Origin",
  };
}

export async function OPTIONS(request: Request) {
  const origin = request.headers.get("origin");

  return new NextResponse(null, {
    status: 204,
    headers: corsHeaders(origin),
  });
}

export async function POST(request: Request) {
  const origin = request.headers.get("origin");
  const headers = corsHeaders(origin);

  if (
    process.env.FRAMER_SITE_ORIGIN &&
    origin !== process.env.FRAMER_SITE_ORIGIN
  ) {
    return NextResponse.json(
      { error: "مبدأ درخواست مجاز نیست." },
      { status: 403, headers }
    );
  }

  try {
    if (
      !process.env.DARVAREH_API_KEY ||
      !process.env.DARVAREH_MODEL_ID
    ) {
      return NextResponse.json(
        { error: "تنظیمات سرویس کامل نیست." },
        { status: 500, headers }
      );
    }

    const body = await request.json();

    const topic =
      typeof body.topic === "string" ? body.topic.trim() : "";
    const contentType =
      typeof body.contentType === "string"
        ? body.contentType.trim()
        : "";
    const tone =
      typeof body.tone === "string" ? body.tone.trim() : "";

    if (!topic || !contentType || !tone) {
      return NextResponse.json(
        { error: "تمام فیلدهای ضروری را تکمیل کنید." },
        { status: 400, headers }
      );
    }

    if (topic.length > 500) {
      return NextResponse.json(
        { error: "موضوع واردشده بیش از حد طولانی است." },
        { status: 400, headers }
      );
    }

    const completion =
      await client.chat.completions.create({
        model: process.env.DARVAREH_MODEL_ID,
        messages: [
          {
            role: "system",
            content:
              "شما نویسنده حرفه‌ای فارسی هستید. متن دقیق، روان و متناسب با درخواست کاربر تولید کنید.",
          },
          {
            role: "user",
            content: [
              `موضوع: ${topic}`,
              `نوع محتوا: ${contentType}`,
              `لحن: ${tone}`,
              "پاسخ را فقط به زبان فارسی بنویس.",
            ].join("\n"),
          },
        ],
      });

    const text =
      completion.choices[0]?.message?.content?.trim();

    if (!text) {
      return NextResponse.json(
        { error: "پاسخ معتبری دریافت نشد." },
        { status: 502, headers }
      );
    }

    return NextResponse.json(
      { text },
      { status: 200, headers }
    );
  } catch (error) {
    console.error("Darvareh request failed:", error);

    return NextResponse.json(
      {
        error:
          "تولید محتوا با مشکل مواجه شد. دوباره تلاش کنید.",
      },
      { status: 500, headers }
    );
  }
}

مقدار FRAMER_SITE_ORIGIN باید دقیقاً برابر دامنه نهایی سایت باشد؛ برای مثال:

FRAMER_SITE_ORIGIN=https://www.example.com

برای آزمایش روی نشانی پیش‌نمایش، می‌توانید موقتاً همان نشانی Framer را قرار دهید. در محیط واقعی بهتر است فقط دامنه اصلی مجاز باشد.

مرحله ششم: ساخت Code Component در Framer

در Framer یک Code Component جدید با نام DarvarehWriter.tsx بسازید:

import * as React from "react";
import { addPropertyControls, ControlType } from "framer";

export default function DarvarehWriter(props) {
  const [topic, setTopic] = React.useState("");
  const [contentType, setContentType] =
    React.useState("توضیحات محصول");
  const [tone, setTone] = React.useState("رسمی");
  const [result, setResult] = React.useState("");
  const [error, setError] = React.useState("");
  const [loading, setLoading] = React.useState(false);

  async function generateContent() {
    if (!topic.trim()) {
      setError("موضوع محتوا را وارد کنید.");
      return;
    }

    setLoading(true);
    setError("");
    setResult("");

    try {
      const response = await fetch(props.endpoint, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          topic,
          contentType,
          tone,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(
          data.error || "درخواست ناموفق بود."
        );
      }

      setResult(data.text);
    } catch (requestError) {
      setError(
        requestError instanceof Error
          ? requestError.message
          : "خطایی غیرمنتظره رخ داد."
      );
    } finally {
      setLoading(false);
    }
  }

  async function copyResult() {
    if (result) {
      await navigator.clipboard.writeText(result);
    }
  }

  return (
    <div
      dir="rtl"
      style={{
        width: "100%",
        height: "100%",
        fontFamily: "inherit",
        padding: 24,
        borderRadius: 20,
        background: "#ffffff",
        border: "1px solid #e7e7ee",
        display: "flex",
        flexDirection: "column",
        gap: 16,
        overflow: "auto",
      }}
    >
      <input
        value={topic}
        onChange={(event) => setTopic(event.target.value)}
        placeholder="موضوع محتوا را وارد کنید"
        style={inputStyle}
      />

      <select
        value={contentType}
        onChange={(event) =>
          setContentType(event.target.value)
        }
        style={inputStyle}
      >
        <option>توضیحات محصول</option>
        <option>مقاله</option>
        <option>کپشن شبکه اجتماعی</option>
        <option>ایمیل</option>
      </select>

      <select
        value={tone}
        onChange={(event) => setTone(event.target.value)}
        style={inputStyle}
      >
        <option>رسمی</option>
        <option>دوستانه</option>
        <option>تبلیغاتی</option>
      </select>

      <button
        onClick={generateContent}
        disabled={loading}
        style={{
          padding: 14,
          border: 0,
          borderRadius: 12,
          background: loading ? "#aaa" : props.buttonColor,
          color: "#fff",
          cursor: loading ? "not-allowed" : "pointer",
        }}
      >
        {loading ? "در حال تولید..." : "تولید محتوا"}
      </button>

      {error && (
        <div style={{ color: "#b42318" }}>{error}</div>
      )}

      {result && (
        <div
          style={{
            padding: 16,
            borderRadius: 12,
            background: "#f7f7fa",
            lineHeight: 1.9,
            whiteSpace: "pre-wrap",
          }}
        >
          {result}
        </div>
      )}

      {result && (
        <button onClick={copyResult} style={secondaryButton}>
          کپی متن
        </button>
      )}
    </div>
  );
}

const inputStyle = {
  width: "100%",
  padding: 14,
  borderRadius: 12,
  border: "1px solid #d8d8e2",
  background: "#fff",
  textAlign: "right",
};

const secondaryButton = {
  padding: 12,
  borderRadius: 12,
  border: "1px solid #d8d8e2",
  background: "#fff",
  cursor: "pointer",
};

addPropertyControls(DarvarehWriter, {
  endpoint: {
    type: ControlType.String,
    title: "API Endpoint",
    defaultValue:
      "https://ai.example.com/api/generate",
  },
  buttonColor: {
    type: ControlType.Color,
    title: "Button",
    defaultValue: "#6d28d9",
  },
});

پس از ذخیره مؤلفه:

1. آن را روی بوم صفحه قرار دهید.
2. عرض و ارتفاع مناسب تعیین کنید.
3. نشانی واقعی بک‌اند را در ویژگی API Endpoint وارد کنید.
4. نسخه دسکتاپ و موبایل را آزمایش کنید.
5. پیام‌های خطا و وضعیت بارگذاری را بررسی کنید.

مرحله هفتم: آزمایش اتصال

آزمایش عادی

• موضوع: معرفی کفش ورزشی مناسب دویدن
• نوع محتوا: توضیحات محصول
• لحن: تبلیغاتی

آزمایش ورودی خالی

بدون واردکردن موضوع روی دکمه کلیک کنید. برنامه باید قبل از ارسال درخواست پیام مناسب نمایش دهد.

آزمایش خطای API

کلید یا شناسه مدل را در محیط آزمایشی اشتباه تنظیم کنید. رابط باید یک پیام عمومی نمایش دهد و اطلاعات فنی سرور را افشا نکند.

آزمایش دامنه

درخواست را از دامنه دیگری ارسال کنید. بک‌اند باید آن را رد کند.

آزمایش موبایل

متن طولانی، ورودی‌ها، فهرست‌های انتخاب و دکمه کپی را روی نمایشگر کوچک بررسی کنید.

تنظیم سئوی سایت Framer

برای هر صفحه این اطلاعات را جداگانه تنظیم کنید:

• عنوان سئو
• توضیحات متا
• نشانی کوتاه و معنادار
• تصویر اشتراک‌گذاری
• Canonical
• متن جایگزین تصاویر
• ساختار صحیح تیترها

برای صفحه اصلی پروژه می‌توان از این اطلاعات استفاده کرد:

• عنوان: تولید محتوای فارسی با هوش مصنوعی
• توضیحات متا: با دستیار هوش مصنوعی فارسی، توضیحات محصول، مقاله و کپشن تولید کنید و فرایند تولید محتوای کسب‌وکار خود را سریع‌تر کنید.
• نامک صفحه ابزار: ai-content-generator

زبان سایت را نیز روی فارسی تنظیم کنید تا ویژگی lang به‌درستی ایجاد شود. Framer در راهنمای تنظیم زبان سایت توضیح می‌دهد که این تنظیم برای دسترس‌پذیری و درک بهتر زبان صفحه اهمیت دارد.

اتصال دامنه اختصاصی

ابتدا پروژه را روی زیردامنه Framer منتشر و بررسی کنید. سپس از بخش Domains دامنه اختصاصی را متصل کنید.

برای اتصال یک زیردامنه معمولاً باید رکورد CNAME ارائه‌شده را در سرویس مدیریت DNS ثبت کنید. جزئیات و رکوردهای موردنیاز در راهنمای رسمی اتصال دامنه Framer نمایش داده می‌شوند.

پس از اتصال دامنه بررسی کنید:

• گواهی HTTPS فعال شده باشد.
• نسخه www و بدون www رفتار صحیح داشته باشند.
• Canonical روی دامنه اصلی تنظیم شده باشد.
• نشانی بک‌اند، دامنه نهایی Framer را مجاز بداند.
• لینک‌های داخلی به نشانی آزمایشی اشاره نکنند.

انتشار سایت

با انتخاب Publish، یک نشانی روی دامنه Framer ساخته می‌شود. در طرح‌های حرفه‌ای می‌توان از محیط Staging برای آزمایش نسخه جدید پیش از انتشار روی دامنه اصلی استفاده کرد.

طبق راهنمای انتشار Framer، پیش از انتشار می‌توان تغییرات و وضعیت بهینه‌سازی پروژه را بررسی کرد.

چک‌لیست نهایی:

• تمام صفحه‌ها راست‌چین هستند.
• نسخه موبایل بررسی شده است.
• فرم‌ها درست کار می‌کنند.
• کلید API در کد Framer وجود ندارد.
• بک‌اند فقط دامنه مجاز را می‌پذیرد.
• ورودی‌ها در سمت سرور اعتبارسنجی می‌شوند.
• خطاهای درواره مدیریت شده‌اند.
• عنوان و توضیحات متا تنظیم شده‌اند.
• تصاویر متن جایگزین دارند.
• Canonical صحیح است.
• دامنه اصلی به‌درستی متصل شده است.
• مصرف API پایش می‌شود.

هزینه استفاده از Framer AI

Framer یک طرح رایگان برای آزمایش و ساخت سایت روی زیردامنه خود ارائه می‌دهد. برای اتصال دامنه اختصاصی و استفاده از امکانات حرفه‌ای باید یکی از طرح‌های پولی انتخاب شود.

اعتبار عامل‌های هوش مصنوعی، تعداد صفحات، ظرفیت CMS، پهنای باند، محیط آزمایشی و امکانات همکاری بین طرح‌ها متفاوت است. قیمت‌ها و محدودیت‌ها ممکن است تغییر کنند؛ بنابراین پیش از خرید باید صفحه رسمی قیمت‌گذاری Framer بررسی شود.

هزینه‌های پروژه ممکن است شامل سه بخش باشد:

• اشتراک و میزبانی Framer
• میزبانی سرویس سمت سرور
• مصرف API هوش مصنوعی درواره

اشتباهات متداول هنگام استفاده از Framer AI

ساخت کل سایت با یک دستور مبهم

پرامپت باید مخاطب، ساختار، هدف و سبک طراحی را مشخص کند.

انتشار مستقیم خروجی اولیه

متن‌ها، تصاویر، لینک‌ها و نسخه موبایل باید پیش از انتشار بررسی شوند.

قراردادن کلید API در Code Component

کد مؤلفه در مرورگر اجرا می‌شود و محل مناسبی برای نگهداری اطلاعات محرمانه نیست.

بی‌توجهی به رابط فارسی

راست‌چین‌کردن متن به‌تنهایی کافی نیست. ترتیب ستون‌ها، آیکون‌ها، فلش‌ها، ورودی‌ها و چیدمان موبایل نیز باید بررسی شوند.

استفاده از CMS برای داده‌های شخصی

CMS برای محتوای ساختاریافته سایت مناسب است. اطلاعات حساس کاربران و عملیات اختصاصی بهتر است روی بک‌اند و پایگاه داده مناسب نگهداری شوند.

نادیده‌گرفتن محدودیت مصرف API

برای ابزار عمومی باید محدودیت درخواست، کنترل طول ورودی، ثبت مصرف و جلوگیری از ارسال‌های تکراری در نظر گرفته شود.

پرسش‌های متداول

Framer AI چیست؟

Framer AI مجموعه‌ای از قابلیت‌های هوش مصنوعی برای ساخت، طراحی، ویرایش و مدیریت سایت در پلتفرم Framer است.

آیا Framer رایگان است؟

Framer طرح رایگان دارد، اما اتصال دامنه اختصاصی و بعضی امکانات حرفه‌ای به طرح پولی نیاز دارند.

آیا برای استفاده از Framer باید برنامه‌نویسی بلد باشیم؟

برای طراحی و انتشار یک سایت معمولی به برنامه‌نویسی نیاز ندارید. برای ساخت قابلیت‌های اختصاصی و اتصال به API، آشنایی با React و توسعه سمت سرور مفید است.

آیا Framer از زبان فارسی پشتیبانی می‌کند؟

می‌توان در Framer سایت فارسی ساخت، اما راست‌چین‌بودن، فونت، ترتیب عناصر و نسخه موبایل باید به‌صورت دستی بررسی و اصلاح شوند.

آیا Framer برای فروشگاه اینترنتی مناسب است؟

Framer بیشتر برای سایت‌های بازاریابی، محتوایی و معرفی محصول مناسب است. برای فروشگاه‌های پیچیده باید نیازهای پرداخت، موجودی، سفارش و مدیریت مشتری جداگانه بررسی شوند.

آیا می‌توان Framer را به API درواره متصل کرد؟

بله. رابط را می‌توان با یک Code Component به بک‌اند اختصاصی متصل کرد. بک‌اند درخواست را با کلید محرمانه به API درواره ارسال می‌کند.

آیا می‌توان کلید درواره را در Fetch فرامر وارد کرد؟

خیر. اطلاعات حساس نباید در Fetch یا کد سمت کاربر قرار بگیرند. کلید باید فقط در متغیرهای محیطی بک‌اند ذخیره شود.

تفاوت Framer و v0 چیست؟

Framer بیشتر روی طراحی بصری، سایت‌های بازاریابی، CMS و انتشار سریع تمرکز دارد. v0 بیشتر برای تولید کد و ساخت برنامه‌های React و Next.js استفاده می‌شود.

آیا Framer برای ساخت اپلیکیشن کامل مناسب است؟

برای رابط‌ها و ابزارهای سبک مناسب است. اپلیکیشن‌هایی با منطق پیچیده، احراز هویت اختصاصی، پایگاه داده و پردازش‌های حساس معمولاً به بک‌اند مستقل نیاز دارند.

منابع اصلی

• وب‌سایت رسمی Framer
• معرفی رسمی Framer AI
• مستندات توسعه‌دهندگان Framer
• راهنمای Fetch در Framer
• راهنمای انتشار سایت Framer
• راهنمای اتصال دامنه
• قیمت‌گذاری رسمی Framer

مقالات مرتبط

• ساخت سایت با هوش مصنوعی؛ راهنمای جامع
• آموزش ساخت اپلیکیشن با هوش مصنوعی
• طراحی UI و UX با هوش مصنوعی
• راهنمای API سازگار با OpenAI
• آموزش React برای ساخت اپلیکیشن هوش مصنوعی
• آموزش Tailwind CSS برای اپلیکیشن‌های هوش مصنوعی

جمع‌بندی

Framer AI ابزار مناسبی برای تبدیل سریع یک ایده به سایت قابل‌انتشار است. ترکیب عامل هوش مصنوعی، ویرایشگر بصری، CMS، امکانات سئو و میزبانی داخلی باعث می‌شود برای صفحه‌های فرود، سایت‌های شرکتی و پروژه‌های محتوایی انتخاب جذابی باشد.

برای افزودن قابلیت‌های واقعی هوش مصنوعی، نباید کلید API را در کد Framer قرار داد. معماری مناسب این است که رابط Framer به یک سرویس سمت سرور متصل شود و آن سرویس درخواست‌ها را به API درواره ارسال کند.

برای دریافت کلید API، انتخاب مدل مناسب و افزودن قابلیت‌های هوش مصنوعی به سایت خود، به وب‌سایت درواره مراجعه کنید.

این مقاله صرفاً با هدف آموزش و اطلاع‌رسانی تهیه شده است. پیش از استفاده عملی، مستندات رسمی سرویس‌ها و صفحه سلب مسئولیت را مطالعه کنید.