popular-web-designs – 54 de sisteme de design reale ca HTML/CSS
Ce face
Skill-ul livrează 54 de sisteme de design complete (Stripe, Linear, Vercel și altele) sub formă de specificații HTML/CSS. Fiecare template conține paleta de culori, ierarhia tipografică, stilurile de componente, sistemul de spațiere, umbrele și comportamentul responsive, plus note de implementare Hermes cu link-uri Google Fonts și stack-uri font-family exacte. Nu inventează designuri; extrage valorile CSS reale din sursele VoltAgent/awesome-design-md.
Când îmi folosește
Îl folosești când vrei ca o pagină să arate ca un brand cunoscut fără să copiezi manual zeci de variabile. Este util pentru landing page-uri, dashboard-uri sau prototipuri rapide unde clientul spune „fă-l ca Linear” sau „arată ca Vercel”. Se combină bine cu claude-design pentru procesul de design și cu generative-widgets pentru a servi rezultatul printr-un tunnel cloudflared.
Cum îl invoc / declanșez
Folosește direct trigger-urile din catalog:
- build a page that looks like
- make it look like stripe
- design like linear
- vercel style
- create a UI
- web design
- landing page
- dashboard design
- website styled like
După ce skill-ul este activat, rulezi skill_view(name="popular-web-designs", file_path="templates/<site>.md") ca să încarci specificațiile complete ale site-ului dorit.
Exemplu practic
Spui „make it look like stripe”. Skill-ul încarcă template-ul Stripe, îți dă :root cu —color-bg, —color-accent etc., fonturile Inter și Mulish, plus regulile exacte pentru butoane și carduri. Scrieți HTML-ul cu write_file, aplici clasele și proprietățile din secțiunile 2-6 ale template-ului, apoi verifici cu browser_vision.
Output / unde aterizează
Rezultatul este un fișier HTML unic cu tot CSS-ul inline sau în
Limite / gotchas
Template-urile nu includ logica JavaScript complexă sau animații avansate; pentru asta trebuie să adaugi tu. Nu uita să folosești write_file pentru creare și browser_vision pentru verificare, conform notelor Hermes. Dacă vrei un DESIGN.md formal în loc de HTML randat, folosește skill-ul design-md. Verifică doctrina pentru detalii exacte despre versiuni și actualizări ale catalogului.