anthropic-frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
How to use
Zainstaluj umiejętność w swoim środowisku Claude/Copilot, wskazując repozytorium chaibuilder/sdk z gałęzi dev, katalog .windsurf/skills/anthropic-frontend-design.
Opisz interfejs, który chcesz zbudować — podaj konkretne wymagania (komponent React, strona, dashboard, plakat) oraz kontekst: do czego służy, kto go będzie używać, jakie są ograniczenia techniczne.
Zanim umiejętność przystąpi do kodowania, pozwól jej zdefiniować wyraźny kierunek estetyczny. Może to być minimalizm, maksymalizm, retro-futuryzm, luksus, brutalizm, art deco lub inny styl — ważne, że będzie celowy i spójny.
Umiejętność wygeneruje działający kod (HTML/CSS/JavaScript, React, Vue lub inny framework) wraz z szczegółowymi decyzjami projektowymi. Kod będzie produkcyjny, wizualnie uderzający i dopracowany w każdym szczególe.
Przejrzyj wygenerowany kod i design — sprawdź, czy estetyka odpowiada Twojemu zamierzeniu i czy interfejs rozwiązuje postawiony problem. Jeśli chcesz zmienić kierunek wizualny, wyjaśnij, co dokładnie chcesz zmienić, a umiejętność dostosuje projekt.