Communitygithub.com

aubarcito48/portfolio

Gere novas telas a partir de prompts de texto ou imagens, edite telas existentes com prompts e tokens de design system, e gere variantes de design usando o Stitch MCP. Inclui pipeline de aprimoramento de prompts, mapeamentos de design, terminologia profissional de UI/UX, tokens de design e capacidades de tema.

O que é portfolio?

Esta skill automatiza todo o ciclo de design de UI utilizando o Stitch MCP, permitindo criar telas novas a partir de descrições textuais ou imagens, editar telas existentes com comandos precisos e gerar variações de layout, cores e conteúdo. O diferencial é o pipeline de aprimoramento de prompts, que analisa o projeto, identifica o design system ativo (ou orienta a criação dele) e substitui termos vagos por terminologia profissional de UI/UX, garantindo que nunca haja vazamento de tokens de design nos prompts de geração – cores, fontes e arredondamentos são aplicados exclusivamente a nível de projeto pelo gerenciador de design system. A skill suporta os padrões Claude Code, Cursor e Codex, e organiza o fluxo em modos distintos: geração a partir de texto, a partir de imagem, edição e geração de variantes. Para cada modo, ela orienta a identificar o projeto correto, chamar as ferramentas Stitch apropriadas (generate_screen_from_text, edit_screens, generate_variants), baixar os ativos gerados (HTML e screenshots) para o diretório .stitch/designs, e sempre apresentar o feedback textual com sugestões de outputComponents ao usuário. Ao final, recomenda iterações refinadas via edições pontuais em vez de regenerações completas.

Funciona com~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/aubarcito48/portfolio/tree/HEAD/.agents/skills/stitch-generate-design
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Gerar Design

Crie novas telas de design a partir de descrições de texto, imagens ou mockups, edite telas existentes com prompts e tokens de design system, e gere variações de design usando Stitch MCP.

[!NOTE] Consulte seu prompt de sistema para instruções sobre como lidar com prefixos de ferramentas MCP para todas as ferramentas mencionadas nesta skill (ex.: list_projects, generate_screen_from_text, edit_screens).

🎨 Pipeline de Aprimoramento de Prompt

Antes de chamar qualquer ferramenta de geração ou edição do Stitch, você DEVE aprimorar o prompt do usuário.

1. Analisar Contexto

  • Projeto: Use list_projects para encontrar o projectId correto. Se nenhum projeto adequado existir, crie um usando create_project.
  • Design System: Verifique se existe um design system para o projeto através de list_design_systems. Se existir, os tokens de design (cores, fontes, arredondamento) já estão aplicados no nível do projeto — NÃO inclua nenhuma instrução de cor, fonte ou tema no prompt de geração. Se não existir, delegue primeiro à skill manage-design-system antes de gerar telas.

2. Refinar Terminologia de UI/UX

Consulte Mapeamentos de Design para substituir termos vagos.

  • Vago: "Faça um cabeçalho bonito"
  • Profissional: "Barra de navegação fixa com efeito vidro fosco e logotipo centralizado"

Use Palavras-chave de Prompt para nomes de componentes, paletas de adjetivos, papéis de cor e descrições de formas.

3. Estruturar o Prompt Final

Formate o prompt aprimorado para o Stitch. Concentre-se exclusivamente em layout, conteúdo e estrutura — nunca inclua cores, fontes ou instruções de tema (estes são tratados pela skill manage-design-system no nível do projeto).

Para novas telas, use este template:

[Propósito geral e intenção do usuário para a página]

**PLATAFORMA:** [Web/Mobile], [Desktop/Mobile]-first

**ESTRUTURA DA PÁGINA:**
1. **Cabeçalho:** [Descrição da navegação e branding]
2. **Seção Hero:** [Título, subtítulo e CTA principal]
3. **Área de Conteúdo Principal:** [Detalhamento dos componentes]
4. **Rodapé:** [Links e informações de direitos autorais]

Para edições, seja específico sobre o que mudar:

  • Localização: "Altere o [botão principal] na [seção hero]..."
  • Visuais: "...para um azul mais escuro (#004080) e adicione uma sombra sutil."
  • Estrutura: "Adicione um botão secundário ao lado do principal com o texto 'Saiba Mais'."

[!CAUTION] NÃO inclua códigos hexadecimais, nomes de fontes, paletas de cores, valores de arredondamento ou quaisquer tokens de design system em um prompt de geração. Eles são aplicados no nível do projeto pela skill manage-design-system e entrarão em conflito se duplicados. (Para prompts de edição, códigos hexadecimais são aceitáveis para ajustes precisos de cor.)

4. Apresentar Insights da IA

Após qualquer chamada de ferramenta, sempre exiba os outputComponents (Descrição em Texto e Sugestões) para o usuário.

Veja examples/enhanced-prompt.md para um exemplo completo de antes/depois do aprimoramento de prompt.

Passos

Determinar o Modo

Decida qual fluxo usar baseado na solicitação do usuário:

  • Usuário quer criar a partir de uma descrição de texto → Fluxo Gerar a partir de Texto
  • Usuário fornece uma imagem, captura de tela ou mockup → Fluxo Gerar a partir de Imagem
  • Usuário quer modificar uma tela existente → Fluxo Editar
  • Usuário quer variações de layout/cor/conteúdo → Fluxo Gerar Variantes

Fluxo Gerar a partir de Texto (Nova Tela)

1. Aprimorar o Prompt do Usuário

Aplique o Pipeline de Aprimoramento de Prompt acima.

2. Identificar o Projeto

Use list_projects para encontrar o projectId correto se ainda não for conhecido.

3. Gerar a Tela

Chame a ferramenta generate_screen_from_text com o prompt aprimorado e o designSystem ID (se encontrado no Passo 1).

{
  "projectId": "...",
  "prompt": "[Seu Prompt Aprimorado]",
  "designSystem": "assets/...", // Opcional: Passe se encontrado no Passo 1
  "deviceType": "DESKTOP"  // Opções: MOBILE, DESKTOP, TABLET
}

4. Apresentar Feedback da IA

Sempre mostre a descrição em texto e sugestões de outputComponents para o usuário.

5. Baixar Ativos de Design

Após a geração, baixe os URLs de HTML e screenshot de outputComponents para o diretório .stitch/designs.

  • Nomeação: Use o ID da tela ou um slug descritivo para o nome do arquivo.
  • Ferramentas: Use curl -o através de run_command ou similar.
  • Diretório: Garanta que .stitch/designs exista.

6. Revisar e Refinar

  • Se o resultado não estiver exatamente como esperado, continue com o fluxo Editar para fazer ajustes direcionados.
  • NÃO regenere do zero a menos que o layout fundamental esteja errado.

Fluxo Gerar a partir de Imagem (Imagem/Mockup → Design)

Use este fluxo quando o usuário fornecer uma imagem, captura de tela ou mockup de design para recriar no Stitch.

1. Identificar o Projeto

Use list_projects para encontrar o projectId correto. Se nenhum projeto adequado existir, crie um usando create_project.

2. Fazer Upload da Imagem

Delegue à skill upload-to-stitch para fazer upload da imagem para o projeto. Isso cria uma nova tela com a imagem como seu conteúdo.

3. Refinar com Edição

Após o upload, use list_screens para encontrar o screenId recém-criado, então chame edit_screens com um prompt descritivo para refinar o design:

{
  "projectId": "...",
  "selectedScreenIds": ["<uploaded-screen-id>"],
  "prompt": "[Descreva o que ajustar, aprimorar ou recriar deste mockup]"
}

[!TIP] Para melhores resultados, descreva a intenção por trás da imagem em vez de apenas dizer "faça parecido com isso". Por exemplo: "Este é um mockup de painel — recrie-o com uma tabela de dados adequada, navegação lateral e widgets de gráfico."

4. Apresentar Feedback da IA

Sempre mostre a descrição em texto e sugestões de outputComponents para o usuário.

5. Baixar Ativos de Design

Baixe os URLs de HTML e screenshot de outputComponents para o diretório .stitch/designs.

  • Nomeação: Use o ID da tela ou um slug descritivo para o nome do arquivo.
  • Ferramentas: Use curl -o através de run_command ou similar.
  • Diretório: Garanta que .stitch/designs exista.

Fluxo Editar (Modificar Tela Existente)

1. Identificar a Tela

Use list_screens ou get_screen para encontrar o projectId e screenId corretos.

2. Formular o Prompt de Edição

Aplique o Pipeline de Aprimoramento de Prompt, focando na especificidade:

  • Localização: "Altere a cor do [botão principal] na [seção hero]..."
  • Visuais: "...para um azul mais escuro (#004080) e adicione uma sombra sutil."
  • Estrutura: "Adicione um botão secundário ao lado do principal com o texto 'Saiba Mais'."

3. Aplicar a Edição

Chame a ferramenta edit_screens.

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Seu prompt de edição direcionado]"
}

4. Apresentar Feedback da IA

Sempre mostre a descrição em texto e sugestões de outputComponents para o usuário.

5. Baixar Ativos de Design

Após a edição, baixe os URLs atualizados de HTML e screenshot de outputComponents para o diretório .stitch/designs, sobrescrevendo versões anteriores para garantir que os arquivos locais reflitam as edições mais recentes.

  • Nomeação: Use o ID da tela ou um slug descritivo para o nome do arquivo.
  • Ferramentas: Use curl -o através de run_command ou similar.
  • Diretório: Garanta que .stitch/designs exista.

6. Atualizar Metadados do Projeto

Após baixar os ativos, atualize .stitch/metadata.json para refletir quaisquer alterações (ex.: títulos de tela atualizados ou novos IDs de tela da edição). O arquivo de metadados rastreia todas as telas, seus tipos de dispositivo e informações do design system. Veja o examples/metadata.json da skill manage-design-system para o formato.

7. Verificar e Repetir

  • Verifique a tela de saída para confirmar se as alterações foram aplicadas corretamente.
  • Se mais refinamento for necessário, repita o fluxo de edição com um novo prompt específico.

Fluxo Gerar Variantes (Explorar Variações)

Use este fluxo quando o usuário quiser explorar layouts alternativos, esquemas de cores ou variações de conteúdo de uma tela existente.

1. Identificar a Tela

Use list_screens ou get_screen para encontrar o projectId e screenId corretos.

2. Configurar Opções de Variante

Chame a ferramenta generate_variants com as opções apropriadas:

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Descreva a direção para as variantes]",
  "variantOptions": {
    "variantCount": 3,
    "creativeRange": "EXPLORE",
    "aspects": ["LAYOUT", "COLOR_SCHEME"]
  }
}

Opções de Variante:

  • variantCount: 1–5 variantes (padrão: 3)
  • creativeRange: REFINE (sutil), EXPLORE (equilibrado) ou REIMAGINE (radical)
  • aspects: Foco em dimensões específicas — LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT, ou deixe vazio para todas

3. Apresentar Feedback da IA

Sempre mostre a descrição em texto e sugestões de outputComponents para o usuário.

4. Baixar Ativos de Design

Baixe os URLs de HTML e screenshot das variantes de outputComponents para o diretório .stitch/designs.

  • Nomeação: Use o ID da tela ou um slug descritivo para o nome do arquivo.
  • Ferramentas: Use curl -o através de run_command ou similar.
  • Diretório: Garanta que .stitch/designs exista.

💡 Dicas

  • Seja estrutural: Divida a página em cabeçalho, hero, recursos e rodapé no seu prompt.
  • Conteúdo primeiro: Descreva o que cada seção contém (texto, imagens, CTAs) em vez de como ela parece.
  • Polimento Iterativo: Prefira edição para ajustes direcionados em vez de regeneração completa.
  • Sem vazamento de tema: Nunca coloque códigos hexadecimais, nomes de fontes ou papéis de cor em um prompt de geração — o design system cuida de todo o estilo visual.
  • Especifique interações: Mencione estados de hover, animações e comportamento de clique em vez de estilo visual.
  • Mantenha edições focadas: Uma edição de cada vez é muitas vezes melhor que uma longa lista de mudanças.
  • Referencie componentes: Use termos profissionais como "barra de navegação", "seção hero", "rodapé", "grade de cartões".
  • Cores precisas em edições: Use códigos hexadecimais para correspondência exata de cores ao editar telas existentes.

📚 Referências

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

aubarcito48/portfolio

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

aubarcito48/portfolio

>- Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.

aubarcito48/portfolio

>- Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code.

aubarcito48/portfolio

>- Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets for Stitch upload, even if the user just asks to 'save the HTML' or 'mock the view'.

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community