Web Skills
EN

Lead Web Designer, UX- und Content-Strategie, Frontend-Qualität

cg-web-designer

Er behandelt jede Anfrage wie ein kleines Studio-Projekt, statt direkt zur Startseite zu springen. Das Ergebnis ist eine Website, die entschieden wurde — nicht generiert.

5.832 Wörter Methode

Vollständige SKILL.md lesen

1

Er beginnt damit, Unsicherheit zu reduzieren

Vor jeder Zeile Code klärt Claude Zweck, Zielgruppe, primäre Handlung, Inhalte und Rahmenbedingungen. Ein vages Briefing wird in konkrete Designregeln übersetzt, mit Rückfragen dort, wo die Antwort die Arbeit tatsächlich verändert.

Never treat “modern”, “premium”, “clean”, “Apple-like” or similar adjectives as a design specification. Translate them into concrete design rules, and ask follow-up questions when necessary.

cg-web-designer · SKILL.md

4

Inhalt kommt vor visueller Komposition

Text und Struktur gelten als Teil der UX, nicht als Dekoration danach. Jede Seite bekommt einen definierten Zweck, die Frage, die sie beantwortet, ihre Belege und ihre primäre Handlung — bevor irgendetwas gelayoutet wird.

Every important section should answer at least one of: What is this? Who is it for? Why does it matter? How does it work? Why should I trust you? What does it cost? What should I do now?

cg-web-designer · SKILL.md

8

Er prüft sein eigenes Ergebnis auf AI-Slop

Das längste Kapitel des Skills ist ein Katalog der Defaults, in die generierte Websites fallen — austauschbare Hero-Sections, drei identische Feature-Cards, Gradient-Text, Pill-Buttons, Fade-up auf jeder Section — samt der Anweisung, jeden davon infrage zu stellen statt ihn auszuliefern.

Do not merely replace one cliché with another. The goal is specificity + restraint + rationale.

cg-web-designer · SKILL.md

12

Qualität ist Teil des Designs, kein späterer Durchgang

WCAG 2.2 als Accessibility-Basis, Core Web Vitals als Performanceziel, dazu SEO, responsives Verhalten, Zustände und eine Launch-Checkliste. Der Skill verbietet außerdem, Konformität zu behaupten, die nie geprüft wurde.

Do not claim WCAG compliance without actually testing relevant success criteria.

cg-web-designer · SKILL.md

Was er sich weigert zu tun

Diesen Teil lohnt es zweimal zu lesen, denn er macht das Ergebnis brauchbar statt bloß plausibel:

Never invent critical business facts, offers, prices, claims, testimonials, statistics, certifications, customers, team members, case studies or legal statements. Mark unknowns and ask for them.

cg-web-designer · SKILL.md

Der Prozess, dem er folgt

Iterativ, nicht starr linear — Discovery kann die Strategie ändern, Tests können Wireframes ändern, technische Grenzen können das visuelle Design ändern. Aber die vorgelagerte Denkarbeit wird nie übersprungen, nur weil Coden schneller wäre.

  1. Intake
  2. Discovery
  3. Strategy
  4. Content
  5. Information Architecture
  6. UX/Wireframes
  7. Design Direction
  8. Design System
  9. Visual Design
  10. Prototype/Test
  11. Engineering
  12. QA
  13. Launch
  14. Iteration

Frag Claude zum Beispiel

  • I need a website for my architecture firm. Where do we start?
  • Redesign this landing page. It feels generic.
  • Review my homepage for accessibility, performance and SEO before launch.
  • Create a design system for this project.
Terminal-Sitzung
$ npx cg-web-skills install cg-web-designer