styleguide

Create a design language and styleguide defining typography, color, spacing, and imagery direction.

3|1|Updated Nov 19, 2025
One-click install
npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill styleguide-lukaskellerstein
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styleguide
Source: https://github.com/lukaskellerstein/claude-my-marketplace/tree/main/plugins/design-plugin/skills/styleguide
Command: npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill styleguide-lukaskellerstein

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Starting a new website, app, or brand without a defined visual identity leads to inconsistent fonts, clashing colors, and ad-hoc design decisions. This Skill produces a complete, structured design language document so every downstream deliverable follows one coherent direction. ## Core Features & Use Cases - Aesthetic Profile Selection: Choose from 11 pre-defined design directions (Swiss Precision, Neo-Brutalist, Japanese Zen, Dark Premium, and more) as a starting point matched to brand personality and audience. - Typography & Color Strategy: Pick from 22 tested Google Fonts pairings and mood-based color palettes with hex values, cultural associations, and dark mode adaptation guidance. - Structured Styleguide Output: Generate a markdown styleguide covering aesthetic direction, type scale, color roles, imagery style, spacing, motion, and a cross-plugin implementation guide. - Use Case: You are launching a SaaS dashboard for developers. Provide the project type, audience, and brand adjectives, and receive a full styleguide with font pairings, a color table, imagery direction, and prompts ready for asset generation. ## Quick Start Create a styleguide for my developer-focused SaaS dashboard with a bold and trustworthy brand personality.

Frequently Asked Questions about styleguide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a styleguide for a new website or app?▼

Provide the project type, target audience, brand personality adjectives, and any existing brand assets. The Skill selects an aesthetic profile, picks a font pairing and color palette, then outputs a structured markdown styleguide covering typography, color, imagery, spacing, and motion.

What font pairings are available for my design project?▼

The font-pairings reference includes 22 tested Google Fonts combinations organized by mood: Authoritative, Modern Clean, Playful, Editorial, Technical, and Luxurious. Each pairing specifies heading and body fonts, weight strategy, size contrast ratio, and why the fonts work together.

How do I choose a color palette for my brand?▼

The color-moods reference organizes palettes by emotional intent: Trust, Energy, Calm, Innovation, Luxury, and Fresh. Each mood provides example hex palettes, cultural associations, industry fit, common mistakes, and dark mode adaptation guidance.

Does the styleguide support dark mode design?▼

Yes. Every color mood in the reference includes a dark mode adaptation section covering background choices, saturation adjustments, and contrast considerations. The output template also requires defining a dark mode strategy: inverted, dimmed, or a separate palette.

When should I not use the styleguide skill?▼

Do not use it to generate actual images, search stock photos, or audit WCAG contrast. Those tasks belong to media-plugin image generation, image sourcing, and the design-system skill respectively. The styleguide defines strategic direction, not technical implementation.