Prompts de sites para Stitch: SaaS e portfólios

Dar uma tarefa de site específica ao Stitch

Defina público, objetivo, ordem das seções e ação principal antes da decoração. Forneça textos reais e mídias autorizadas, identificando placeholders. Escolha landing page, portfólio ou tela complementar para não misturar jornadas diferentes.

Prompts SaaS que explicam a oferta

Explique problema, exemplo do produto e sequência de uso com funções e condições verificadas. Fieldnote usa uma nota fictícia e um link para o processo, sem depoimentos inventados, números de clientes ou cadastro funcional.

Prompts de portfólio com contexto de projeto

Descreva papel, restrição e resultado ilustrativo em cada projeto. Mantenha texto e imagem próximos no celular e identifique mídias provisórias. Mira é um portfólio de site fictício, não currículo, template do Notion ou recomendação real.

Ajustar o celular e verificar a implementação

Peça a alteração de uma seção e preserve a direção nas demais. Confira ordem de leitura, quebra de linha e rótulos. Após levar o conceito ao projeto, teste navegação, formulários, tamanhos e conteúdo. Um conceito visual não comprova funcionamento em produção.

Exercícios originais para adaptar

Estes exemplos originais da Neruve permanecem em inglês. São entradas propostas, não resultados testados nem prompts de templates pagos. Substitua os dados fictícios antes de usar.

Design a website concept for Fieldnote, a fictional research-notes workspace.
Audience: small product teams. The page explains collect → compare → decide.
Create a warm-paper and ink direction with one realistic, clearly fictional note.
Sections: compact introduction, note specimen, three-step workflow and a final
link to the workflow. The primary action reads “Explore the workflow”.
Keep typography and button treatments consistent across the screens.
Create desktop and narrow-screen variants with readable copy and no horizontal
overflow. Do not add signup forms, prices, logos, testimonials or user counts.
This is a visual concept. Identify which interactions need implementation later.

Create a website concept for Mira Chen, a fictional product designer.
Show three explicitly fictional projects. Each explains role, constraint and
illustrative outcome without fabricated business metrics or employer logos.
Use a restrained warm-neutral direction, clear project hierarchy and readable
image captions. The primary action is “View selected work”.
Show desktop and narrow-screen layouts; on mobile, keep project details near
their corresponding image. Use placeholder media labelled as placeholder.
Do not invent real contact details, awards or working application forms.

Refine only the mobile project section in this concept.
Keep the selected palette, typography, project order and desktop direction.
At 390 px, stack each project image, title and supporting text in reading order.
Keep controls easy to distinguish from captions. Do not shorten the project facts
or add new sections. Show the changed section and list what still needs to be
implemented and checked in the exported website.

Exercício real: Fieldnote com Codex

Fieldnote inclui o briefing original, o HTML do Codex sem alterações e verificações em desktop e celular. Nenhum Skill frontend-design foi fornecido; não é um teste do ChatGPT ou do Claude Design.

Perguntas frequentes

Explore designs e os prompts associados

O catálogo público da Neruve oferece designs de sites, prompts associados disponíveis e um diretório de Skills. As prévias interativas não exigem login; os prompts seguem as permissões do item e do plano. Este fluxo usa sua própria ferramenta de desenvolvimento e não exige um gerador público de sites da Neruve.

• Explorar biblioteca
• Landing pages HTML para SaaS e prompts
• Templates de sites de portfólio e prompts de design

Referências oficiais

• Google · Stitch
• Google · DESIGN.md

Ferramentas e skills externas pertencem aos seus autores. Os links são referências, sem indicar parceria ou acesso incluído.