UI design system

Figma, shadcn/ui and design-system helpers so every screen looks consistent.

design-extract

Manavarya09

Extracts a complete design system from any website, generating DTCG tokens, Tailwind config, Figma variables, and more, for AI coding agents.

4.2kMIT

PluginSafe

ux-ui-agent-skills

plugin87

A comprehensive kit of structured instructions and design systems that turns Claude into a senior design architect for consistent, accessible UI/UX outputs.

1.5kMIT

SkillCaution

preline

htmlstreamofficial

Provides AI agents with a library of prebuilt, open-source Tailwind CSS UI components, blocks, and templates for rapid web UI development.

6.5k

SkillSafe

extract-design-system

arvindrk

Enables your AI agent to extract design tokens like colors, typography, and spacing from any public website and generate JSON and CSS for local projects.

234MIT

PluginSafe

Claude-Code-Design-AI

mikesheehan54

A UI/UX framework and plugin for Claude Code that generates React and Tailwind CSS components from designs, assisting with prototyping and design systems.

84MIT

MCP serverSafe

Lightswind-UI-Library

codewithMUHILAN

Lightswind UI is an AI-native, CLI-first React component library with over 160 animated, production-ready components and MCP Server support for AI coding agents.

1.1kMIT

6 resources

One prompt installs every resource in this kit

Paste this into Claude Code, Cursor or any coding agent:

Install the "UI design system" kit, one item at a time:

1. Install the Claude Code plugin marketplace Manavarya09/design-extract: run "/plugin marketplace add Manavarya09/design-extract", then list its plugins and install the one I need.

2. Install the Claude Code plugin marketplace plugin87/ux-ui-agent-skills: run "/plugin marketplace add plugin87/ux-ui-agent-skills", then list its plugins and install the one I need.

3. Install the agent skill "preline" from https://github.com/htmlstreamofficial/preline/tree/main/skills/preline-mcp into ~/.claude/skills/ (copy the whole folder that contains SKILL.md). Read SKILL.md first and tell me what it does and whether it runs any scripts.

4. Install the agent skill "extract-design-system" from https://github.com/arvindrk/extract-design-system/tree/main/skills/extract-design-system into ~/.claude/skills/ (copy the whole folder that contains SKILL.md). Read SKILL.md first and tell me what it does and whether it runs any scripts.

5. Look at https://github.com/mikesheehan54/Claude-Code-Design-AI, explain what it does in two sentences, and install it into this project following its README. Ask me before running any script.

6. Add the MCP server "Lightswind-UI-Library" (https://github.com/codewithMUHILAN/Lightswind-UI-Library) to my MCP config with this entry:
{
"Lightswind-UI-Library": {
"args": [
"-y",
"lightswind"
],
"command": "npx"
}
}
If it needs API keys, tell me where to get them before editing anything.