S Skillteca
Receber por email
Explorar Categorias Coleções Newsletter
← Voltar para o catálogo

authoring-stitch-prompts

Design e Frontend Autor: joaquimscosta

Converts natural-language descriptions or UI spec files into optimized Google Stitch prompts. Use when creating, refining, or validating design directives for Google Stitch. Use when user says "create a Stitch prompt", "optimize this for Stitch", "convert this spec to a Stitch prompt", "write a UI prompt", or mentions Google Stitch prompt authoring. Follows Stitch best practices with short, direct

16estrelas
Atualizado há 4 meses
Ver no GitHub ↗ Licença: MIT

Como adicionar

/plugin marketplace add joaquimscosta/arkhe-claude-plugins

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/authoring-stitch-prompts/svg)](https://www.skillteca.com.br/skills/authoring-stitch-prompts)
#git

Skills relacionadas

Ver todas de Design e Frontend →

frontend-design

153.1k 2

Cria interfaces frontend distintas e de nível de produção com alta qualidade de design, gerando código criativo e polido e design de UI que evita a estética genérica de IA. Use para construir componentes web, páginas e aplicações, ou para estilizar/embelezar UIs web.

Design e Frontend #ai #css por anthropics

mcp-builder

153.1k

Guia para criar servidores MCP (Model Context Protocol) de alta qualidade que permitem que LLMs interajam com serviços externos por meio de ferramentas bem projetadas. Use ao construir servidores MCP para integrar APIs ou serviços externos, seja em Python (FastMCP) ou Node/TypeScript (MCP SDK).

Design e Frontend #api #llm por anthropics

webapp-testing

153.1k

Kit de ferramentas para interagir e testar aplicações web locais usando Playwright. Suporta a verificação de funcionalidades de frontend, depuração de comportamento da UI, captura de screenshots do navegador e visualização de logs do navegador.

Design e Frontend #test por anthropics

web-artifacts-builder

153.1k

Conjunto de ferramentas para criar artefatos HTML elaborados e multi-componentes para claude.ai, utilizando tecnologias web frontend modernas (React, Tailwind CSS, shadcn/ui). Use para artefatos complexos que exigem gerenciamento de estado, roteamento ou componentes shadcn/ui, não para artefatos HTML/JSX simples de arquivo único.

Design e Frontend #ai #css por anthropics

Alerta por categoria

Receba novas skills de Design e Frontend toda segunda

1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

Authoring Stitch Prompts

Quick Start

  1. Collect context – accept natural language, specs, or referenced files describing the screen/app.

1.5. Discover design context (optional) – check for design-intent/:

  • If exists: Extract Project Type, Design System from design-intent/memory/constitution.md
  • If not found: Scan codebase for framework hints (package.json)
  • Falls back gracefully to standalone mode
  • See [WORKFLOW.md](WORKFLOW.md#05-design-context-discovery-optional-enhancement) for details.
  • Parse essentials – identify app type, screen focus, layout elements, and visual cues.
  • Detect split points – analyze if input contains multiple screens or distinct intents (>2). Apply smart defaults: split if >2 screens/intents, else combine. Users can request regeneration with different approach.
  • Filter aggressively – strip ALL non-UI concerns (backend, auth, APIs, caching, error handling, performance metrics, code-level specs). Focus EXCLUSIVELY on visual layout, components, colors, typography, spacing, and interaction patterns.
  • Condense – rewrite into one atomic Stitch directive using "Design/Create/Add…" phrasing.
  • Structure output – follow the Stitch prompt template (directive sentence → bullet list → 3–6 style cues → constraints). If design context was discovered, inject project-appropriate style cues. Do NOT use multi-section headings.
  • Validate – ensure UI nouns are present, word count <250, NO technical implementation terms, and format matches EXAMPLES.md structure before returning the prompt.

Use this Skill whenever users need Stitch-ready wording, prompt refinements, or style-consistent rewrites.

File Output

Prompts are saved to feature-based directories under design-intent/google-stitch/{feature}/:

  • Feature name derived from screen/page purpose (kebab-case, semantic, concise)
  • Prompt files: prompt-v{version}.md (auto-incremented from existing versions)
  • Pre-created subdirectories: exports/ (Stitch outputs) and wireframes/ (reference mockups)
  • File composition: <!-- Layout: {Name} --> header, then --- separators between component sections (<!-- Component: {Name} -->)
  • 6-prompt Stitch limit: If >6 prompts, split into prompt-v{version}-part{N}.md files (max 6 per part)
  • Copy-paste ready: Entire file works directly in Stitch interface

See [WORKFLOW.md](WORKFLOW.md#35-generate-layout-prompt-if-detected) for detailed file composition rules, [REFERENCE.md](REFERENCE.md) for Stitch best practices, and [EXAMPLES.md](EXAMPLES.md) for worked examples (Examples 14–16 cover multi-component and split scenarios).

Input Types

Accepted

  • Natural-language descriptions (single screen or short flows)
  • Markdown/YAML/JSON specs (/specs/dashboard.md)
  • Revision directives ("move KPI cards above chart", "convert to French", "change button to green")
  • References to uploaded wireframes or images
  • Language conversion requests ("switch to Spanish", "German version")
  • Structured input from /prompt command (see below)

Structured Input (from /prompt command)

When invoked via /prompt, the skill may receive pre-parsed preferences (Brief, Components, Style, Structure). Parse structured fields and apply style mappings before proceeding. See [WORKFLOW.md](WORKFLOW.md#08-parse-structured-input-if-present) for field handling and style mapping tables.

All input detail levels are valid — Stitch infers patterns from minimal descriptions. Use adjectives to convey vibe when details are sparse ("vibrant fitness app", "minimal meditation app").

Workflow Overview

High-level loop: parse → condense → format → validate. Detailed branching logic, including cue extraction and revision handling, lives in [WORKFLOW.md](WORKFLOW.md).

Output Structure

Prompts must follow the Stitch-friendly template:

  • One-sentence description of the app/screen + primary intent.
  • Bullet list (3–6 items) covering layout, components, or flows.
  • Visual style cues (palette, typography, density, tone).
  • Optional behavior/constraint reminders (responsiveness, export format).

Reference [templates/authoring-stitch-prompts-template.md](templates/authoring-stitch-prompts-template.md) for wording patterns and [templates/layout-prompt-template.md](templates/layout-prompt-template.md) for layout/foundation prompts.

Examples

Representative before/after samples (SaaS dashboard, banking app, iterative edits, spec conversions) are in [EXAMPLES.md](EXAMPLES.md). Use them to mirror tone and formatting; keep this file lean by not re-embedding the full transcripts here.

Design Context Integration

When design-intent/ exists in the project, the skill enhances style cues with project context:

  • Project Type influences tone (e.g., "enterprise-grade" for Enterprise, "friendly, approachable" for Consumer)
  • Design System names appear in style cues (e.g., "Fluent UI styling", "Material Design patterns")

The skill does NOT inject specific tokens (hex colors, spacing values)—only high-level descriptors that help Stitch generate contextually appropriate designs.

Fallback behavior: If design-intent/ is not found, the skill works standalone using default style cues.

See [WORKFLOW.md](WORKFLOW.md#05-design-context-discovery-optional-enhancement) for discovery logic and [WORKFLOW.md](WORKFLOW.md#37-inject-design-context-into-style-cues) for injection rules.

MCP Integration (Optional)

When @_davideast/stitch-mcp is configured, prompts can be sent directly to Stitch for generation after authoring.

With MCP: Author prompt -> Generate screens -> Fetch images/code Without MCP: Author prompt -> Copy to Stitch manually

After authoring, offer: "Stitch MCP is available. Generate screens now? [Yes / No / Just save prompts]"

If accepted, invoke the generating-stitch-screens skill with the authored prompt file.

Common Issues

  • Prompts too verbose – Re-run formatting with the template and trim narration. See [TROUBLESHOOTING.md](TROUBLESHOOTING.md#prompts-are-too-verbose).
  • Missing style cues – Derive palette/typography keywords from user input or prior session context before finalizing. See [TROUBLESHOOTING.md](TROUBLESHOOTING.md#missing-style-cues).
  • Multi-goal briefs – Split into multiple prompts; re-emphasize Stitch's atomic focus. See [TROUBLESHOOTING.md](TROUBLESHOOTING.md#multi-screen-prompts).

Reference Files

For advanced usage:

  • [REFERENCE.md](REFERENCE.md) — Overview of Stitch best practices
  • [EXAMPLES.md](EXAMPLES.md) — Sample transformations
  • [WORKFLOW.md](WORKFLOW.md) — Detailed processing loop
  • [TROUBLESHOOTING.md](TROUBLESHOOTING.md) — Error-handling guidance
  • [templates/authoring-stitch-prompts-template.md](templates/authoring-stitch-prompts-template.md) — Output format template
Compartilhar X LinkedIn