skills.rest
tmdgusya
tmdgusyaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vibe-designer

Create mood-driven web interfaces with predefined color systems and glass effects.

Updated Jan 9, 2026
Search Tags:#design#neon#glassmorphism#ui-design#aesthetics#glow
One-click install
npx skills add https://github.com/tmdgusya/sprinter --skill vibe-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vibe-designer
Source: https://github.com/tmdgusya/sprinter/tree/main/vibe-designer-plugin/skills/vibe-designer
Command: npx skills add https://github.com/tmdgusya/sprinter --skill vibe-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create mood-driven, polished web interfaces to eliminate inconsistent aesthetics across tools and dashboards.

Core Features & Use Cases

  • Mood-driven design tokens for Aurora/Cosmic, Neon Cyber, Glass Premium, Minimal Dark, Warm Terminal, Vapor Wave
  • Glassmorphism panels, glow effects, and motion guidelines to maintain a cohesive aesthetic
  • Use Case: Craft developer dashboards with depth, refined typography, and atmospheric UI elements while preserving accessibility

Quick Start

Start by selecting a primary mood and target components, then generate color tokens, typography rules, and layout suggestions.

Frequently Asked Questions about vibe-designer

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

FAQPage Schema
How do I create glassmorphism panels and glow effects for dark-mode-first developer dashboards?▼

Yes, you can generate mood-driven design tokens for Neon Cyber, Glass Premium, and Vapor Wave aesthetics. This skill provides predefined color systems and typography rules to maintain cohesive atmospheric design across developer-focused tools and dashboards.

How do I ensure dark-mode-first UI designs meet accessibility and contrast requirements?▼

To ensure dark-mode-first UI designs meet accessibility and contrast requirements, this skill validates that the mood, color system, typography, and interactions adhere to strict visual standards. It automatically checks contrast ratios for atmospherically refined web interfaces.

What is the best way to eliminate inconsistent aesthetics across developer tools and dashboards?▼

The best way to eliminate inconsistent aesthetics across developer tools and dashboards is to apply mood-driven design tokens. This skill generates predefined color systems, glass surfaces, and motion guidelines to maintain depth and polish across all components.

How do I select a primary mood and generate layout suggestions for atmospheric web interfaces?▼

To select a primary mood and generate layout suggestions for atmospheric web interfaces, start by choosing a target mood like Aurora or Minimal Dark. The skill then outputs matching color tokens, typography rules, and layout structures for your components.

Can I apply glassmorphism and glow effects to full applications or only individual components?▼

You can apply glassmorphism and glow effects to both individual components and full applications. The skill enables mood-driven design decisions across entire pages and developer dashboards while preserving accessibility and visual contrast.

Related Skills

Explore More Design & Creative Skills→
BoristokaBoristoka

theme

Apply predefined or custom HSL color themes to websites via HTML classes and CSS variables.

Community
Basic
HanHan666666HanHan666666
10

frontend-design

Design and implement frontend interfaces with design tokens and responsive guidelines.

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
Asymmetric-alAsymmetric-al
1

dark-mode-design-expert

Generate time-aware dark-mode design tokens with WCAG-compliant contrast.

Official
Advanced