generate-theme
Extracts design colors and styles from a website and creates a complete design system file you can use in your code.
Installation
Paste this into Claude Code, Cursor, or any agent that can run commands.
What this skill does
What it does:
- Collects design information from a website by taking screenshots and analyzing the page
- Pulls out design tokens which are the colors, fonts, spacing, and other style rules the site uses
- Creates two files: a DESIGN.md document that explains all the design rules, and a Tailwind CSS file that stores the theme colors and styles
- The files can be placed directly into a project folder so AI coding tools can use them
When to use it:
- When you want to copy the design style from an existing website
- When you need to extract and document how a website looks and is styled
- When you want to create a design system document from a live website
- When you need to generate a Tailwind CSS theme based on a website's appearance
The full skill text could not be loaded right now. It installs fine with the command above, or read it at the source.
Mirrored from the author's public source. Install counts from the open skills registry.