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.

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.

---

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

---

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:

• audit-live-url.md — audit a live page by URL
• build-admin-panel.md — build an admin panel from scratch
• frontend-handoff-spec.md — generate a developer handoff spec
• improve-pricing-page.md — improve an existing pricing page
• 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: learn_from_reference [url]" | | Query pattern weights and feedback | "Use global-design-skill MCP: list_learned_niches" |

---

Worked Examples

| Example | What it demonstrates | |---|---| | Hero redesign | Generic hero → clearer hierarchy, better CTA, stronger visual system | | Color token migration | Hardcoded color cleanup with OKLCH tokens | | Form accessibility | Labels, errors, focus states, ARIA, and keyboard behavior | | Card grid cleanup | Flat equal cards → stronger editorial rhythm | | Performance audit | LCP/CLS/INP issues translated into fixes | | Dark mode implementation | Token layer and theme switch strategy | | Landing page audit | Full page review with gate-based scoring | | SaaS hero redesign | Landing page rewrite with implementation notes | | Skill walkthroughs — 5 site types | Dry-run routing: fintech SaaS · travel landing · e-commerce catalog redesign · unknown-niche learn · healthcare audit | | bestseotools case study (before → after) | Real multi-pass catalog redesign, 65–70% → ~85%, with screenshots | | sk-seo.ru a11y + contrast + anti-slop audit (before → after) | 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) | 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) | 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 scenari