Клонируем FigmaREA
и делаем свой продукт

скачай Reverse Engineer Anything (REA) и подключи к Claude Code, пакет называется rea-agents. в конце запусти rea doctor и скажи, что работает, а что нет

с помощью REA пересобери Figma, которая стоит у меня на компьютере. результат - веб-приложение, которое открывается двойным кликом по index.html, без сервера.

без REA сделай клон Figma - веб-приложение, которое открывается двойным кликом по index.html, без сервера, и покажи мне результат. делай так, как считаешь нужным.

Лист с шестью концептами логотипа: бренд "Mastodont" и его продукт "Dontframe", онлайн-редактор, в котором команда вместе рисует интерфейсы и сайты на бесконечном холсте. Окончание бренда и начало продукта - одна и та же часть "DONT", и в каждой ячейке эта связка видна, но подана по-своему. Горизонтальный лист 3:2, сетка из шести одинаковых ячеек, три колонки и два ряда. Фон тёплый светло-серый #F4F3EF, ячейки разделены тонкими серыми линиями. В каждой ячейке по центру знак, под ним надпись, в левом верхнем углу ячейки мелкий серый номер. Все шесть знаков разные: мастодонт или его длинный изогнутый бивень вместе с рамкой-фреймом графического редактора, прямоугольником выделения с квадратными маркерами по углам.

Ячейка "01": рамка выделения с маркерами по углам, сквозь её край наружу выходит один длинный изогнутый бивень; чёрный #0A0A0A и бледное золото #F2DB82, бивень золотой. Надпись одним словом "MastoDONTFRAME" широким гротеском: "DONT" золотое, остальные буквы чёрные.
Ячейка "02": голова мастодонта в профиль из простых геометрических фигур вписана в квадратную рамку, бивень выходит за её край; графитовый #2B2B2B и ярко-синий #2F5BFF. Надпись геометрическим гротеском в две строки: сверху мелко "Mastodont", снизу крупно "Dontframe"; последние четыре буквы верхнего слова и первые четыре нижнего ярко-синие, остальные графитовые.
Ячейка "03": два изогнутых бивня смотрят друг на друга и вместе образуют овальную рамку, на концах бивней маленькие квадратные маркеры выделения; чёрный и оранжевый #FF6A1A. Надпись лесенкой по диагонали в три ступени: "Masto", ниже и правее "DONT", ещё ниже и правее "frame"; "DONT" сверхжирное оранжевое, "Masto" и "frame" тонкие чёрные, так что "DONT" читается и с верхней, и с нижней ступенькой.
Ячейка "04": контур прямоугольной рамки, верхний край которой поднимается куполом головы и спины мастодонта, из нижнего угла рамки закручивается бивень; чёрный и кислотно-лаймовый #C6F432. Надпись одним словом "MASTODONTFRAME" жирным гротеском, все буквы чёрные, буквы "DONT" обведены тонкой лаймовой рамкой выделения с квадратными маркерами, как выделенный объект в редакторе.
Ячейка "05": внутри квадратной рамки бивень нарисован как векторная кривая с опорными точками и рычагами; ультрамарин #2340D8 и тёплый жёлтый #FFC21A. Надпись узким гротеском: крупно "Dontframe", под ним мелко "by Mastodont"; тонкая жёлтая векторная линия с опорными точками на концах соединяет "Dont" в верхнем слове и "dont" в нижнем.
Ячейка "06": мастодонт в стиле пиксель-арта внутри рамки из квадратных пикселей, бивень выложен пикселями другого цвета; терракотовый #C8553D на кремовом #F3E9DC. Надпись моноширинным пиксельным шрифтом в две строки, "MASTODONT" и "DONTFRAME"; в обоих словах "DONT" выделено как выделенный текст: кремовые буквы на терракотовой плашке.

Плоская векторная графика: ровные чистые края, без объёма, теней и градиентов, никаких мокапов на визитках и вывесках. Каждый знак простой и читается даже размером с иконку приложения. Все надписи написаны буква в букву, как в кавычках.

Изображение 1 - готовый знак логотипа. Перерисуй его начисто в высоком качестве, ничего не меняя: те же формы, пропорции, расположение и цвета, бивень так же выходит за рамку. Убери шум и размытость: ровные чёткие края, чистые плоские заливки, без текстуры, теней и градиентов. Горизонтальный кадр 3:2, знак крупно на весь кадр с небольшими полями, на том же светлом фоне.

Афиша музыкального фестиваля в духе швейцарской типографики, уровень работ сильной дизайн-студии. На глубоком изумрудном фоне огромная надпись "AURORA" узким гротеском, поперёк неё размытая светящаяся полоса северного сияния, внизу мелко "12-14 JUNE". Плоский печатный дизайн с лёгким зерном, вертикальный формат 4:5.

Экран мобильного приложения с рецептами на весь кадр, без телефона вокруг, уровень лучших мобильных приложений. Сверху фото пасты с лимоном, снятое прямо сверху при свете из одного окна, с крошками и смятой льняной салфеткой рядом; ниже заголовок "Pasta al limone" и крупный таймер "04:30". Тёплая кремовая палитра, чистый интерфейс, вертикальный формат 4:5.

Первый экран сайта керамической мастерской, плоский макет без браузера и устройства, уровень дорогих сайтов-витрин. Огромный заголовок с засечками "Made by hand" над крупным фото глиняных чашек ручной работы: снято сбоку вплотную, свет из одного окна, на глине следы пальцев и сколы глазури. Палитра глины и песка, много воздуха, вертикальный формат 4:5.

Пост турагентства для соцсетей, вертикальный формат 4:5, журнальная вёрстка. Фото: лиссабонский дом в четыре этажа снят снизу вверх широким объективом, бело-синяя плитка азулежу с отбитыми углами, ржавый кованый балкон, бельё на верёвке, плоский дневной свет, плёнка Kodak Portra 400 с зерном. Сверху на фото крупная надпись "Lisbon".

Плитка-иллюстрация функции графического редактора, вертикальный формат 4:5, уровень промо-графики топовых продуктов. Фон - бетонный дом, снятый снизу вверх широким объективом в пасмурный день, с потёками на бетоне; поверх плавает белая панель слоёв с заголовком "Layers" и строками "Title", "Photo", "Button", строка "Photo" выделена ярко-синим #2F5BFF. Чистая плоская графика интерфейса.

Плитка-иллюстрация функции графического редактора, вертикальный формат 4:5, уровень промо-графики топовых продуктов. На сером холсте пустой белый фрейм формата телефона, рядом белая панель с заголовком "Frame" и пресетами "Phone" и "Desktop", пресет "Phone" выделен ярко-синим #2F5BFF. Чистая плоская графика интерфейса, мягкие тени.

Плитка-иллюстрация функции графического редактора, вертикальный формат 4:5, уровень промо-графики топовых продуктов. Фон - постер с кроссовком с потёртой подошвой, снятым снизу в момент, когда он отрывается от бетона и поднимает облачко пыли, свет одной вспышки. Поверх белая панель экспорта с заголовком "Export", форматами "PNG", "SVG", "PDF" и ярко-синей кнопкой #2F5BFF.

Плитка-иллюстрация функции графического редактора, вертикальный формат 4:5, уровень промо-графики топовых продуктов. Журнальный заголовок "Slow mornings" обведён рамкой текстового блока, рядом белая панель текста с названием шрифта "Fraunces" и размером "64", активный элемент панели ярко-синий #2F5BFF. Светло-серый фон, чистая плоская графика интерфейса.

логотип нашего клона лежит в [путь к твоему логотипу], название - Dontframe. используй их в приложении везде, где сейчас стоит figma или её значок

Собери сайт. Тема: продуктовая страница Dontframe - нашего веб-редактора дизайна от бренда Mastodont, клона figma, который ты только что собрал. Логотип и картинки лежат в папке [путь к папке с логотипом и картинками]. Dontframe - продукт бренда Mastodont, DONT у них общий. На первом экране обыграй эту связку анимацией: появляется MASTODONT, DONT отделяется, к нему приезжает FRAME, MASTO растворяется - остаётся DONTFRAME.

Все тексты на странице на английском. С figma на ней не должно быть ничего: ни текстов, ни картинок, ни логотипа.

Стиль бери со скринов страницы figma, которые я приложил. Не тему, не цвета буквально, не содержание - систему: как дышит воздух, какого размера шрифты, как текст стоит на странице, чем разделены блоки, как ведут себя картинки.

Разбери реферанс по пунктам ПЕРЕД тем как писать код, и назови вслух:
- на чём держится сетка и сколько в ней воздуха
- какие два шрифта в работе и какой из них крупный
- чем отделены блоки друг от друга
- за счёт чего он выглядит дорого

ВЁРСТКА
Минимум 12 блоков. У каждого своя вёрстка - не двенадцать одинаковых секций
подряд, а разный ритм: где-то картинка во весь экран, где-то две колонки,
где-то одна строка гигантским шрифтом на весь экран, где-то узкая колонка с
большим пустым полем, где-то список на волосяных линейках, где-то сетка со
сбитой вертикалью.

Блоки придумай сам под смысл продукта, но обязательно должны быть:
первый экран · что это и для кого · как устроено · что умеет: фреймы, фигуры,
текст и шрифты, слои, экспорт · галерея · частые вопросы · финальный призыв.

ШРИФТЫ
Два шрифта, не больше. Ни одного из этого списка: Inter, Roboto, Montserrat,
Open Sans, Poppins, Space Grotesk, Playfair. Бери с fontshare.com или Google
Fonts то, что реально держит характер - и объясни одной строкой, почему выбрал
именно эту пару.

АНИМАЦИИ
Строки заголовков выезжают из-под маски по одной, с задержкой между строками.
Абзацы проявляются по словам. Картинки открываются шторкой и едут медленным
параллаксом. Цифры накручиваются. Всё плавно и медленно, ease-out, ничего не
дёргается и не подпрыгивает.

ТЕХНИКА (из-за этого сайт перестаёт выглядеть нейросетевым)
Анимируй только transform и opacity. Ширину, высоту, отступы и margin не
анимируй никогда - от них дёргается вся страница.
Размеры шрифтов и отступы - на clamp, чтобы жили от телефона до большого экрана,
без фиксированных пикселей в заголовках.
Блоки разделяй волосяными линиями в один пиксель, а не карточками с тенями.
Один акцентный цвет на весь сайт, и тот использовать в двух-трёх местах.
Уважай prefers-reduced-motion: у кого выключены анимации - тот видит статику,
а не пустую страницу.
Один блок - одно действие и одна мысль. Не три мысли с подводками к каждой.

КАРТИНКИ И ВИДЕО
Всё уже готово и лежит в папке [путь к папке с логотипом и картинками], новых картинок не генерь:
- L2-logo-chisto.png - наш логотип
- K03-afisha.png, K04-prilozhenie.png, K05-sayt.png, K06-post.png - четыре работы,
  сделанные в нашем редакторе: стопка на первом экране и галерея
- K13-sloi.png, K15-freymy.png, K17-eksport.png, K19-tekst.png - плитки инструментов:
  слои, фреймы, экспорт, текст
Видео к странице сделаю следом, оставь под них места:
- первый экран - петля со стопкой работ, вертикальная 3:4
- «как устроено» - три широких демо 16:9: ИИ дорисовывает экраны, экраны уходят
  в код, проект подтягивается из репозитория и запускается
- «что умеет» - плитка «фигуры», широкая 16:9
Под трейлер оставь место в блоке сразу после первого экрана, трейлер дам следом.

ЗАПРЕЩЕНО
Фиолетово-синие градиенты. Эмодзи. Наборные иконки. Карточки с тенями и
скруглениями по 12 пикселей. Центрированный лендинг из шаблона: заголовок,
подзаголовок, три колонки с иконками. Всё, что выглядит как сайт, собранный
нейронкой за минуту.

ОТДАЧА
Клади в папку site рядом с твоей папкой, старые файлы не трогай. В конце дай мне
путь к index.html - я открою файлом, локальный сервер не нужен.

@Image1 is the first and the last frame: a fanned stack of four design pieces on white. @Image2, @Image3, @Image4 and @Image5 are those pieces: a poster, an app screen, a website and a social post. An 8-second seamless loop for a website hero.
0-1s: the stack from @Image1 holds still for a beat.
1-3s: the stack bursts apart, the four pieces fly outward in 3D around the camera, and the camera dives forward into the gap between them with a speed ramp.
3-6s: the camera sweeps in one fast arc through the floating pieces, passing @Image2, @Image3, @Image4 and @Image5 up close.
6-8s: the pieces slam back together into the fanned stack and the frame lands exactly on @Image1.
The pieces stay rigid flat cards and their content never changes. Plain white background. No audio. No subtitles.

Перевод: стопка из четырёх работ разлетается вокруг камеры, камера пролетает сквозь них, и стопка собирается обратно. Бесшовная петля на 8 секунд.

Use @Image1 and @Image2 in order as keyframes. A fast product demo of a design editor in which an AI assistant builds an app in seconds.
0-2s: as in @Image1, a snap zoom onto the prompt bubble; the cursor clicks it and the bubble flashes blue.
2-6s: triggered by the click, four new app screens pop out of the first screen one after another with a springy snap, and the camera pulls back fast to reveal the whole row.
6-9s: three named cursors zip in from the edges of the frame and land on different screens; the camera glides along the row following the "Leo" cursor.
9-12s: snap zoom onto the ticket screen as "Leo" clicks it, then the camera eases back to the wide view of @Image2.
UI and text stay sharp and stable. No audio. No subtitles.

Перевод: по щелчку из одного экрана выскакивают ещё четыре, прилетают курсоры с именами, камера едет вдоль ряда.

Use @Image1 and @Image2 in order as keyframes. A punchy design-to-code demo: two app screens on the canvas become a live website with one command.
0-3s: as in @Image1, the "Leo" cursor drags a selection box around both screens; the box snaps into place with a blue flash.
3-5s: at 3s, a whip pan to the right lands on the dark prompt panel from @Image2.
5-8s: the cursor clicks the send button; the button pulses and a ripple of light runs across the panel.
8-12s: the prompt text breaks into lines of glowing code that stream toward the camera, and the camera pushes through them.
UI and text stay sharp and stable. No audio. No subtitles.

Перевод: курсор выделяет два экрана, камера уходит на панель запроса, текст рассыпается на строки кода и летит на камеру.

A snappy loop for a feature tile: the video starts and ends on this frame.
0-2s: the cursor flicks the "Points" slider to the right and the star bursts from five to eight points with a springy overshoot.
2-5s: the star spins half a turn while the camera pushes in close on its new sharp tips.
5-8s: the cursor snaps the slider back, the star collapses to five points with a bounce, and the camera eases back to the opening frame.
Flat graphics, sharp panel and labels. No audio. No subtitles.

Перевод: ползунок превращает звезду из пяти лучей в восемь и обратно. Петля, начинается и заканчивается одним кадром.

Use @Image1 and @Image2 in order as keyframes. A fast import-to-launch demo: a project comes in from a repository and goes live in seconds.
0-2s: as in @Image1, the big cursor shoots in from the right and clicks the round send button; the button flashes.
2-4s: the camera dives into the input bar, which unfolds into the app window as the background floods with the grainy blue gradient.
4-8s: the steps on the left tick off one by one in quick rhythm while the lighthouse site assembles in the preview.
8-12s: the lighthouse photos burst out of the preview frame toward the camera in 3D, fly past the lens, and the camera settles on the wide view of @Image2.
UI and text stay sharp and stable. No audio. No subtitles.

Перевод: курсор жмёт отправку, строка ввода разворачивается в окно, шаги отмечаются галочками, собирается сайт.

сделай динамичное 20-секундное видео с моушн-графикой, которое покажет, какой ты невероятный моушн-дизайнер, как будто это твой шоурил для резюме. выложись по полной и будь максимально креативным. не используй hyperframes, просто сделай с нуля кодом.
это трейлер Dontframe, нашего редактора от бренда Mastodont, вот его сайт: [путь к index.html сайта]. обыграй, что DONT у Mastodont и Dontframe общий. все надписи на английском, про Dontframe. поставь трейлер в блок после первого экрана вместо старого.
и анимацию MASTODONT → DONTFRAME на первом экране переделай в том же духе, сейчас она унылая.

видео из lumina лежат в папке [путь к папке с видео], файлы V01-V05. поставь каждое на место, которое под него оставил, а трейлер в блок после первого экрана. в конце дай путь к index.html