skills.rest
kftof
kftofCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/kftof/ui-kit --skill ui-kit-creator
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
wpankwpank
11

design-system-patterns

Define design token hierarchies and theme switching for multi-brand systems.

Community
Advanced
botPhUbotPhU

css-styling-expert

Audit CSS architecture and produce a token-driven design system blueprint.

Community
Advanced
fauzanazzfauzanazz

generative-ui-preview

Generate an interactive HTML preview of a UI/UX design concept.

Community
Intermediate
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced