Huepor dominikmartn

Hue Skill.

Crie as regras que orientam o trabalho futuro de interface, não apenas uma tela finalizada.

Sistemas de design
Criação de Skills
Tokens de design

Revisão da fonte · HueSKILL.md

Tarefa Sistemas de design Produz • Uma Skill de design reutilizável com design-model.yaml como fonte única de verdade. • Arquivos de referência de tokens, componentes e mapeamento de plataformas. • Prévias HTML de painel, biblioteca de componentes, landing page e tela de aplicativo. Antes de começar Exige acesso a arquivos, ferramentas adequadas para inspecionar referências, Node para validate.mjs e revisão no navegador para maior confiança visual. A disponibilidade das ferramentas afeta a fidelidade da extração.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Transforme uma linguagem de design em uma Skill reutilizável

Gera uma skill de design reutilizável a partir da análise de referências, de um modelo YAML compartilhado, de documentação e de quatro prévias validadas.

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

A abordagem de trabalho

Hue é uma meta-Skill que produz outra Skill de linguagem de design. Pode partir de uma marca, URL, base de código, capturas de tela, descrição ou uma Skill existente para remixar. Separa fatos de design observados de escolhas derivadas, registra as decisões em design-model.yaml e gera a documentação e as prévias seguintes a partir desse modelo.

O resultado inclui mais do que cores e fontes. A fonte abrange inventários de componentes, raciocínio de alternativas para ícones, composição do hero, tokens claros e escuros, mapeamentos de plataforma e quatro demonstrações visuais. Também exige validação e revisão visual. A fonte revisada contém orientações inconsistentes sobre origem de fontes tipográficas; por isso, verifique a licença e a disponibilidade exatas das fontes em vez de tratar todas as recomendações como compatíveis.

Entregas esperadas

Uma Skill de design reutilizável com design-model.yaml como fonte única de verdade.
Arquivos de referência de tokens, componentes e mapeamento de plataformas.
Prévias HTML de painel, biblioteca de componentes, landing page e tela de aplicativo.

Ver o briefing de exemplo

Do briefing à revisão

01
Analisar a entrada
Reúna valores reais da fonte ou de estilos computados sempre que possível e sinalize as observações de menor confiança obtidas de capturas de tela ou da leitura de texto.
02
Confirmar a direção
Revise a interpretação estética e os tokens principais antes de gerar um conjunto maior de arquivos.
03
Construir o modelo primeiro
Registre primitivos, papéis semânticos, componentes, alternativas de ícones e decisões do hero em YAML.
04
Gerar e validar
Produza referências e prévias a partir do modelo, execute o validador fornecido e inspecione os resultados renderizados nos dois modos.

02 Quando usar

Quando usar

Exige acesso a arquivos, ferramentas adequadas para inspecionar referências, Node para validate.mjs e revisão no navegador para maior confiança visual. A disponibilidade das ferramentas afeta a fidelidade da extração.

Bom encaixe

Orientação de marca reutilizávelÚtil quando sessões repetidas com assistentes precisam de uma linguagem visual mais explícita.
Remixes de Skills de designPermite alterar dimensões selecionadas preservando a filosofia existente e as regras não afetadas.

Limites a verificar

Não é propriedade de ativosFontes tipográficas, ícones, fotografias e renderizações de produto proprietários observados não têm licença automática para redistribuição.
Não é clonagem exata de marcaKits alternativos e componentes derivados devem ser identificados com honestidade.
Análise dependente do ambienteA inspeção de estilos computados, as capturas de tela no navegador e a validação local exigem ferramentas disponíveis; entradas mais fracas reduzem a confiança.

Traga estas entradas

Referência de designForneça uma URL de marca, base de código, capturas de tela, direção escrita ou Skill existente.
Escopo e plataformaEspecifique o domínio do produto e se mapeamentos para CSS, Tailwind ou SwiftUI são úteis.
Restrições de ativos e marcaIdentifique material proprietário, alternativas aprovadas e decisões que devem permanecer inalteradas.

03 Decisões importantes

Decisões que importam

Observado versus derivado
Um botão encontrado na fonte e um toggle recém-inferido não devem ser apresentados como igualmente verificados.
Um único modelo limita a divergência
Gerar documentos e prévias a partir do mesmo YAML reduz discrepâncias entre os tokens declarados e os valores renderizados.
Teste em telas de aplicativo
Uma linguagem de design que só funciona em um hero pode falhar em uma tela de aplicativo densa; a quarta prévia testa essa diferença.

04 Exemplo de briefing

Experimente um briefing focado

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

Revise a configuração

Use o repositório completo do gerador, com seus templates e o script de validação. As pastas de Skills geradas têm nomenclatura de descoberta e locais de instalação próprios, que variam conforme o agente.

Arquivo de origem upstream

https://github.com/dominikmartn/hue/blob/a910e31cd24b45b9455c0c3502150413aa5a3b32/SKILL.md

Comece com uma entrega

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

Briefing de exemplo

Use hue para criar uma Skill reutilizável de linguagem de design a partir do código de UI local e das capturas de tela fornecidos. Diferencie componentes observados dos derivados, preserve nosso destaque e tratamento de cantos reais e proponha alternativas licenciadas de fontes tipográficas e ícones. Confirme a direção e os tokens principais e, em seguida, gere o modelo, as referências e as quatro prévias com evidências de validação.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

Cada token renderizado pode ser rastreado até design-model.yaml.
Ativos proprietários observados e escolhas alternativas ficam claramente distinguidos.
Todos os arquivos HTML gerados passam na validação estrutural e na revisão visual real.

OpenDesign oferece um espaço de design local para agentes de programação. 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 OpenDesign Ler o guia 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.

Proprietário da fonte: dominikmartn
Repositório: dominikmartn/hue
Arquivo da Skill: SKILL.md
Licença: MIT
Snapshot revisado: 2026-10-07 · a910e31cd24b

Resumo editorial da fonte

Gera uma skill de design reutilizável a partir da análise de referências, de um modelo YAML compartilhado, de documentação e de quatro prévias validadas.

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

06 Perguntas antes de começar

Perguntas antes de começar

O Hue cria apenas uma landing page?

Não. A prévia da landing page é uma demonstração de uma Skill de design gerada, ao lado de um painel, uma biblioteca de componentes e uma tela de aplicativo.

Ele pode revisar uma Skill de design existente?

Sim. O caminho de remix da fonte altera primeiro o modelo e regenera apenas os arquivos afetados, em vez de substituir o sistema inteiro.

Ele afirma que a marca de origem usa o kit de ícones alternativo?

Não deveria. A fonte separa explicitamente o estilo de ícone observado do kit de licença livre escolhido para as prévias.

OpenDesign

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

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

Baixar OpenDesign Explorar Skills de design