Back to marketplace

Design System Assembler

Query a curated catalog of styles, palettes, font pairings, and UX rules and assemble a stack-specific design system before any code is written.

Designp4
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Set up a design system for my React dashboard project.”
Beforegeneric AI agent
A design system is a great idea for consistency. You'd want to start with a color palette — maybe pick 3-5 colors and create light and dark variants. Then choose two fonts that work together, like a sans serif for body text and maybe a serif for headings. You could use something like Tailwind for utility classes. For components, you'd want buttons, cards, forms, modals, and navigation. It takes a while to build out, but it's worth the investment. Do you have any brand colors already, or should we start from scratch? What's your design aesthetic — modern, minimal, playful? How do you feel about using pre-built component libraries?
Afterwith Design System Assembler
DESIGN SYSTEM ASSEMBLED — React Dashboard

PALETTE:
Primary: Slate 600 (hex F1F5F9 light / 1E293B dark)
Accent: Teal 500 (hex 14B8A6)
Success: Emerald 500 (hex 10B981)
Warning: Amber 500 (hex F59E0B)
Error: Rose 500 (hex F43F5E)
Neutral: Gray scale (50-950)

TYPOGRAPHY PAIRING:
Headings: Inter, weight 600-700, sizes 12px-32px
Body: Inter, weight 400-500, 14px-16px
Code: JetBrains Mono, weight 400, 12px
Line height: 1.5 (body), 1.2 (headings)

SPACING SCALE (4px base):
0px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px

COMPONENT PATTERNS (Radix UI style):
Button: filled, outline, ghost variants × sizes (sm, md, lg)
Card: default, hoverable, interactive
Form: input, select, checkbox, radio with error states
Modal: overlay, content, close behavior
Table: sticky header, striped rows, sortable columns
Toast: position (top-right), dismiss timer

LIGHT/DARK MODE:
Light default: white backgrounds, slate-900 text
Dark default: slate-950 backgrounds, slate-50 text
Auto-respects system preference

DELIVERABLES:
tokens.json file ready for Tailwind config
Component library with 12 base patterns
Light/dark theme CSS variables
Implementation guide for React (Radix UI recommended)
Hero mockup: sample dashboard with full system applied

About this skill

name: design-system-assembler description: Query a curated catalog of styles, palettes, font pairings, and UX rules and assemble a stack-specific design system before any code is written. Use when working on design system assembler.

Design System Assembler

On project start, runs parallel searches across a design-intelligence database and returns a per-industry palette, type stack, spacing scale, and component patterns for React, Next.js, Tailwind, SwiftUI, or Flutter. Use to prevent generic AI slop when starting a project by grounding the visual language in real, curated references before Claude writes any UI.

What you get

  • Palette plus font pairing
  • tokens.json
  • Component patterns doc
  • Stack-specific implementation notes
  • Light and dark defaults
  • Sample hero for tone

Customize your output

  • Framework: React, Next.js, Vue, SwiftUI, Flutter
  • Industry: fintech, healthcare, consumer, dev-tools, agency
  • Brand mood: editorial, playful, corporate, brutalist
  • Light/dark defaults: light, dark, both
  • Density: airy, balanced, dense
  • Type stack override: yes, no

Example output

'A fintech dashboard project starts with a slate palette, Inter plus JetBrains pairing, 4-pt spacing, and Radix-style component recommendations.'

Best for

Design engineers, PM-designer hybrids.

Note: Depends on external catalog subscription. High confidence.

SKILL.md preview

SKILL.md
---
name: design-system-assembler
description: Use at the start of a new UI project to assemble a stack-specific design system — palette, type stack, spacing scale, and component patterns — from curated references before any code is written.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
  - design
  - p4
---

# Design System Assembler

Runs parallel searches across a design-intelligence database and returns a per-industry palette, type stack, spacing scale, and component patterns for React, Next.js, Tailwind, SwiftUI, or Flutter.

## When to use

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill