Skip to content
Skillpedia
Documentation101k · #556

hps-bauhaus

Has your agent teach brand design fundamentals. It covers grid, typography, and color with practical exercises. Useful for training new designers.

What it does

This plugin creates slide presentations with a visual style inspired by the Bauhaus movement. It uses basic geometric shapes (circle, square, triangle), primary colors (red, yellow, blue), and strong typography, all within a clean and modern design.

When to use it

  • ✓Creating a presentation about design history or art movements.
  • ✓Developing training material for new designers.
  • ✓Making a visual portfolio with a unique and striking style.

Example of what to ask your AI

“Create a presentation about the principles of Bauhaus design, using the geometric style and primary colors.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/nexu-io/open-design/blob/main/plugins/_official/examples/hps-bauhaus/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/nexu-io/open-design/blob/main/plugins/_official/examples/hps-bauhaus/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

The plugin applies a fixed set of design rules, such as specific colors, fonts, and geometric shapes. You only need to replace the slide content, maintaining the defined structure and style.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add nexu-io/open-design --skill hps-bauhaus

Or download just the file:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/hps-bauhaus/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

Bauhaus Primary (hps-bauhaus)

Single-theme deck plugin ported from the bauhaus theme of the upstream MIT-licensed lewislulu/html-ppt-skill (36 themes × 31 layouts × 27 animations). This plugin locks one skin: design-history geometric modernism — the 1919–1933 Dessau language of square/triangle/circle, the three primaries on an aged paper ground, and typography that behaves like a poster.

Start from example.html. Replace content only. Never rewrite the design system or the runtime script. Never introduce a color or font outside the token sheet below.

Locked token sheet (:root, do not deviate)

:root{
  --bg:#f4efe3;            /* aged canvas ground */
  --bg-soft:#e8e2d1;       /* darker canvas */
  --surface:#ffffff;       /* card paper */
  --surface-2:#f4efe3;
  --border:#111111;        /* ink — every stroke is this */
  --border-strong:#111111;
  --text-1:#111111; --text-2:#333333; --text-3:#666666;
  --accent:#e03c27;        /* Rot — red */
  --accent-2:#f4c430;      /* Gelb — yellow */
  --accent-3:#1d4eaf;      /* Blau — blue */
  --good:#1b8c3c; --warn:#f4c430; --bad:#e03c27;
  --grad:linear-gradient(135deg,#e03c27 0 33%,#f4c430 33% 66%,#1d4eaf 66% 100%);
  --grad-soft:linear-gradient(135deg,#f4efe3,#e8e2d1);
  --radius:0; --radius-sm:0; --radius-lg:0;          /* zero radius, always */
  --shadow:4px 4px 0 #111; --shadow-lg:8px 8px 0 #111; /* hard offset, never blurred */
  --font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif;
  --font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  --font-display:'Archivo Black','Space Grotesk','Noto Sans SC',sans-serif;
  --letter-tight:-.03em; --letter-normal:-.01em;
  --ease:cubic-bezier(.4,0,.2,1);
}

Hard rules derived from the sheet:

  • The three-band gradient (--grad) has hard stops — it is a flag, not a blend. Use it only on .gradient-text hero words, .tri-band, and .divider-accent. Never use soft multi-stop gradients.
  • All chrome is ink: 2px solid #111 borders on cards, pills, chart bars, checkboxes; 3px strokes inside SVG.
  • Shadows are hard offsets (4px 4px 0 #111, 8px 8px 0 #111). Blurred rgba drop shadows are forbidden.
  • border-radius is 0 on every element except the geometric circle device (border-radius:50%).

Typography

  • Display (.h1 .h2 .stat-big .quote .section-num .kpi .num): Archivo Black, weight 400 (the face is already black — never fake-bold), uppercase, letter-spacing -.03em.
  • Body (.lede, card copy, lists): Space Grotesk, weights 300–700.
  • Mono (step counters, theme chip, code): JetBrains Mono.
  • No serif, no slab, no handwriting, no brush — those belong to sibling themes (editorial-serif, peoples-platform), not this one.
  • Google Fonts via @import is the only allowed remote resource.

Signature devices (keep these; they are the style)

  • Kandinsky mark: inline SVG of red square + yellow triangle + blue circle, 3px ink strokes — on the cover and the closer.
  • Outlined section numerals: .section-num rendered stroke-only via -webkit-text-stroke:3px var(--text-1) with transparent fill.
  • Primary top rules: .card-accent / .card-accent-2 / .card-accent-3 give cards an 8px red/yellow/blue top border; rotate the three primaries across a grid rather than repeating one.
  • Tri-band: .tri-band and .divider-accent are ink-bordered strips of the hard three-band gradient.
  • Square checkboxes: .check li::before is a yellow ink-bordered square with an ink check stroke.
  • Geo strip: .geo-square / .geo-triangle / .geo-circle repeat the square/triangle/circle motif as a footer ornament.

Layout system (shared upstream catalog, 31 layouts)

The slide scaffold and class vocabulary come from the upstream html-ppt system. Master categories (compose cover → toc → section-divider → content pages → closer):

group layouts
Openers & transitions cover toc section-divider
Text-centric bullets two-column three-column big-quote
Numbers & data stat-highlight kpi-grid table chart-bar chart-line chart-pie chart-radar
Code & terminal code diff terminal
Diagrams & flows flow-diagram arch-diagram process-steps mindmap
Plans & comparisons timeline roadmap gantt comparison pros-cons todo-checklist
Visuals image-hero image-grid

…

FAQ

Can I change the colors and fonts?

No, the visual style is fixed and inspired by Bauhaus. The colors and fonts are predefined to maintain the theme's identity.

How do I add my own images?

This theme uses only geometric SVG compositions; it does not support photos or external images. You can create your own SVG graphic elements.

What types of layouts are available?

There are various predefined layouts for different content types, such as text, data, charts, and visuals, all adapted to the Bauhaus style.

Details

Original description by the author

A visual-design fundamentals course for new brand designers — grid, type, color, and the exercises that build the eye. Built as a decision-grade professional training deck for junior designers, new hires.

repo: nexu-io/open-design

Popularity

GitHub stars
101k
Ranking position
#556
License
Apache-2.0
Updated
10/16/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills