Critique
Skärmdumpar din UI vid 3 visningsbredder och poängsätter den mot en namngiven anti-slarv-checklista.
Fungerar med konfiguration
Vad den gör
En designgranskningslins som tvingar fram en riktig visuell fångst (desktop/surfplatta/mobil, mörkt läge om det finns) innan den bedömer en UI, och kör den sedan genom namngivna anti-slarv-, hantverks-, hierarki-, tydlighets- och signaturdetaljkontroller, presenterat som en Före/Efter/Varför-tabell. Det är en lins av den bredare ui-craft-skillen och är tänkt att användas när en användare vill ha en designkritik, en andra åsikt före överlämning, eller frågar "vad är fel med den här UI:n" — den redigerar inte kod.
Testrapport
Matade den en avsiktligt slarvig testsida (lila gradienthero, VERSALER-rubrik, 3 identiska emoji-kort, färgad trendpill) — den namngav alla 4 kritiska anti-slarv-brott med skillens eget vokabulär och, eftersom den tvingar fram riktiga skärmdumpar vid 3 visningsbredder, fångade en genuin mobil overflow-bugg (rubriktexten som spiller utanför hero-bakgrunden vid 375px) som en ren kodgranskning helt hade missat.
Testad: 2026-07-13 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/educlopez/ui-craft cd ui-craft mkdir -p ~/.claude/skills cp -r .agents/skills/critique ~/.claude/skills/critique
Kommandon och exempelprompter
/critiqueSkärmdumpar din UI vid 3 visningsbredder och poängsätter den mot en namngiven anti-slarv-checklista.
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
Give me a design critique of this UI before we hand it offScreenshot this page at a few viewports and score it against best practiceI want a second opinion on how polished this interface looks