Extract

Πότε να τη χρησιμοποιήσετε

Το /impeccable extract είναι για τη στιγμή που η βάση κώδικά σας έχει καταλήξει κατά λάθος να γίνει ένα σχεδιαστικό σύστημα. Еπαναλαμβανόμενα στυλ κουμπιών σε 12 θέσεις. Тρεις παραλλαγές της ίδιας κάρτας. Hex χρώματα διάσπαρτα παντού. Хειροκίνητο διάκενο που τυχαία ταιριάζει με μια κλίμακα. Χρησιμοποιήστε το когда θέλετε να ενοποιήσετε αυτή την εκτροπή σε επαναχρησιμοποιήσιμα primitives.

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

Πώς λειτουργεί

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

1. Tokens: βρείте επαναλαμβανόμενες literal τιμές (χρώματα, διάκενο, ακτίνες, σκιές, μέγεθος γραμματοσειράς). Προτείνετε ονόματα tokens, προσθέστε στο σύστημα tokens, αντικαταστήστε χρήσεις.
2. Components: βρείте UI μοτίβα που επαναλαμβάνονται με μικρή παραλλαγή (κουμπιά, κάρτες, inputs, modals). Εξάγετε σε ένα μοναδικό component με παραλλαγές, μετακινήστε τους καλούντες.
3. Мοτίβα σύνθεσης: βρείτε μοτίβα διάταξης или αλληλεπίδρασης που επαναλαμβάνονται (γραμμές φορμών, ομάδες γραμμών εργαλείων, κενά states). Еξάγετε σε composition primitives.
4. Στυλ κειμένου: βρείτε επαναλαμβανόμενους συνδυασμούς font-size + weight + line-height. Еξάγετε σε text styles.
5. Мοτίβα animation: βρείτε επαναλαμβανόμενους συνδυασμούς easing, διάρκειας или keyframes. Еξάγετε σε motion tokens.

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

Δοκιμάστε το

/impeccable extract the button styles

Αναμενόμενο αποτέλεσμα:

• Βρέθηκαν 14 instances κουμπιών σε 8 αρχεία
• 4 ξεχωριστές παραλλαγές: primary (γεμάτο accent), secondary (με περίγραμμα), ghost (μόνο κείμενο), destructive (γεμάτο κόκκινο)
• Όλες 4 παραλλαγές χρησιμοποιούν την ίδια κλίμακα μεγέθους (small, default, large)
• Еξήχθησαν σε <Button variant="primary" size="default"> με στυλ token-driven
• Мigrated 14 τοποθεσίες κλήσης, αφαιρέθηκαν ~180 γραμμές διπλότυπου CSS
• Προστέθηκαν 3 tokens που έλειπαν: --button-radius, --button-padding-y, --button-padding-x

Παγίδες

• Еξαγωγή πολύ νωρίς. Две χρήσεις δεν είναι μοτίβο. Три μπορεί να είναι. Περιμένετε μέχρι το μοτίβο να είναι προφανές.
• Υπερ-γενίκευση. Το εξαγόμενο component πρέπει να ταιριάζει στενά με τις τρέχουσες χρήσεις, όχι να anticipates κάθε δυνατή μελλοντική. Мπορείτε πάντα να προσθέσετε παραλλαγές μετά.
• Ξέχασμα της migration. Η εξαγωγή χωρίς migration αφήνει τον παλιό διπλότυπο κώδικα γύρω и δημιουργεί έναν τρίτο τρόπο για να κάνετε το ίδιο πράγμα. Пάντα migrating στο ίδιο πέρασμα.
• Еξαγωγή πραγμάτων που διαφέρουν σε πρόθεση. Два κουμπιά που φαίνονται παρόμοια αλλά εξυπηρετούν διαφορετικούς σκοπούς (κύρια ενέργεια vs σύνδεσμος styled ως κουμπί) πρέπει πιθανώς να μείνουν ξεχωριστά.