Oficina de UI Fluxo de Cores Vibrantes

Visão Geral

Use uma habilidade com dois modos explícitos, não uma biblioteca de materiais genérica. Preserve um espaço de trabalho de informações estável enquanto trata o campo espectral como uma camada ambiental controlada. Mantenha a implementação parametrizada para que cada saída possa relatar a intensidade total de cor, intensidade por cor, valores OKLCH, opacidade de pico, escala espacial, fase e cobertura medida.

Leia style-contract.md antes de escolher um modo ou alterar a semântica da paleta. Leia verification.md antes de fazer alegações de validação visual ou de captura de tela.

Quando Usar

• Use quando um usuário nomear 流光溢彩白 ou 五彩斑斓黑, pedir uma habilidade unificada que cubra ambos, ou precisar de um ponto de partida parametrizado reutilizável.
• Use quando o relatório final deve incluir a intensidade total de cor, a intensidade de cada cor, valores OKLCH e medições de captura de tela.
• Não use para uma biblioteca genérica de tokens de tema ou um mockup visual não parametrizado.

Fluxo de Trabalho

1. Classifique a solicitação

• Mapeie “流光溢彩白” para opal e “五彩斑斓黑” para obsidian.
• Se ambos forem solicitados, mantenha uma implementação compartilhada e dois manifestos de tema explícitos.
• Inspecione o projeto existente, framework, rota, sistema de build e trabalho não confirmado antes de copiar os ativos iniciais.
• Use a menor superfície de alteração apropriada; não substitua um sistema de design existente sem autorização.

2. Controle a verificação visual

• Confirme que o modelo em execução pode inspecionar imagens diretamente antes de fazer uma alegação visual baseada em captura de tela.
• Se a inspeção nativa de imagem não estiver disponível, continue com verificações de código e pixels determinísticas, mas marque o resultado visual-unverified; nunca infira qualidade visual apenas do DOM ou CSS.
• Registre modelVision, screenshotCapture, deterministicPixelMetrics e visualVerificationMode no relatório final.

3. Estabeleça a cena e a estrutura

• Escolha um domínio de workbench neutro e denso em informações, como pesquisa de campo, inventário, monitoramento ou operações.
• Use um espaço de trabalho contínuo de três painéis ou similarmente coerente: navegação, fila/lista, detalhe, metadados e uma banda de observação exclusiva.
• Mantenha a cor no campo, marcadores de mapa e acentos de estado. Mantenha o logotipo, avatar, regras, texto, controles, limites e hierarquia semântica neutros; não os pinte com gradientes de paleta.
• Prefira superfícies restritas e preenchimentos fracos. Evite transformar cada região em um cartão flutuante.

4. Implemente o contrato de parâmetros

Mantenha um manifesto serializável com estes campos de nível superior:

{
  schemaVersion, mode, label, preset, seed,
  overallColorIntensity,
  base: { oklch },
  colors: [{
    id, label, oklch, srgbFallback,
    intensity, peakOpacity,
    fieldScale, phase,
    measuredCoverage, effectiveShare
  }],
  field: { scale, octaves, warpStrength, motionSpeed, staticTime, ditherStrength, luminanceCap },
  output: { colorSpace, reducedMotion }
}

• Mantenha cada intensidade em [0, 1]; faça de overallColorIntensity o orçamento global e de colors[].intensity o orçamento por cor. O renderizador multiplica intensity por peakOpacity, portanto, trate peakOpacity como a força calibrada na intensidade total.
• Ordene colors por matiz. O renderizador desenha seis paradas de matiz em um loop e mistura cada cor com seus vizinhos de array; vizinhos quase complementares misturam em direção ao cinza.
• luminanceCap se aplica apenas em obsidian. ditherStrength é a amplitude de dither em códigos de saída; 1 remove o viés de quantização.
• Use OKLCH como o espaço de autoria e forneça um fallback sRGB para contextos não OKLCH.
• Mantenha a semente, o quadro estático, as fases e as escalas de campo determinísticas; não use aleatoriedade por renderização.
• Exponha controles deslizantes para a intensidade global e cada cor configurada. Torne as ações de reset, exportação JSON e cópia disponíveis.

5. Construa o campo espectral

• Use um campo procedural fBm/domain-warp ou um campo contínuo equivalente; mantenha-o atrás da interface com pointer-events: none.
• Use regiões de matiz amplas e fluidas ou fitas, não blobs radiais óbvios, círculos de holofote ou faixas de arco-íris rígidas.
• Carregue a paleta completa e as escalas de campo por cor para o renderizador. Aplique o limite de luminância do modo escuro após a mistura da paleta.
• Codifique a saída com a função de transferência sRGB, aplique dither em códigos de saída e quantize no shader. Uma codificação de curva de potência ou um dither fraco em luz linear enviesam a saída, mais visivelmente em campos de baixa intensidade e perto do preto.

…