ui-kit-creator

Generate a complete HTML design system and UI kit package.

Updated Apr 25, 2026

Search Tags:#documentation #components #handoff #tokens #design-system #ui-kit

Ready to run

npx skills add https://github.com/kftof/ui-kit --skill ui-kit-creator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-kit-creator
Source: https://github.com/kftof/ui-kit/tree/main/ui-kit-creator
Command: npx skills add https://github.com/kftof/ui-kit --skill ui-kit-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Crée et standardise rapidement un design system et un UI kit HTML à partir de zéro, fournissant un package prêt à être livré pour le handoff vers le développement.

Core Features & Use Cases

Génère les tokens, les composants, les motifs d'écrans et la documentation visuelle nécessaires pour démarrer un produit.
Produit un package HTML statique (ds/tokens.css, ds/components.css, ds/assets/brand/illustrations/images/fonts) et une UI Kit.html unique pour référence et déploiement.
Conçu pour être étendu et réutilisé par les équipes web, mobile et desktop, avec une structure claire pour les tokens, typographie, espacement et états.

Quick Start

Fournissez les entrées produit à ui-kit-creator pour générer un paquet complet DS+UI kit.

Frequently Asked Questions about ui-kit-creator

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

FAQPage Schema

How do I generate a complete design system and UI kit from scratch?▼

To generate a design system and UI kit from scratch, you provide product inputs to automate the creation of a package containing tokens.css, components.css, and a UI Kit.html file. This delivers a standardized package ready for development handoff.

What is included in a ready-to-handoff design system package for web, mobile, and desktop?▼

A ready-to-handoff design system package includes a structured directory with ds/tokens.css, ds/components.css, ds/assets, and a UI Kit.html. It contains standardized typography, color palettes, spacing, elevations, and icons for web, mobile, and desktop platforms.

How do I create design tokens and component CSS for a new product launch?▼

You create design tokens and component CSS by feeding product requirements into an automated generator. It outputs a static package with a clear structure for tokens, typography, spacing, and component states to standardize the new product launch.

Can I use a generated HTML UI kit for brand refreshes across different platforms?▼

Yes, you can use a generated HTML UI kit for brand refreshes across web, mobile, and desktop platforms. It is designed to be extended and reused by teams, providing a clear structure for visual documentation and deployment.

What is the best way to standardize typography, spacing, and color palettes for development handoff?▼

The best way to standardize typography, spacing, and color palettes for development handoff is to generate a complete design system package. This produces static CSS token files and an HTML UI kit to ensure visual consistency across all platforms.

Do I need existing brand assets to start building a design system and UI kit?▼

You do not need existing brand assets to start building a design system and UI kit. The process automates creation from zero, generating the necessary tokens, components, screen patterns, and visual documentation to start a product.