ui-style-explorer

Generate 2-3 UI style directions with color values, typography, and references.

145|30|Updated Mar 20, 2026

Search Tags:#typography #ui #references #style-exploration #design-consultation #color-scheme #conversation-driven

Ready to run

npx skills add https://github.com/KonghaYao/perihelion --skill ui-style-explorer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-style-explorer
Source: https://github.com/KonghaYao/perihelion/tree/main/.claude/skills/ui-style-explorer
Command: npx skills add https://github.com/KonghaYao/perihelion --skill ui-style-explorer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to settle on a UI style, balancing aesthetics and practicality; this Skill guides the conversation to quickly define a clear style direction and output a ready-to-use style guide for developers and designers.

Core Features & Use Cases

Guided, stage-based dialogue to locate the visual voice and design language.
Presentation of 2–3 distinct, tangible style directions with concrete color values, typography, and reference products.
Output a complete UI style guide file (UI-STYLE.md) plus a concise summary for stakeholders.

Quick Start

用 AskUserQuestion 进行背景提问并在阶段二给出 2-3 个风格方向草案，随后迭代生成最终的 UI 风格指南。

Frequently Asked Questions about ui-style-explorer

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

FAQPage Schema

How do I define a UI style direction for a new product?▼

To define a UI style direction, use conversation-driven exploration to surface 2-3 differentiated design concepts with concrete color values, typography, and references. This stage-wise process aligns the visual voice with your product context and goals.

What is the best way to create a UI style guide for developers?▼

The best way to create a UI style guide is through guided dialogue that outputs an actionable UI-STYLE.md file. This file contains concrete color schemes, typography rules, and reference constraints to facilitate rapid sketch-to-implementation.

Can I get specific color scheme and typography recommendations through conversation?▼

Yes, you can get specific color scheme and typography recommendations through conversation. The skill uses stage-wise exploration to present 2-3 distinct style directions, each populated with concrete color values and typography choices tailored to your product.

Does conversation-driven design consultation work for balancing aesthetics and practicality?▼

Conversation-driven design consultation works for balancing aesthetics and practicality by guiding teams through stage-based dialogue. It helps quickly settle on a clear visual voice and outputs a ready-to-use style guide for stakeholders.

How to explore different UI style directions before committing to a final design?▼

Explore different UI style directions by using a stage-wise process that generates 2-3 clearly differentiated design drafts. Each draft includes tangible references and constraints, allowing you to iterate and select the best fit before final implementation.

What do I need to provide to start a UI style exploration session?▼

To start a UI style exploration session, you need to provide your product context and user goals. The skill uses AskUserQuestion to gather background information, ensuring the resulting style directions align with your specific design requirements.