Skip to content
cccskills
FreePublished on GitHub

ui-design-system

Create a consistent UI design system from brand colors. Generate design tokens, reusable values for colors, typography, and spacing, and support component documentation, responsive layout calculations, accessibility considerations, and clear handoff materials for developers.

OriginalShow the original description

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

See how to install

Good for

  • Generate shared design values from brand colors
  • Standardize typography and spacing across screens
  • Plan layouts for different screen widths
  • Prepare component documentation for developer handoff

Files included (2)

  • SKILL.md1.0 KB
  • scripts/design_token_generator.py17.3 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

UI Design System

Professional toolkit for creating and maintaining scalable design systems.

Core Capabilities

  • Design token generation (colors, typography, spacing)
  • Component system architecture
  • Responsive design calculations
  • Accessibility compliance
  • Developer handoff documentation

Key Scripts

design_token_generator.py

Generates complete design system tokens from brand colors.

Usage: python scripts/design_token_generator.py [brand_color] [style] [format]

  • Styles: modern, classic, playful
  • Formats: json, css, scss

Features:

  • Complete color palette generation
  • Modular typography scale
  • 8pt spacing grid system
  • Shadow and animation tokens
  • Responsive breakpoints
  • Multiple export formats

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Create interactive 3D scenes for websites, including product views and scroll-driven animations. Covers choosing Three.js, React Three Fiber, or Spline, preparing lightweight models, showing loading progress, and adapting experiences for mobile devices.

  • Building an interactive 3D product configurator
  • Adding 3D scenes to a portfolio
  • Animating models and cameras as visitors scroll
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

ab-test-setup

FreeSummary

Plan A/B tests that compare page or product changes, with clear hypotheses, sample sizes, success metrics, and traffic allocation. Get a structured test plan and guidance for interpreting results and deciding what to try next.

  • Comparing signup button copy
  • Planning a pricing page experiment
  • Estimating sample size and test duration
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

Prepare an academic CV for faculty, postdoctoral, or research applications. Organize publications, grants, teaching, and research experience, with section order and formatting adapted to the role and academic field.

  • Preparing a CV for faculty applications
  • Updating a CV for postdoctoral applications
  • Organizing publications and research funding
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

accessibility

FreeSummary

Audit and improve web accessibility using WCAG 2.1 guidelines. Covers image descriptions, color contrast, keyboard controls, forms, and screen reader support, with code examples and automated and manual checks to guide fixes.

  • Auditing accessibility before a website launch
  • Improving keyboard navigation
  • Fixing form labels and error announcements
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

Audit websites for accessibility barriers and improve image descriptions, color contrast, forms, keyboard navigation, and screen reader support. Provides code examples and automated and manual testing guidance for work toward WCAG 2.1 AA or AAA accessibility standards.

  • Auditing a website for accessibility issues
  • Fixing form labels and error announcements
  • Checking keyboard navigation and dialog focus
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

Design autonomous agents for Claude Code plugins, including when they should run, what tools they may use, and how they should respond. Provides configuration templates, prompt guidance, and validation steps for creating agent files.

  • Create a code review agent
  • Refine examples that trigger an agent
  • Limit the tools an agent can use
davila7/claude-code-templates32.8KUpdated Oct 18, 2026

See all skills by davila7

Report a problem with this skill