[ 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. Вставь главный промпт: ссылка на мой макет уже в нём. Если у тебя своя копия с правками, замени её на ссылку на свой фрейм. Нейронка сама поставит нужные скиллы и библиотеки, скачает обложки, соберёт страницу и запустит её у тебя на компьютере.
-
Сделай пару правок
С первого раза идеально не получается ни у кого. Пиши обычными словами, что не нравится. Правки, которые писала я, лежат в промптах.
[ 02 / ПРОМПТЫ ]
Всё, что я писала нейронке
Главный промпт
Обложки для граней
Мои правки по ходу
Мне хочется обновить страницу проекта, сейчас на ней очень мало информации. Напиши задачи, решения и результат, а ниже добавь кнопку перехода к кейсу. Эти картинки выглядят ужасно. Сгенерируй что-то намного ближе к референсу: дорогой 3D, студийный свет. Когда нажимаешь на квадратик, мешается другой квадратик, который отлетает. Пусть кубики разлетаются по краям и не пролетают перед открытой работой.
[ 03 / ССЫЛКИ ]