Inspiration Art Direction — sites e decks de refs reais

Direção de arte com Inspiração

Transforme um brief em uma página que pareça pensada, trabalhando a partir de referências reais da biblioteca Inspiration, em vez de padrões. A execução produz três coisas no projeto do usuário:

• .inspiration/references.md: a ficha de espécimes (5 a 8 referências visualizadas, o que cada uma oferece).
• .inspiration/direction.md: a direção de design, cada decisão rastreada até um espécime.
• A construção, além de screenshots e um relatório do inspetor em .inspiration-out/. Se o projeto tiver um .gitignore, adicione .inspiration-out/ a ele antes da primeira gravação.

Quando usar

• Solicitações como "projete uma landing page para", "dê uma cara para este site", "como a hero deve ser", "encontre referências e construa", "direcione artisticamente esta apresentação".
• O usuário quer uma direção escrita antes de construir, ou diz que a saída parece genérica, padronizada ou "como IA" e deveria ser premium, editorial, ousada ou distinta.
• Não é para uma consulta de referência isolada (use inspiration-references), uma paleta e kit tipográfico isolados (use inspiration-brand-kit), ou mudanças de código sem questão de design visual (um bug de CSS, uma refatoração).

Regras rígidas

1. Fidelidade. Descreva apenas o que você viu em uma imagem que realmente abriu (de get_image, ou seu fallback image_url). Títulos, strings why e facetas são pistas, não evidências. Nunca cite uma referência que você não visualizou.
2. Nunca copie. Leve princípios, não pixels. Não copie um layout inteiro, e nunca reutilize cópia, imagens, ilustrações, logotipos ou tipografias licenciadas de uma referência. Cada espécime deve nomear o que você deixa para trás.
3. Orçamento. Planeje cerca de 12 chamadas de ferramentas medidas (veja o orçamento abaixo). Conte cada chamada medida que fizer, incluindo as que geram erro. Agrupe: get_image aceita até 6 ids, get_inspiration aceita uma lista.
4. Quadros são opcionais. Nunca chame save_to_board, create_board ou add_to_board a menos que o usuário peça.
5. Nomenclatura. Chame a fonte de "biblioteca Inspiration" ou "Inspiration da VASA.Works". Vincule itens como https://inspiration.vasa.works/item/<id> e pelos valores image_url que as ferramentas retornam. Nunca vincule um site de terceiros como origem de um item. Páginas de fundição de fontes ou licenças e URLs de quadros são aceitáveis.

Etapa 0: Verificação de configuração

Verifique se uma ferramenta chamada search_inspiration está disponível sob qualquer prefixo de servidor (mcp__plugin_inspiration_inspiration__ para uma instalação de plugin do Claude Code, mcp__inspiration__, mcp__Inspiration__, um nome de conector, ou simples). Se o host listar as ferramentas como adiadas, carregá-las através da pesquisa de ferramentas do host conta como disponível. As ferramentas nesta skill são nomeadas sem prefixo.

• Disponível: continue.
• Ausente: leia references/setup.md e forneça ao usuário a única etapa de configuração para seu cliente, uma vez. Em seguida, continue no modo "Sem a biblioteca" abaixo, a menos que o usuário diga que deseja conectar primeiro.
• Uma chamada retornando {"error": "subscription_required"} significa que o servidor está conectado, mas não autenticado: forneça a etapa de login de references/setup.md.

Etapa 1: Brief e inventário de assunto

Antes de pesquisar, anote (pergunte apenas o que você não puder inferir do repositório ou conversa):

• O que é: produto ou assunto em uma frase, e a única coisa que um visitante deve entender.
• Público: quem, o que já sabem, o que os faria confiar.
• Conteúdo que deve conter: título real, prova (números, logotipos, citações que o usuário realmente tem), visuais do produto disponíveis, CTAs, conteúdo legal ou de preços. Liste; isso decide as seções.
• Restrições: stack, componentes existentes, ativos da marca (logotipo, cores, fontes com licenças), necessidades de acessibilidade, prazo, preferência por claro ou escuro.
• Marca existente? Se .inspiration/brand-kit.md ou .inspiration/tokens.css existirem, trate-os como a marca existente. Se houver uma, a direção deve estendê-la, não substituí-la. Observe qualquer slug de website-styles que corresponda à marca para classificação on-brand (parâmetro brand).
• Argumento da página: as seções ordenadas que a página precisa (por exemplo hero, logotipos, recursos, como funciona, preços, FAQ, CTA, rodapé). Marque as 2 a 4 seções que carregam o argumento; elas recebem suas próprias pesquisas.

Se o prompt não fornecer conteúdo (uma linha única sem prova, preços ou visuais), não pare para perguntar: liste os itens ausentes no brief como espaços reservados claramente marcados e continue.

Escreva isso como o primeiro bloco de .inspiration/direction.md para que o usuário possa corrigi-lo cedo.

Etapa 2: Plano de pesquisa

Leia references/research.md para receitas de consulta por tipo de página, exemplos de filtros e a tabela de orçamento. Plano padrão:

#	Chamada	Medida	Propósito
a	list_facets(category="website-sections")	não	Vocabulário real para subtype, style, mood, layout, typography
b	1 a 2 pesquisas de mood	sim	A sensação geral, entre categorias (sem category ou website-sections)
c	2 a 3 pesquisas de seção	sim	Uma por seção chave, category="website-sections", filters={"subtype": ["hero"]} etc.
d	1 pesquisa entre categorias	sim	Textura: fonts, website-styles, branding ou editorial-print, o que o brief mais precisar
e	opcional 1 similar_items(id), após o primeiro lote get_image	sim	Ampliar e desviar do candidato mais forte que você realmente viu; pule se o primeiro lote já tiver variedade
f	2 get_image([...6 ids])	sim	Ver a lista de candidatos
g	1 get_inspiration([ids mantidos])	sim	Hexes de paleta, notas tipográficas, descrições completas do conjunto mantido
h	opcional analyze_palette ou generate_palette	sim	Verificar ou estender a paleta

Isso é de 7 a 11 chamadas medidas (b a h), então o orçamento de cerca de 12 deixa espaço para uma repetição. Se o usuário disser que está no Pro, você pode adicionar pesquisas de seção ou um terceiro lote de imagens, mas o conjunto mantido permanece de 5 a 8.

Higiene de pesquisa:

• Formule consultas como o que é visível: "hero escuro com título serifado oversized e screenshot de produto", não "hero bom".
• Coloque valores controlados em filters (AND entre chaves, any-of dentro de uma chave). Mantenha a consulta para o que os filtros não podem expressar.
• Passe exclude_ids com ids já vistos para que pesquisas posteriores não os repitam. Deixe diversify ativado.
• Resultados zero retornam suggestions: tente novamente uma vez com um deles, depois prossiga.
• Se list_facets der erro, continue usando os valores comuns listados em references/research.md (especialmente subtype) em filters; remova um filtro apenas se essa pesquisa retornar zero resultados.

A partir dos resultados da pesquisa, construa uma lista de candidatos de até 12 ids. Escolha pela variedade (diferentes estruturas e moods), não por 12 versões de uma aparência.

Etapa 3: Visualizar e selecionar

1. Chame get_image com até 6 ids candidatos por chamada, no máximo 2 chamadas. A resposta começa com um manifesto (order, errors); mapeie cada imagem ao seu id por essa ordem e descarte ids listados em errors. Entre os dois lotes, opcionalmente execute similar_items na imagem mais forte que você viu (Etapa 2, linha e) e coloque suas melhores escolhas no segundo lote. Se get_image falhar, visualize os candidatos através do fallback de imagem em references/library-rules.md (image_url público, sem chamada medida).
2. Olhe para cada imagem adequadamente: estrutura, tipo (classificação, contraste de escala, caixa, tracking), campos de cor e acentos, densidade, imagens, o movimento incomum.
3. Mantenha de 5 a 8. Cada referência mantida deve ganhar um papel: mood, hero, uma seção nomeada, tipo, paleta ou textura. Corte quase duplicatas e qualquer coisa sobre a qual você não possa dizer algo específico.
4. Chame get_inspiration uma vez com os ids mantidos (lista) para hexes de paleta e notas tipográficas. Trate seu texto como detalhe de apoio; sua própria visualização ganha quando eles diferirem. Se der erro, não tente novamente: amostre hexes das imagens que você abriu (por exemplo magick <n>.png -resize 200x200 -colors 6 -format %c histogram:info:-, que precisa do ImageMagick; sem ele, estime a partir do que você vê e diga isso), diga na ficha que os hexes foram amostrados, e julgue a tipografia a partir dos pixels.

Etapa 4: Ficha de espécimes

Escreva .inspiration/references.md usando o formato exato de references/specimen-sheet.md. Para cada referência mantida:

• id, título, papel, link https://inspiration.vasa.works/item/<id>, e o image_url.
• Visto: 2 a 4 fatos visíveis concretos.
• Tira: o princípio que você empresta, declarado de forma que possa se aplicar a um assunto diferente.
• Deixa: o que você deliberadamente não usa (seu layout, cópia, imagens, marcas, tipografias, qualquer coisa errada para este brief).
• Torna-se: no que o princípio se transforma nesta página, especificamente.

Termine a ficha com uma linha sobre o que o conjunto tem em comum e uma tensão que você resolverá.

Etapa 5: Direção

Derive a direção dos espécimes. Não alcance um estilo predefinido. Escreva .inspiration/direction.md (após o bloco do brief) com estes cabeçalhos, citando ids de espécimes entre colchetes após cada decisão:

1. Linha de conceito. Uma frase que um designer possa questionar, por exemplo "um guia de campo, não um painel".
2. Anti-objetivos. 3 a 5 coisas que esta página não deve parecer (inclua o padrão genérico que você produziria de outra forma: hero centralizado, gradiente roxo, três cartões com ícones, e assim por diante, se eles não servirem ao brief).
3. Sistema tipográfico. Famílias e papéis (display, texto, UI, mono opcional), uma escala de tamanhos com px a 1440 e 390 de largura, alturas de linha, tracking, caixa. Use fontes que o projeto possa carregar legalmente (famílias de licença aberta ou fontes licenciadas do usuário). Um item de fonte da biblioteca informa classificação e emparelhamento; não concede uma licença. Se o orçamento permitir, suggest_pairing em um id de fonte ajuda.
4. Paleta. Hexes com papéis (fundo, superfície, texto, texto suave, acento, cores de estado) e o contraste de cada par de texto. Opcionalmente execute analyze_palette(hexes) ou generate_palette(color) para uma rampa.
5. Layout e grade. Colunas, largura máxima de conteúdo, gutters, ritmo de espaçamento de seção, regras de alinhamento, breakpoints.
6. Seções. A página ordenada, cada uma com seu trabalho, o conteúdo que carrega do inventário, e o espécime em que se baseia.
7. Imagens e gráficos. Que visuais existem, o que você fará (diagramas, cortes, estilo de ilustração), o que evitar.
8. Movimento. Onde o movimento ajuda na compreensão, durações e easing, e o fallback de movimento reduzido. Padrão para pouco.
9. Detalhe de assinatura. Um movimento memorável e construível que vem de um espécime e é reinterpretado, não copiado.

Mostre ao usuário a linha de conceito, anti-objetivos e detalhe de assinatura em uma mensagem curta. Continue a menos que eles objetem ou peçam aprovação primeiro.

Etapa 6: Construir

• Use o stack e componentes do projeto. Sem projeto, construa um index.html estático com CSS inline (e JS mínimo).
• Comece com tokens: propriedades personalizadas CSS para escala tipográfica, espaçamento, cores e raios da direção. Em seguida, seções, na ordem da página.
• Conteúdo real do inventário. Onde o conteúdo estiver faltando, use espaços reservados claramente marcados; nunca invente logotipos de clientes, depoimentos, métricas ou prêmios e apresente-os como reais.
• HTML semântico: um h1, cabeçalhos ordenados, alt em cada imagem significativa, estados de foco visíveis, rótulos em inputs.
• Construa mobile e desktop juntos; verifique 390 de largura enquanto avança, não no final.

Etapa 7: Ciclo de olhar e corrigir

Leia references/critique.md para a rubrica. Em seguida, por até 3 rodadas:

1. Renderize. Execute o inspetor da pasta desta skill (a pasta que contém este SKILL.md): node <skill-folder>/scripts/inspect.mjs <url-or-html-path> --out .inspiration-out/round-<n> Ele escreve page-1440.png, page-390.png e report.json (fontes em uso, cores de texto e fundo, tamanhos de cabeçalho, medida, overflow, alt ausente, amostras de baixo contraste). Se o Playwright estiver faltando, ele imprime a correção de uma linha (npx -y -p [email protected] node <skill-folder>/scripts/inspect.mjs ...). Se o host tiver seu próprio navegador ou ferramenta de screenshot, isso também está ok.
2. Olhe. Abra os screenshots e leia o relatório. Compare cada seção com o espécime que ela cita, e a página inteira com a linha de conceito e anti-objetivos.
3. Pontue. Avalie cada linha da rubrica de 0 a 2 e liste os 3 maiores problemas, do mais visível primeiro. Escreva ambos em .inspiration/direction.md sob "Rodada ".
4. Corrija esses 3, depois re-renderize.

Pare quando cada linha da rubrica pontuar 2, após a rodada 3, ou quando uma rodada não mudar nada material. Se nenhum navegador puder ser executado, revise o código contra a rubrica, peça ao usuário um screenshot se puder dar um, e diga claramente que nenhuma verificação visual foi feita.

Etapa 8: Entrega

Diga ao usuário, brevemente:

• O que foi construído e onde, e a linha de conceito.
• As referências usadas: id, título e link https://inspiration.vasa.works/item/<id>, cada uma com a única coisa que contribuiu.
• O que a última rodada do inspetor ainda sinaliza, se algo.
• Aproximadamente quantas chamadas medidas a execução usou, e qualquer etapa que foi pulada ou degradada (erros de servidor, fallback image_url, cota).
• Ofereça: "Quer que eu salve estas referências em um quadro do Inspiration?" Apenas se sim, chame save_to_board(title, ids=[...]) e compartilhe a URL do quadro que retornar.

Cota e erros

Leia references/library-rules.md na primeira vez que uma ferramenta retornar um erro, quota_exhausted ou capped. A versão curta: quota_exhausted interrompe todas as chamadas medidas (link https://inspiration.vasa.works/pricing, termine com o que você tem), capped significa que não há mais páginas, subscription_required significa login (Etapa 0), e o mesmo erro de servidor em duas ferramentas diferentes significa modo degradado. Chamadas com erro contam para o orçamento.

Sem a biblioteca

Quando o MCP não estiver conectado (após fornecer a etapa de configuração uma vez) e o usuário não tiver pedido para conectar primeiro:

• Diga uma vez, claramente: "Continuando sem a biblioteca Inspiration, então esta direção não é baseada em referências."
• Pule as Etapas 2 a 4. Não invente ids de referência, títulos, links ou descrições, e não afirme que um visual veio de uma referência.
• Escreva .inspiration/direction.md apenas a partir do brief, com "Nenhuma referência usada" no topo. Mantenha os anti-objetivos e o detalhe de assinatura.