Πώς να φτιάξετε έναν ιστότοπο με κινούμενα σχέδια στο Claude Code μέσα σε ένα βράδυ

Μάθετε περισσότερα για την εργασία με μοντέλα στην τεκμηρίωση του Ailoot.

Γιατί φαίνεται από την πρώτη οθόνη ότι ένας ιστότοπος έχει φτιαχτεί από AI;#

Ζητάτε από έναν agent να συναρμολογήσει μια σελίδα προορισμού. Σαράντα λεπτά αργότερα έχετε έναν λειτουργικό ιστότοπο: οι ενότητες είναι στη θέση τους, υπάρχει προσαρμοστική διάταξη και τα κουμπιά λειτουργούν. Και σχεδόν αμέσως νιώθετε ότι το έχετε ξαναδεί κάπου.

Ο λόγος είναι μηχανικός. Το μοντέλο εκπαιδεύτηκε σε μια τεράστια συλλογή ολοκληρωμένων σελίδων και εκείνη η συλλογή είχε έντονη μεροληψία.

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

Η «εμφάνιση AI» έχει αλλάξει στο μεταξύ. Στην τεκμηρίωση της δεξιότητας frontend-design, η Anthropic περιγράφει πλέον διαφορετικές εμφανίσεις.

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

Εδώ, «σαβούρα» σημαίνει έργο που παράγεται από μηχανή και καταλήγει σε ένα γενικό αποτέλεσμα, χωρίς ξεχωριστό στιλ.

Το πρακτικό συμπέρασμα είναι ότι ο agent χρειάζεται μια στενή σχεδιαστική γραμματική αντί για μια εργασία χωρίς σαφή όρια. Αν πείτε «κάν’ το όμορφο», θα πάρει τον μέσο όρο. Αν του δώσετε συγκεκριμένη παλέτα, δυο γραμματοσειρές και ένα χαρακτηριστικό οπτικό στοιχείο, θα χτίσει πάνω σε αυτά.

Η κίνηση είναι το πιο αισθητό στοιχείο αυτής της εικόνας. Ακόμη και μια στατική σελίδα με άψογη τυπογραφία εξακολουθεί να μοιάζει με πρότυπο, επειδή οι ζωντανοί ιστότοποι αναπνέουν: τα στοιχεία εμφανίζονται καθώς κυλάτε τη σελίδα, ο δείκτης αλλάζει πράγματα και οι μεταβάσεις μεταξύ οθονών δεν διακόπτονται απότομα.

Τι χρειάζεστε για να φτιάξετε έναν ιστότοπο με κινούμενα σχέδια στο Claude Code;#

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

Το GSAP είναι η βιβλιοθήκη κινήσεων πίσω από ένα αξιοσημείωτο μερίδιο ιστοτόπων που έχουν κερδίσει βραβεία. Η Webflow την αγόρασε τον Οκτώβριο του 2024 και σχεδόν αμέσως άρχισαν οι φήμες ότι όλα έγιναν δωρεάν. Αυτό δεν είναι απολύτως σωστό: τότε, η Webflow επιβεβαίωσε ότι οι υπάρχουσες τιμές θα παρέμεναν σε ισχύ. Η βιβλιοθήκη έγινε δωρεάν στα τέλη Απριλίου 2025 με την έκδοση 3.13.

Η έκδοση 3.13 αναφέρει συγκεκριμένα ότι τα πρόσθετα που παλαιότερα επί πληρωμή, όπως τα SplitText και MorphSVG, έγιναν επίσης δωρεάν, ακόμη και για εμπορική χρήση. Η τρέχουσα έκδοση τον Ιούλιο του 2026 είναι gsap@3.15.0.

Το δωρεάν, όμως, δεν σημαίνει ανοιχτού κώδικα. Η άδεια παραμένει ιδιόκτητη και απαγορεύει τη δημιουργία οπτικού επεξεργαστή κινήσεων πάνω στο GSAP, που ανταγωνίζεται τη Webflow. Δεν υπάρχουν περιορισμοί για ιστοτόπους, έργα πελατών ή εμπορική εργασία.

Η δεξιότητα frontend-design της Anthropic είναι ένα σύνολο οδηγιών που αλλάζει τον τρόπο με τον οποίο ο agent εργάζεται σε μια διεπαφή. Η περιγραφή του αποθετηρίου της λέει:

Περιλαμβάνει μια μέθοδο δύο περασμάτων. Πρώτα, ο agent συναρμολογεί ένα σύστημα σχεδιαστικών διακριτικών: τέσσερα έως έξι χρώματα με ονόματα, γραμματοσειρές για τουλάχιστον δύο ρόλους, μια διάταξη σε πρόχειρα κειμενικά σχεδιαγράμματα και ένα χαρακτηριστικό οπτικό στοιχείο για τη σελίδα. Έπειτα αξιολογεί το δικό του σχέδιο σε σχέση με την εργασία. Μόνο μετά γράφει κώδικα.

Η ανάρτηση αναφέρει 75 δεξιότητες, η περιγραφή του αποθετηρίου αναφέρει 78 και σήμερα υπάρχουν 91 στο δέντρο αρχείων. Ο δημιουργός το δηλώνει ανοιχτά: ελέγξτε το αποθετήριο με μια εντολή αναζήτησης, επειδή η περιγραφή δεν είναι ενημερωμένη.

Πώς θα κάνετε το Claude Code να σταματήσει να παράγει πρότυπα;#

Ας ξεκινήσουμε με το αρχείο κανόνων, επειδή ισχύει για κάθε αίτημα και δεν κοστίζει τίποτα.

Η λογική είναι απλή: απαριθμήστε τις συγκεκριμένες επιλογές προς τις οποίες το μοντέλο τείνει να παρασύρεται από προεπιλογή και απαγορεύστε τες ονομαστικά.

## Δικλίδες κατά του γενικού αποτελέσματος

- Χρώματα: Μη χρησιμοποιείτε ποτέ την προεπιλεγμένη παλέτα Tailwind (indigo-500, blue-600).
  Επιλέξτε ένα προσαρμοσμένο χρώμα επωνυμίας και αντλήστε αποχρώσεις από αυτό.
- Σκιές: Μη χρησιμοποιείτε ποτέ την επίπεδη shadow-md. Χρησιμοποιήστε πολυεπίπεδες σκιές με χρωματική απόχρωση και χαμηλή αδιαφάνεια.
- Τυπογραφία: Μη χρησιμοποιείτε ποτέ την ίδια γραμματοσειρά για επικεφαλίδες και κυρίως κείμενο. Συνδυάστε μια display/serif
  με μια καθαρή sans. Εφαρμόστε στενή απόσταση χαρακτήρων (-0.03em) στις μεγάλες επικεφαλίδες,
  γενναιόδωρο ύψος γραμμής (1.7) στο κυρίως κείμενο.
- Διαβαθμίσεις: Συνδυάστε πολλαπλές ακτινικές διαβαθμίσεις. Προσθέστε κόκκο/υφή μέσω φίλτρου θορύβου SVG για βάθος.
- Κινήσεις: Κινείτε μόνο transform και opacity. Μη χρησιμοποιείτε ποτέ transition-all.
  Χρησιμοποιήστε ελαστική επιτάχυνση.
- Διαδραστικές καταστάσεις: Κάθε στοιχείο στο οποίο μπορεί να γίνει κλικ χρειάζεται καταστάσεις hover, focus-visible,
  και active. Χωρίς εξαιρέσεις.
- Αποστάσεις: Χρησιμοποιήστε σκόπιμα, συνεπή διακριτικά αποστάσεων, όχι τυχαία βήματα Tailwind.
- Βάθος: Οι επιφάνειες πρέπει να ακολουθούν ένα σύστημα επιπέδων (βάση -> ανυψωμένο -> αιωρούμενο).

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

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

Στη συνέχεια, η δεξιότητα. Οι επίσημες δεξιότητες της Anthropic μπορούν να εγκατασταθούν μέσω του πρόσθετου:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Μια λεπτομέρεια: οι δεξιότητες σχεδιασμού δεν εγκαθίστανται μεμονωμένα· το πρόσθετο example-skills τις φέρνει και τις δώδεκα μαζί. Αν θέλετε μόνο μία, αντιγράψτε τον φάκελο χειροκίνητα—το Claude Code θα τον εντοπίσει χωρίς επανεκκίνηση της συνεδρίας:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

Άλλες δεξιότητες αυτής της συλλογής που μπορεί να φανούν χρήσιμες: το theme-factory με δέκα έτοιμα θέματα και υποχρεωτική ανθρώπινη επιβεβαίωση πριν από την εφαρμογή τους, το web-artifacts-builder για κατασκευή με React και έτοιμα στοιχεία και το algorithmic-art για γραφικά μέσω αλγορίθμων. Ένα ξεχωριστό άρθρο εξηγεί αναλυτικά πώς να επιλέξετε δεξιότητες για μια εργασία: πώς να επιλέξετε δεξιότητες για το Claude Code.

Οι κανόνες και η δεξιότητα λειτουργούν μαζί: οι κανόνες απαγορεύουν τις κακές επιλογές και η δεξιότητα επιβάλλει μια διαδικασία—πρώτα το σύστημα, μετά η αξιολόγηση, τελευταίος ο κώδικας.

Όλα τα σημαντικά συμβαίνουν πριν από το αίτημα. Βάζετε εκ των προτέρων στο πλαίσιο τους περιορισμούς βάσει των οποίων θα χτίσει ο agent και πλέον η διατύπωση της ίδιας της προτροπής ελάχιστα έχει σημασία. Αυτή η προσέγγιση ονομάζεται μηχανική πλαισίου και το αρχείο CLAUDE.md είναι το πρώτο δομικό της στοιχείο. Ο συνδυασμός κλώνος AI + Δεύτερος Εγκέφαλος + Μηχανική Πλαισίου βοηθά να μετατραπεί το Claude από γεννήτρια μέσων αποτελεσμάτων σε εργαλείο που παραμένει πιστό στο στιλ σας.

Πού θα βρείτε έτοιμες οπτικές κατευθύνσεις και προτροπές για κινήσεις;#

Οι τεχνικές κίνησης που περιλαμβάνει είναι: animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

Ως μη προγραμματιστής, αυτό που σας ενδιαφέρει περισσότερο είναι οι έτοιμες οπτικές κατευθύνσεις. Αντί για το αόριστο «κάν’ το μοντέρνο», επιλέξτε μία από αυτές και δώστε στο μοντέλο τη στενή γραμματική που του έλειπε:

• clean-minimal-beige-light-mode - ανοιχτός μπεζ μινιμαλισμός
• dark-glass-clean-layout - σκούρο γυαλί
• documentary-brutalist-agency - ντοκιμαντερίστικο μπρουταλιστικό στιλ
• editorial-portfolio-chapters - χαρτοφυλάκιο χωρισμένο σε κεφάλαια, σαν περιοδικό
• orange-clean-paper-saas - ιστότοπος υπηρεσίας σε στιλ χαρτιού με πορτοκαλί πινελιά
• solar-duotone-bold - έντονη δίχρωμη προσέγγιση
• tech-green-dark-mode-modern - σκούρο τεχνολογικό στιλ με πράσινο
• light-mode-paper-technical - ανοιχτόχρωμο τεχνικό χαρτί

Υπάρχουν επίσης τεχνικές δεξιότητες για γραφικά 3D και εφέ: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

Δεν υπάρχει εντολή εγκατάστασης στο αποθετήριο—ο δημιουργός λέει ξεκάθαρα στον οδικό χάρτη ότι θα προσθέσει μία μόλις οριστικοποιηθεί η μέθοδος ενσωμάτωσης. Η μόνη οδηγία για το Claude Code είναι:

Παρακάτω φαίνεται μία επιλογή εγκατάστασης. Αυτή η εντολή δεν υπάρχει στο αποθετήριο· είναι σύσταση εγκατάστασης:

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

Πώς δίνετε σε έναν agent ενημερωμένη τεκμηρίωση GSAP με μία γραμμή;#

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

Η λύση είναι να βάλετε εσείς την τεκμηρίωση στο πλαίσιο. Το GSAP την παρέχει σε μορφή φιλική προς τις μηχανές:

https://gsap.com/llms.txt

Το αρχείο έχει μέγεθος περίπου 25 kilobyte σήμερα. Κάθε σελίδα τεκμηρίωσης διατίθεται επίσης σε έκδοση markdown—αρκεί να προσθέσετε .md στη διεύθυνση URL.

Στην πράξη, μοιάζει ως εξής:

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

Η βιβλιοθήκη Motion (παλαιότερα Framer Motion) έχει το ίδιο αρχείο, και είναι ακόμη μεγαλύτερο. Το Motion διανέμεται με άδεια MIT και παραμένει πραγματικά ανοιχτού κώδικα· η τρέχουσα έκδοση είναι motion@12.42.2. Αν το έργο είναι σε React και χρειάζεται μόνο απλές εμφανίσεις, μπορείτε να επιλέξετε Motion· για σύνθετες σκηνές κύλισης, χρησιμοποιήστε GSAP με το πρόσθετο ScrollTrigger.

Υπάρχουν επίσης επιλογές που λειτουργούν μόνο στον φυλλομετρητή, χωρίς βιβλιοθήκες. Οι μεταβάσεις κατάστασης σελίδας μέσω του View Transitions API απέκτησαν βασική υποστήριξη στις 14 Οκτωβρίου 2025—αλλά μόνο μέσα σε μία σελίδα· η έκδοση μεταξύ σελίδων δεν υποστηρίζεται καθόλου στον Firefox. Οι κινήσεις κύλισης CSS δεν έχουν ακόμη αποκτήσει βασική υποστήριξη: το Chrome τις υποστηρίζει, το Safari τις έμαθε πρόσφατα, αλλά στον Firefox πρέπει να τις ενεργοποιήσετε χειροκίνητα στις ρυθμίσεις, άρα απλώς δεν θα λειτουργήσουν για τους συνηθισμένους αναγνώστες. Ζητήστε από τον agent να ελέγξει πρώτα αν τις υποστηρίζει καθόλου ο φυλλομετρητής και, αν όχι, να αφήσει τη συνηθισμένη μετάβαση στη θέση της.

Πώς μετατρέπετε έναν ιστότοπο που σας αρέσει σε προτροπή;#

Ο συνηθέστερος τρόπος να εξηγήσετε τι θέλετε είναι να δείξετε ένα παράδειγμα. Αυτό δεν λειτουργεί άμεσα με έναν agent: δεν βλέπει τον ιστότοπο· βλέπει κείμενο.

Η δεξιότητα video-to-superprompt γεφυρώνει το χάσμα. Η περιγραφή του αποθετηρίου της: μετατρέψτε μια αναφορά βίντεο σε λεπτομερή προτροπή για αναδημιουργία ή έμπνευση. Στο εσωτερικό, αναλύει την εγγραφή σε επίπεδα: αφήγηση, διάταξη, κίνηση, τυπογραφία, γραφικά 3D. Το αποτέλεσμα είναι μία έτοιμη προς χρήση προτροπή.

Ο βασικός κανόνας της διατυπώνεται έντονα:

Η δεύτερη δεξιότητα, html-to-interaction-prompts, λειτουργεί με τον πηγαίο κώδικα: εντοπίζει ό,τι κινείται—αντιδράσεις στον δείκτη, γραφικά 3D, εφέ κύλισης, επίπεδα που κινούνται με διαφορετικές ταχύτητες—και χωρίζει τη σελίδα σε ξεχωριστές προτροπές, μία για κάθε ενότητα, κουμπί, κατάσταση αιώρησης ή εφέ. Η αρχή της είναι να αντιμετωπίζει τη συμπεριφορά του πηγαίου κώδικα ως αλήθεια και να μην επινοεί εφέ από ένα στιγμιότυπο οθόνης όταν υπάρχει ο κώδικας.

Η τρίτη, stitched-full-page-capture, λύνει ένα πρακτικό πρόβλημα. Ένα συνηθισμένο στιγμιότυπο ολόκληρης σελίδας σε ιστοτόπους με τεμπέλικη φόρτωση και γραφικά 3D βγαίνει γκρίζο και κενό, επειδή η λήψη γίνεται πριν από την απόδοση. Η δεξιότητα κυλά τη σελίδα οθόνη προς οθόνη, περιμένει να σταθεροποιηθούν όλα και ενώνει το αποτέλεσμα.

Υπάρχει και τρόπος χωρίς εγγραφή οθόνης: συνδέστε τον agent με μια βιβλιοθήκη ζωντανών παραδειγμάτων διεπαφών μέσω MCP. Ο επίσημος διακομιστής Mobbin εγκαθίσταται με μία εντολή:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Έπειτα, ανοίξτε νέα συνεδρία, επιλέξτε τον διακομιστή από τη λίστα και συνδεθείτε μέσω φυλλομετρητή. Ο agent αποκτά πρόσβαση σε στιγμιότυπα οθόνης πραγματικών, λειτουργικών εφαρμογών: αναφέρονται περισσότερα από 621,500 στιγμιότυπα. Πρόκειται για στιγμιότυπα ολοκληρωμένων προϊόντων, όχι στοιχείων ή κώδικα. Σημαντική επισήμανση: ο διακομιστής Mobbin δεν λειτουργεί με το δωρεάν πρόγραμμα· διατίθεται σε πληρωμένα προγράμματα (τον Ιούλιο του 2026). Υπάρχει ξεχωριστό άρθρο για το Google Stitch σχετικά με τη σύνδεση εξωτερικών υπηρεσιών σε agent, με την ίδια μέθοδο για να φέρετε ένα σύστημα σχεδιασμού στο Claude Code.

Βήμα προς βήμα: ιστότοπος με κινούμενα σχέδια μέσα σε ένα βράδυ#

1. Ρυθμίστε ένα έργο

   Αν δεν έχετε ακόμη έργο, ξεκινήστε με έναν άδειο φάκελο. Δημιουργήστε τον, ανοίξτε τον σε ένα τερματικό και εκτελέστε εκεί το claude. Για την πρώτη σας προτροπή, ζητήστε έναν σκελετό: «Φτιάξε έναν ιστότοπο μίας σελίδας για την επιχείρησή μου (περιέγραψε τι είναι), με απλό HTML και CSS, χωρίς βιβλιοθήκες.» Θα εμφανιστεί ένα σύνολο αρχείων—αυτή είναι η ρίζα του έργου, όπου θα γίνονται τα πάντα από εδώ και πέρα.

2. Βάλτε τους κανόνες στο CLAUDE.md

   Αντιγράψτε το μπλοκ Anti-Generic Guardrails σε ένα αρχείο CLAUDE.md στη ρίζα του έργου. Αν δεν υπάρχει, ζητήστε από τον agent να το δημιουργήσει. Οι κανόνες είναι γραμμένοι για το Tailwind· αν ο σκελετός σας χρησιμοποιεί απλό CSS, πείτε στον agent «εφάρμοσε αυτές τις αρχές σε απλό CSS»—το νόημα των κανόνων δεν αλλάζει. Δείτε ανάλυση τεσσάρων κανόνων για το CLAUDE.md για το πώς λειτουργεί το ίδιο το αρχείο και τι άλλο να βάλετε σε αυτό.

3. Εγκαταστήστε τη δεξιότητα frontend-design

   Χρησιμοποιήστε το πρόσθετο example-skills ή αντιγράψτε τον φάκελο frontend-design, όπως περιγράφεται παραπάνω. Μπορείτε να ελέγξετε αν φορτώθηκε η δεξιότητα με την εντολή /doctor.

4. Επιλέξτε μία οπτική κατεύθυνση

   Μία, όχι δύο ή τρεις. Αν αναμείξετε ντοκιμαντερίστικο μπρουταλιστικό στιλ με μπεζ μινιμαλισμό, θα πετύχετε ακριβώς τον μέσο όρο που προσπαθείτε να αποφύγετε. Τα ονόματα των φακέλων είναι περιγραφικά, αλλά δεν μπορείτε να τους κάνετε οπτική προεπισκόπηση: ανοίξτε το SKILL.md αυτού που σας αρέσει και διαβάστε την περιγραφή της παλέτας και των γραμματοσειρών—όλα αναφέρονται εκεί.

5. Φτιάξτε στατική σελίδα

   Χωρίς ούτε ένα κινούμενο σχέδιο. Ξεκινήστε με τυπογραφία, αποστάσεις και πλέγμα. Ζητήστε από τον agent να ξεκινήσει μια τοπική προεπισκόπηση και ανοίξτε τη διεύθυνση που θα σας δώσει. Για να τη δείτε στο τηλέφωνό σας, πείτε «τρέξ’ το ώστε να ανοίγει και σε άλλες συσκευές στο δίκτυό μου» και ο agent θα σας δώσει μια διεύθυνση.

6. Προσθέστε μία σκηνή κίνησης

   Μόνο μία. Συνήθως πρόκειται για την πρώτη οθόνη: εμφανίζεται η επικεφαλίδα και ένα επίπεδο φόντου κινείται πιο αργά από το προσκήνιο. Δώστε στον agent το llms.txt της βιβλιοθήκης και περιγράψτε συγκεκριμένα τη σκηνή—τι κινείται, πού και σε πόσα χιλιοστά του δευτερολέπτου. Αφήστε την αδιαφάνεια εκτός της πρώτης οθόνης· παρακάτω υπάρχει ξεχωριστή ενότητα για τον λόγο.

7. Προσθέστε έναν κανόνα μειωμένης κίνησης

   Εφαρμόστε τον κανόνα CSS και τη ρύθμιση JavaScript μειωμένης κίνησης από την ενότητα προσβασιμότητας. Ελέγξτε τη σελίδα με ενεργή μείωση κίνησης πριν δημοσιεύσετε.

8. Δημοσιεύστε και ελέγξτε την ταχύτητα

   Δημοσιεύστε σε οποιαδήποτε δωρεάν υπηρεσία στατικής φιλοξενίας—Vercel, Netlify ή GitHub Pages. Ζητήστε από τον agent «δημοσίευσε αυτό το έργο στο Vercel και δώσε μου τον σύνδεσμο». Μόνο μετά τη δημοσίευση, ελέγξτε τη διεύθυνση URL στο PageSpeed Insights: η υπηρεσία λειτουργεί με δημόσιες διευθύνσεις URL και δεν μπορεί να δει μια τοπική σελίδα. Κοιτάξτε το «Largest Contentful Paint»—τον χρόνο που χρειάζεται για να αποδοθεί το μεγαλύτερο στοιχείο· η πράσινη ζώνη είναι έως 2.5 δευτερόλεπτα. Ο agent μπορεί να μετρήσει την τοπική έκδοση πριν από τη δημοσίευση: το Chrome DevTools MCP θα την ανοίξει στο Chrome και θα εμφανίσει την ίδια μετρική.

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

Γιατί η υπερβολική κίνηση κάνει έναν ιστότοπο να φαίνεται ακόμη περισσότερο σαν να έχει παραχθεί από AI;#

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

Αυτό αναφέρεται στην ίδια τη δεξιότητα frontend-design που εγκαταστήσατε για να βελτιώσετε τον σχεδιασμό. Η Anthropic προειδοποιεί να μην το παρακάνετε μέσα στο εργαλείο που χρησιμοποιεί ο agent για να διακοσμήσει τη σελίδα.

Αναφέρει επίσης άλλες τυποποιημένες τεχνικές: έναν μεγάλο αριθμό με μικρή λεζάντα και χρωματική διαβάθμιση ως τυπική απάντηση σε κάθε εργασία· αριθμημένα μπλοκ όπως 01 / 02 / 03, κατάλληλα μόνο όταν υπάρχει πράγματι μια ακολουθία.

Πώς φαίνεται στην πράξη η υπερβολή: ο agent παίρνει την εργασία «πρόσθεσε κινούμενα σχέδια» και προσθέτει εφέ εμφάνισης κατά την κύλιση σε κάθε ενότητα. Η επικεφαλίδα γλιστρά προς τα μέσα, τρεις κάρτες αναπηδούν διαδοχικά, οι μαρτυρίες γλιστρούν από το πλάι και το υποσέλιδο σβήνει σταδιακά. Κάθε εφέ είναι καλό από μόνο του. Μαζί, δημιουργούν μια σελίδα που δεν σταματά ποτέ να κινείται και δεν τονίζει τίποτα.

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

Αυτό σας δίνει έναν κανόνα για την προτροπή. Διατυπώστε την ως εξής: «φτιάξε μία σκηνή στην πρώτη οθόνη και άφησε όλα τα υπόλοιπα στατικά». Διαφέρει μόνο κατά λίγες λέξεις από το «πρόσθεσε κινούμενα σχέδια», αλλά το αποτέλεσμα είναι κατά τάξη μεγέθους καλύτερο.

Πώς σκοτώνουν τα κινούμενα σχέδια την ταχύτητα ενός ιστοτόπου;#

Οι τρεις μετρικές που χρησιμοποιεί η Google για να αξιολογήσει μια σελίδα είναι: ο χρόνος απόδοσης του μεγαλύτερου στοιχείου—το πολύ 2.5 δευτερόλεπτα· η ανταπόκριση σε μια αλληλεπίδραση—το πολύ 200 χιλιοστά του δευτερολέπτου· και η μετατόπιση διάταξης—το πολύ 0.1. Μετρώνται στο 75ο εκατοστημόριο των πραγματικών επισκέψεων.

Ας εξηγήσουμε γιατί έχει σημασία εδώ. Από προεπιλογή, ο agent φτιάχνει ένα εφέ αποκάλυψης ως εξής: ορίζει την αδιαφάνεια μιας ενότητας σε μηδέν και μετά αφαιρεί αυτήν τη ρύθμιση όταν η ενότητα μπαίνει στο οπτικό πεδίο. Αν αυτό το εφέ βρίσκεται στην πρώτη οθόνη, η εικόνα μπορεί να έχει φορτωθεί και αποκωδικοποιηθεί πλήρως, αλλά η μετρική δεν θα την προσμετρήσει μέχρι να αρχίσει η απόδοση. Είναι χειρότερο αν ένα σενάριο αφαιρεί την αδιαφάνεια μετά τη φόρτωση—τότε η μετρική περιμένει ολόκληρο το σενάριο.

Υπάρχουν δύο τρόποι να το διορθώσετε. Είτε ξεκινήστε την αποκάλυψη από μικρή μη μηδενική αδιαφάνεια αντί από μηδέν, ώστε να προσμετρηθεί η αρχική απόδοση, είτε αφήστε την αδιαφάνεια ανέπαφη στην πρώτη οθόνη και κινήστε μόνο τη μετατόπιση.

Το δεύτερο ζήτημα είναι τι είναι φτηνό να κινείται και τι είναι ακριβό.

Με απλά λόγια: ο φυλλομετρητής συναρμολογεί την εικόνα σε επίπεδα και οι αλλαγές θέσης και αδιαφάνειας γίνονται στο τελευταίο, φτηνότερο βήμα. Οτιδήποτε άλλο τον αναγκάζει να επανυπολογίσει τη σελίδα. Μετρήσεις από την ίδια τεκμηρίωση: η κίνηση με μετατοπίσεις top και left απαιτεί 37 χιλιοστά του δευτερολέπτου για τη διάταξη και 79 για την απόδοση· το ίδιο οπτικό αποτέλεσμα μέσω transform απαιτεί μηδέν και για τα δύο.

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

Ένα ακόμη σημείο για την ιδιότητα will-change, την οποία οι agents λατρεύουν να προσθέτουν «για βελτιστοποίηση». Η τεκμηρίωση MDN λέει το αντίθετο:

Αναφέρει επίσης ότι η ιδιότητα προορίζεται ως έσχατη λύση για υπάρχοντα προβλήματα επιδόσεων. Δεν λειτουργεί προληπτικά. Μια γραμμή όπως will-change: transform, opacity σε πενήντα στοιχεία είναι χαρακτηριστικό σημάδι κώδικα που δημιουργήθηκε αυτόματα.

Η ιστορία είναι απλούστερη με τη μετατόπιση διάταξης. Η τεκμηρίωση της Google δεν κατηγορεί τις κινήσεις· αντίθετα, οι προσεκτικές μεταβάσεις βοηθούν στην ενημέρωση του περιεχομένου χωρίς να ξαφνιάζουν τον αναγνώστη. Η συνταγή είναι η ίδια: αλλάξτε την κλίμακα με transform αντί για width και height και μετακινήστε με offsets αντί για συντεταγμένες.

Τι γίνεται με όσους βλάπτονται σωματικά από την κίνηση;#

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

Για άτομα με αιθουσαίες διαταραχές, η κίνηση κύλισης μπορεί να προκαλέσει σοβαρή δυσφορία. Η κοινοπραξία W3C περιγράφει τις συνέπειες χωρίς να τις μετριάζει: ναυτία και ημικρανία, μερικές φορές τόσο σοβαρές ώστε να απαιτείται κατάκλιση.

Μπορείτε να το αντιμετωπίσετε με τρεις γραμμές στιλ:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Τρία σημεία να έχετε υπόψη.

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

Η προδιαγραφή λέει «αφαιρεί, μειώνει ή αντικαθιστά»—η πλήρης αφαίρεση δεν είναι καν η πρώτη επιλογή. Η αντικατάσταση μιας απότομης εισόδου με σύντομο σβήσιμο λειτουργεί καλύτερα από τον πλήρη τερματισμό της: η απενεργοποίηση όλων των κινήσεων διακόπτει τις ενδείξεις φόρτωσης και τις γραμμές προόδου.

Οι κινήσεις JavaScript χρειάζονται δικό τους χειρισμό προτίμησης· μια παράκαμψη διάρκειας CSS δεν ακυρώνει timeline GSAP. Η απλή αποθήκευση matchMedia(...).matches σε μεταβλητή δεν κάνει τίποτα χωρίς διακλάδωση ρύθμισης. Για GSAP, κρατήστε το στοιχείο ορατό στο συνηθισμένο HTML/CSS και δημιουργήστε κίνηση μόνο όταν την επιτρέπει ο χρήστης:

// Run after GSAP and the page elements have loaded.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.

Ο τίτλος δεν πρέπει να έχει κρυφή ή μετατοπισμένη βασική μορφή. Με ενεργή μείωση κίνησης μένει ορατός και στατικός. Αν αλλάξει η προτίμηση ενώ η σελίδα είναι ανοιχτή, το GSAP αναιρεί την κίνηση όταν η ερώτηση παύει να ταιριάζει. Το mm.revert() αφαιρεί επίσης τη συλλεγμένη κίνηση στην αποσυναρμολόγηση. Στο Motion εφαρμόστε αντίστοιχη διακλάδωση στη ρύθμιση της βιβλιοθήκης· ο κανόνας CSS μόνος του δεν αρκεί. Δείτε την τεκμηρίωση κύκλου ζωής και εκκαθάρισης GSAP matchMedia.

Υπάρχει επίσης ένα επίσημο κριτήριο προσβασιμότητας που πρέπει να λάβετε υπόψη. Το WCAG 2.2.2, κριτήριο επιπέδου A, απαιτεί ο χρήστης να μπορεί να σταματήσει οτιδήποτε κινείται, αναβοσβήνει ή κυλά αυτόματα, διαρκεί περισσότερο από πέντε δευτερόλεπτα και εμφανίζεται μαζί με άλλο περιεχόμενο. Αυτό ισχύει για καρουζέλ που περιστρέφονται αυτόματα και για ατελείωτες κινούμενες ταινίες, τις οποίες οι agents προσθέτουν εύκολα.

Επτά σημεία όπου καταρρέει#

1. Η πρώτη οθόνη παραμένει κρυφή μέχρι να εμφανιστεί σταδιακά. Ένα στοιχείο με μηδενική αδιαφάνεια δεν θεωρείται υποψήφιο για τη μετρική απόδοσης. Αυτό είναι το πιο δαπανηρό λάθος, επειδή βλάπτει μια μετρική που επηρεάζει την κατάταξη στις αναζητήσεις.

2. Κινούνται τα πάντα. Κάθε ενότητα γλιστρά προς τα μέσα, κάθε κάρτα αναπηδά. Η Anthropic λέει ξεκάθαρα ότι αυτό ενισχύει την εντύπωση σχεδιασμού που δημιουργήθηκε αυτόματα.

3. Κατάληψη του ελέγχου κύλισης. Όταν ένας ιστότοπος αντικαθιστά τη συνηθισμένη συμπεριφορά του τροχού του ποντικιού με τη δική του «κινηματογραφική» λογική.

Στην ίδια μελέτη, οι περισσότεροι συμμετέχοντες βίωσαν τουλάχιστον ήπιο αποπροσανατολισμό.

4. Κινούνται ιδιότητες διάταξης. Συντεταγμένες και διαστάσεις αντί για μετασχηματισμούς. 37 και 79 χιλιοστά του δευτερολέπτου έναντι μηδέν.

5. Οι κινήσεις διαρκούν υπερβολικά. Η χρήσιμη διάρκεια είναι 100 έως 400 χιλιοστά του δευτερολέπτου, με τα 400 να είναι ήδη πολύ αργά και κατάλληλα μόνο για μεγάλες κινήσεις. Οι agents προτιμούν ως προεπιλογή ένα ολόκληρο δευτερόλεπτο.

Σύμφωνα με τα ευρήματά του, το χρήσιμο εύρος είναι 100 έως 400 χιλιοστά του δευτερολέπτου, με τα 400 να είναι ήδη πολύ αργά και κατάλληλα μόνο για μεγάλες κινήσεις. Οι agents προτιμούν ως προεπιλογή ένα ολόκληρο δευτερόλεπτο.

6. Δεν υπάρχει κανόνας μειωμένης κίνησης. Ο agent δεν θα τον προσθέσει από μόνος του.

7. Ο ιστότοπος γίνεται πιο αργός με κάθε αλληλεπίδραση. Αυτό αφορά ειδικά το React: μια κίνηση που δημιουργείται χωρίς αναφορά στο στοιχείο και χωρίς εκκαθάριση πολλαπλασιάζεται με κάθε ενημέρωση στοιχείου. Σταδιακά, η σελίδα αρχίζει να επιβραδύνεται χωρίς προφανή λόγο.

Υπάρχει και μια όγδοη παγίδα. Η προσέγγιση «ο agent τραβά ένα στιγμιότυπο και διορθώνει ό,τι βλέπει» λειτουργεί εξαιρετικά σε στατικές σελίδες, αλλά με κινούμενα στοιχεία παγιδεύει τον agent σε ατελείωτο βρόχο επεξεργασίας: βλέπει ένα ενδιάμεσο καρέ, νομίζει ότι είναι σφάλμα, το διορθώνει και βλέπει άλλο ενδιάμεσο καρέ. Επιπλέον, κάθε στιγμιότυπο καταναλώνει πλαίσιο.

Πόσο κοστίζει και πώς αποφεύγετε να κάψετε το μηνιαίο όριο σε έναν ιστότοπο;#

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

Αυτό είναι αναμενόμενο. Οι κινήσεις κοστίζουν περισσότερο από τη συνηθισμένη εργασία διάταξης για πολλούς λόγους ταυτόχρονα. Δεν μπορείτε να επαληθεύσετε το αποτέλεσμα διαβάζοντας τον κώδικα· χρειάζονται επαναλήψεις. Κάθε επεξεργασία συνεπάγεται εκ νέου ανάγνωση αρχείων. Και ένας βρόχος στιγμιότυπων σε κινούμενα στοιχεία προσθέτει περιττά περάσματα.

Τι βοηθά:

Φτιάξτε μία σκηνή κάθε φορά και οριστικοποιήστε το αποτέλεσμά της. Ένα εφάπαξ αίτημα «πρόσθεσε κινούμενα σχέδια σε όλον τον ιστότοπο» εγγυάται υπερβολική δαπάνη. Μπορείτε να απενεργοποιήσετε την επαλήθευση μέσω στιγμιότυπων στα κινούμενα στοιχεία και να τα ελέγξετε οπτικά μόνοι σας. Κρατήστε το CLAUDE.md σύντομο, ώστε οι κανόνες να μην καταναλώνουν πλαίσιο σε κάθε αίτημα. Και δώστε στον agent εκ των προτέρων το llms.txt της βιβλιοθήκης, αλλιώς θα επινοήσει παρωχημένη μέθοδο σύνδεσης και μετά θα διορθώνει τη δική του επινόηση.

Το άρθρο γιατί το Claude Code ξαναδιαβάζει ολόκληρο το έργο εξηγεί πού πηγαίνουν τα token κατά την εργασία σε ένα έργο· το άρθρο πώς να μην εξαντλείτε τα όρια του Claude Code καλύπτει τρόπους ελέγχου της χρήσης.

Τι ακολουθεί;#

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

Για τα επόμενα βήματά σας—Ailoot.