dbsxortime/design-studio-plugins

This project is a bundle of Claude Code plugins that help a team set a design standard for a project, refine it visually, and then check whether a website or codebase actually follows that standard. The core idea is a single design tokens file that records things like brand colors, fonts, corner rounding, and spacing, which then becomes the reference point everything else checks against. The bundle includes several slash commands you run inside Claude Code. One captures your design tokens, either by extracting them from an existing codebase, analyzing a live page, copying them from an external website, estimating them from screenshots, or through a short onboarding chat for brand new projects. Another opens a local visual studio in your browser where you can fine tune color and motion choices with sample cards. Once tokens are locked in, a command can generate the matching CSS variables or Tailwind theme code and wire it into your project automatically, so you never hand type the values yourself. A checking command then compares your actual code, and optionally a live URL using a browser automation tool, against the tokens to find violations, and a follow up command applies approved fixes in bulk. Beyond core design tokens, the bundle also includes a guided brand creation flow that walks you through building a logo system, icon set, and full brand book along with a sample landing page showcase, and a business card flow that lets you pick from 69 professionally reviewed templates, customize them with your brand's tokens, and export a print ready PDF with correct bleed and color settings for a print shop. The tool is installed through Claude Code's own plugin marketplace system and requires Node.js 18 or newer, plus an additional plugin for any feature that inspects a real webpage. It can be tried without installing anything through an included live web demo of the studio interface.