Skills
.Work. You
Rest

ui-kit-brand-explorer

Community

Propose logo directions and brand assets.

Design & Creative#svg#design-system#ui-kit#logo-design#branding-assets#brand-exploration
Authorkftof
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps product teams and designers quickly ideate, compare, and converge on a brand identity for a UI kit by producing multiple visual directions and a complete set of brand assets that stay consistent with the kit's tokens.

Core Features & Use Cases

  • Brand direction exploration: generates 6 distinct logo directions (Lettermark, Wordmark, combination marks, abstract symbol, symbol-based marks, and monogram) aligned to the kit's tokens.
  • Asset generation: outputs the full 7-brand assets (logo.svg, logo-mark.svg, logo-monochrome.svg, logo-dark.svg, app-icon.svg, splash.svg, favicon.svg) into ds/assets/brand/.
  • Brand explorer UI: creates Brand explorer.html to preview variants and capture user feedback before finalizing.
  • Validation & integration: validates SVG integrity and updates the UI Kit brand section accordingly.

Quick Start

Point the skill at your kit root containing ds/tokens.css and an existing brand brief to generate six logo directions and the seven brand assets.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-kit-brand-explorer
Download link: https://github.com/kftof/ui-kit/archive/main.zip#ui-kit-brand-explorer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.