claude-design-pack_skill

Overview

This skill is a compact design toolkit for building cohesive UI/UX, visual themes, brand guidelines, and generative art assets. It helps you create and iterate on component-ready themes, typography scales, color systems, and visual treatments that integrate with TypeScript projects. Use it to accelerate design-to-code workflows and produce consistent brand materials.

How this skill works

The skill generates theme tokens, component style rules, and brand guideline artifacts based on input goals like mood, accessibility targets, and platform (web/mobile). It can output CSS/JSON token files, example component snippets, and exportable art assets produced by generative models. It also suggests accessibility fixes and alignment between design tokens and TypeScript component props.

When to use it

• Creating a new product brand and visual system from concept to dev-ready tokens.
• Iterating UI themes for light/dark modes or platform-specific variants.
• Generating hero art, patterns, and illustrations aligned with brand values.
• Producing accessible color palettes and typography scales for production.
• Onboarding engineers with consistent component examples and token mappings.

Best practices

• Start with clear brand attributes (tone, audience, emotion) to guide token generation.
• Set accessibility targets (contrast ratios, font sizes) before theme export.
• Use token-based theming to keep design consistent across components and platforms.
• Review generated art and tweak prompts or parameters for stylistic alignment.
• Integrate outputs into your TypeScript design system for type-safe styling.

Example use cases

• Generate a full theme (colors, spacing, typography) for a SaaS dashboard and export JSON tokens for developers.
• Produce brand guidelines PDF with logo usage, color specs, and component examples for stakeholder review.
• Create a set of dark and light themes with accessible colors and ready-to-use CSS variables.
• Generate hero illustration variants to use in marketing pages that match the product brand.
• Map design tokens to TypeScript component props to enforce consistent theming in code.