CommunityImagemgithub.com

Espaço áureo

Compõe cartazes, gráficos sociais, ilustrações, diagramas e ícones com espaço em branco, proporção, hierarquia, tipo e cor, e entrega ficheiros SVG ou raster reais.

O que é Espaço áureo?

Use quando o pedido é um cartaz, uma peça-chave, um ícone ou um diagrama. As restrições de branco, proporção, hierarquia e cor aplicam-se enquanto a imagem é feita, e o resultado é revisto. A entrega é um SVG editável ou um PNG, JPEG ou WebP, não um prompt nem uma crítica sem ficheiro.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/guardyanz/golden-space/tree/HEAD/skills/golden-space

Installed? Explore more Imagem skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Perguntar na sua IA favorita

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

Documentação

Golden Space

Crie o artefato visual solicitado com composição intencional e fonte editável quando adequado. Respeite o conteúdo, a marca, o meio, as dimensões e o estilo do briefing. Quando solicitado a fazer um pôster ou imagem, produza o artefato em vez de parar em conselhos de design, um plano ou um prompt de geração de imagem.

Escolha e entregue o artefato

  • Entregue o formato solicitado pelo usuário: SVG editável ou raster como PNG, JPEG ou WebP. São saídas finais alternativas; nenhuma requer a entrega de ambas. Quando nenhum formato for especificado, escolha SVG para arte vetorial adequada e raster para trabalho fotográfico ou pictórico. Indique a escolha brevemente quando útil.
  • Para pôsteres adequados para vetor, gráficos sociais, ilustrações planas, diagramas e ícones, crie e salve um arquivo .svg completo por padrão. O usuário não precisa solicitar SVG separadamente. Se a renderização estiver disponível, forneça também uma visualização PNG sem substituir o mestre editável. Uma solicitação explícita para outro formato tem prioridade.
  • Um pôster raster ou ilustração plana pode ser composto como um SVG intermediário e exportado com um renderizador disponível. Entregue o arquivo raster solicitado; inclua sua fonte SVG somente se solicitado ou útil para a transferência. Nunca altere a extensão de um arquivo como substituto para renderizar ou codificar o formato solicitado.
  • Para fotografia, fotorrealismo ou imagens pictóricas, aplique as mesmas restrições de composição por meio da ferramenta de geração ou edição de imagem disponível. Leia references/image-direction.md para esse fluxo de trabalho. Entregue a imagem raster solicitada. Se SVG também for solicitado, crie uma interpretação vetorial separada quando viável e identifique qualquer perda de detalhes; não substitua silenciosamente o estilo visual solicitado.
  • Uma imagem raster colocada dentro de um SVG é uma composição híbrida, não uma obra de arte vetorial totalmente editável. Ofereça-a apenas quando relevante, rotule claramente o raster incorporado e mantenha texto vivo e sobreposições vetoriais separadas. Não a apresente como o mestre vetorial portátil descrito abaixo.
  • Use o diretório de saída do usuário e um nome de arquivo correspondente ao formato escolhido, como poster.svg ou poster.png. Escreva o arquivo quando as ferramentas de arquivo estiverem disponíveis e vincule-o na transferência. Se a escrita de arquivo não estiver disponível, retorne a fonte SVG completa. Um bloco de código é um fallback, não um substituto para um arquivo que as ferramentas disponíveis podem criar.

Estabeleça a composição

Use o briefing fornecido. Se detalhes estiverem faltando, escolha padrões razoáveis e indique-os brevemente. Pergunte apenas quando a resposta ausente alterar materialmente o resultado. Para um design existente, preserve seu propósito e linguagem visual útil.

Identifique a mensagem, o elemento focal, a ordem de leitura, o tamanho de saída e o menor tamanho de exibição pretendido. Antes de gerar, forme uma especificação de design interna compacta: posicionamento focal, proporção ou grade, margens seguras, relações de espaçamento, funções tipográficas, paleta e qualquer área de cópia protegida. Use-a para construir o SVG ou direcionar a ferramenta de imagem; nomear princípios em uma explicação final é insuficiente. Para decisões proporcionais e ópticas concretas, leia references/composition.md.

  • Trate a proporção áurea phi = (1 + sqrt(5)) / 2, cerca de 1,618, como uma relação opcional. Uma divisão utilizável é aproximadamente 61,8% / 38,2% após margens e medianizes. Compare-a com colunas iguais, terços ou um layout orientado pelo conteúdo. Mantenha-a apenas quando o conteúdo e o equilíbrio óptico se beneficiarem. Nunca afirme que uma proporção prova beleza ou adicione uma espiral meramente para sinalizar sofisticação.
  • Dê um propósito ao espaço em branco: separar tópicos, conectar itens relacionados, proteger a legibilidade ou criar foco. O espaçamento interno geralmente deve ser menor que o espaçamento entre grupos. Não imponha uma porcentagem universal de tela vazia.
  • Construa hierarquia com diferenças deliberadas de tamanho, peso, posição e espaço. Use alinhamento e intervalos repetidos para tornar as relações visíveis. Ajuste círculos, diagonais e letras geometricamente alinhados quando parecerem descentralizados.
  • Faça a paleta e a tipografia servirem ao assunto. Mantenha o corpo do texto legível no tamanho de entrega; não reduza o texto para salvar uma composição lotada. Não invente texto para preencher espaço.
  • Para gráficos de informação e interfaces, comunique significado com rótulos ou formas, bem como com cores. Verifique o contraste contra o fundo real. Os limites de cor e a aplicabilidade estão na referência de composição.

Construa o mestre SVG editável

Leia references/svg-contract.md antes de gerar ou editar SVG, incluindo uma fonte intermediária usada para exportação raster. O padrão é um mestre editável estático, autocontido e somente vetorial. Esta seção se aplica à criação de SVG; a saída raster não precisa se passar por conteúdo vetorial editável.

  • Crie um documento SVG completo, com um namespace SVG e um viewBox com tamanho correto. Para uma entrega final em SVG, salve e vincule o arquivo .svg. Nunca substitua por um bitmap encapsulado em SVG ou uma captura de tela de visualização.
  • Mantenha objetos independentes selecionáveis independentemente. Use IDs descritivos únicos, grupos semânticos rasos, formas primitivas quando adequado e caminhos compactos apenas onde as curvas os exigirem. Não transforme um design inteiro em um caminho composto.
  • Mantenha o texto como <text> / <tspan> vivo no mestre. Declare uma família de fontes e fallback, e divulgue o risco de substituição. Uma cópia de distribuição opcional com contornos é um artefato separado; contornar perde a editabilidade do texto.
  • Prefira atributos de apresentação e transformações simples. Evite dependências externas, scripts, conteúdo raster incorporado, HTML, animação, efeitos de filtro e aparência orientada por CSS no mestre portátil. Use definições locais de gradiente ou recorte apenas quando servirem a um propósito visível. Recursos sensíveis à compatibilidade precisam de inspeção no editor pretendido, não de uma alegação de compatibilidade não testada.
  • Mantenha IDs, texto vivo, grupos e precisão útil ao limpar um arquivo existente. Não execute otimização destrutiva silenciosamente nem achate um mestre de fonte.

Adapte assets/starter.svg apenas quando sua estrutura se adequar ao briefing. Sua proporção, orientação, cores e estilo são exemplos, não padrões a serem copiados em cada saída.

Verifique e entregue

Para um SVG final ou intermediário, execute o verificador estrutural empacotado quando o Python estiver disponível:

python <skill-directory>/scripts/check_svg.py artwork.svg

Corrija erros. Revise cada aviso; é uma solicitação de revisão, não evidência automática de um design ruim. --strict também falha em avisos; --json emite um relatório legível por máquina. O verificador cobre um perfil de criação conservador, não todo SVG válido. Ele não mede qualidade visual, contraste, recorte, geometria de caminho ou fidelidade entre editores. Não o chame de sanitizador de segurança.

Para entrega raster, verifique o formato codificado real, dimensões em pixels, proporção de aspecto e fundo ou transparência solicitados. PNG ou WebP adequado podem preservar alfa; JPEG precisa de um fundo opaco deliberado. Inspecione a compressão e a qualidade das bordas no tamanho de entrega. Não envie um PNG ou JPEG pelo verificador SVG.

Antes da transferência, revise o visual real contra a especificação de design:

  • O assunto ou mensagem pretendido é o ponto de entrada, com uma ordem de leitura clara?
  • As margens seguras protegem o conteúdo essencial, com espaço proposital ao redor do foco?
  • As lacunas dentro do grupo e entre grupos são distintas, sem tangências acidentais?
  • A proporção escolhida se ajusta ao conteúdo sem encolhê-lo ou amontoá-lo?
  • Texto, relações de cor, linhas de base e pesos de traço são legíveis e coerentes no tamanho pretendido, sem recorte acidental ou letras inventadas?

Renderize SVG no tamanho de entrega e uma visualização menor quando possível. Inspecione a saída e corrija problemas observados antes da entrega; não liste apenas as regras seguidas. Aplique a mesma revisão visual à saída raster. Fórmulas e lint estrutural não podem garantir qualidade estética. Se um editor estiver disponível, abra o mestre SVG e verifique se o texto e as formas representativas podem ser selecionados e alterados independentemente. Se a renderização ou verificação do editor não estiver disponível, relate esse limite sem afirmar que passou.

Entregue o arquivo real no formato escolhido (ou a fonte SVG completa se a escrita de arquivo não estiver disponível para uma tarefa SVG) mais uma nota curta sobre composição, fontes e verificações realmente realizadas. Inclua dimensões exatas e a proporção escolhida quando relevante. Mantenha uma visualização separada da fonte. Não adicione um ensaio de design a menos que solicitado. Respeite transferências somente SVG ou somente raster.

Habilidades Relacionadas