Bauhaus Design

Create frontends, posters, dashboards, and web UIs rooted in Bauhaus and Swiss International Typographic Style (Internationale Typografische Stil) design principles. Use this skill when the user mentions Bauhaus, Swiss design, International Typographic Style, grid systems, Josef Müller-Brockmann, Max Bill, Jan Tschichold, Herbert Bayer, László Moholy-Nagy, constructivism, De Stijl-influenced UI, or asks for designs that emphasize mathematical grids, typographic hierarchy, geometric abstraction, asymmetric layouts, or modernist clarity. Also trigger when the user wants a 'clean modernist' look,

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add capsrock/bauhaus-design-skill --skill bauhaus-design
Manual install
git clone --depth 1 https://github.com/capsrock/bauhaus-design-skill.git /tmp/bauhaus-design-skill
mkdir -p ~/.claude/skills
cp -r /tmp/bauhaus-design-skill/. ~/.claude/skills/bauhaus-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Bauhaus & Swiss International Typographic Style

This skill produces frontends, posters, dashboards, and web interfaces following the design principles of Bauhaus (1919–1933) and the Swiss International Typographic Style (1950s–).

Read this file fully before writing any code.

## Core Philosophy

"Form follows function" is the surface reading. The deeper principle: **every visual element must justify its existence through communication, not decoration.** If it doesn't clarify, it's noise.

The Swiss/Bauhaus tradition treats the designer as an engineer of visual information — not an artist expressing themselves, but a systems thinker organizing content for maximum clarity and impact.

## The Five Pillars

### 1. The Grid Is the Architecture

The grid is not optional — it is the structural skeleton of the entire composition.

- Use a **mathematical grid** as the foundation. Common: 12-column, but 3-, 4-, 6-column grids are equally valid depending on content density.
- All elements — text blocks, images, shapes, whitespace — must **snap to grid intersections or grid lines**.
- **Margins and gutters are sacred.** Consistent outer margins (typically generous) and column gutters create rhythm.
- The grid should be **felt, not seen.** The viewer perceives order without consciously noticing the underlying structure.
Read the full skill on GitHub

Details

Skill name
bauhaus-design
License
MIT
Repo updated
17 October 2026

FAQ

What does the Bauhaus Design skill do?

Create frontends, posters, dashboards, and web UIs rooted in Bauhaus and Swiss International Typographic Style (Internationale Typografische Stil) design principles. Use this skill when the user mentions Bauhaus, Swiss design, International Typographic Style, grid systems, Josef Müller-Brockmann, Max Bill, Jan Tschichold, Herbert Bayer, László Moholy-Nagy, constructivism, De Stijl-influenced UI, or asks for designs that emphasize mathematical grids, typographic hierarchy, geometric abstraction, asymmetric layouts, or modernist clarity. Also trigger when the user wants a 'clean modernist' look,

How do I install the Bauhaus Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add capsrock/bauhaus-design-skill --skill bauhaus-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Bauhaus Design popular?

It lives in capsrock/bauhaus-design-skill, which has 7 GitHub stars and 0 forks.

Related skills

Blindspot

7

IdanTayree/Blindspot

Turn an idea — or a half-planned project already underway — into a buildable blueprint, by interviewing the user one question at a time until the unknowns run out, then deep-reading and verifying real open-source components for each part. Use this whenever someone describes something they want to build but has not specified it ('I want to build an app that…', 'I have an idea for…', 'help me plan/spec/scope this', 'turn my idea into a plan'), whenever they ask for a PRD, a spec, a product requirements document or a build plan, AND equally whenever someone says an existing project feels under-pl

Frontend & Design

Avatar Sticker Pack

7

bianzigege/avatar-sticker-pack

Generate a reusable sticker pack from one or more user-provided avatar images. Use when the user asks for avatar stickers, emoji packs, reaction stickers, chibi stickers, human-proportion and Q-version variants, transparent PNG stickers, or a paired sticker set for chat platforms.

Frontend & Design

Brand Guidelines

7

piaoyinghuang/brand-consistency-ai-skill

Universal brand guideline engine for producing, reviewing, and suggesting brand-compliant marketing materials for ANY company. Use this skill whenever a task involves brand identity, visual consistency, marketing collateral, or corporate design standards. Triggers include: brand guidelines, brand book, visual identity, corporate identity, brand compliance, brand review, brand audit, marketing materials, social media copy, poster design, banner design, PPT template, presentation template, company brochure, brand colors, typography guidelines, tone of voice, brand voice, logo usage, brand assets

Frontend & Design

HTML Animation to Mp4

6

AZR-Software-Solutions/html-animation-to-mp4

Convert an HTML/CSS/JS animation — especially a Claude "Design" timeline artifact (a *.dc.html bundle exported from Claude) — into a clean, shareable MP4 using deterministic headless-browser frame capture plus ffmpeg. Use this whenever the user has a web/HTML animation, a Claude Design or Artifacts animation, a `.dc.html` file, an animated promo / explainer / motion graphic, and wants a video file (MP4, reel, short, clip) out of it — even if they don't say "render", "ffmpeg", or "headless". Trigger on phrasings like "convert this animation to mp4/video", "export my HTML animation as a video",

Frontend & Design

Design Psychology

7

Fh-Ndiritu/design-psychology-skill

Audit or build any website/UI against research-backed conversion and design-psychology principles (Hick's Law, Von Restorff, Goal Gradient, Peak-End, Fitts's Law, the Aha moment, loss aversion, social proof, feedforward, labor illusion, and ~50 more). Use when reviewing a live URL or a local codebase for conversion/UX quality, or when designing or editing any user-facing surface — landing pages, pricing, onboarding, CTAs, forms, empty states, error flows, mobile screens. Auto-detects whether the target is a live URL or local source files. Brand-agnostic: derives the product's own tokens and vo

Frontend & Design

Xiaoer Artstudio Design

7

Jane-xiaoer/xiaoer-artstudio-design

Design methodology reproduction kit for 小耳 Art Studio (xiaoerai.xyz / uki-clone.vercel.app). Replicate the "Japanese stationery × independent artist portfolio" aesthetic — tender whitespace, dual typography, section-rotated pastel palette, hand-drawn SVG vocabulary, trilingual poetic copy, **plus the five-layer interaction system** (Matter.js physics garden, per-character text spring with optional pencil cursor, tangential rotor, idle-spin). Use when a user asks to build an artist portfolio, product showcase, or derivative-goods landing page in this gentle-editorial style. Portable across Clau

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.