stitch-ui-design
Создавайте UI-дизайны с помощью Google Stitch
Этот навык помогает пользователям создавать эффективные промты для инструмента Google Stitch AI UI design. Он предоставляет лучшие практики, примеры промтов и продвинутые техники для генерации профессиональных веб- и мобильных интерфейсов.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «stitch-ui-design». Как создать дашборд с помощью Stitch?
Ожидаемый результат:
Чтобы создать дашборд с помощью Google Stitch, следуйте этим принципам:
1. Будьте конкретны: вместо 'Создать дашборд' используйте 'Дашборд для участников с сеткой модулей курса, панелью отслеживания прогресса и боковой панелью ленты сообщества в фиолетовой теме и макетом на основе карточек'
2. Определите визуальный стиль: включите цветовые схемы, эстетику дизайна
3. Перечислите компоненты: укажите каждый необходимый UI-элемент
Пример промта: 'Аналитический дашборд с KPI-карточками, линейным графиком для трендов, выбором диапазона дат и кнопкой экспорта. Используйте современную тёмную тему с акцентными цветами для визуализации данных.'
Использование «stitch-ui-design». Что следует включать в промты для мобильных приложений?
Ожидаемый результат:
Для мобильных приложений указывайте:
- Платформа: iOS, Android или кроссплатформенное
- Размеры экрана и адаптивное поведение
- Паттерн навигации (таб-бар, drawer, стек)
- Нативные компоненты для платформы
- Удобные для касания размеры и отступы
Пример: 'Экран входа в мобильное приложение (в стиле iOS) с полями email/пароль, кнопками социального входа (Google, Apple) и ссылкой 'Забыли пароль'. Используйте iOS human interface guidelines со шрифтом SF Pro.'
Аудит безопасности
БезопасноThis is a documentation-only skill containing markdown files with guidance for Google Stitch AI UI design tool. All static analyzer findings are false positives: backticks are markdown code formatting, not shell execution; cryptographic algorithm flags are documentation text misinterpreted by scanner. No executable code, network requests, or dangerous patterns present.
Проблемы высокого риска (3)
Оценка качества
Что вы можете построить
Изучите основы промтов для Stitch
Для новых пользователей, желающих понять, как писать эффективные промты для Google Stitch для генерации своих первых UI-дизайнов
Улучшите качество результатов дизайна
Для пользователей, которые пробовали Stitch, но получают общие результаты и хотят изучить конкретные техники для получения лучших, более персонализированных дизайнов
Создание многостраничных потоков приложений
Для пользователей, создающих полные приложения, которым нужны рекомендации по промтам для нескольких связанных экранов и адаптивных макетов
Попробуйте эти промпты
Create a [component type] with [specific features], using [color scheme] theme and [layout style] design.
Design an e-commerce product page with hero image gallery, add-to-cart button, reviews section, and related products carousel. Use clean minimalist design with [accent color] accents and generous white space.
Design a [screen name] screen for a [app type] mobile app. Include [list of features and components]. Use [design style] with [color palette]. Add [interactive states] and [navigation elements].
Create a [app type] app with: - [screen 1] with [features] - [screen 2] with [features] - [screen 3] with [features] Use [design system] style and ensure responsive behavior across mobile and desktop.
Лучшие практики
- Всегда указывайте визуальные детали: цвета, типографику, отступы и стиль дизайна, чтобы избежать общих AI-результатов
- Перечисляйте каждый экран явно для многостраничных приложений — Stitch подтвердит перед генерацией нескольких дизайнов
- Включайте функциональные требования: действия кнопок, валидация форм, паттерны навигации и пользовательские потоки
Избегать
- Использование расплывчатых промтов вроде 'Создай красивую страницу входа' — приводит к общим, непригодным дизайнам
- Забывчивость указать платформу (мобильное или десктоп), что ведёт к неправильным ожиданиям макета
- Неопределение визуального стиля, из-за чего AI выдаёт случайную или несогласованную эстетику