modernist

Generate Swiss Design and Bauhaus UI layouts with CSS/TSX design tokens.

1|Updated Jul 23, 2024

Search Tags:#typography #minimalism #design-system #grid #bauhaus #de-stijl

Ready to run

npx skills add https://github.com/toddmoy/protobox --skill modernist

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: modernist
Source: https://github.com/toddmoy/protobox/tree/main/.claude/skills/modernist
Command: npx skills add https://github.com/toddmoy/protobox --skill modernist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Inspire frontend designs rooted in Swiss, Bauhaus, Minimalist, and De Stijl movements, emphasizing grids, typography, and primary colors.

Core Features & Use Cases

Grid systems: 12-column Swiss grid, Mondrian compositions.
Type discipline: Hierarchy and typographic scales.
Color & shape language: Primary colors and geometric forms.

Quick Start

Define a Swiss grid-based layout with bold typography and restrained color palette.

Frequently Asked Questions about modernist

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

FAQPage Schema

How do I create a grid-based UI design using Swiss Design principles?▼

Swiss Design grids organize layouts using modular systems—typically 12-column grids with strict proportions. This Skill generates grid specs, typography scales, and CSS/TSX components that enforce Swiss grid discipline, asymmetric balance, and geometric form constraints for web and digital interfaces.

What's the difference between Swiss Design and Bauhaus for minimalist layouts?▼

Swiss Design emphasizes functional grids and typography hierarchy; Bauhaus combines geometric abstraction with primary colors and ornament-free composition. This Skill draws from both movements, producing design systems with strict grid layouts, restrained color palettes, and modular components for dashboards and portals.

Can I generate responsive grid layouts with typography hierarchy?▼

Yes. This Skill produces responsive 12-column Swiss grids and Bauhaus modular layouts with typographic scales built into CSS and design tokens. It outputs code-ready components and style tokens for web interfaces requiring strict grid discipline across screen sizes.

How do I apply De Stijl and Mondrian composition to web design?▼

De Stijl compositions use primary colors, geometric forms, and asymmetric balance within grids. This Skill generates De Stijl-informed layouts with Mondrian-style grid compositions, primary color constraints, and reusable TSX components for marketing sites and digital interfaces.

What output formats does a minimalist design system produce?▼

Minimalist design systems output CSS stylesheets, TSX component specifications, layout specs, and design tokens defining grids, typography scales, and color constraints. This Skill delivers code-ready assets and tokens compatible with modern frontend workflows.

When should I use a Swiss grid system instead of other layout approaches?▼

Use Swiss grids for interfaces requiring functional clarity, strict proportions, and strong typographic hierarchy—dashboards, portals, and data-heavy sites benefit from grid discipline. This Skill is ideal when ornament-free, grid-based minimalism aligns with your design goals.