Criar uma interface de usuário que visualiza uma estrutura do mundo real-como o espelho do telescópio de trinta metros-pode parecer uma tarefa que exige um profundo conhecimento de geometria, d3.js e gráficos SVG. Mas com um grande modelo de idioma (LLM) como Claude ou ChatGPT, você não precisa saber tudo antecipadamente.
Este artigo documenta uma jornada na construção de uma interface interativa complexa e interativa, sem experiência anterior no desenvolvimento de D3.Js ou da interface do usuário em geral. O trabalho foi realizado como parte da construção de um protótipo para uma interface operacional do usuário para o espelho primário do telescópio, projetado para mostrar o standing em tempo actual dos segmentos de espelho. Ele destaca como os LLMs ajudam você a “seguir em frente”, dando a você um protótipo funcionando, mesmo quando você não está familiarizado com a tecnologia subjacente. Mais importante, mostra como o aviso iterativo-refinando suas solicitações passo a passo-leva não apenas ao código certo, mas também a uma compreensão mais clara do que você está tentando construir.
O objetivo
Queríamos criar uma visualização baseada em HTML do espelho primário do telescópio de trinta metros, composto por 492 segmentos hexagonais dispostos simetricamente em um padrão round.
Começamos com um aviso de alto nível que descreveu a estrutura, mas emblem percebemos que, para atingir meu objetivo, eu precisaria orientar a IA passo a passo.
Etapa 1: o immediate inicial
“Quero criar uma visão HTML do espelho de favo de mel do telescópio de trinta metros. Tente gerar uma interface do usuário baseada em HTML e CSS para esse espelho, que consiste em 492 segmentos hexagonais. A segunda fila deve ser a mesma que a segunda última fila, and many others. ”
Claude deu uma likelihood – mas o resultado não period o que eu tinha em mente. O structure period bloqueado e não muito simétrico. Foi quando eu decidi adotar uma abordagem passo a passo.
Etapa 2: desenhando um hexágono
“Não é isso que eu quero … vamos fazer isso passo a passo.”
“Vamos desenhar um hexágono com vertical de borda plana. O hexágono deve ter todos os lados do mesmo comprimento.”
“Vamos usar o d3.js e desenhar svg.”
“Vamos desenhar apenas um hexágono com D3.”
Claude gerou código D3 limpo para desenhar um único hexágono com a orientação e geometria corretas. Funcionou – e me deu confiança nos blocos de construção.
Lição: comece pequeno. Confirme que a fundação funciona antes de dimensionar a complexidade.
Etapa 3: Adicionando um segundo hexágono
“Authorized … agora vamos adicionar mais um hexágono ao lado deste. Ele deve compartilhar vantagem vertical com o primeiro hexágono.”
Claude ajustou as coordenadas, colocando o segundo hexágono adjacente ao primeiro, alinhando suas bordas verticais. A lógica do structure estava começando a surgir.
Etapa 4: Criando a segunda linha
“Agora vamos adicionar mais uma linha.
Os hexágonos na segunda linha compartilham bordas verticais entre si semelhantes à primeira linha.
As bordas inclinadas superiores dos hexágonos na segunda linha devem ser compartilhadas com as bordas inclinadas dos hexágonos na primeira linha.
O número de hexágonos na segunda fila deve ser tal que a primeira linha apareça centralmente posicionada com a segunda fila. ”
As tentativas iniciais falharam em alinhar adequadamente as bordas inclinadas.
“Opa … isso não compartilha as bordas inclinadas com a linha anterior.”
Mas, eventualmente, depois de esclarecer a lógica de espaçamento e deslocamento, Claude acertou.
Lição: Os layouts baseados em geometria geralmente requerem várias iterações com inspeção visible cuidadosa.
Etapa 5: expandindo -se para uma estrutura simétrica
“Agora precisamos criar uma estrutura maior com mais hexágonos dispostos em mais fileiras de modo que: a estrutura geral parece round como o favo de mel. O número de hexágonos nas fileiras continua aumentando e depois diminui para formar um centenário perfeita.
Claude usou uma abordagem de structure baseada em anel para simular simetria round. Mas a princípio:
“Isso não é round, mas parece mais uma visão geral hexagonal …”
Então eu sugeri:
“Tente com apenas 6 hexágonos na primeira e na última fila.”
Essa mudança melhorou a simetria e ajudou a alcançar um structure visualmente round. O número de hexágonos por linha aumentou e depois diminuiu – exatamente como desejado.
Etapa 6: Ajustando a abertura central
“Isso é melhor, mas precisamos de uma abertura menor no centro. O espaço preto no centro é muito grande. Deve ser no máximo 1 ou alguns hexágonos”.
Ao reduzir o espaço vazio e reequilibrar os anéis internos, finalmente obtivemos uma estrutura round bem compactada com uma pequena lacuna central-correspondendo ao design da TMT.
Lição: Use restrições específicas do domínio (como contagem whole = 492) como guia para os parâmetros de structure.
Etapa 7: Adicionando numeração e dicas de ferramentas
“Queremos ter um número em cada segmento hexagonal. Eles devem ser numerados sequencialmente. O primeiro na primeira linha deve ser 1 e o último na última fila deve ser 492. Quando mostrarmos as informações do segmento hexagonal no MouseOver, devemos mostrar o número também.”
Claude inicialmente atribuiu números com base no índice de anel, não na ordem da linha.
“Você está gerando números com base na posição no anel … mas a numeração deve ser baseada em linha. Portanto, devemos de alguma forma mapear os anéis na linha. Por exemplo, o anel 13 segmento número 483 está na linha 1 e deve ser numerado 1, and many others. Você pode sugerir uma maneira de mapear segmentos de anéis para linhas dessa maneira?”
Depois que esse mapeamento foi implementado, tudo se encaixou:
- Um structure round de 492 segmentos numerados
- Uma pequena lacuna central
- Dicas de ferramentas mostrando metadados do segmento
- Simetria visible de anéis externos para internos
Reflexões
Essa experiência me ensinou várias lições importantes:
- LLMs ajudam você a continuar com isso: Mesmo com zero conhecimento de D3.js ou geometria SVG, eu poderia começar a construir imediatamente. A AI andaiva da codificação, e eu aprendi durante o processo.
- Solicitar é iterativo: Meu primeiro immediate não estava errado – simplesmente não foi específico o suficiente. Ao revisar a saída em cada etapa, esclarecei o que eu realmente queria e refinei minhas perguntas de acordo.
- LLMS desbloquear o aprendizado através da construção: No ultimate, eu não consegui apenas uma interface do usuário funcional. Eu recebi uma base de código compreensível e um ponto de entrada prático em uma nova tecnologia. Construindo primeiro e aprendendo com isso.
Conclusão
O que começou como uma vaga idéia de design se transformou em uma visualização interativa e funcional, simétrica e interativa do espelho do telescópio de trinta metros – construído em colaboração com um LLM.
Essa experiência reafirmou que o desenvolvimento imediato não é apenas gerar código-trata-se de pensar através do design, esclarecer a intenção e construir seu caminho para entender.
Se você já quis explorar uma nova tecnologia, construir uma interface do usuário ou enfrentar uma visualização específica de domínio-não espere para aprender tudo primeiro.
Comece a construir com um LLM. Você aprenderá ao longo do caminho.