# Spline MCP: створюйте 3D-вебдосвід зі ШІ (Cursor, Claude, Gemini та інші) - Spline Academy (https://spline.design/uk/academy/tutorials/spline-mcp-build-3d-web-experiences-with-ai-cursor-claude-gemini-and-more)

> Перетворіть референсне зображення на редаговану 3D-сцену за допомогою Spline MCP і Claude, а потім зробіть на її основі інтерактивний сайт.

1. [Академія](https://spline.design/uk/academy)
2. [Уроки](https://spline.design/uk/academy/tutorials)
3. Spline MCP: створюйте 3D-вебдосвід зі ШІ (Cursor, Claude, Gemini та інші)

# Spline MCP: створюйте 3D-вебдосвід зі ШІ (Cursor, Claude, Gemini та інші)

Spline 3DСередній6 хв

Перетворіть референсне зображення на редаговану 3D-сцену за допомогою Spline MCP і Claude, а потім зробіть на її основі інтерактивний сайт.

У цьому уроці ви навчитеся підключати десктопний застосунок Spline до свого ШІ-інструмента, напишете перший промпт і побачите, як сцена складається просто в редакторі. Ми відтворимо діораму парку, що ширяє в повітрі, розберемося, як доопрацювати її об’єкти й матеріали, і за допомогою Claude створимо навколо неї грайливий вебдосвід з перемикачем дня й ночі, прихованими сюрпризами та інтерактивними елементами.

Чого ви навчитеся:

- Підключати Spline MCP до Claude та інших ШІ-інструментів із підтримкою MCP.
- Генерувати редаговану 3D-сцену з референсного зображення.
- Доопрацьовувати сцену промптами або вручну в Spline.
- Працювати в наявному файлі Spline або починати з нуля.
- Перетворювати 3D-сцену на інтерактивний вебдосвід.

Візьміть референсне зображення, ідею чи мудборд і починайте створювати. Діліться результатами в коментарях!

Спробуйте Spline V2 і напишіть у коментарях, що хочете побачити далі!

👍 Не забудьте поставити вподобайку й підписатися, щоб не пропустити нові уроки та новини Spline

Посилання: 🌸 Hana → <https://spline.design/hana> 💖 Spline → <http://app.spline.design> 📚 Spline Docs → <https://docs.spline.design> 👋 Spline Community → <https://app.spline.design/community>

Ми в соцмережах: 📷 Instagram → / splinetool 🎵 TikTok → / splinedesign 💙 LinkedIn → / splinetool 🐦 X → / splinetool 👾 Discord → / discord

#spline #3D #Design #Spline3D #AIAgent

## Огляд

- Spline 3D
- 6 хв
- Середній

## Схожі уроки

[Усі уроки](https://spline.design/uk/academy/tutorials)

[Створюйте інтерактивне 3D зі Spline і ChatGPT - повний огляд плагіна SplineSpline 3DПочатковий6 хв](https://spline.design/uk/academy/tutorials/build-interactive-3d-with-spline-and-chatgpt-spline-plugin-full-walkthrough)[Повний огляд Hana V2: робота з агентом, підтримка 3D, швидше полотноSpline 3DПочатковий9 хв](https://spline.design/uk/academy/tutorials/hana-v2-full-tour-agent-workflow-3d-support-faster-canvas)[Повний огляд Spline V2: новий макет, швидше створення, робота з агентомSpline 3DПочатковий9 хв](https://spline.design/uk/academy/tutorials/spline-v2-full-tour-new-layout-faster-creation-agent-workflow)

[Spline](https://spline.design/uk)

3D- і 2D-редактор для команд та їхніх агентів. Публікуйте у вебі, на iOS та Android.

#### Запитайте ШІ про Spline

#### Продукти

- [3D-дизайн](https://spline.design/uk/3d-design)
- [Hana](https://spline.design/uk/hana)
- [Omma](https://omma.build)
- [3D-генерація зі ШІ](https://spline.design/uk/ai-generate)
- [Spline MCP](https://spline.design/uk/mcp)
- [Spline Arena](https://spline.design/uk/arena)
- [Ціни](https://spline.design/uk/pricing)
- [Для бізнесу](https://spline.design/uk/enterprise)

#### Рантайми

- [Web](https://spline.design/uk/web)
- [iOS](https://spline.design/uk/ios)
- [Android](https://spline.design/uk/android)

#### Застосунки

- [Завантажити](https://spline.design/uk/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Завантажити Spline Mirror](https://spline.design/download-mirror)

#### Навчання

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/uk/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Рішення](https://spline.design/solutions)

#### Спільнота

- [Спільнота Spline](https://community.spline.design)
- [Blog](https://spline.design/uk/blog)
- [Що нового](https://spline.design/uk/changelog)
- [Освіта](https://spline.design/uk/education)
- [Contra](https://spline.design/contra)
- [Партнерська програма](https://spline.design/uk/affiliate)

#### Компанія

- [Клієнти](https://spline.design/uk/customers)
- [Вакансії](https://www.ycombinator.com/companies/spline/jobs)
- [Безпека](https://spline.design/uk/security)

#### Правова інформація

- [Умови використання](https://spline.design/terms)
- [Конфіденційність](https://spline.design/privacy)

#### Контакти

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.