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
Ready-to-paste message
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-bauhausOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/hps-bauhaus/SKILL.md -o SKILL.mdTechnical 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-texthero words,.tri-band, and.divider-accent. Never use soft multi-stop gradients. - All chrome is ink:
2px solid #111borders on cards, pills, chart bars, checkboxes;3pxstrokes inside SVG. - Shadows are hard offsets (
4px 4px 0 #111,8px 8px 0 #111). Blurredrgbadrop shadows are forbidden. border-radiusis0on 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
@importis 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-numrendered stroke-only via-webkit-text-stroke:3px var(--text-1)with transparent fill. - Primary top rules:
.card-accent / .card-accent-2 / .card-accent-3give cards an 8px red/yellow/blue top border; rotate the three primaries across a grid rather than repeating one. - Tri-band:
.tri-bandand.divider-accentare ink-bordered strips of the hard three-band gradient. - Square checkboxes:
.check li::beforeis a yellow ink-bordered square with an ink check stroke. - Geo strip:
.geo-square / .geo-triangle / .geo-circlerepeat 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
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
architecture-decision-records
Has your agent record important project structure decisions. It helps to understand the reasoning behind choices and maintain a clear history of changes.
affaan-m/ECC
code-tour
Lets your agent create step-by-step code walkthroughs with exact file and line anchors. It's useful for project introductions, code explanations, or change reviews. Helps understand how a system works.
affaan-m/ECC
codebase-onboarding
Helps your agent analyze unfamiliar code and create an onboarding guide. It includes an architecture map, entry points, and conventions. Ideal for starting on a new project.
affaan-m/ECC