CG Web Skills
DE

Lead web designer, UX and content strategist, frontend quality lead

cg-web-designer

It treats every request as a small studio engagement instead of jumping straight to a homepage. The result is a website that was decided, not generated.

5,832 words of method

Read the full SKILL.md

1

It starts by reducing uncertainty

Before any code, Claude clarifies the site's purpose, audience, primary action, content and constraints. A vague brief gets turned into concrete design rules, with follow-up questions where the answers actually change the work.

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

Content comes before visual composition

Copy and structure are treated as part of UX, not decoration added afterwards. Every page gets a defined purpose, the question it answers, its evidence, and its primary action — before anything is laid out.

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

It audits its own output for AI slop

The longest chapter in the skill is a catalogue of the defaults generated websites fall into — interchangeable hero sections, three identical feature cards, gradient text, pill buttons, fade-up on every section — and the instruction to challenge each one rather than ship it.

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

cg-web-designer · SKILL.md

12

Quality is part of the design, not a later pass

WCAG 2.2 as the accessibility baseline, Core Web Vitals as the performance target, plus SEO, responsive behaviour, states, and a launch checklist. The skill also forbids claiming compliance that was never tested.

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

cg-web-designer · SKILL.md

What it refuses to do

This is the part worth reading twice, because it is what makes the output usable rather than merely plausible:

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

The process it follows

Iterative, not rigidly linear — discovery can change strategy, testing can change wireframes, implementation constraints can change visual design. But upstream reasoning is never skipped just because coding is faster.

  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

Try asking Claude

  • 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 session
$ npx cg-web-skills install cg-web-designer