Все проекты
Product · Full-Cycle · 2026

Mostik

Кроссплатформенное приложение-доска для визуального планирования и сбора референсов — объединяет свободу бесконечного холста (как в Miro) с мощным текстовым редактором (как в Notion).

Full-CycleProduct DesignVibe-Coding
Перейти на сайт
Mostik
01

Проблема

Референсы, идеи и заметки для проекта обычно разбросаны по десятку мест: скриншоты в Загрузках, ссылки в закладках, заметки в Notion, картинки в отдельной папке. Собрать всё в одну понятную картину и удержать её перед глазами — отдельная рутинная задача, которая сама по себе тратит время до того, как начинается настоящая работа.

02

Ресёрч

Разобрал, чем реально пользуются дизайнеры, исследователи и просто люди, планирующие сложные проекты (от ремонта до свадьбы): Miro и Figma дают свободу бесконечного холста, но плохи для текста и структурированных заметок; Notion — наоборот, силён в тексте, но неудобен для визуального сопоставления референсов. Ни один инструмент не закрывал оба сценария сразу.

03

Гипотеза

Если объединить бесконечный визуальный холст с полноценным Rich-Text редактором в одном приложении — и сделать его локальным (без обязательной привязки к облаку), можно закрыть разрыв между «свободной доской» и «структурированными заметками» для аудитории, которой одинаково важны и картинки, и текст: дизайнеров, исследователей, обычных людей, планирующих сложные проекты.

04

Дизайн

Я — основатель и автор дизайна проекта: детально прописывал техническое задание и архитектурные решения (от физики объектов на холсте до алгоритма извлечения цветовой палитры), проектировал интерфейс и реализовывал его в vibe-coding-режиме. Спроектировал кинематику объектов без Z-index — картинки и видео физически не могут перекрываться, а при попытке бросить элемент в плотную группу он мягко «отскакивает» на свободное место рядом, вместо каскадного раздвигания соседей. Детальный просмотр (Detail View) открывается плавной spring-анимацией от карточки на холсте до полноэкранного состояния, с трёхколоночной раскладкой: палитра слева (автоматически извлечённая из изображения), оригинал по центру, метаданные справа. Для группировки референсов — стопки и папки: двойной клик по папке открывает водопадную сетку файлов, стопка из нескольких элементов сворачивается в компактную колоду с индикатором количества.

Что внутри

Ключевые механики

Бесконечный холст без Z-index

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

Detail View с авто-палитрой

Полноэкранный просмотр с hero-анимацией от карточки на холсте: цветовая палитра слева (hue-bin алгоритм извлечения по 12 секторам тона), оригинал по центру, метаданные справа.

Стопки и папки

Быстрая группировка референсов — стопка сворачивается в компактную колоду с индикатором количества, папка открывает водопадную сетку файлов по двойному клику.

Rich-Text заметки поверх референсов

Notion-подобный текстовый редактор прямо на карточках — заголовок, форматирование, чтобы держать мысли рядом с визуальным материалом, а не в отдельном приложении.

Интерфейс

Скриншоты

Mostik — скриншот 1
Mostik — скриншот 2
Mostik — скриншот 3
Mostik — скриншот 4
Технологии
React + TypeScriptTauri (Rust)ZustandFramer Motion
Следующий проект

Promty