تصور کنید یک توسعهدهنده بتواند تنها با یک پرامپت ساده، یک کره زمین سهبعدی و کاملاً سفارشی را در اپلیکیشن Next.js خود جای دهد. این رویای اتوماسیون اکنون به لطف Globestudio — استودیوی متنباز نقشههای سهبعدی — به واقعیت تبدیل شده است.
بسیاری از برنامهنویسان هنگام افزودن المانهای بصری پیچیده با یک سد مواجه میشوند: خواندن ساعتها مستندات، نصب پیشنیازها و تغییر دستی فایلهای JSON. این فرآیند بهویژه در مدیریت مختصات جغرافیایی یا کدهای رنگی برند، بسیار خطاپذیر است. Globestudio با معرفی مهارتهای عامل (Agent Skills) — که در واقع دستورالعملهای مارکداون برای آموزش عامل (Agent)هاست — این بار را از دوش انسان به دوش هوش مصنوعی منتقل کرده است.
همانطور که در تحلیلهای پیشین ما دربارهی اکوسیستم ابزارهای کدنویسی AI اشاره کردیم، روند فعلی به سمتی میرود که کتابخانهها دیگر فقط کد ارائه نمیدهند، بلکه «راهنمای استفاده برای ماشین» را هم توزیع میکنند.
طبق مستندات این پروژه، هسته این سیستم پوشهای از فایلهای مارکداون است که به عنوان دفترچه راهنمای عاملهایی مثل Claude Code، Codex و Cursor عمل میکند. وقتی توسعهدهنده با دستور npx skills add alevizio/globestudio این مهارت را نصب میکند، عامل بلافاصله به فایلهای مرجع و جداول جستوجوی کتابخانه دسترسی پیدا میکند.
روشهای نصب بسته به ابزار متفاوت است:
- حالت عمومی: دستور
npx skills add alevizio/globestudio(که از کاربر میپرسد از کدام عامل استفاده میکند). - Claude Code: دستور
npx skills add alevizio/globestudio -a claude-code. - GitHub CLI: دستور
gh skill install alevizio/globestudio. - پلاگین Claude: افزودن از مارکتپلیس و سپس نصب نسخه
globestudio@globestudio.
این مهارت شامل یک فایل SKILL.md و سه فایل مرجع است که مستقیماً از کد اپلیکیشن تولید شدهاند. به نقل از تیم توسعه، اگر این فایلها با کد اصلی ناهماهنگ شوند، تستهای مخزن (Repository) شکست میخورند تا تضمین شود عامل همیشه بهروزترین دستورالعملها را دارد. برای شفافیت، تمام مراحل نصب و ممیزیهای امنیتی در سایت skills.sh منتشر شده است.
این سازوکار باعث میشود عامل بدون اینکه کاربر نام کتابخانه را ببرد، محدودیتهای طراحی را بفهمد. برای مثال، درخواست «یک کره زمین نقطهچین با چرخش آرام» باعث میشود عامل بهطور خودکار مهارت Globestudio را بارگذاری کند، زیرا توصیفات این مهارت شامل کلمات کلیدی نقشههای نقطهچین و کرههای سهبعدی است.
در یک تست عملی روی یک اپلیکیشن تازه Next.js با App Router، عامل مراحل زیر را بهطور خودکار انجام داد:
- مدیریت وابستگیها: نصب نسخه ۰.۱.۱ یا بالاتر پکیج
@globestudio/react(برای جلوگیری از باگهای نسخه ۰.۱.۰). - تولید کامپوننت: ایجاد فایل
app/office-globe.tsxبا یک ثابت پیکربندی. - منطق طراحی: تبدیل مکان دفاتر نیویورک، لندن و توکیو به مختصات و اتصال آنها با کمانهای بصری.
- تنظیمات بصری: کاهش سرعت چرخش (
autoSpinSpeed) به ۱۰ از ۱۰۰ برای تحقق درخواست «چرخش آرام». - یکپارچهسازی: قرار دادن کامپوننت در
app/page.tsxبین لوگوی Next.js و تیتر اصلی.

خروجی نهایی به صورت یک iframe سبک است که به https://globestudio.app/embed اشاره میکند. پکیج React این ابزار بسیار کوچک است (حدود ۱ کیلوبایت) و چون بدون وضعیت داخلی (Internal State) کار میکند، بهطور بومی در Server Components شرکت Next.js اجرا میشود و نیازی به دستور use client ندارد.
یکی از نکات ظریف که عامل مدیریت میکند، تداخل تم صفحه با ظاهر کره است. در صفحات با تم روشن، کره تیره ممکن است شبیه یک دیسک خاکستری به نظر برسد. عامل برای حل این مشکل، گزینههای surface و glow را در تنظیمات غیرفعال میکند تا نقاط آبی و خطوط شبکه روی پسزمینه سفید شفاف باشند.
برای دقت در رنگهای برند، سیستم از کلید نسخهبندی در JSON استفاده میکند. در نسخه ۲، رنگها تیرهتر رندر میشدند، اما در نسخه ۳ (معرفی شده در نسخه ۱.۲.۰)، رنگهای Hex دقیقاً همانطور که نوشته شدهاند نمایش داده میشوند.
علاوه بر React، این ابزار برای Vue، Svelte و Astro هم در قالب Web Components در دسترس است. همچنین برای پلتفرمهایی مثل Webflow یا WordPress، میتوان از iframe ساده استفاده کرد، به شرطی که پارامتر c دقیقاً یکبار کدگذاری (encode) شده باشد.
برای کاربران پروتکل زمینهٔ مدل (MCP) — که شبیه به یک رابط استاندارد برای اتصال مدلهای AI به ابزارهای خارجی است — یک سرور در https://globestudio.app/mcp میزبان است. این سرور ۶ ابزار تخصصی ارائه میدهد، از جمله find_presets برای یافتن استایلهای بصری بر اساس کلمات کلیدی مثل «سینتویو» (Synthwave). این رویکرد در راستای تسهیل دسترسی مدلها به قابلیتهای عملیاتی است، مشابه آنچه کلودفلر برای گسترش دسترسی عاملها به هزاران عملیات API پیادهسازی کرده است.
با این حال، توسعهدهندگان باید محدودیتهای تولیدی را بدانند. مرورگر کاربر باید از WebGL 2 پشتیبانی کند و حداکثر تعداد نقاط داده در هر پیکربندی ۲۵۰ مورد است. همچنین، تمام دادههای طراحی در URL ذخیره میشوند، بنابراین هر کسی با مشاهده سورس صفحه میتواند این دادهها را بخواند.
بهترین روش برای طراحی بصری، استفاده از خودِ استودیو است. کاربر میتواند رنگها و تراکم نقاط را در محیط گرافیکی تغییر دهد، لینک اشتراک را کپی کرده و به عامل بگوید: «کره زمین را مطابق این طراحی تغییر بده». عامل پارامتر ?c= را رمزگشایی کرده و ثابتهای کد را بهروز میکند.
گام بعدی شما
- اگر از Cursor یا Claude Code استفاده میکنید، مهارت Globestudio با دستور
npx skills add alevizio/globestudioنصب کنید تا سرعت پیادهسازی المانهای سهبعدی را تست کنید. - برای پروژههایی با استانداردهای سختگیرانه برند، حتماً از نسخه ۳ پیکربندی JSON استفاده کنید تا رنگها دقیقاً مطابق Hex باشند.
- در صورت مواجهه با خطای رندر در صفحات روشن، تنظیمات
surface: falseرا در پرامپت خود به عامل دیکته کنید.
اما این تنها بخشی از تحول در نحوه توزیع کتابخانههاست؛ بررسی اینکه چگونه MCP میتواند جایگزین APIهای سنتی شود را در گزارش بعدی دنبال کنید.




گفتگو