design-md

Stitch DESIGN.md Skill предназначен для анализа проекта Stitch и синтеза семантической дизайн-системы в документ DESIGN.md. Такой документ описывается как источник истины для последующих prompt-запросов Stitch: он фиксирует визуальный язык проекта и помогает генерировать новые экраны, согласованные с уже существующим стилем. Исходник подчёркивает, что Stitch интерпретирует дизайн через Visual Descriptions и конкретные значения цветов, поэтому результат должен быть не общей оценкой интерфейса, а структурированным описанием атмосферы, палитры, типографики, компонентов, геометрии, глубины и принципов layout. Для работы нужны доступ к Stitch MCP Server, проект Stitch хотя бы с одним спроектированным экраном и Effective Prompting Guide. Если namespace MCP неизвестен, workflow начинается с list_tools: сначала находится фактический prefix, затем он используется для следующих вызовов. Без переданного Project ID skill предлагает вызвать list_projects с filter view=owned, выбрать проект по названию или URL и извлечь числовой идентификатор из поля name вида projects/{id}. Если Screen ID не указан, выполняется list_screens с projectId, после чего экран выбирается по title, а числовой screen ID берётся из его name. Получение исходных материалов выполняется через get_screen с projectId и screenId. Ожидаемый объект содержит ссылки screenshot.downloadUrl и htmlCode.downloadUrl, размеры width и height, deviceType и проектные сведения, включая designTheme с цветовым режимом, шрифтами, округлением, пользовательскими цветами и принципами оформления. HTML можно загрузить через web_fetch или read_url_content и разобрать на Tailwind-классы, custom CSS и повторяющиеся component patterns; screenshot предлагается использовать как визуальную опору. Отдельный get_project по полному имени projects/{id} нужен, чтобы получить project-level designTheme, design guidelines и предпочтения устройства. Синтез начинается с идентичности проекта: в DESIGN.md фиксируются Project Title и Project ID. Затем описывается атмосфера — плотность, настроение и эстетическая философия — по screenshot и HTML. Палитра должна содержать функциональные роли и точные hex-коды: например, цвет действия, фон, текст или граница получают естественное описательное имя и код, а не только слово вроде «синий». Геометрия переводится из технических CSS и Tailwind значений в понятные физические характеристики: rounded-full описывается как pill-shaped, rounded-lg — как слегка округлённые углы, rounded-none — как острые квадратные края. Структура результата состоит из пяти разделов. В Visual Theme & Atmosphere помещаются настроение и визуальная плотность. В Color Palette & Roles перечисляются цвета, hex-коды и функциональные назначения. Typography Rules описывает семейство шрифтов, веса заголовков и основного текста, а также характер letter-spacing. Component Stylings охватывает buttons, cards/containers и inputs/forms: форму, назначение цвета, фон, stroke и глубину тени. Layout Principles фиксирует whitespace strategy, отступы и выравнивание сетки. Для глубины нужно отдельно описать, плоская ли система, используются ли мягкие рассеянные тени или контрастные drop shadows. Skill требует точности и объяснения причин: нельзя заменять конкретные цвета общими названиями, пропускать hex-коды, игнорировать spacing или переписывать технические значения без перевода на язык дизайна. При этом исходный workflow зависит от Stitch MCP, доступного проекта, экрана и загружаемых материалов; сам skill не обещает получить данные при отсутствии доступа и не заменяет проверку результата дизайнером. Его назначение — собрать проверяемый DESIGN.md из реальных метаданных, screenshot и HTML, а не придумать визуальную систему без входных данных.