102.3K+Baixar
Ir para o guia de uso
Wireframe Specpor Owl-Listener

Wireframe Spec Skill.

Deixe uma tela de baixa fidelidade precisa o bastante para discutir comportamento e conteúdo.

  • Prototipagem
  • Wireframes
Baixar OpenDesignVer guia de uso
Revisão da fonte · Wireframe SpecSKILL.md
Tarefa Prototipagem Produz • Uma estrutura de tela anotada com prioridades de conteúdo. • Requisitos de conteúdo, incluindo títulos, extensões, imagens e fontes. • Notas para layouts responsivos e para os estados vazio, de carregamento e de erro. Antes de começar Não é necessária nenhuma ferramenta de wireframe específica; um briefing utilizável precisa incluir informações de conteúdo e de estados.
Resumo editorial · fonte revisada 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Especifique a estrutura antes do estilo visual

Um método de wireframe anotado que combina blocos de layout, contratos de conteúdo, comportamento responsivo e cobertura de estados.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Wireframe Spec define a intenção estrutural de uma tela antes da cor e do acabamento visual. Abrange blocos de conteúdo, posicionamento, prioridade e anotações de comportamento, com espaço para diferenças responsivas e conteúdo vindo de dados. Rótulos reais de navegação e de botões ajudam a tornar a estrutura compreensível mesmo em baixa fidelidade.

A fonte vai além das caixas: pede hierarquia de títulos, expectativas de extensão de texto, proporções de imagem, material obrigatório versus opcional e fontes de conteúdo. Também exige os estados vazio, de carregamento, preenchido e de erro, para que o wireframe não se limite à tela ideal.

Entregas esperadas

  • Uma estrutura de tela anotada com prioridades de conteúdo.
  • Requisitos de conteúdo, incluindo títulos, extensões, imagens e fontes.
  • Notas para layouts responsivos e para os estados vazio, de carregamento e de erro.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Escolha a fidelidade e os blocos

    Selecione a fidelidade (esboço, baixa, média ou anotada) e defina as principais regiões de conteúdo.

  2. 02
    Especifique conteúdo e comportamento

    Dê aos blocos rótulos reais, prioridades, fontes de dados e anotações de interação.

  3. 03
    Cubra as variações

    Descreva as mudanças por breakpoint e as versões vazia, de carregamento, preenchida e de erro.

02 Quando usar

Quando usar

Não é necessária nenhuma ferramenta de wireframe específica; um briefing utilizável precisa incluir informações de conteúdo e de estados.

Bom encaixe

  • Antes do design visualÚtil quando decisões de layout e conteúdo precisam de acordo sem uma discussão sobre cor ou estilo.
  • Preparação para a entrega do designTorna visíveis cedo as suposições ocultas sobre conteúdo dinâmico e interação.

Limites a verificar

  • Não é um sistema visual finalA fonte evita deliberadamente decisões de cor e usa convenções neutras de wireframe.
  • Não se resume à mecânica de gridA matemática de colunas e calhas pertence a Layout Grid; esta especificação se concentra em conteúdo e comportamento.

Traga estas entradas

  • Finalidade da telaDescreva a tarefa e o conteúdo necessário para concluí-la.
  • Fontes de conteúdoIdentifique texto estático, campos de CMS, dados de API e blocos obrigatórios ou opcionais.
  • Necessidades de estado e dispositivoListe os contextos responsivos e as condições de vazio, carregamento ou falha.

03 Decisões importantes

Decisões que importam

  1. As anotações carregam o comportamento que falta

    Um retângulo não explica se o conteúdo é atualizado, abre um painel ou depende de uma API.

  2. Restrições de conteúdo vêm cedo

    Requisitos de extensão e de proporção de imagem evitam que decisões de layout posteriores dependam de conteúdo impossível.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Use o método de instalação documentado no repositório e mantenha quaisquer arquivos complementares referenciados. Esta entrada descreve um método de design focado, não um aplicativo executável.

Arquivo-fonte original
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/wireframe-spec/SKILL.md

Não é necessária nenhuma ferramenta de wireframe específica; um briefing utilizável precisa incluir informações de conteúdo e de estados.

Comece com uma única entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use wireframe-spec para uma página de biblioteca de templates com busca. Especifique a prioridade dos blocos, rótulos reais de navegação, comportamento de busca e filtros, hierarquia de títulos, proporções das imagens dos cards e fontes de conteúdo. Inclua os estados mobile, vazio, de carregamento e de falha na requisição, mantendo o estilo visual neutro.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

  • Toda interação importante tem uma anotação.
  • O conteúdo necessário e as fontes de dados estão identificados.
  • A especificação inclui mais do que uma tela desktop preenchida.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte, vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte
Owl-Listener
Repositório
Owl-Listener/designer-skills
Arquivo da skill
prototyping-testing/skills/wireframe-spec/SKILL.md
Licença
MIT
Versão revisada
2026-10-07 · 9a6930cf84a8
Resumo editorial da fonte
Um método de wireframe anotado que combina blocos de layout, contratos de conteúdo, comportamento responsivo e cobertura de estados.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Produz um mockup polido?

O foco é a estrutura anotada. A fonte usa explicitamente convenções neutras de wireframe, em vez de decisões finais de cor.

Por que incluir extensões de texto?

Elas expõem suposições de layout e ajudam o planejamento de conteúdo antes que mudar o design visual se torne caro.

Um wireframe pode descrever conteúdo dinâmico?

Sim. A fonte inclui indicadores de conteúdo dinâmico, tipos de fonte e vários estados de interface.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignVer skills de design
Arquivo-fonte original
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/wireframe-spec/SKILL.md