stitch-design-tasteавтор Leonxlnx

Stitch Design Taste Skill.

Скилл Claude Code и Codex для работы с брендом и дизайн-системами: создаёт DESIGN.md для Google Stitch с акцентом на визуальную уникальность.

Бренд и дизайн-системы
DESIGN.md

Скачать OpenDesign Инструкция по использованию

Leonxlnx/taste-skill · skills/stitch-skill/SKILL.mdSKILL.md

--- name: stitch-design-taste description: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance. --- ## Prerequisites ## The Goal ## Analysis & Synthesis Instructions ## Output Format (DESIGN.md Structure) ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

Метаданные и заголовки разделов из исходного файла от 14.09.2026 · 11 732 символа полностью

01 Что делает

Что делает skill stitch-design-taste в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Этот skill генерирует файлы DESIGN.md, оптимизированные для генерации экранов Google Stitch. Он переводит директивы фронтенд-инжиниринга против «слопа» на native семантический язык дизайна Stitch — описательные правила на естественном языке в сочетании с точными значениями, которые ИИ-агент Stitch способен интерпретировать. Файл служит единым источником истины для промптинга Stitch с целью генерации премиальных, неординарных интерфейсов.

Он вводит строгие правила типографики, откалиброванные цветовые палитры, асимметричные макеты, постоянное микро-движение и аппаратно-ускоренную производительность. Skill включает явные списки антипаттернов, запрещающие клише ИИ-дизайна, такие как шрифт Inter, неоновые свечения, центрированные hero-секции и типовой заполняющий контент.

Что он выдаёт

Файл DESIGN.md с семью структурированными разделами: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles, Motion & Interaction и Anti-Patterns

Смотрите пример запроса ↗

Как это работает

01
Определите атмосферу
Оцените замысел целевого проекта с помощью выразительных прилагательных из спектра вкуса по трём измерениям: плотность (1–10, от Airy до Cockpit Dense), вариативность (1–10, от Symmetric до Chaotic) и движение (1–10, от Static до Cinematic).
02
Составьте цветовую палитру
Для каждого цвета укажите описательное название, hex-код и функциональную роль. Максимум один акцентный цвет с насыщенностью ниже 80%.
03
Определите hero-секцию
Создавайте яркие первые впечатления с помощью встроенной в текст типографики изображений (небольшие фото, вставленные между словами на высоте шрифта), асимметричных структур при вариативности выше 4 и максимум одного основного CTA.
04
Опишите стилизацию компонентов
Укажите форму, цвет, глубину тени и поведение при взаимодействии для кнопок, карточек, полей ввода, состояний загрузки и состояний ошибок.
05
Закодируйте философию движения
Определите значения по умолчанию для пружинной физики (жёсткость: 100, затухание: 20), постоянные микро-взаимодействия для активных компонентов, ступенчатую оркестровку для появления списков и ограничения производительности, допускающие анимацию только transform и opacity.

02 Определите своё применение

Когда использовать Skill stitch-design-taste

Используйте скилл stitch-design-taste в Claude Code или Codex, когда задача — работа над брендом и дизайн-системой такого рода. Область применения и ограничения ниже взяты из файла самого скилла.

Хорошо подходит

Генерация файлов DESIGN.md, оптимизированных для генерации экранов Google Stitch, кодирующих премиальные, неординарные стандарты дизайна
Проекты, требующие строгого соблюдения антипаттернов, чтобы избежать клише ИИ-дизайна, таких как неоновые свечения, шрифт Inter и типовой заполняющий контент
Высокоплотные дашборды или интерфейсы в стиле кокпита, требующие моноширинных цифр и компактной сканируемости

Знайте границы

Проекты, требующие шрифт Inter или системные шрифты общего назначения для премиальных контекстов
Интерфейсы с центрированными hero-макетами при variance выше 4 или с трёхколоночными макетами карточек равной ширины
Дизайны с эмодзи, неоновыми внешними свечениями теней, кастомными курсорами мыши или клише AI-копирайтинга, такими как Elevate, Seamless, Unleash

Что предоставить

Целевое намерение проектаПонимание того, является ли проект художественной галереей, повседневным приложением, интерфейсом кабины управления или другой категорией, для оценки подходящей плотности, variance и диапазона движения.

03 Внутри скилла

Правила, которые skill stitch-design-taste задаёт Claude Code и Codex

5 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задает агенту, — та часть файла, которая меняет результат.

Базовая атмосфера по умолчанию
Базовое значение по умолчанию для новых проектов — Variance 8, Motion 6, Density 4. Эти значения должны динамически адаптироваться на основе описания vibe пользователя.
Никаких центрированных hero-секций при variance выше 4
Центрированные Hero-макеты запрещены, когда variance превышает 4. Вместо этого используйте макеты Split Screen, Left-Aligned или Asymmetric Whitespace.
Мобильный viewport использует min-h-[100dvh]
Секции на всю высоту должны использовать min-h-[100dvh], никогда не h-screen, чтобы избежать катастрофического поведения адресной строки в iOS Safari.
Минимальная область касания 44px
Все интерактивные элементы должны иметь минимальную область касания 44px для обеспечения доступности и удобства использования на мобильных устройствах.
Никаких перекрывающихся элементов
Текст никогда не должен перекрывать изображения или другой текст. Каждый элемент занимает собственную чистую пространственную зону с чётким пространственным разделением. Наложение контента с абсолютным позиционированием не допускается.

04 Применение

Установите stitch-design-taste в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте stitch-design-taste в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill stitch-design-taste

Общая форма CLI skills для skills/stitch-skill/SKILL.md; репозиторий может документировать свой собственный путь.

Дайте Skill первую рабочую задачу по бренду и дизайн-системе

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Generate a DESIGN.md for [project name], a high-density financial dashboard targeting professional traders. The atmosphere should feel like a cockpit interface — variance 8, motion 6, density 9. Use a single cool accent (cyan or sky blue) and ban all generic patterns. All numbers must be monospace, and the hero section should use asymmetric layout with inline image typography showing [trading floor photos] between headline words.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Проверьте, что все записи цветов включают описательное имя, hex-код и функциональную роль, с максимум одним акцентным цветом при насыщенности ниже 80%
Убедитесь, что список анти-паттернов явно запрещает шрифт Inter, стандартные serif-шрифты, чистый чёрный, неоновые свечения, эмодзи и клише AI-копирайтинга
Убедитесь, что правила мобильной адаптивности требуют сворачивания в одну колонку ниже 768px, минимальные области касания 44px и min-h-[100dvh] для секций на всю высоту

В OpenDesign импортируйте stitch-design-taste по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Ветка main
Файл skill: skills/stitch-skill/SKILL.md Контрольная сумма содержимого записана при верификации; коммит ccbc156
License: MIT Из LICENSE. Почти идентичная копия taste-design от Google Stitch; версия Google не учитывается отдельно.
Звёзды репозитория: 86 946 Снимок GitHub от 2026-09-14 для всего репозитория Leonxlnx/taste-skill, который содержит 11 skills в этом каталоге. Это не рейтинг и не счётчик использования для stitch-design-taste.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

ОбзорОпределяет назначение skill: генерация файлов DESIGN.md для Stitch с использованием семантического языка дизайна и стандартов против типовых решений.
Предварительные требованияПеречисляет требования к доступу: Google Stitch через labs.google/stitch и опционально Stitch MCP Server для программной интеграции.
ЦельОписывает семь целей кодирования: визуальная атмосфера, калибровка цвета, типографическая архитектура, поведение компонентов, принципы макета, философия движения, анти-паттерны.
1. Определите атмосферуИспользуйте выразительные прилагательные в диапазонах плотности, variance и движения с базовыми значениями по умолчанию Variance 8, Motion 6, Density 4.
2. Составьте цветовую палитруУкажите описательное название, hex-код и функциональную роль, не более одного акцентного цвета с насыщенностью ниже 80%, неоновая эстетика запрещена.
3. Установите правила типографикиЗапретите Inter для премиальных контекстов и типовые serif-шрифты; используйте характерные шрифты с иерархией через насыщенность и цвет, а не размер.
4. Определите структуру героического блокаСоздавайте яркое первое впечатление с помощью инлайн-типографики на изображениях, асимметричных структур при variance выше 4 и не более одного CTA.
5. Опишите стилизацию компонентовЗадайте форму, цвет, глубину тени и поведение при взаимодействии; карточки использовать только тогда, когда возвышение подчёркивает иерархию.
6. Определите принципы вёрсткиНикаких перекрывающихся элементов, центрированные героические блоки запрещены при variance выше 4, CSS Grid вместо Flexbox, ограничение max-width, min-h-[100dvh] для полной высоты.
7. Определите правила адаптивностиMobile-first сворачивание в одну колонку ниже 768px, области касания 44px, масштабирование типографики через clamp, инлайн-изображения складываются в столбик на мобильных.
8. Зафиксируйте философию движенияПружинная физика по умолчанию: stiffness 100, damping 20, постоянные микровзаимодействия, ступенчатая оркестровка, только аппаратно-ускоренные трансформации.
9. Перечислите антипаттерны (признаки AI)Явные правила «НИКОГДА»: без эмодзи, Inter, типовых serif-шрифтов, чистого чёрного, неоновых свечений, перекрывающихся элементов, AI-клише, текста-заполнителя.

Собственное описание skill

«Skill семантической дизайн-системы для Google Stitch. Генерирует понятные агентам файлы DESIGN.md, которые обеспечивают премиальные, негенерические стандарты UI — строгая типографика, калиброванный цвет, асимметричные раскладки, постоянная микроанимация и аппаратно-ускоренная производительность.»

Описание из front-matter файла SKILL.md. Полный файл содержит около 11 732 символов. Прочитайте полный файл на GitHub.

Stitch Design Taste

Запустите stitch-design-taste на реальной задаче по бренду и дизайн-системе.

Скачайте OpenDesign, импортируйте stitch-design-taste по ссылке на SKILL.md, вставьте промпт выше и ознакомьтесь с планом перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/Leonxlnx/taste-skill --skill stitch-design-taste