/web--design-system

/web--design-system is a Claude Code skill in the Web & Design section. Creates an opinionated design system with tokens, typography, color and components, starting from your product type, personality and brand colors.

Author's description

Create a complete, opinionated design system with tokens, typography, color, and components

How to ask for it

/web--design-system create a complete design system for my startup
/web--design-system define the color and typography tokens for my product
/web--design-system generate the base component library for my app

Install

curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash

After installing with the script, type /web--design-system. Using Cursor, Windsurf or Codex? Platform guides

Demo coming soon

/web--graphic-designAI graphic design studio
Turns a brief into self-contained HTML, CSS and SVG designs: mockups, social graphics, brand kits, pitch decks and infographics, with three variations.
Built here
/web--gsap-creative-galleryAnimated galleries with GSAP
Builds interactive image galleries with GSAP: FLIP filter transitions, infinite scroll, animated masonry layouts and lightbox effects.
Built here
/web--gsap-hero-cinematicCinematic hero section with GSAP
Builds a website hero section with GSAP: layered reveals, 3D parallax, animated typography and video backgrounds, with a reduced-motion fallback.
Built here
/web--gsap-micro-interactionsMicro-interactions with GSAP
Implements micro-interactions in React with GSAP: custom cursors, magnetic buttons, tilt cards, spotlight effects and scroll indicators.
Built here
/web--gsap-page-transitionsPage transitions with GSAP
Builds page transitions for React and Next.js with GSAP: overlay wipes, shared-element transitions and coordinated route animations.
Built here
/web--gsap-preloaderAnimated preloaders with GSAP
Builds animated loading screens with GSAP: progress bars, percentage counters, animated logos, skeleton screens and cinematic intro sequences.
Built here

How to ask for it

Install

More from this section