스킬 stitch-ui-design

🎨

stitch-ui-design

Name: stitch-ui-design
Author: sickn33

안전

Create UI Designs with Google Stitch

This skill helps users craft effective prompts for Google Stitch AI UI design tool. It provides best practices, example prompts, and advanced techniques to generate professional web and mobile interfaces.

지원: Claude Codex Code(CC)

🥉 75 브론즈

스킬 ZIP 다운로드

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

토글을 켜고 사용 시작

테스트해 보기

"stitch-ui-design" 사용 중입니다. How do I create a dashboard with Stitch?

예상 결과:

To create a dashboard with Google Stitch, follow these principles:

1. Be Specific: Instead of 'Create a dashboard', use 'Member dashboard with course modules grid, progress tracking bar, and community feed sidebar using purple theme and card-based layout'

2. Define Visual Style: Include color schemes, design aesthetics

3. List Components: Specify each UI element needed

Example prompt: 'Analytics dashboard with KPI cards, line chart for trends, date range picker, and export button. Use modern dark theme with accent colors for data visualization.'

"stitch-ui-design" 사용 중입니다. What should I include for mobile app prompts?

예상 결과:

For mobile apps, specify:

- Platform: iOS, Android, or cross-platform
- Screen dimensions and responsive behavior
- Navigation pattern (tab bar, drawer, stack)
- Native components for the platform
- Touch-friendly sizing and spacing

Example: 'Mobile app login screen (iOS style) with email/password fields, social auth buttons (Google, Apple), and forgot password link. Use iOS human interface guidelines with SF Pro font.'

보안 감사

안전

v1 • 2/25/2026

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.

스캔된 파일

1,692

분석된 줄 수

발견 사항

총 감사 수

높은 위험 문제 (3)

False Positive: Ruby/Shell Backtick Execution

Static analyzer flagged backtick characters in markdown files as shell command execution. These are actually markdown code fences used to format example prompts, not executable code. Documentation skills contain no shell commands.

False Positive: Weak Cryptographic Algorithm

Scanner misinterpreted documentation text containing words like 'crypto', 'encrypt', or component names as actual cryptographic code. This is a documentation file with no cryptographic implementation.

False Positive: System Reconnaissance

Scanner misinterpreted benign documentation words as reconnaissance patterns. No network scanning or system probing code exists.

감사자: claude

품질 점수

아키텍처

100

유지보수성

콘텐츠

커뮤니티

보안

100

사양 준수

만들 수 있는 것

Learn Stitch Prompting Basics

New users wanting to understand how to write effective prompts for Google Stitch to generate their first UI designs

Improve Design Output Quality

Users who have tried Stitch but get generic results and want to learn specific techniques to get better, more tailored designs

Create Multi-Screen App Flows

Users building complete applications who need guidance on prompting for multiple connected screens and responsive layouts

이 프롬프트를 사용해 보세요

Basic Single Screen Prompt

Create a [component type] with [specific features], using [color scheme] theme and [layout style] design.

E-commerce Product Page

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.

Mobile App Screen

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].

Multi-Screen App Flow

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.

모범 사례

Always specify visual details: colors, typography, spacing, and design style to avoid generic AI outputs
List each screen explicitly for multi-screen apps - Stitch will confirm before generating multiple designs
Include functional requirements: button actions, form validation, navigation patterns, and user flows

피하기

Using vague prompts like 'Create a nice login page' - results in generic, unusable designs
Forgetting to specify platform (mobile vs desktop) leading to wrong layout expectations
Not defining visual style, causing AI to output random or inconsistent aesthetics

자주 묻는 질문

What is Google Stitch?

Google Stitch is an experimental AI UI generator powered by Gemini 2.5 Flash that transforms text prompts and visual references into functional UI designs for web and mobile applications.

Does this skill execute Google Stitch?

No, this skill provides prompting guidance and best practices. It does not have access to execute Google Stitch or generate designs directly.

What file formats can Stitch export to?

Google Stitch supports export to HTML/CSS, Figma, and code formats depending on the design created.

Can I create responsive designs with Stitch?

Yes, specify responsive behavior in your prompts. Describe how the design should adapt from mobile (320px) to desktop (1440px) dimensions.

How do I get better results from Stitch?

Be extremely specific in your prompts: list all components, specify colors and themes, describe layouts in detail, and include functional requirements like button actions and navigation.

Is Google Stitch free to use?

Google Stitch is currently an experimental tool available through Google Labs. Usage terms may vary; check Google Labs for current availability and pricing.

개발자 세부 정보

작성자

sickn33

라이선스

MIT

리포지토리

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/stitch-ui-design

참조

main

파일 구조

📁 references/

📄 advanced-techniques.md

📄 prompt-examples.md

📄 README.md

📄 SKILL.md