Skip to content
UXClaim
Design Systems

Morpheme Design Skill

Claude Code skill enforcing Morpheme UI Design System with full specs and 12 example implementations for web pages and components.

View source More in Design Systems

What it does

Morpheme Design Skill is a Claude Code integration that enforces the Morpheme UI Design System by gits.id when building web pages, apps, and UI components. It includes the complete design system specification and 12 production-ready example implementations across common use cases.

How it works

The skill uses a 3-layer token architecture for consistent, scalable design:

  • Foundation Colors: Primitive color palette
  • Brand Colors: Product-specific colors (default: blue #1D6EEB primary, orange #E55B05 secondary)
  • Semantic Colors: Contextual UI tokens for states and interactions

Once installed, the skill automatically enforces design tokens, component specs, and accessibility guidelines whenever you ask Claude to build UI. It covers typography (Poppins), spacing (4px grid), border radius (4px–16px scale), elevation shadows, and motion tokens.

Use cases

Perfect for teams building:

  • E-commerce storefronts and admin dashboards
  • SaaS landing pages and product interfaces
  • CRM and admin tools
  • Authentication flows
  • Design system documentation and component showcases

Who benefits

Product designers, design system maintainers, and developers who want Claude to generate UI that aligns with Morpheme. Ships with 12 static HTML examples (docs, e-commerce, dashboard, CRM, email, chat, blog, auth, pricing, settings, and error pages) you can reference or customize.

Frequently asked questions

How do I install Morpheme Design Skill?
Quickest way: run `npx skills add https://github.com/gravitano/morpheme-design-skill --skill morpheme-design`. Or clone the repo, copy `.claude/skills/morpheme-design/` into your project, and start Claude Code. The skill auto-discovers and is ready to use.
What does Morpheme Design Skill do?
It's a Claude Code skill that enforces the Morpheme UI Design System (by gits.id) when you ask Claude to build web pages, apps, or UI components. It ensures all generated code uses consistent tokens, components, and accessibility guidelines.
How do I use the skill to build UI?
Once installed, just ask Claude to build UI naturally: 'build a pricing page' or 'create a login form.' The skill auto-triggers and generates code that follows Morpheme tokens and component specs. You can also invoke it explicitly with `/morpheme-design build...`.
What examples are included?
12 static HTML examples: design system docs, e-commerce storefront, admin dashboard, CRM tool, email client, AI chat interface, blog, authentication flows, pricing page, user settings, SaaS landing page, and error pages (404/500/maintenance). Open any in a browser.
What design tokens does Morpheme use?
3-layer architecture: foundation colors (primitives), brand colors (primary blue #1D6EEB, secondary orange #E55B05), and semantic colors (contextual). Also includes Poppins typography, 4px spacing grid, 4px–16px border radius scale, 6-level shadow elevation, and motion tokens.
Can I customize Morpheme colors and typography?
Yes. DESIGN.md includes the full design system spec with CSS custom properties reference. You can override tokens in your project while keeping the skill's enforcement logic. The skill will guide you to maintain consistency.
Does Morpheme include accessibility guidelines?
Yes. DESIGN.md documents accessibility requirements as part of the design system spec. The skill enforces these when generating UI, including color contrast, ARIA labels, keyboard navigation, and semantic HTML.
Is Morpheme Design Skill free?
Yes. The skill and all examples are open-source. The design system is based on Morpheme UI by gits.id.

Glossary

Design Token
A reusable design decision (color, spacing, typography, shadow) stored as a variable and applied consistently across products. Morpheme uses 3-layer token architecture: foundation, brand, and semantic.
Semantic Color
A color token assigned a contextual meaning (e.g., success-green, error-red) rather than a primitive name. Used for UI states and interactions that carry intent.
Component Spec
A detailed specification defining a reusable UI component's structure, tokens, states, and accessibility requirements. Morpheme includes specs for buttons, inputs, cards, badges, alerts, modals, and navigation.
Claude Code Skill
A Claude Code extension that provides project-specific instructions and design constraints. Skills auto-discover and guide Claude's code generation to follow your patterns and standards.
Elevation Shadow
A shadow effect applied to create visual hierarchy and depth. Morpheme includes a 6-level elevation scale (from subtle to prominent) to indicate component importance and interaction states.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.