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.
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.md4
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.md8
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.md12
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.mdWhat 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.mdThe 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.
- Intake
- Discovery
- Strategy
- Content
- Information Architecture
- UX/Wireframes
- Design Direction
- Design System
- Visual Design
- Prototype/Test
- Engineering
- QA
- Launch
- 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.
$ npx cg-web-skills install cg-web-designer