Quando Usar

Use quando o usuário disser "lookdev", ou pedir para ajustar / refinar / iterar na aparência de algo, comparar variações por sensação, ou revisar / editar / anotar um post de blog, documento, texto ou conjunto de mídia. Use sempre que "mostre-me, eu escolho" for melhor do que pedir ao usuário para especificar um número, e sempre que você, de outra forma, retornaria uma grade estática ou um bloco de texto para revisão.

Fonte: connerkward/lookdev-studio-skill (MIT).

Lookdev

Quando o usuário disser "lookdev" — ou qualquer um dos seguintes: ajustar, refinar, iterar na aparência de, comparar variações de, deixe-me ajustar, deixe-me editar/anotar/marcar, revisar este post/documento/texto — eles querem dizer construir uma ferramenta interativa no navegador que o usuário manipula diretamente. Não uma grade estática de N variações. Não um Q&A onde eles especificam números. Não um bloco de texto que eles são solicitados a ler e responder no chat. Um estúdio em tempo real onde eles agem sobre o artefato e a mudança é capturada.

Duas formas de estúdio — escolha com base no que está sendo ajustado:

• Lookdev visual-parâmetro — a aparência do artefato é definida por números/escolhas (cor, tipo, layout, tratamento de imagem, animação, 3D). Controles = sliders, seletores, alças de arrastar. Esta é a maior parte desta habilidade (abaixo).
• Lookdev de texto e mídia — o artefato é um documento, post de blog, texto ou conjunto de mídia e o usuário está editando/curando-o: reescrevendo frases, cortando parágrafos chatos, destacando, deixando comentários na margem, sinalizando "diagrama vai aqui" / "imagem errada, substituir". Controles = edição direta inline + destaque de seleção + comentários ancorados + anotação de mídia. Veja a seção dedicada abaixo. Uma revisão de post de blog / documento / roteiro É este modo — nunca retorne um arquivo markdown longo e peça ao usuário para reagir no chat. Levante o estúdio de anotação.

O que cobre

Qualquer decisão visual que o usuário escolhe por sensação, não por especificação. Expanda esta lista conforme necessário:

• Processamento de imagem — dither, halftone, posterize, ASCII, blur, edge, quantize, mosaic, color-grade
• Cor — extração de paleta (mostra % de cobertura), seletores por banda, curvas de saturação / contraste / gama, presets de harmonia, tokens de tema
• Tipografia — seletor de fonte, tamanho / peso / leading / tracking / medida, texto de amostra ao vivo, pilha de fallback
• Layout, posicionamento, enquadramento, espaçamento — elementos arrastáveis e selecionáveis; alças de redimensionamento; réguas de margem / preenchimento; guias de alinhamento; snap-to-grid; toggles de bloqueio de proporção
• Recorte e enquadramento — retângulo de recorte arrastável com bloqueio de proporção; pré-visualização ao vivo do recorte no tamanho de produção
• Animação / transições — editor de curva de easing, sliders de duração, scrubber, replay
• Variantes de componente — renderiza hover / focus / disabled / loading / dark lado a lado em uma página
• Iconografia — peso do traço, raio do canto, glifo na tela
• Conteúdo gerado por IA — entrada de prompt + sliders de parâmetros + grade de regeneração lado a lado
• Qualquer outra coisa onde "mostre-me, eu escolho" é melhor do que "peça-me para especificar um número"

Controles devem permanecer acessíveis durante a inspeção

Se o estúdio mostrar uma lista, grade ou um conjunto longo de variações para rolar, os controles devem estar visíveis de todas as posições de rolagem. O usuário precisa ser capaz de arrastar um slider enquanto olha para a linha 14, não rolar de volta para o topo a cada vez.

Duas abordagens, escolha pelo layout:

• Barra fixa (position: sticky; top: 0) no topo do contêiner de rolagem. Mantenha a barra visualmente distinta — fundo de papel + fundo desfocado + borda inferior — para que ela não manche os espécimes que rolam por trás dela. Fixa é relativo ao ancestral de rolagem mais próximo com um limite definido; se você aninhá-la dentro de um pai com tamanho (um <header> com margin-bottom, um <div> com altura fixa), ela para de fixar na borda inferior desse pai. Levante-a para ser um filho direto do <body> (ou do wrapper da página) para que a fixação abranja a página inteira.
• Overlay flutuante (position: fixed) para controles ativados por hotkey — por exemplo, pressione d para revelar. O padrão .debug-ctl do portfólio é este: fixado no canto superior esquerdo, transparente até ser invocado. Use quando os controles não devem ocupar espaço de tela permanente (visualizadores finais não devem vê-los; o autor pode invocá-los sob demanda).

Anti-padrão: um painel de controle no topo da página que o usuário rola e nunca mais vê. Eles ajustarão às cegas, desistirão ou adivinharão. Ou mantenha os controles à vista ou duplique uma barra de controle compacta ao lado de cada linha de variação.

Lookdev de texto e mídia — edição direta, destaque, comentário, anotação

…