Πώς κωδικοποίησα το Vibe τον ιστότοπο της Βιβλιοθήκης εικονιδίων Pixel χωρίς να μάθω να κωδικοποιώ (Ευχαριστώ, Τεχνητή νοημοσύνη δρομέα!)

Ως σχεδιαστής, πάντα με γοήτευε η διασταύρωση σχεδιασμού και τεχνολογίας. Το χάσμα μεταξύ σχεδιαστή και προγραμματιστή πάντα με κέντριζε το ενδιαφέρον — δεν περίμενα ποτέ να το ξεπεράσω τόσο σύντομα.

Το Pixel Icon Library by HackerNoon ξεκίνησε ως ένα διασκεδαστικό σχέδιο σχεδίασης για τη δημιουργία εικονιδίων με pixel που αποτύπωσαν τη νοσταλγική ουσία της σχεδιαστικής γλώσσας του HackerNoon—αλλά μετατρέποντας ο ίδιος ένα αρχείο Figma Design σε έναν πλήρως λειτουργικό ιστότοπο; Αυτό δεν υπήρχε στην κάρτα μου για το 2025 μέχρι που ανακάλυψα το Cursor AI. Έχοντας τη βιβλιοθήκη ανοιχτού κώδικα μέσω GitHub, xFigma και NPM, πάντα θέλαμε να κάνουμε αυτά τα εικονίδια πιο προσιτά στην κοινότητα. Η ιδέα ήταν απλή: ας φτιάξουμε έναν ιστότοπο όπου οι σχεδιαστές και οι προγραμματιστές θα μπορούσαν να περιηγηθούν, να αναζητήσουν και να κατεβάσουν αυτά τα εικονίδια για τα έργα τους.

Η πρόκληση; Είχα κυριολεκτικά μηδενική εμπειρία με την κωδικοποίηση.💀

Εισαγάγετε το Cursor AI, έναν επεξεργαστή κώδικα με τεχνητή νοημοσύνη που γρήγορα έγινε ο μέντορας και ο οδηγός μου σε αυτό το ταξίδι. Να πώς ξεπέρασα τα όριά μου από τη σχεδίαση στο full-stack με τη βοήθεια AI και κάποια σοβαρή κωδικοποίηση vibe .

Ξεκινώντας από το Ground Zero

Το πρώτο βήμα ήταν να καθορίσω τι ήθελα να φτιάξω και να κάνω έναν απολογισμό αυτού που είχα ήδη:

• Μια βιβλιοθήκη εικονιδίων pixel σε μορφή SVG.
• Ένα σχέδιο Figma για την ιστοσελίδα.
• Μια λίστα με τα χαρακτηριστικά που ήθελα στον ιστότοπο.
• Καμία ιδέα για το πώς να το ζωντανέψεις.

Ξεκίνησα με τη δημιουργία ενός κλάδου ιστότοπου στο αποθετήριο GitHub Library Icon Pixel . Στη συνέχεια, εγκατέστησα το Cursor AI και το ξεκίνημα ήταν εκπληκτικά απλό.

Ρύθμιση του έργου με το Cursor AI

Μετά την εγκατάσταση του δρομέα, το επόμενο πράγμα ήταν να ελέγξετε για:

• GIT - για έλεγχο έκδοσης
• Node.js - για το πακέτο NPM

Με τα απαραίτητα εγκατεστημένα, ήρθε η ώρα να λερώσω τα χέρια μου. Κλωνοποίησα το repo στο σύστημά μου, άνοιξα το φάκελο του έργου στο Cursor AI και ξεκίνησα μια συνομιλία με τον ενσωματωμένο βοηθό AI.

Έχοντας μια καλή εμπειρία με τον Claude, επέλεξα το Claude 3.7 Sonnet σε Agent Mode για να με καθοδηγήσει στη διαδικασία.

Με την πρώτη προτροπή, εξήγησα εν συντομία τι ήθελα να δημιουργήσω και απαρίθμησα τις απαιτούμενες δυνατότητες μαζί με μια βασική δομή του έργου, ζητώντας προτάσεις σχετικά με το πλαίσιο(α) που πρέπει να δοθεί προτεραιότητα στην αποτελεσματικότητα και την ταχύτητα. Ο κέρσορας βοήθησε με την απαραίτητη δομή φακέλου και μου πρότεινε να παραμείνω στο HTML & Tailwind για το έργο. Δημιούργησε ακόμη και τα αρχεία που απαιτούνται για την έναρξη του έργου. Δείτε πώς έγινε η δομή του φακέλου μετά από αυτό:

├── index.html

├── src/

│ ├── style.css

│ ├── output.css

├── assets/

├── fonts/

├── scripts/

Το επόμενο βήμα ήταν η ρύθμιση του Tailwind και η έναρξη με το UI.

Ρύθμιση του Tailwind CSS και δημιουργία του UI

Προς έκπληξή μου, ο Cursor μπέρδεψε την εγκατάσταση του Tailwind και μπέρδεψε τις εντολές από το Tailwind v3.4 & v4.0. Λοιπόν, ήρθε η ώρα να ανεβάσω! Πήγα στα Έγγραφα εγκατάστασης Tailwindcss και ακολούθησα αυτά τα βήματα:

• Για να εγκαταστήσετε το Tailwind, ανοίξτε το τερματικό και εκτελέστε:

  npm install tailwindcss @tailwindcss/cli

• Εισαγωγή Tailwind σε αρχείο src/style.css:

  @import "tailwindcss";

• Για να ρυθμίσετε τη Διαδικασία Build, εκτελέστε:

  npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch

• Ξεκινήστε να χρησιμοποιείτε το Tailwind στο HTML:

  <link href="/src/output.css" rel="stylesheet">

Μόλις εγκαταστάθηκε το Tailwind και οι κλάσεις ήταν έτοιμες για χρήση, άρχισα να ορίζω χρώματα, γραμματοσειρές και άλλα άτομα για τον παράγοντα AI πριν δημιουργήσω πιο πολύπλοκα μόρια, οργανισμούς και σελίδες σύμφωνα με το Figma Design μου.

Στη συνέχεια, εγκατέστησα το πακέτο NPM Library Icon Pixel για να χρησιμοποιήσω τα εικονίδια στο έργο. Ακολουθούν τα βήματα για την εγκατάσταση του πακέτου NPM:

• Εγκαταστήστε το πακέτο:

  npm i @hackernoon/pixel-icon-library

• Εισαγάγετε το CSS στο HTML σας

  (Μετακίνησα όλα τα απαραίτητα αρχεία γραμματοσειράς εικονιδίων στο φάκελο /fonts για ευκολία πρόσβασης.)

  <link href="/fonts/iconfont.css" rel="stylesheet">

• Για να εμφανίσετε ένα εικονίδιο, προσθέστε

  <i class="hn hn-icon-name"></i>

Για τη διεπαφή χρήστη, ακολούθησε μια προσέγγιση στοιχείο προς στοιχείο για να κρατήσω τα πράγματα οργανωμένα και να διευκολύνω την επαναφορά στην προηγούμενη επανάληψη, αν χρειαστεί.

Ιδού η σειρά:

• Nav Bar
• Υποσέλιδο
• Τομέας Ηρώων
• Γραμμή αναζήτησης
• Εικονίδιο Κάρτες & Πλέγμα
• Μεμονωμένο εικονίδιο Modal

Φρόντισα να ορίσω συμπληρώματα, περιθώρια, ακτίνα περιγράμματος, χρώματα και διαστάσεις για όλα αυτά τα στοιχεία, προσθέτοντας επίσης καταστάσεις αιώρησης και κλικ. Εκτός από τις ιδιότητες CSS, συμπεριέλαβα συμπεριφορές ανταπόκρισης και αλληλεπιδράσεις στα μηνύματα.

Icon Data Challenge & Implementing Search Function

Με τα στοιχεία διεπαφής χρήστη στη θέση τους, ήρθε η ώρα για την πραγματική πρόκληση: εμφάνιση όλων των εικονιδίων με τα στοιχεία τους - Όνομα εικονιδίου, Ετικέτα τύπου εικονιδίου και κώδικας SVG, διασφαλίζοντας παράλληλα την ομαλή λειτουργία αναζήτησης. Για να ξεπεραστεί αυτό, ο Cursor πρότεινε μια δομημένη προσέγγιση:

• Δημιουργία αρχείου JSON με μεταδεδομένα εικονιδίων και κώδικα SVG
• Φόρτωση των δεδομένων από το JSON για αποτελεσματική εμφάνιση.
• Εφαρμογή αναζήτησης με βάση το όνομα του εικονιδίου.
• Προσθέστε φίλτρα αναζήτησης με βάση τις ετικέτες τύπου εικονιδίου - σταθερές, κανονικές, επωνυμίες/εικονίδια κοινωνικών μέσων, purrcats

Για περαιτέρω αυτοματοποίηση αυτής της διαδικασίας, ζήτησα από τον Δρομέα να δημιουργήσει ένα σενάριο για να προσθέσει όλα τα δεδομένα εικονιδίων στο αρχείο /data/icons.json.

Τώρα, με την αναζήτηση να λειτουργεί, τα φίλτρα αναζήτησης στη θέση τους και το εικονίδιο να λειτουργεί όπως έπρεπε, το μόνο που έμεινε να κάνουμε ήταν να προσθέσουμε τις υπόλοιπες αλληλεπιδράσεις στη διεπαφή χρήστη, διεξοδικές δοκιμές και ανάπτυξη!

Ανάπτυξη & Πέρα

Μόλις έμεινα ευχαριστημένος με το UI και δοκίμασα διεξοδικά κάθε λειτουργικότητα, ήρθε η ώρα για την επόμενη πρόκληση - Ανάπτυξη!!!

Δεδομένου ότι το έργο ήταν ένας στατικός ιστότοπος, χρειαζόμουν μια λύση φιλοξενίας που να ήταν γρήγορη, δωρεάν και εύκολη στη συντήρηση. Το GitHub Pages δεν ήταν καθόλου έξυπνο! Προσέφερε:

• Απρόσκοπτη ενσωμάτωση με το αποθετήριο GitHub, καθιστώντας την ανάπτυξη αβίαστη.
• Είναι δωρεάν για χρήση και ταιριάζει καλύτερα για στατικά έργα όπως αυτό.
• Οι ενημερώσεις είναι εξαιρετικά εύκολες - το μόνο που χρειάζεστε είναι μια δέσμευση!

Αλλά προτού μπορέσω να προωθήσω όλο τον κώδικά μου στο αποθετήριο και να αναπτύξω μέσω των Σελίδων GitHub, έπρεπε να καθαρίσω τον κώδικα και να ελέγξω για τυχόν προβλήματα παραγωγής. Μετά από ένα γρήγορο πέρα δώθε με τον κέρσορα, και μερικές τροποποιήσεις, ήταν όλα έτοιμα για κυκλοφορία!

Εδώ είναι το μόνο που χρειάζεται να κάνετε για να αναπτύξετε το έργο σας μέσω των Σελίδων GitHub:

• Σπρώξτε όλο τον κώδικά σας στο αποθετήριο GitHub και βεβαιωθείτε ότι είναι δημόσιος
• Ενεργοποίηση σελίδων GitHub για το repo
  • Μεταβείτε στις Ρυθμίσεις
  • Κάντε κλικ στις Σελίδες
  • Ορίστε το Branch σε " Ιστότοπος " (Το υποκατάστημα όπου βρίσκεται ο κωδικός σας. Στην περίπτωσή μου, ήταν σε κλάδο ιστότοπου)
  • Κάντε κλικ στην Αποθήκευση
• Προαιρετικός:
  • Προσθέστε τον προσαρμοσμένο τομέα σας (όπως χρησιμοποίησα: pixeliconlibrary.com)
  • Διαμόρφωση DNS (Ευχαριστώ τον Richard που με βοήθησε με αυτό)
• Περιμένετε λίγα λεπτά και ο ιστότοπός σας θα είναι LIVE!

Ένα προϊόν για το οποίο πρέπει να είστε περήφανοι

Από το σχεδιασμό εικονιδίων pixel-art μέχρι την κωδικοποίηση vibe σε έναν πλήρως λειτουργικό ιστότοπο, αυτό το έργο με ώθησε πέρα από τη ζώνη άνεσής μου με τον καλύτερο δυνατό τρόπο. Κοιτάζοντας πίσω, ήταν κάτι περισσότερο από τη δημιουργία ενός ιστότοπου - ήταν να διευρύνω τους δημιουργικούς μου ορίζοντες και να συνειδητοποιήσω ότι με την τεχνητή νοημοσύνη, η γραμμή μεταξύ σχεδιασμού και ανάπτυξης θολώνει πιο γρήγορα από ποτέ. Και για μένα είναι σαν να έχει ανοίξει ένας ατελείωτος δρόμος μπροστά στα μάτια μου.

Θέλετε να ρίξετε μια ματιά στον κώδικα πίσω από τον ιστότοπο; Ρίξτε μια ματιά στο αποθετήριο GitHub !