skills.rest
mshaheerz
mshaheerzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tool-design-style-selector

Scan project documentation and generate a design-system.md file.

1|Updated Feb 25, 2026
Search Tags:#branding#UI/UX#design system#style guide#design tokens#visual direction
One-click install
npx skills add https://github.com/mshaheerz/hive-mind --skill tool-design-style-selector-mshaheerz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tool-design-style-selector
Source: https://github.com/mshaheerz/hive-mind/tree/main/agent-skills/tool-design-style-selector
Command: npx skills add https://github.com/mshaheerz/hive-mind --skill tool-design-style-selector-mshaheerz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you define or converge a project's visual direction by scanning existing documentation and proposing a suitable design system, either by preserving the current style or selecting from a range of presets.

Core Features & Use Cases

  • Style Definition: Automatically generates a design-system.md file.
  • Style Preservation: Extracts and unifies existing project styles.
  • Preset Application: Selects from 30 pre-defined design styles.
  • Use Case: When starting a new project or refactoring an existing one, use this Skill to quickly establish a consistent visual language, ensuring brand alignment and efficient UI development.

Quick Start

Use the tool-design-style-selector skill to define the visual style for the current project.

Frequently Asked Questions about tool-design-style-selector

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

FAQPage Schema
How do I generate a design system for my project?▼

You can generate a design system by scanning your project documentation to produce a `design-system.md` file. This file defines your visual direction, either by preserving existing styles or applying one of 30 pre-defined presets.

Can I extract and unify existing UI styles during a project refactor?▼

Yes, you can extract and unify existing UI styles by scanning your current documentation. The tool identifies your current visual direction and consolidates it into a single, consistent design system file.

What is the best way to establish a visual style guide for a new UI?▼

The best way to establish a visual style guide is selecting from 30 pre-defined design presets. The system analyzes your intent, recommends a suitable preset, and deploys a structured design system file.

Does this tool require any external dependencies to apply design tokens?▼

No external dependencies are required to apply design tokens. The tool operates independently using internal scripts and references to analyze documentation and generate your visual style guide.

When should I use a preset instead of preserving my current branding?▼

Use a preset when starting a new project or needing a completely new visual direction. Preserve your current branding when refactoring an existing project to ensure brand alignment and maintain established design tokens.

Related Skills

Explore More Design & Creative Skills→
telum-aitelum-ai
2

project-import

Create a Speck project structure with a skeleton project.md file.

Official
Basic
nidhalboumaiza-0nidhalboumaiza-0

frontend-design

Convert UI style requirements into frontend code with a tokens-first design system.

Community
Advanced
rodmena-limitedrodmena-limited
3

moai-domain-uiux

Guide UI/UX design systems, WCAG 2.2 accessibility, and dark mode theming.

Official
Advanced
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced