Segui ZDNET: Aggiungici come fonte preferita su Google.
I principali punti salienti di ZDNET
- Ho testato ChatGPT Photos 2.0 su due interfacce utente attive del prodotto.
- L’intelligenza artificiale ha riscontrato problemi di progettazione e ha suggerito soluzioni pratiche.
- Per gli sviluppatori solisti, la revisione del progetto AI potrebbe essere un grosso problema.
Nell’ultima settimana ho esplorato le profondità della nuova versione ChatGPT Photos 2.0 di OpenAI. Questa è una versione molto più consequenziale di quanto sembri a prima vista.
Siamo rimasti tutti colpiti dai generatori di immagini AI. Questi strumenti creano belle immagini e possono eseguire alcuni trucchi divertenti. Possono anche produrre molta pendenza dell’IA. Ma finora sono stati limitati nella comprensione di ciò che stanno producendo.
Inoltre: 7 tecniche di codifica AI che utilizzo per spedire prodotti reali e affidabili, velocemente
Immagini 2.0 aggiunge intelligenza dell’argomento alla generazione delle immagini. Questa funzionalità significa che ChatGPT può ricevere incarichi e produrre output di alto valore.
In questo articolo esamineremo uno di questi tipi di assegnazione, l’aggiornamento di un’interfaccia utente. In precedenza, gli agenti di codifica potevano provare a ripulire un elemento dell’interfaccia utente qua e là. I chatbot potrebbero fornire consigli basati su testo su ciò che necessitava di essere risolto. Ma non sono riusciti a realizzare il progetto completo.
Ora possono. Ho inserito due progetti di interfaccia utente su cui sto lavorando attivamente in ChatGPT Photos 2.0 sul mio piano ChatGPT Plus da $ 20 al mese. In pochi minuti, ChatGPT ha restituito due interfacce utente riprogettate, che hanno portato entrambe a tutta una serie di miglioramenti di progettazione che intendo incorporare nei miei prodotti.
Ecco quattro articoli recenti che ti aggiorneranno su ciò che ho già trovato con questo nuovo strumento:
Utilizzo spesso il mio lavoro non ZDNET come materiale di progetto per articoli di scoperta di ZDNET. Cerco di evitare di condividere nomi e collegamenti di prodotti perché non voglio alcun conflitto di interessi. Ma in questo articolo è necessario mostrare i nomi dei prodotti. I nomi fanno parte del design dell’interfaccia utente esistente su cui ho chiesto all’intelligenza artificiale di lavorare. Se li tirassi fuori, non avrebbe molto senso. Continuerò a evitare collegamenti ai prodotti stessi.
Inoltre: ho completato 4 anni di sviluppo del prodotto in 4 giorni per $ 200 e sono ancora sbalordito
Cominciamo.
Progettazione dell’interfaccia Mac
Per questa sfida, avevo due interfacce che volevo gestire tramite l’intelligenza artificiale.
Inoltre: ho usato Claude Code per codificare un’app Mac in 8 ore, ma è stato più lavoro che magia
La prima è un’app per Mac con cui scrivo Vibe Code con Claude Code da gennaio. Questo progetto sta richiedendo un po’ di tempo perché ho solo un’ora o due alla settimana per lavorarci e utilizza l’intelligenza artificiale interna di MacOS per l’elaborazione e l’analisi delle immagini.
Ecco il design così come esiste nella mia app in questo momento. Stanno accadendo molte cose qui. Mi interessano particolarmente i pulsanti grandi a sinistra, perché riflettono i colori del marchio dell’attività di e-commerce di mia moglie. Si traducono molto bene anche nell’app per iPhone:
Ho caricato lo screenshot su ChatGPT e ho inserito il messaggio “Riprogetta questa interfaccia utente per renderla più attraente e più facile da usare”. Ecco cosa ha creato ChatGPT Photos 2.0:
All’inizio non mi piacevano le modifiche. Il cambiamento più evidente è stata la perdita dei pulsanti colorati. Ma anche l’intelligenza artificiale non ha capito bene che ci sono opzioni di visualizzazione nella parte inferiore della visualizzazione a griglia.
Inoltre: come l’intelligenza artificiale è diventata improvvisamente molto più utile per gli sviluppatori open supply
D’altra parte, guarda quei quadrati rossi. Queste sono le aree del nuovo mockup che mi piacciono molto e che intendo incorporare nella mia interfaccia utente:
- L’insieme di azioni in basso a sinistra erano icone dell’app per iPhone, ma hanno un aspetto molto migliore con l’interfaccia utente presentata dall’intelligenza artificiale.
- Allo stesso modo, l’intelligenza artificiale ha aggiunto una zona di intestazione molto più chiara nella parte superiore della visualizzazione griglia, come mostrato nel riquadro rosso centrale in alto.
- L’intelligenza artificiale ha inoltre distribuito le miniature dei sample, dando loro più respiro per rendere la casella di selezione chiara e attraente, come mostrato nel riquadro rosso in basso al centro.
- L’intelligenza artificiale ha aggiunto un’opzione preferita che non ho collegato, ma che mi piace molto.
- Infine, mi piace l’concept di un campo Aggiunto/Aggiornato persistente nella parte inferiore della visualizzazione dei dettagli.
Il mio principale insegnamento da questo esercizio sono le cinque nuove word di progettazione che intendo incorporare nel mio prodotto. Non sto riprogettando l’intera app per riflettere l’interfaccia utente suggerita. Tuttavia, l’immagine includeva alcune idee fantastiche.
Inoltre, avere un mockup come questo renderà molto più semplice mostrare a Claude Code cosa vorrei che facesse. Questo esercizio è un ottimo esempio di utilizzo del piano ChatGPT Plus da $ 20 al mese e del piano Claude Code Max 5x da $ 100 al mese per creare software program migliore.
Progettazione dell’interfaccia internet
Il prossimo è l’interfaccia utente per la pagina iniziale del mio prodotto di sicurezza. Il mio design è pulito ma piuttosto rudimentale, riflettendo principalmente il fatto che non mi piace scrivere codice in CSS.
Inoltre: ho scritto codice per 24 giorni in 12 ore con uno strumento AI da 20 dollari, ma c’è un grosso problema
Lo scorso autunno, nel mio primo progetto di codifica delle vibrazioni basato su agenti, ho utilizzato il Codex di OpenAI nel mio piano ChatGPT Plus (che ha esaurito la disponibilità dell’IA abbastanza velocemente) per riprogettare l’interfaccia utente da abbastanza brutta a ineccepibile. Ecco il risultato di quel primo passaggio lo scorso autunno. Ho realizzato il design, dicendo a Codex dove e come disporre il CSS:
I risultati dei miei take a look at di questa settimana sono stati interessanti. Ho incollato lo screenshot in ChatGPT, ma ho premuto accidentalmente Invio prima di poterlo inviare. ChatGPT ha deciso da solo di analizzare la pagina, deducendo che “I problemi maggiori sono una gerarchia visiva debole, troppo grigio, un blocco introduttivo molto lungo e tre carte inferiori che competono equamente per l’attenzione anche se non sono ugualmente importanti.”
Ha inoltre raccomandato una “estetica amministrativa più moderna”, tra cui:
- Sfondi in cartoncino bianco invece di grandi pannelli grigi.
- Confini più morbidi.
- Maggiore spazio tra le sezioni.
- Un colore forte, utilizzato in modo coerente per pulsanti, collegamenti e stati attivi.
- Lunghezze di riga più brevi per il corpo del testo.
- Migliore contrasto tra titoli, sottotitoli e corpo del testo.
Inoltre: Claude Code ha guadagnato l’incredibile cifra di 1 miliardo di dollari in 6 mesi e la mia app per iPhone codificata con intelligenza artificiale mostra il perché
A questo punto, ho deciso di utilizzare Immagini 2.0 e ho chiesto: “Forniscimi un’immagine dell’interfaccia ridefinita”. Ecco cosa ha prodotto l’IA:
Questo output fornisce anche alcune word di progettazione con cui posso tornare al Codex. Utilizzo Codex di OpenAI con il prodotto internet e Claude Code con il prodotto Mac, principalmente per avere esperienza con i due strumenti di codifica advert agenti in modo da poter scrivere su di essi. Se non avessi scritto qui come obiettivo principale, sceglierei uno strumento o l’altro. Ho trovato entrambi ugualmente utili.
Inoltre: come la nuova modalità automatica di Claude Code previene i disastri della codifica AI, senza rallentarti
ChatGPT Photos 2.0 ha deciso di inventare un emblem (soprattutto perché non ne avevo fornito uno nella mia prima immagine). L’intelligenza artificiale ha aggiunto numerous funzionalità che mi sono piaciute.
Innanzitutto, mi è piaciuta molto l’estetica generale del design consigliata. Potrebbe essere molto impegnativo propagarlo nel resto del prodotto (è un prodotto gigantesco), ma il design mi è piaciuto.
Inoltre, mi è piaciuto il modo in cui l’intelligenza artificiale ha promosso tre aree separate di assistenza per l’utente: la zona Configurazione rapida, la zona Hai bisogno di aiuto e la sezione Configura privateness/Visualizza documenti in alto. Sebbene l’interfaccia originale fornisse agli utenti l’accesso alle informazioni, in realtà non rendeva ovvio da dove cominciare.
Mi è piaciuta anche la sezione Stato del sito in basso. Ho pensato spesso di aggiungere una funzionalità del genere, ma ero un po’ scoraggiato dai requisiti di codifica, perché gli elementi di stato avrebbero dovuto cambiare in base ai plugin freemium installati dall’utente. Tuttavia, vedere una rappresentazione di quella funzionalità mi ha fatto venire voglia di aggiungerla.
Questo cambia le regole del gioco
Ritengo che questa funzionalità stia cambiando il gioco quanto lo è stato ChatGPT quando è uscito per la prima volta, e come lo è stata la programmazione di coppie di agenti quando è arrivata l’property scorsa.
Inoltre: ho creato due app solo con la mia voce e il mouse: gli IDE sono già obsoleti?
Ho inviato due interfacce utente del prodotto all’intelligenza artificiale e ho ricevuto commenti essenzialmente sottoposti a revisione paritaria, insieme a una serie di progetti di prototipi. Come programmatore solista, questo risultato ha un valore inestimabile.
Anche se avessi avuto un staff interno completo, con programmatori e designer nello workers, probabilmente ci sarebbe voluta circa una settimana per eseguire questa analisi e costruire prototipi da rivedere. Le sole spese salariali per quel progetto sarebbero state abbastanza consistenti. Ma per $ 20, mi sono state date due riprogettazioni molto utili, molto costruttive e per nulla stupide dell’intelligenza artificiale che contenevano pepite utilizzabili che renderanno migliori i miei prodotti.
E basta.
Se abbinassi ChatGPT Photos 2.0 con Claude Code o Codex, utilizzeresti il mockup dell’immagine come transient di progettazione per l’agente di codifica? Fatecelo sapere nei commenti qui sotto.
Puoi seguire gli aggiornamenti quotidiani sui miei progetti sui social media. Assicurati di iscriverti a la mia newsletter di aggiornamento settimanalee seguimi su Twitter/X all’indirizzo @DavidGewirtzsu Fb all’indirizzo Facebook.com/DavidGewirtzsu Instagram all’indirizzo Instagram.com/DavidGewirtzsu Bluesky a @DavidGewirtz.come su YouTube all’indirizzo YouTube.com/DavidGewirtzTV.
