skills.rest
pixeloid
pixeloidCOMMUNITY
Explore all skills by this author →
GitHub

bauhaus-ui-designer

Generate Bauhaus-style UI designs with geometric shapes, primary colors, and functional typography.

Updated Feb 5, 2026
Search Tags:#design system#visual design#component library#frontend development#ui design#bauhaus
One-click install
npx skills add https://github.com/pixeloid/studyu --skill bauhaus-ui-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bauhaus-ui-designer
Source: https://github.com/pixeloid/studyu/tree/main/.claude/skills/bauhaus-ui-designer
Command: npx skills add https://github.com/pixeloid/studyu --skill bauhaus-ui-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide and set of principles for designing user interfaces in the distinct Bauhaus style, ensuring consistency and adherence to its core tenets.

Core Features & Use Cases

  • Design System Definition: Outlines color palettes, typography, spacing, and shadow rules.
  • Component Guidelines: Provides specifications for common UI components like buttons, cards, inputs, and navigation.
  • Layout Principles: Defines grid systems and layout strategies aligned with Bauhaus aesthetics.
  • Use Case: A UI designer needs to create a new feature for a web application that must strictly follow a Bauhaus-inspired design language. This Skill provides all the necessary rules and examples to achieve that.

Quick Start

Design a new button component following the Bauhaus UI designer's guidelines for primary buttons.

Frequently Asked Questions about bauhaus-ui-designer

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

FAQPage Schema
How do I design UI components using Bauhaus principles?▼

You can define a Bauhaus visual design system by applying its core tenets: geometric shapes, primary colors, and functional typography. This skill outlines specific rules for color palettes, typography hierarchies, spacing, and shadows to maintain aesthetic consistency.

Can I integrate Bauhaus UI design specifications with Tailwind CSS?▼

Yes, you can integrate Bauhaus UI design specifications with Tailwind CSS. The skill provides implementation examples using CSS variables and Tailwind CSS integration to translate visual design rules into frontend development code.

What layout rules does a Bauhaus design system use for web applications?▼

A Bauhaus design system uses grid systems and specific spacing rules to align layouts with its aesthetic. It defines structural strategies for web applications, ensuring components like hero sections and navigation adhere to functional layout principles.

Does this Bauhaus UI designer provide wireframe examples for specific pages?▼

Yes, the Bauhaus UI designer provides a wireframe example specifically for a booking page. It also includes a decision tree for UI design to guide the creation of various components and page layouts.

Related Skills

Explore More Design & Creative Skills→
jwmyersjwmyers

visual-style-guide

Define color palettes, SVG styling, and token designs for Zero-Day Attack interfaces.

Community
Intermediate
NammDevNammDev
2

ui-styling

Integrate shadcn/ui with Tailwind CSS for React UI styling.

Community
Intermediate
RamonsDkaRamonsDka
1

frontend-ui-ux

Translate design intent into accessible, responsive HTML/CSS/JS UI components.

Community
Intermediate
renmengwenrenmengwen
90

tech-minimal-product

Define color, typography, and layout guidelines for MuseDock UI components.

Community
Intermediate