[ 01 / САЙТ ] FIGMA + CLAUDE CODE
Куб
Главный экран портфолио со стеклянным кубиком Рубика. Здесь всё, чтобы собрать такой же: инструкция, промпты и ссылки.
[ 01 / ИНСТРУКЦИЯ ]
Как собрать такой экран за пять шагов
-
Возьми макет
Открой мой макет в Figma и сделай его копию у себя. Тексты, цвета, шрифты и обложки меняй прямо во фрейме: нейронка считает всё оттуда. Расположение блоков и сам куб заданы в шаблоне, их в макете двигать не нужно.
-
Сделай свои обложки
Нужно 12 квадратных картинок рядом с фреймом, слои Work 01 … Work 12. Промпты для них есть ниже. Лучше всего смотрятся дорогой 3D и студийный свет, а плоские иллюстрации на гранях выглядят дёшево.
-
Подключи Figma к Claude Code
Выполни команду в терминале, перезапусти Claude Code, введи /plugin, на вкладке Installed выбери figma и войди в свой аккаунт.
claude plugin install figma@claude-plugins-official
-
Отправь промпт
Создай пустую папку и открой в ней Claude Code. Вставь главный промпт: ссылка на мой макет уже в нём. Если у тебя своя копия с правками, замени её на ссылку на свой фрейм. Нейронка скачает мой готовый шаблон, подставит в него тексты, цвета и обложки из макета и запустит страницу у тебя на компьютере. Код она не пишет с нуля, поэтому хватит и подписки Pro. Займёт пару минут, со своими обложками — до 10.
-
Сделай пару правок
Если хочется что-то поменять, пиши нейронке обычными словами.
Для следующих сайтов
Необязательно. Для этого экрана скиллы не нужны, всё уже записано в промпте. Но если будешь делать другие сайты с анимацией и 3D, поставь их один раз: это готовые инструкции по анимации GSAP, 3D на Three.js и плавной прокрутке Lenis, и нейронка сама подключит их, когда понадобятся.
npx skills add https://github.com/greensock/gsap-skills -g -a claude-code npx skills add https://github.com/cloudai-x/threejs-skills -g -a claude-code npx skills add mengto/skills --skill cinematic-gsap-lenis-motion-system -g -a claude-code
[ 02 / ПРОМПТЫ ]
Всё, что я писала нейронке
Главный промпт
Код куба уже готов: нейронка его не пишет, а только подставляет в шаблон твои тексты, цвета и обложки. Поэтому промпт короткий, сборка занимает несколько минут и подходит даже для подписки Pro.
Обложки для граней
[ 03 / ССЫЛКИ ]