Ιστότοπος χωρίς πρότυπο με Claude Code και Refero DESIGN.md

Πρακτικό υλικό για την εργασία με έργα και μοντέλα: Τεκμηρίωση του Ailoot.

Γιατί οι ιστότοποι του Claude Code μοιάζουν με πρότυπα Tailwind;#

Στο παράδειγμα του Ιανουαρίου που περιγράφεται, δημιουργούνταν ένα μικρό παράπλευρο έργο — ένα εργαλείο κλήσεων για ψυχρές πωλήσεις. Σε ένα κενό αποθετήριο, ζητήθηκε από το Claude Code να δημιουργήσει την αρχική σελίδα. Το αποτέλεσμα ήταν γενικό: σκούρο φόντο slate-950, πινελιά purple-500, έντονος τίτλος με γραμματοσειρά sans-serif και τρεις κάρτες από κάτω με πανομοιότυπες σκιές. Η ίδια διάταξη με την πρώτη έκδοση του ChatGPT, την πρώτη έκδοση του Lovable και την πρώτη έκδοση του v0. Μετά από πέντε αλλαγές στην προτροπή που πρόσθεταν τις λέξεις «μοντέρνο», «πολυτελές» και «όχι σαν όλους τους άλλους» — τίποτα δεν άλλαξε. Η σελίδα εξακολουθούσε να μοιάζει σαν να προερχόταν από μια συλλογή προτύπων Tailwind UI Templates.

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

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

Το Refero Styles γεφυρώνει αυτό το χάσμα με ένα έτοιμο τεχνούργημα — ένα αρχείο DESIGN.md που περιέχει παραμέτρους από πραγματικά προϊόντα.

Τι είναι το Refero Styles;#

Η αρχική σελίδα του styles.refero.design το λέει ξεκάθαρα: «ανακάλυψε περισσότερα από 2.000 συστήματα σχεδίασης από κορυφαίους ιστότοπους προϊόντων, αναγνώσιμα από agents AI». Ο κατάλογος περιλαμβάνει επωνυμίες που θέτουν το οπτικό πρότυπο: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Δεν εξάγονται χειροκίνητα — η ομάδα Refero εκτελεί ένα script που αναλύει το πραγματικό CSS και markup ενός ιστότοπου και συσκευάζει το αποτέλεσμα σε δομημένο markdown. Η ίδια η βιβλιοθήκη του styles.refero.design είναι δωρεάν.

Η λέξη-κλειδί είναι «δομημένα». Το αρχείο δεν περιέχει στιγμιότυπα οθόνης ούτε περιγραφή όπως «σε μινιμαλιστικό στιλ». Είναι markdown με συγκεκριμένα δεκαεξαδικά χρώματα, ακριβή μεγέθη γραμματοσειράς σε pt, μονάδες διαστήματος και κανόνες για τα στοιχεία. Ο agent AI διαβάζει αυτό το αρχείο και δουλεύει με συγκεκριμένα στοιχεία αντί να προσπαθεί να περιγράψει το γούστο με λέξεις.

Η ομάδα του Refero αναφέρει στη σελίδα ai-agents τα εργαλεία που υποστηρίζονται: «Cursor, Claude Code, Codex, v0 και Lovable». Με άλλα λόγια, το DESIGN.md λειτουργεί ως καθολικό τεχνούργημα — ένα αρχείο που ταιριάζει σε όλους τους σημαντικούς agents ανάπτυξης AI.

Τι περιέχει ένα DESIGN.md;#

Η ομάδα του Refero περιγράφει τη δομή του αρχείου στη σελίδα design-md-template ως εξής:

Έτσι, η δομή του αρχείου είναι συνήθως η εξής:

Οι δημιουργοί τονίζουν επίσης μια αρχή που λύνει το 80% των προβλημάτων σχεδίασης με AI:

Δηλαδή, ο δεκαεξαδικός κωδικός #5E6AD2 είναι ισχυρότερος από το «σαν τη Linear». Η ακριβής τιμή font-size: 13px / line-height: 18px είναι ισχυρότερη από το «συμπαγές κείμενο». Οι συγκεκριμένες τιμές υπερισχύουν της ερμηνείας.

Το DESIGN.md στο αποθετήριο δεν είναι εικόνα για την ομάδα. Είναι δομικό στοιχείο του μόνιμου πλαισίου του έργου σου: δομημένη γνώση που το AI διαβάζει σε κάθε αίτημα.

Πώς να δημιουργήσεις έναν ιστότοπο στο στιλ της Linear σε 4 βήματα#

Αυτά τα τέσσερα βήματα αποτελούν τη σειρά που περιγράφεται για την εκκίνηση ενός νέου ιστότοπου. Όχι «τέσσερα βήματα γενικά», αλλά μια συγκεκριμένη ακολουθία με μία ενέργεια ανά βήμα.

1. Εγκατάσταση του Claude Code

   Εγγενές πρόγραμμα εγκατάστασης με μία εντολή: curl -fsSL https://claude.ai/install.sh | bash (η συνιστώμενη μέθοδος στην επίσημη τεκμηρίωση). Σε macOS λειτουργεί το brew install --cask claude-code· σε Windows, το winget install Anthropic.ClaudeCode. Αν είναι ήδη εγκατεστημένο, έλεγξε την έκδοση: claude --version (χρειάζεται η έκδοση 2.1.178+ — αυτή η έκδοση εισήγαγε δικαιώματα Tool(param:value) και τον αποκλεισμό επικίνδυνων εντολών git σε αυτόματη λειτουργία). Συνδέσου στον λογαριασμό σου: το claude εκκινεί τον οδηγό. Το Claude Code περιλαμβάνεται σε συνδρομή Pro ($17/μήνα με ετήσια χρέωση ή $20/μήνα με μηνιαία χρέωση).

2. Άνοιγμα του Refero Styles και επιλογή επωνυμίας

   Πήγαινε στο https://styles.refero.design και άνοιξε τον κατάλογο. Το βασικό κριτήριο επιλογής είναι πόσο ταιριάζει στο προϊόν σου, όχι αν «σου αρέσει η εμφάνιση». Φτιάχνεις πίνακα ελέγχου SaaS; Δες τις Linear, Vercel και Notion. Φτιάχνεις χρηματοοικονομικό προϊόν; Δες τις Stripe, Mercury και Column. Φτιάχνεις προϊόν για μέλη; Δες τη Duolingo. Άνοιξε την κάρτα μιας επωνυμίας και πάτησε «Copy DESIGN.md».

3. Τοποθέτηση του DESIGN.md στο έργο ως πλαίσιο

   Δημιούργησε ένα αρχείο docs/DESIGN.md στη ρίζα του έργου και επικόλλησε το αντιγραμμένο περιεχόμενο. Έπειτα άνοιξε το CLAUDE.md και πρόσθεσε μία γραμμή: @docs/DESIGN.md. Αυτή είναι οδηγία εισαγωγής — το Claude Code φορτώνει το περιεχόμενο στο πλαίσιο όταν ξεκινά μια συνεδρία. Για περισσότερα σχετικά με τις εισαγωγές στο CLAUDE.md, δες τον οδηγό για ένα αρχείο οδηγιών για τα Claude Code, Codex και Cursor.

4. Προτροπή για συγκεκριμένη σελίδα

   Όχι «κάν’ το όμορφο». Να είσαι συγκεκριμένος: «Χρησιμοποιώντας το DESIGN.md στο πλαίσιο, δημιούργησε μια αρχική σελίδα για ένα προϊόν SaaS διαχείρισης εργασιών. Δομή: hero με επικεφαλίδα και υπότιτλο, δύο κουμπιά CTA (κύριο και δευτερεύον), μια ενότητα παρακάτω με 3 δυνατότητες και εικονίδια, και έπειτα μια ενότητα μαρτυριών. Χρησιμοποίησε ακριβώς τα χρώματα και την τυπογραφία από το DESIGN.md· μην επινοήσεις δικά σου».

Μετά το τέταρτο βήμα, το Claude δημιουργεί τη σελίδα. Στην εμπειρία που περιγράφεται, μια αρχική σελίδα χρειάζεται κατά μέσο όρο 8–12 λεπτά — και πράγματι μοιάζει με το στιλ της επιλεγμένης επωνυμίας. Όχι τέλειο αντίγραφο σε επίπεδο pixel, αλλά αναγνωρίσιμη αισθητική: οι ίδιες γραμματοσειρές, η ίδια παλέτα, ο ίδιος ρυθμός διαστημάτων και οι ίδιες μικρές σχεδιαστικές αποφάσεις στα κουμπιά.

Οι δημιουργοί του Refero περιγράφουν την ίδια αρχή των τριών βημάτων λίγο πιο συνοπτικά στη σελίδα ai-agents/design-resources:

Αυτή η ακολουθία τεσσάρων βημάτων ακολουθεί την ίδια λογική, με την προσθήκη των ρητών βημάτων εγκατάστασης του Claude Code και εισαγωγής του αρχείου στο CLAUDE.md.

Ποιο στιλ να επιλέξεις για το προϊόν σου;#

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

Τι σημαίνει πρακτικά; Χρώματα, τυπογραφία, ιεραρχία και διακριτική κίνηση εμπνευσμένα από Apple μπορούν να ταιριάζουν σε dashboard SaaS, ενώ τα γενναιόδωρα διαστήματα μιας συγκεκριμένης σελίδας μάρκετινγκ μπορεί όχι. Εξέτασε τη συγκεκριμένη αναφορά αντί να επιλέγεις από επωνυμία. Για λογιστικό dashboard, όρισε ρητά συμπαγές ύψος γραμμών, αποστάσεις και πυκνότητα πληροφορίας, διατηρώντας αναγνώσιμους αριθμούς και χειριστήρια· μην αντιγράφεις αμετάβλητη ευρύχωρη διάταξη παρουσίασης.

Ένας απλός οδηγός επιλογής ανά τύπο προϊόντος:

Αν εξακολουθείς να αμφιβάλλεις, επίλεξε τη Linear. Έχει την πιο ευέλικτη βάση: ουδέτερη παλέτα, ευανάγνωστη τυπογραφία (Inter / Söhne) και συγκρατημένα διαστήματα. Ένας ιστότοπος βασισμένος στη Linear θα φαίνεται επαγγελματικός σε 9 από τους 10 τύπους προϊόντων.

Γιατί να κάνεις το DESIGN.md μέρος του μόνιμου πλαισίου του έργου;#

Στην πρακτική που περιγράφεται, το DESIGN.md αποθηκεύεται δίπλα στο CLAUDE.md σε κάθε έργο που διαχειρίζονται με agents AI. Αυτό το αρχείο δεν θεωρείται «προσωρινό για μία εργασία». Είναι ένας μόνιμος κανόνας στον οποίο βασίζονται όλες οι μελλοντικές συνεδρίες. Σε έναν μήνα, μπορείς να ζητήσεις από το Claude να προσθέσει μια νέα σελίδα στο έργο — θα ανοίξει το ίδιο DESIGN.md και θα τη δημιουργήσει στο ίδιο στιλ. Σε έξι μήνες, μπορείς να παραδώσεις το έργο σε άλλο μέλος της ομάδας — μπορεί κι εκείνο να εκτελέσει το Claude και να πετύχει συνεπές αποτέλεσμα, επειδή το DESIGN.md βρίσκεται στο αποθετήριο.

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

Δηλαδή, ο σχεδιασμός ζει ως κώδικας (το markdown είναι κώδικας), όχι ως αρχείο Figma που το AI δεν μπορεί να διαβάσει. Όταν ο σχεδιασμός είναι αρχείο στο αποθετήριο, το Claude Code τον διαβάζει, το Codex τον διαβάζει και κάθε μελλοντικό εργαλείο μπορεί να τον διαβάσει. Όταν ο σχεδιασμός βρίσκεται στο Figma, ζει σε ξεχωριστό επίπεδο και πρέπει να μεταφράζεται χειροκίνητα για κάθε συνεδρία.

Στα παράπλευρα έργα που περιγράφονται, χρησιμοποιήθηκε αυτή η δομή:

project/
├── CLAUDE.md            (imports @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (visual canon, copied from Refero)
│   ├── ARCHITECTURE.md  (project structure)
│   └── BRAND.md         (tone of voice, vocabulary)
└── ...

Αυτά τα τρία αρχεία είναι ένας τρόπος οργάνωσης του μόνιμου πλαισίου του έργου. Το DESIGN.md καλύπτει τα οπτικά στοιχεία, το ARCHITECTURE.md τη δομή και το BRAND.md τη φωνή. Κάθε agent AI με πρόσβαση στο αποθετήριο λαμβάνει και τα τρία ως πλαίσιο.

Τι είναι τα Refero MCP και refero_skill;#

Το Refero Styles είναι το βασικό επίπεδο (το DESIGN.md ως αρχείο). Το επόμενο κύμα είναι οι ενσωματώσεις που κάνουν την πρόσβαση στη βιβλιοθήκη «εγγενή» για τους agents AI.

Refero MCP (επίσημο). Πρόκειται για API διακομιστή στο https://api.refero.design/mcp στο οποίο συνδέεται το Claude Code με bearer token. Ο agent αποκτά έπειτα πρόσβαση σε περισσότερες από 150.000 οθόνες και περισσότερες από 6.000 ροές χρηστών από πραγματικά προϊόντα. Μπορείς να το εγκαταστήσεις με ένα skill:

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

Μετά την εγκατάσταση, το Claude ξεκινά «έρευνα σχεδίασης» στην αρχή κάθε συνεδρίας ως υποχρεωτικό πρώτο βήμα: εξετάζει ποιες οπτικές επιλογές ταιριάζουν στην εργασία και, αν χρειάζεται, προτείνει τρεις κατευθύνσεις συνδεδεμένες με την επιλεγμένη αναφορά. Στις 23 Ιουνίου 2026, το αποθετήριο refero_skill έχει 67 commits και 135 stars. Ένα νέο προϊόν που βρίσκεται σε ενεργή ανάπτυξη.

Η πρακτική που περιγράφεται χρησιμοποιεί μια απλή προσέγγιση: άνοιξε τον ιστότοπο χειροκίνητα, αντέγραψε το DESIGN.md και βάλε το σε ένα αρχείο. Το MCP είναι χρήσιμο όταν η εργασία με συστήματα σχεδίασης γίνεται ρουτίνα — για παράδειγμα, όταν διαχειρίζεσαι πολλά έργα πελατών και αλλάζεις οπτικούς κανόνες κάθε μέρα. Για περισσότερα σχετικά με τη σύνδεση διακομιστών MCP στο Claude Code, δες τον οδηγό για το NotebookLM και το MCP.

Ποια 4 λάθη χαλούν τη διαδικασία;#

Αυτά τα τέσσερα λάθη εμφανίζονται στην περιγραφόμενη εμπειρία εργασίας με σχεδιαστικό πλαίσιο. Καθένα φαίνεται ακίνδυνο, αλλά καθένα επιστρέφει το αποτέλεσμα στο τυπικό πρότυπο Tailwind.

Λάθος 1. Η προτροπή «κάν’ το μοντέρνο». Αυτό είναι το συνηθέστερο μοτίβο λάθους. Οι άνθρωποι ανοίγουν το Claude Code και γράφουν: «φτιάξε μου έναν ιστότοπο SaaS, μοντέρνο στιλ, πολυτελής εμφάνιση». Παίρνουν σκούρο φόντο και μωβ πινελιά. Στα δεδομένα εκπαίδευσης, η λέξη «μοντέρνο» συσχετίζεται με όλες τις σελίδες προορισμού των ετών 2022–2024, φτιαγμένες από το ίδιο πρότυπο. Χωρίς τις ακριβείς παραμέτρους του DESIGN.md, το «μοντέρνο» σημαίνει «μέσος όρος».

Λάθος 2. Επικόλληση του DESIGN.md στη συνομιλία ως μήνυμα. Μερικές φορές οι άνθρωποι αντιγράφουν το DESIGN.md στο παράθυρο συνομιλίας του Claude Code και λένε: «ορίστε το στιλ, χρησιμοποίησέ το». Αυτό λειτουργεί μία φορά — μέχρι το τέλος της συνεδρίας. Άνοιξε νέα συνεδρία (ή άλλαξε εργασία, /clear) και το πλαίσιο χάνεται. Αν θέλεις να διατηρείται το στιλ, το αρχείο πρέπει να βρίσκεται στο αποθετήριο και να έχει εισαχθεί στο CLAUDE.md. Για περισσότερα σχετικά με το γιατί το CLAUDE.md είναι το σημείο μόνιμου πλαισίου, δες τον οδηγό για τη μνήμη του Claude.

Λάθος 3. Επιλογή στιλ επειδή «σου αρέσει». Μια ευρύχωρη αναφορά μάρκετινγκ Apple μπορεί να είναι κακή διάταξη για αμετάβλητη αντιγραφή σε μεσιτικό dashboard που χρειάζεται 30 καταχωρίσεις στην οθόνη. Αυτό δεν αποκλείει τυπογραφία, παλέτα ή ιεραρχία εμπνευσμένη από Apple: προσάρμοσε διαστήματα και πυκνότητα γραμμών στην εργασία και έλεγξε την πραγματική πληροφορία που φαίνεται στο μέγεθος οθόνης στόχου. Επίλεξε συγκεκριμένη αναφορά βάσει πυκνότητας, τόνου και κοινού, όχι μόνο επωνυμίας.

Λάθος 4. Να μην αναφέρεις το DESIGN.md στην ίδια την προτροπή. Το DESIGN.md μπορεί να βρίσκεται στο αποθετήριο, να έχει εισαχθεί μέσω του CLAUDE.md και να είναι ορατό στον agent. Αν όμως η προτροπή λέει «φτιάξε έναν ιστότοπο», το Claude μπορεί να ακολουθήσει την τυπική διαδρομή χωρίς να αναφερθεί ρητά στο αρχείο. Για κάθε προτροπή σχεδίασης, είναι χρήσιμη η εξής γραμμή: «Χρησιμοποίησε ακριβώς τα χρώματα, τις γραμματοσειρές και τα διαστήματα από το docs/DESIGN.md. Μην επινοήσεις δικές σου τιμές — πάρε τις από το αρχείο». Έτσι διασφαλίζεται ότι ο agent χρησιμοποιεί το DESIGN.md αντί να το παρακάμπτει.

Τα ακριβή tokens είναι δεκαεξαδικοί κωδικοί, μεγέθη γραμματοσειράς σε pt και μονάδες διαστήματος στο DESIGN.md. Φυσική γλώσσα σημαίνει «μοντέρνο», «πολυτελές», «καθαρό» ή «σαν την Apple». Τα ακριβή tokens λειτουργούν· οι ελεύθερες λέξεις όχι.

Τι πρέπει να κάνεις στη συνέχεια;#

Τώρα έχεις τη βασική διαδικασία: Claude Code + DESIGN.md από το Refero + 4 βήματα = ιστότοπος χωρίς πρότυπο. Αυτό καλύπτει το 70% των αναγκών. Το υπόλοιπο 30% αφορά περιπτώσεις όπου χρειάζεσαι μεγαλύτερη ακρίβεια, περισσότερη ταχύτητα ή επαλήθευση.

Τρεις κατευθύνσεις για να ακολουθήσεις αφού κατακτήσεις τα βασικά:

1. Frontend Design Skill. Πρόκειται για επίσημο skill για το Claude Code που προσθέτει οπτική ανατροφοδότηση. Ο agent παίρνει στιγμιότυπο οθόνης της συναρμολογημένης σελίδας με το Puppeteer, την εξετάζει με τα «μάτια» του (ένα μοντέλο όρασης), τη συγκρίνει με το DESIGN.md και προτείνει μόνος του διορθώσεις. Αυτός είναι ένας αυτοματοποιημένος κύκλος «προτροπή → κώδικας → στιγμιότυπο οθόνης → κριτική → προτροπή». Χρήσιμος όταν μια σελίδα είναι σύνθετη και δεν μπορείς να την πετύχεις σε μία επανάληψη.

2. Refero MCP σε λειτουργία παραγωγής. Όταν διαχειρίζεσαι 3–5 έργα παράλληλα, γίνεται κουραστικό να προσθέτεις χειροκίνητα το DESIGN.md για το καθένα. Το Refero MCP μπορεί να εντοπίσει 3 κατάλληλα στιλ με βάση την περιγραφή ενός έργου και να προσφέρει επιλογή. Αυτό επιταχύνει την έναρξη ενός νέου έργου από 30 λεπτά σε 3.

3. Συνδυασμός με το Context Engineering. Το DESIGN.md είναι ένα από τα τεχνουργήματα πλαισίου. Δίπλα του συνήθως θα βρεις το ARCHITECTURE.md (δομή έργου), το BRAND.md (τόνος φωνής) και το business/audience.md (κοινό-στόχος). Όλα εισάγονται στο CLAUDE.md. Όταν το Claude δημιουργεί μια σελίδα, βασίζεται στα οπτικά στοιχεία, στο κοινό και στη δομή του προϊόντος. Ουσιαστικά, αυτό είναι context engineering — συστηματική εργασία πάνω σε όσα δίνεις στον agent πριν από ένα αίτημα.

Πρακτικό υλικό: Τεκμηρίωση του Ailoot.

Πρακτικό υλικό: Τεκμηρίωση του Ailoot.

Περισσότερο υλικό και εργαλεία: Ailoot.