Global Design Skill

Global Design Skill

Turn Claude Code, Cursor, Codex, ChatGPT, Windsurf, and GitHub Copilot into a stricter UI/UX design reviewer and frontend handoff assistant — one that detects your business niche, applies sector-specific rules, and improves with every project.

Not another prompt collection. A self-learning design operating system: it knows sector-specific rules for 13 industries, learns from reference sites you point it at, and calibrates its pattern weights based on your feedback. All local, no telemetry.

[](CHANGELOG.md) [](rules/) [](rules/) [](rules/) [](tokens/) [](rules/17-motion-react.md) [](LICENSE)

Live demos: https://staurus86.github.io/global-design-skill/

Install in 30 seconds

> A note, and an apology. Through v2.1.0 the installer copied only skills/global-design/. The folders that file links to (references/, rules/, patterns/ and the rest) live at the repo root, so they never reached your project. The anti-slop catalog and every reference link came up empty unless you happened to run from the repo root. That was my bug, and it shipped for too long. The installer now bundles those folders next to SKILL.md, and gds doctor verifies they are there. If your earlier installs felt half-broken, this is why. Sorry. Re-run the command below to get a working copy. > > — Staurus

git clone https://github.com/staurus86/global-design-skill.git
cd global-design-skill
python scripts/gds install --tool=all /path/to/your-project

Claude Code

The gds command above is the recommended path — it bundles the skill's resource folders (references/, rules/, patterns/, ...) beside SKILL.md so its relative links resolve. Manual copy must do the same:

SRC=path/to/global-design-skill
mkdir -p .claude/skills/global-design .claude/agents
cp -r "$SRC/skills/global-design/." .claude/skills/global-design/
for d in references blueprints patterns rules checklists templates agents industries tokens integrations recipes validators; do
  cp -r "$SRC/$d" .claude/skills/global-design/
done
cp "$SRC"/agents/*.md .claude/agents/
cat "$SRC/integrations/claude-code/CLAUDE.md" >> CLAUDE.md

Cursor

# Cursor 0.43+ (new format)
mkdir -p .cursor/rules
cp path/to/global-design-skill/integrations/cursor/global-design.mdc .cursor/rules/

# Cursor legacy (.cursorrules)
cp path/to/global-design-skill/integrations/cursor/cursor-rules.md .cursorrules

GitHub Copilot

mkdir -p .github
cp path/to/global-design-skill/integrations/github-copilot/copilot-instructions.md .github/copilot-instructions.md

More install options: [install.md](install.md).

---

Why this exists

AI coding tools can generate UI quickly, but they often ship the same generic hero sections, vague CTAs, missing states, weak mobile behavior, raw colors, inaccessible forms, and handoff gaps.

Global Design Skill gives the agent a reusable design operating system. It forces every output to answer:

• who the interface is for
• what metric it serves
• which layout, grid, states, and tokens to use
• how it works on mobile
• how accessibility is specified
• how a developer can implement it without asking follow-up questions

It also includes SEDI (Self-Evolving Design Intelligence): the skill detects your business sector automatically (B2B SaaS, e-commerce, health, finance, and 10 more), applies sector-specific banned patterns and required elements, learns from reference sites you point it at, and refines its pattern weights based on revision count. The more you use it, the more accurate it becomes — and all of that stays on your machine.

Start here

| Goal | What to use | |---|---| | Better landing pages | Core + Landing Pack | | SaaS app screens | Core + SaaS Pack | | Admin panels | Core + Admin Pack | | Design audits (a11y, perf, conversion) | Core + Audit Pack | | Sector-aware rules + self-learning | Core + MCP Intelligence | | Everything | python scripts/gds install --tool=all /path/to/your-project |

Full pack breakdown: [docs/packs.md](docs/packs.md)

---

Try it

Copy one of these into your AI coding assistant:

Use global-design-skill and audit this landing page. Return the top 10 design problems, severity, and implementation-ready fixes.

Use global-design-skill and redesign this SaaS hero. Avoid generic centered hero patterns. Specify layout, type scale, CTA copy, responsive behavior, and accessibility notes.

Use global-design-skill and create a frontend handoff spec for this component. Include states, tokens, ARIA, keyboard behavior, and acceptance criteria.

More copy-paste prompts in [examples/prompts](examples/prompts/):

• [audit-live-url.md](examples/prompts/audit-live-url.md) — audit a live page by URL
• [build-admin-panel.md](examples/prompts/build-admin-panel.md) — build an admin panel from scratch
• [frontend-handoff-spec.md](examples/prompts/frontend-handoff-spec.md) — generate a developer handoff spec
• [improve-pricing-page.md](examples/prompts/improve-pricing-page.md) — improve an existing pricing page
• [redesign-saas-hero.md](examples/prompts/redesign-saas-hero.md) — redesign a SaaS hero section

---

What this is

Global Design Skill =
  Design Principles          (rules/)
+ UX Frameworks              (blueprints/)
+ UI Patterns                (patterns/)
+ Design Tokens              (tokens/)
+ Specialized Agents         (agents/)
+ Output Templates           (templates/)
+ Review Checklists          (checklists/)
+ Improvement Recipes        (recipes/)
+ Industry Sector Rules      (industries/)   ← 13 sectors, niche auto-detected
+ Self-Learning Engine       (learning/)     ← learns from sites you point it at
+ SEDI                       (sedi/)         ← adapts to your feedback over time

Not: "make it look nice." Yes: what to build, for whom, why, which grid, which states, how to hand it off — and a skill that gets more accurate the more you use it.

---

Capabilities

| Task | How to invoke | |---|---| | Build a landing page from scratch | "Use global-design-skill and create a landing page for [product]" | | Build a SaaS app | "Use global-design-skill and scaffold a SaaS app shell for [product]" | | Build an admin panel | "Use global-design-skill and architect an admin panel for [product]" | | Build a pricing page | "Use global-design-skill and create a pricing page for [product]" | | Build a portfolio | "Use global-design-skill and create a developer portfolio for [name]" | | Build an onboarding flow | "Use global-design-skill and design a user onboarding flow" | | Design a dashboard | "Use global-design-skill and build a dashboard for [app]" | | Run a design audit | "Use global-design-skill and audit this page: [HTML/screenshot/URL]" | | Find design references | "Use global-design-skill reference-hunter to find hero examples for [context]" | | Competitive analysis | "Use global-design-skill reference-hunter to compare [site1], [site2], [site3]" | | Audit a live URL | "Use global-design-skill reference-hunter to audit [URL]" | | Write a frontend spec | "Use global-design-skill and write a frontend ТЗ for [component]" | | Improve a hero section | "Use global-design-skill and improve this hero section" | | Improve navigation | "Use global-design-skill and improve the navigation" | | Improve typography | "Use global-design-skill and improve the typography" | | Add animations | "Use global-design-skill and add animations to this page" | | Fix loading states | "Use global-design-skill and improve the loading states" | | Add dark mode | "Use global-design-skill and add dark mode to this project" | | Add wow effects | "Use global-design-skill and add visual effects to this hero" | | Add parallax | "Use global-design-skill and add parallax to this page" | | Add page transitions | "Use global-design-skill and add page transitions" | | Add hover effects | "Use global-design-skill and add hover effects to the cards" | | Add text animations | "Use global-design-skill and animate the hero text" | | Review before shipping | "Use global-design-skill and run a UI review checklist" | | Lock a multi-page design system (MASTER) | "Use global-design-skill and create a design-system MASTER for this site, then page overrides" | | Verify the rendered result in every mode | "Use global-design-skill and verify this page renders correctly across themes, viewports, and states" | | WCAG accessibility audit | "Use global-design-skill accessibility-auditor on this component" | | Performance audit | "Use global-design-skill performance-auditor on this page" | | Detect business niche automatically | "Use global-design-skill and design for [product/context]" — niche auto-detected | | Get sector-specific design rules | "Use global-design-skill and get rules for [sector]" | | Learn from reference sites | "Use global-design-skill MCP: learnfromreference [url]" | | Query pattern weights and feedback | "Use global-design-skill MCP: listlearnedniches" |

---

Worked Examples

| Example | What it demonstrates | |---|---| | [Hero redesign](examples/01-hero-redesign.md) | Generic hero → clearer hierarchy, better CTA, stronger visual system | | [Color token migration](examples/02-color-token-migration.md) | Hardcoded color cleanup with OKLCH tokens | | [Form accessibility](examples/03-form-accessibility.md) | Labels, errors, focus states, ARIA, and keyboard behavior | | [Card grid cleanup](examples/04-card-grid-cleanup.md) | Flat equal cards → stronger editorial rhythm | | [Performance audit](examples/05-performance-audit.md) | LCP/CLS/INP issues translated into fixes | | [Dark mode implementation](examples/06-dark-mode-implementation.md) | Token layer and theme switch strategy | | [Landing page audit](examples/audits/01-landing-page-audit.md) | Full page review with gate-based scoring | | [SaaS hero redesign](examples/landing-pages/01-saas-hero-redesign.md) | Landing page rewrite with implementation notes | | [Skill walkthroughs — 5 site types](examples/skill-walkthroughs.md) | Dry-run routing: fintech SaaS · travel landing · e-commerce catalog redesign · unknown-niche learn · healthcare audit | | [bestseotools case study (before → after)](redesigns/bestseotools/CASE-STUDY.md) | Real multi-pass catalog redesign, 65–70% → ~85%, with screenshots | | [sk-seo.ru a11y + contrast + anti-slop audit (before → after)](examples/before-after/sk-seo-2026-05-30/README.md) | 28-page audit: WCAG contrast fixes (ghost decoratives lifted to readable), forced-colors focus, form ARIA — 0 axe across 13 pages | | [sk-seo.ru bento redesign (before → after)](examples/before-after/sk-seo-2026-05-31/README.md) | Live 7-page redesign: bento proof-blocks, 60-icon branded set, portraits, unified blog CTAs — 0 axe / 0 overflow, shipped | | [GEO course landing (before → after)](examples/before-after/geo-course-2026-06-06/README.md) | Dark course LP: teal dashboard-card-and-countdown hero → crimson "answer-graph" metaphor hero, dark pattern removed, editorial hierarchy |

---

Real-World Result

Tested on a live Russian SEO tools directory (450 tools, real production traffic), over several passes. Initial prompt: "сделай дизайн лучше" ("make the design better").

| Before | After | |--------|-------| | | |

What changed:

• Generic "best SEO tools" hero → an author-framed hero ("the tools in my working stack") with a curator chip and real result tiles
• No selection path → JTBD scenarios ("what do you need?") + curated "ready stacks" shelves on top of the 450-item base
• One ambiguous $ symbol → explicit Free / Freemium / Paid badges + ★ my stack
• Flat 45-item category row → grouped category nav, a tool-radar with legend, plus favorites / CSV-Markdown export / share
• Cleaned the semantic layer too: decorative numbers aria-hidden, no stray glyphs in innerText, real static count fallbacks

Full before → after: [redesigns/bestseotools/CASE-STUDY.md](redesigns/bestseotools/CASE-STUDY.md).

Second case — sk-seo.ru (live, 7 pages, shipped 2026-05-31)

A second pass on a different live site (personal brand, dark theme, vanilla HTML/CSS/JS, no build step). This one was a visual upgrade, not just cleanup: a bento "proof-block" language, a 60-icon branded set, real portraits, and a unified blog CTA — verified at 0 axe violations / 0 horizontal overflow on 390/768/1280/1440 across 9 pages, then deployed and smoke-tested on production.

| Before (home) | After (home) | |--------|-------| | | |

What changed:

• Flat 2-column hero with proof numbers below the fold → bento hero with an accent "proof" cell (108M — biggest audit) and the credibility numbers above the fold
• Uniform service grid → a spotlight featured-tariff (price-anchor) + trust strip; branded topic icons replace generic line icons
• Case cards gained an editorial meta-spec (Niche / Scale / Status) where "Scale" is a tier, not a repeat of the headline number
• Generic Lucide icons → a 60-icon branded set, one-topic-one-icon, applied to blog (15) + services (6) + tools (30)
• 12 blog articles that ended with no CTA → a unified inline + final CTA

Full before → after: [examples/before-after/sk-seo-2026-05-31/](examples/before-after/sk-seo-2026-05-31/README.md) (before/ + after/ + 12 component shots + DESIGN-DECISIONS.md).

Earlier pass — readability & contrast on the dark theme

Before the bento work, the same site went through an a11y + contrast pass with the skill ([examples/before-after/sk-seo-2026-05-30/](examples/before-after/sk-seo-2026-05-30/README.md)). The dark theme leaned on ghost decoratives — accent-green numbers and a giant "404" set at opacity: 0.15–0.3. On a near-black background those shimmer and strain the eye, and they measured 1.2–1.9:1 (axe color-contrast failures). They were lifted to opacity: 0.5–0.6 (≈readable), card tags moved --text-muted → --text-secondary, and the body text stays a softened off-white (#f5f3ef), never pure white — the dark-mode contrast ceiling. Result: 0 axe color-contrast failures across 13 pages, and the page reads calm instead of vibrating.

This is encoded in [rules/19-contrast-standards.md](rules/19-contrast-standards.md) (WCAG AA/AAA + APCA + dark-mode ceiling) and the ghost-decorative anti-pattern (low-opacity accent text holds legibility only at ~opacity ≥ 0.55).

Third case — GEO course landing (geo-course.ru)

A dark course landing whose hero leaned on the two things the skill bans first: a decorative dashboard card (a bar chart with no real data) and a countdown timer (fake urgency). The redesign replaced both with a single idea.

| Before | After | |--------|-------| | | |

What changed:

• Teal-on-near-black (the default "dark SaaS" accent) → a single crimson hue with one signature radial glow — one color story, not a teal card fighting a teal CTA
• The decorative dashboard card → a visual metaphor: a glowing central node with radiating network lines (the answer graph — your brand as the node AI engines cite), the page's One Memorable Thing
• The 06 : 05 : 10 : 12 countdown timer removed — a banned dark pattern; urgency now reads from a dated cohort, not a ticking clock
• 48 000 ₽ + timer → a course-substance strip (level · modules · tools · start date), value over price pressure
• Centered text + floating card → editorial hierarchy: larger tight display H1, eyebrow pill, a framing question block, and a real attributed testimonial (E-E-A-T over decoration)
• Two competing buttons → one red primary CTA + a quiet secondary text link

Full before → after: [examples/before-after/geo-course-2026-06-06/](examples/before-after/geo-course-2026-06-06/README.md).

---

Best For

• AI-assisted frontend teams that want fewer generic layouts
• Claude Code, Cursor, Codex, Windsurf, ChatGPT, and Copilot users
• solo builders who need UI critique before shipping
• agencies turning ro

…

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: staurus86
• Source: staurus86/global-design-skill
• License: MIT
• Homepage: https://staurus86.github.io/global-design-skill/

Install and usage instructions live in the source repository linked above.