Παραγωγή κώδικα HTML, CSS & JS: Claude vs. ChatGPT vs. Gemini
Ζήτησα από το Claude, ChatGPT και το Gemini να παράξουν ένα πολύ συγκεκριμένο layout για ένα website και στην πορεία να το εξελίξουν. Να δούμε πως τα πήγαν.
Απαραίτητα disclaimers:
Eίναι Μάρτιος 2025 και τα AI εργαλεία είναι υπό συνεχή διαμόρφωση. Πράγμα το οποίο σημαίνει ότι σε 6 μήνες ή σε τρεις τα πράγματα μπορεί να είναι εντελώς διαφορετικά.
Ό,τι ακολουθεί αφορά πολύ συγκεκριμένη παραγωγή κώδικα, δεν κρίνει τα tools γενικά.
Πάντα υπάρχει η πιθανότητα να έχω χρησιμοποιήσει κάποιο από τα τρία tools χωρίς να έχω πάρει το 100% από αυτό.
Η δοκιμή αφορά την παραγωγή κώδικα HTML, CSS & Javascript για τη δημιουργία ενός website. Η διαδικασία έγινε δύο φορές. Μία σε τρία βήματα, ώστε να δω πώς το κάθε tool εξελίσσει τον κώδικα του και μία όλα σε ένα.
Έβαλα λοιπόν το Claude, το ChatGPT και το Gemini να φτιάξουν ένα δίστηλο layout, με την αριστερή στήλη να έχει λογότυπο και μενού και να μην κάνει scroll και η δεξιά στήλη να έχει το κυρίως περιεχόμενο.
Μετά την πρώτη απάντηση ζήτησα το design να είναι responsive, στο mobile το μενού να ανοίγει με συγκεκριμένο τρόπο και από συγκεριμένη θέση. Σε αυτό το βήμα ζητήθηκε και fluid typography.
Μετά και από τη δεύτερη απάντηση ζητήθηκε να δημιουργηθεί και μια δεύτερη σελίδα, να ενεργοποιηθούν τα links από τη μία στην άλλη και κάθε φορά που αλλάζω σελίδα να έχουμε smooth page transitions. Και τέλος μέσα στις σελίδες να υπάρχουν images και καθώς κάνω scroll τα images να έχουν ένα μικρό animation.
Κανένα από αυτά τα ζητούμενα δεν κάτι extreme, ειδικά τα πρώτα, αλλά όσο προχωράμε με νέα features νομίζω ότι προκύπτει μια πολυπλοκότητα.
Τα κριτήρια για να μπορέσω να είμαι δίκαιος με το κάθε tool δεν ήταν μόνο η ποιότητα του κώδικα, αλλά και το ποσό μπορεί να τον βελτιώσει, ποσό εύχρηστο είναι και πόσο καλά τεκμηριώνει το τι κάνει. Bonus κριτήριο ήταν να ζητήσω από το κάθε tool να παράξει το ίδιο αποτέλεσμα με άλλο τρόπο.
Τα ευρήματα ήταν τα εξής.
Ποιότητα Κώδικα
Claude
Απίστευτα καλός κώδικας με την πρώτη. Πολύ καθαρός, πολύ to the point. Όσο κι αν η δυσκολία αυξανόταν το αποτέλεσμα ήταν από πάρα πολύ καλό και πάνω. Και ο κώδικας πολύ κομψός.
Βαθμολογία: 9
ChatGPT
Εκτέλεσε το πρώτο βήμα άριστα αλλά στα επόμενα "ξεχνούσε" πραγματάκια. Το τελικό αποτέλεσμα ήταν οριακά αποδεκτό. Πράγμα το οποίο σημάνει ότι πρέπει να παρέμβεις σοβαρά σε αυτόν τον κώδικα για να τον χρησιμοποιήσεις. Έχασε εντελώς πράγματα όπως π.χ. την έννοια του fluid typography.
Επίσης, το ChatGPT πάραξε κώδικα πολύ καλύτερο όταν εκτέλεσε τα πάντα σε ένα βήμα σε σχέση με όταν το έκανε σε τρία βήματα.
Βαθμολογία: 5
Gemini
Ξεκίνησε κι αυτό πολύ καλά όπως και το ChatGPT, αλλά στη συνέχεια άλλαζε το layout προς το χειρότερο σε κάποια σημεία χωρίς να του ζητηθεί. Επίσης πρόσθεσε styling που δε ζητήθηκε. Όμως γενικά ήταν πολύ πιο αποτελεσματικό από το ChatGPT.
Βαθμολογία: 7
Βελτιώσεις στον κώδικα / Rebuilding
Εδώ μιλάμε για τις περιπτώσεις που ζητήθηκε από τα AI tools να επαναλάβουν το ίδιο πράγμα ξεκινώντας από το μηδέν ή να βελτιώσουν συγκεκριμένα μικρά features π.χ. πού θα είναι η θέση του logo στο mobile ή από ποια ανάλυση αρχίζει το mobile.
Claude
Πάρα πολύ καλό. Στο μόνο σημείο που δυσκολεύτηκε ήταν του ζήτησα "slightly more elegant transitions", πράγμα δεν είναι εύκολα κατανοητό ούτε για έναν άνθρωπο. Επιπλέον το Claude σε κάθε νέο βήμα βελτίωνε κι από λίγο τον κώδικα που είχε ήδη παράξει χωρίς να του το ζητήσω.
Βαθμολογία: 9
ChatGPT
Δεν τα πήγε καλά. Κάθε φορά που του ζητούσα να βελτιώσει κάτι, χαλούσε και κάτι άλλο. Και στο τέλος το αποτέλεσμα ήταν ίσως και λίγο χειρότερο από αυτό που είχε παραχθεί στην αρχή.
Βαθμολογία: 3
Gemini
Πολύ καλύτερο από το ChatGPT. Αυτό όντως βελτίωνε το αποτέλεσμα κάθε φορά αλλά από λίγο. Και μερικές φορές όπως και πριν άλλαζε ελαφρά το layout χωρίς να του έχει ζητηθεί κάτι τέτοιο.
Βαθμολογία: 7
Τεκμηρίωση
Claude
Δεν ξέρω τι να πω εδώ. Το Claude εξηγούσε αναλυτικά και πολύ κατανοητά τι έκανε σε κάθε βήμα του. Σε βαθμό υπερβολής δηλαδή. Κάπου όπα, Claude.
Βαθμολογία: 10
ChatGPT
Μια χαρά τα πήγε το ChatGPT, είπε όσα έπρεπε να πει καθαρά και λιτά. Αν δεν ήταν τόσο καλά τα άλλα δύο, θα του έβαζα πιο μεγάλη βαθμολογία.
Βαθμολογία: 7
Gemini
Περίπτωση Claude. Ήταν σαν, όχι απλώς να αιτιολογούσε τι έκανε, αλλά να θέλει να σε μάθει κιόλας. "Κοίτα πώς το κάνω, bro, να το μάθεις κι εσύ".
Βαθμολογία: 10
Ευχρηστία
Claude
Μισή οθόνη ερώτηση & απάντηση, άλλη μισή για κώδικα. Με ένα κλικ βλέπεις το αποτέλεσμα του κώδικα σου, δηλαδή μια ιστοσελίδα. Κατεβάζεις τα αρχεία στον υπολογιστή σου επίσης με ένα κλικ (ΟΚ μετά θέλουν μια μετονομασία). Όλα είναι τακτοποιημένα, εύληπτα και πολύ όμορφα.
Βαθμολογία: 9
ChatGPT
Στην αρχή τα πήγαινε καλά, μπορούσα δηλαδή να δω και το chat και τον κώδικα και το αποτέλεσμα σε μορφή ιστοσελίδας. Στην πορεία, κάπου στο 2ο βήμα αυτό το τελευταίο το έχασα - δεν ξέρω ίσως έκανα κάτι λάθος. Και σε κανένα βήμα δεν μπορούσα να κατεβάσω τον κώδικα ως αρχείο, μόνο με copy-paste γινόταν η δουλειά.
Βαθμολογία: 6
Gemini
Δύσχρηστο. Σε κανένα στάδιο της διαδικασίας δεν μπορείς να κατεβάσεις τον κώδικα ως αρχείο ούτε να τον δεις να παίζει online. Και γενικώς το User Interface φαίνεται λίγο πρόχειρο.
Βέβαια έχει και μια κρυμμένη επιλογή, το Export to Replit. Το οποίο όμως Replit είναι κάτι άλλο, δεν είναι πια Gemini. Από ένα σημείο και μετά εξαφανίστηκε εντελώς για κάποιο λόγο που δεν κατάλαβα.
Βαθμολογία: 4
Εναλλακτικός κώδικας
Και τα τρία AI tools παράξανε κώδικα με CSS Flexbox. Είναι σχεδόν προφανές, το Flexbox είναι η κατάλληλη προσέγγιση για το layout αυτό. Ζήτησα λοιπόν ακριβώς το ίδιο αποτέλεσμα με CSS Grid.
Claude
Το έκανε σχεδόν τέλεια. Το τελικό αποτέλεσμα είχε κάποιες παραλείψεις σε σχέση με όλη τη δουλειά που είχε γίνει με Flexbox, αλλά ήταν κάτι παραπάνω από αποδεκτό.
Βαθμολογία: 8
ChatGPT
Το ChatGTP ναι μεν έγραψε κώδικα με CSS Grid για το βασικό layout, και το έκανε πολύ καλά αυτό, αλλά ξέχασε όλα τα άλλα. Απογοητευτικό.
Βαθμολογία: 4
Gemini
Τα πήγε καλά, σχεδόν όσο καλά όσο το Claude, μόνο που είχε λίγα παραπάνω λαθάκια/παραλείψεις.
Βαθμολογία: 7
Συμπεράσματα
Εύκολα είναι τα συμπεράσματα.
Το Claude είναι καταπληκτικό και έτοιμο για HTML, CSS & JavaScript. Αν δοκίμαζα να κάνω το ίδιο πράγμα γράφοντας εγώ κώδικα υπολογίζω ότι θα χρειαζόμουν τον ίδιο χρόνο x15 ή x20. Χωρίς καμία υπερβολή. Το πληρώνεις τώρα και πορεύεσαι μέχρι να βρεθεί κάτι καλύτερο.
Το ChatGPT είναι απλώς ΟΚ. Σου δίνει μια καλή αφετηρία, αλλά υπάρχει πολύς κώδικας που πρέπει να γράψεις μέχρι να προκύψει το layout που θες.
Το Gemini είναι κάπου στο ενδιάμεσο και λίγο παραπάνω. Μου άφησε μια αίσθηση πως ό,τι βλέπουμε τώρα είναι λίγο ημιτελές και σύντομα θα έχει να μας πει πολλά περισσότερα.
Τελικά, αν βγάζει κάποιος χρήματα παράγοντας κώδικα, οποιονδήποτε τύπου κώδικα, το AI είναι σίγουρα ένας λόγος για προβληματισμό. Αν όμως μάθει πώς να κάνει το ΑΙ φίλο του, τότε τα πράγματα μπορούν να γίνουν πολύ καλύτερα. Ας χρησιμοποιήσουμε το μυαλό μας διαφορετικά, όποιος δεν προσαρμόζεται, χάνει. Έχει συμβεί ξανά και ξανά μέσα στα χρόνια.
