La creazione di un’interfaccia utente che visualizza una struttura del mondo reale-come lo specchio del telescopio di trenta metri-potrebbe sembrare un compito che richieda una profonda conoscenza della geometria, D3.JS e SVG Graphics. Ma con un modello linguistico di grandi dimensioni (LLM) come Claude o Chatgpt, non è necessario sapere tutto in anticipo.
Questo articolo documenta un viaggio nella costruzione di un’interfaccia utente complessa e interattiva senza esperienza precedente nello sviluppo di D3.JS o dell’interfaccia utente in generale. Il lavoro è stato svolto nell’ambito della costruzione di un prototipo per un’interfaccia utente operativa per lo specchio principale del telescopio, progettato per mostrare lo stato in tempo reale dei segmenti di specchio. Sottolinea come LLMS ti aiuta a “andare avanti”, dandoti un prototipo di lavoro anche quando non hai familiarità con la tecnologia sottostante. Ancora più importante, mostra come il suggerimento iterativo-perfezionare le tue richieste passo-passo-porta non solo al codice giusto, ma anche a una comprensione più chiara di ciò che stai cercando di costruire.
L’obiettivo
Volevamo creare una visualizzazione basata su HTML dello specchio primario del telescopio di trenta metri, composto da 492 segmenti esagonali disposti simmetricamente in uno schema circolare.
Abbiamo iniziato con una richiesta di alto livello che descriveva la struttura, ma presto ci siamo resi conto che per raggiungere il mio obiettivo, avrei dovuto guidare l’intelligenza artificiale passo dopo passo.
Passaggio 1: il immediate iniziale
“Voglio creare una vista HTML dello specchio a nido d’ape del telescopio di trenta metri. Prova a generare un’interfaccia utente basata su HTML e CSS per questo specchio, che consiste di 492 segmenti esagonali disposti in un modello circolare. La riga dovrebbe essere uguale a quella nella seconda riga, ecc. “
Claude ha dato un colpo, ma il risultato non è stato quello che avevo in mente. Il structure period a blocchi e non del tutto simmetrico. Fu allora che decisi di adottare un approccio passo-passo.
Passaggio 2: disegnare un esagono
“Questo non è quello che voglio … facciamolo passo dopo passo.”
“Disegniamo un esagono con un bordo piatto verticale. L’esagono dovrebbe avere tutti i lati della stessa lunghezza.”
“Usiamo D3.JS e disegniamo SVG.”
“Disegniamo un solo esagono con D3.”
Claude ha generato codice D3 pulito per disegnare un singolo esagono con l’orientamento e la geometria corretti. Ha funzionato e mi ha dato fiducia nei mattoni.
Lezione: inizia in piccolo. Conferma le opere di fondazione prima di ridimensionare la complessità.
Passaggio 3: aggiungendo un secondo esagono
“Bello … ora aggiungiamo un altro esagono accanto a questo. Dovrebbe condividere il bordo verticale con il primo esagono.”
Claude ha regolato le coordinate, posizionando il secondo esagono adiacente al primo allineando i loro bordi verticali. La logica del structure stava cominciando a emergere.
Passaggio 4: creazione della seconda riga
“Ora aggiungiamo un’altra riga.
Gli esagoni nella seconda fila condividono bordi verticali tra loro simili alla prima riga.
I bordi inclinati superiori degli esagoni nella seconda fila dovrebbero essere condivisi con i bordi inclinati inferiori degli esagoni nella prima riga.
Il numero di esagoni nella seconda riga dovrebbe essere story che la prima riga appare posizionata centralmente con la seconda riga. “
I tentativi iniziali non sono riusciti advert allineare correttamente i bordi inclinati.
“Oops … questo non condivide i bordi inclinati con la riga precedente.”
Ma alla high quality, dopo aver chiarito la spaziatura e la logica offset, Claude ha capito bene.
Lezione: i structure basati su geometria richiedono spesso più iterazioni con un’attenta ispezione visiva.
Passaggio 5: espandersi in una struttura simmetrica
“Ora dobbiamo creare una struttura più grande con più esagoni disposti in più file in modo story che: la struttura generale appare circolare come a nido d’ape. Il numero di esagoni nelle file aumenta in aumento e poi continua a diminuire per formare una struttura perfettamente simmetrica. Il numero totale di esagoni deve essere 492 per abbinare il telescopio TMT. Possiamo avere uno spazio vuoto) che mostra esattamente al centro del cerchio.”
Claude ha utilizzato un approccio di structure basato su anello per simulare la simmetria circolare. Ma all’inizio:
“Questo non è circolare ma sembra più una visione complessiva esagonale …”
Poi ho suggerito:
“Prova con solo 6 esagoni nella prima e ultima riga.”
Questo cambiamento ha migliorato la simmetria e ha contribuito a raggiungere un structure visivamente circolare. Il numero di esagoni per fila è aumentato e poi è diminuito, esattamente come desiderato.
Passaggio 6: sintonizzare l’apertura centrale
“Questo è meglio ma abbiamo bisogno di un’apertura più piccola al centro. Lo spazio nero al centro è troppo grande. Dovrebbe essere al massimo 1 o pochi esagoni.”
Riducendo lo spazio vuoto e riequilibrando gli anelli interni, abbiamo finalmente ottenuto una struttura circolare ben ricca con un piccolo hole centrale, abbinando il design TMT.
Lezione: utilizzare vincoli specifici del dominio (come il conteggio totale = 492) come guida per i parametri di structure.
Passaggio 7: aggiunta di numerazione e titoli
“Vogliamo avere un numero su ciascun segmento esagonale. Dovrebbero essere numerati in sequenza. Il primo nella prima riga dovrebbe essere 1 e l’ultimo nell’ultima riga dovrebbe essere 492. Quando mostriamo le informazioni del segmento esagonale su MouseOver, dovremmo mostrare anche il numero.”
Claude inizialmente assegnato numeri in base all’indice Ring, non all’ordine di riga.
“Stai generando numeri in base alla posizione nell’anello … ma la numerazione dovrebbe essere basata su righe. Quindi dovremmo in qualche modo mappare gli anelli sulla riga. Advert esempio, l’anello 13 il numero 483 è nella riga 1 e dovrebbe essere numerato 1, ecc. Puoi suggerire un modo per mappare i segmenti di mappa dagli anelli alle righe in questo modo?”
Una volta implementata questa mappatura, tutto è andato a posto:
- Un structure circolare di 492 segmenti numerati
- Un piccolo divario centrale
- Tooltips che mostra i metadati del segmento
- Simmetria visiva dagli anelli esterni a quelli interni
Riflessioni
Questa esperienza mi ha insegnato various lezioni chiave:
- LLMS ti aiuta a andare avanti con esso: Anche con zero conoscenza della geometria D3.JS o SVG, potrei iniziare a costruire immediatamente. L’IA ha impcarato la codifica e ho imparato attraverso il processo.
- Il suggerimento è iterativo: Il mio primo immediate non period sbagliato – non period abbastanza specifico. Rivedendo l’output advert ogni passaggio, ha chiarito ciò che volevo e perfezionando i miei chiese di conseguenza.
- LLMS sblocca l’apprendimento attraverso la costruzione: Alla high quality, non ho appena ricevuto un’interfaccia utente funzionante. Ho ottenuto una base di codice comprensibile e un punto di ingresso pratico in una nuova tecnologia. Costruire prima e imparare da esso.
Conclusione
Quello che è iniziato come un’concept di design vago si è trasformata in una visualizzazione funzionante, simmetrica e interattiva dello specchio del telescopio di trenta metri, costruito in modo collaborativo con un LLM.
Questa esperienza ha ribadito che lo sviluppo rapido non riguarda solo la generazione di codice: si tratta di pensare attraverso il design, chiarire l’intento e costruire la tua strada per la comprensione.
Se hai mai desiderato esplorare una nuova tecnologia, costruire un’interfaccia utente o affrontare una visualizzazione specifica del dominio-non aspettare prima di imparare tutto.
Inizia a costruire con un LLM. Imparerai lungo la strada.
