Аннотационно-управляемый интерфейс: как проектировать шаблоны в Figma и позволить Claude извлекать координаты

Разработчик Zinecore, приложения для создания зинов в стиле 90-х / y2k (ярко-розовый, толстые контуры, чат-пузыри, листовки riot grrrl, страницы в стиле MySpace), обнаружил, что очевидный подход — программное определение слотов для фото в коде — ограничивает каждый шаблон скучной сеткой. Обходной путь: создавать шаблоны в Figma (некоторые сгенерированы AI, затем доработаны), экспортировать как плоские PNG и рисовать цветные прямоугольники на отдельном слое. Красный для слотов фото, синий для текста. Отдайте и дизайн, и изображение с разметкой Claude.

Claude извлекает координаты, генерирует определения редактируемых областей и подключает области касания. Результат: дневная работа вместо недель на создание собственного движка макетов. Добавление нового шаблона теперь требует только дизайна и рисования прямоугольников — без изменения кода. Вся система дизайн-инструментов — это конвейер разметки.

Общая картина: дизайн «на бумаге»

Разработчик подчеркивает сдвиг в рабочем процессе:

• Вся дизайн-мышление — на бумаге, до того как Claude что-либо увидит.
• Рисуйте экраны от руки, выбирайте полную цветовую палитру, решайте иерархию шрифтов.
• Скриншотите понравившиеся приложения и отмечайте конкретные детали, которые хотите позаимствовать из каждого.
• Дайте Claude ограничения и попросите реализацию.

Противоположный подход («нарисуй мне приложение, сделай его в стиле 90-х») приводит к трем дням подгонок, пока не получится что-то всё равно шаблонное. Claude силен в точной реализации конкретного видения, но слаб в том, чтобы придумать это видение за вас. Как только вы воспринимаете дизайн как свою работу, а реализацию — как работу Claude, качество вывода резко возрастает.

Неприглядные детали

• Описывайте визуальные проблемы в терминах веса, иерархии и ритма, а не «это выглядит неудачно, исправь».
• Вставляйте hex-коды из реальных референсных фото вместо слов «теплый розовый».
• Будьте конкретны, какое приложение по интервалам вы пытаетесь имитировать — не просто называйте настроение.

Приложение (Zinecore в App Store) — конкретный результат, но метод разметки «на бумаге» — это то, что можно перенять.