"Good design is as little design as possible." — Dieter Rams
A specialized design skill for AI agents to generate calm, high-quality, and functional web interfaces.
Most AI-generated UIs suffer from "visual noise": excessive shadows, generic gradients, and cluttered layouts. They often lack a clear typographic hierarchy and rational structure because LLMs tend to default to "over-designed" or generic components.
less-is-more-ui provides a set of modernist constraints that force the agent to prioritize content and function. It transforms the agent from a generic coder into a senior designer with a Miesian perspective, focusing on:
- Rational Layouts: Using grid systems and generous whitespace instead of decorative containers.
- Typography-First Hierarchy: Letting text carry the weight of the interface.
- Subtle Palettes: Using color to support, not dominate.
- Systematic Spacing: A predefined variable-based scale for consistent rhythm.
npx skills add Mendiak/less-is-more-ui
Installs design tokens, a minimalist reset, and reusable component patterns.
npm install @mendiak/less-is-more-ui
Then in your project's CSS:
/* Import everything (tokens + reset + components) */
@import "@mendiak/less-is-more-ui";
/* Or import only what you need */
@import "@mendiak/less-is-more-ui/references/tokens.css";
@import "@mendiak/less-is-more-ui/assets/css/reset.css";
@import "@mendiak/less-is-more-ui/assets/css/components.css";
What's included:
| File | Description |
|---|---|
tokens.css |
CSS custom properties: modular typographic scale, spacing system, neutral palette, semantic aliases ( var(--ui-bg) ,var(--ui-text) , etc.), and dark/light theme support |
reset.css |
Minimalist box-sizing reset and base element normalization |
components.css |
Reusable UI patterns: .button ,.input ,.essential-card ,.essential-nav ,.essential-filters ,.essential-specs ,.essential-form ,.icon , and utility classes |
style.css |
(Demo only) Styles for theMuseum of the Essential showcase page. Not intended for external projects. |
Once activated, you can direct your agent with high-level design intent. The agent will use the bundled resources (principles.md, references/grid.md, references/components.md, etc.) to make informed decisions.
Example Prompts:
- "Refactor this dashboard following the Less Is More manifesto."
- "Simplify this landing page. Use only the scale variables and remove all decorative elements."
- "Build a contact form using the 'Honest Materials' precept (semantic HTML only)."
Visit the Museum of the Essential for a curated showcase of these principles in action.
The showcase applies the same rules it documents:
-
Six designer profiles — Mies van der Rohe, Louis Sullivan, Dieter Rams, Jony Ive, Josef Müller-Brockmann and Massimo Vignelli — each with a different layout treatment.
-
Eight case studies comparing the noisy and the essential version of the same pattern.
-
A 12-column grid and an 8px baseline , with section headers composed across the grid and placement expressed as spans.
-
A single inverted chapter (Methodology) and an inverted footer to give the page contrast without decoration.
-
SKILL.md– Main entry point and agent instructions. -
docs/principles.md– Core design philosophy (Mies, Sullivan, Müller-Brockmann, Vignelli, Rams). -
docs/design-manifesto.md– High-level goals and aesthetic standards. -
docs/design-process.md– Step-by-step method for minimal interface design. -
docs/animations.md– Functional standards for subtle micro-interactions. -
docs/responsive.md– Strategies for mobile-first reduction. -
docs/accessibility.md– Minimalist standards for inclusive design. -
docs/typography.md– Typographic pairing and technical standards. -
docs/anti-patterns.md– Visual friction to identify and remove. -
docs/design-checklist.md– Final UI quality verification. -
assets/css/style.css– Demo showcase styles for the Museum of the Essential. -
assets/css/components.css– Reusable UI component patterns (buttons, forms, cards, navs). -
index.html– The "Museum of the Essential" documentation and demo. -
references/-axioms.md– Foundational truths of minimal design.grid.md– Grid construction, spans, baseline rhythm and responsive column reduction (Müller-Brockmann).case-studies.md– Analysis of successful minimal interfaces.components.md– Pattern library for buttons, inputs, and cards.tokens.css– Design tokens and scale variables.
-
evals/– Performance benchmarks and evaluation sets. -
assets/css/reset.css– Tiny modernist reset for a clean start. -
index.css– Entry point for the npm package. -
package.json– npm package configuration. -
CHANGELOG.md– Release history.
- Less is more. (Reduction to the essential)
- Form follows function. (Logic over decoration)
- Less but better. (Instinctive simplicity)
Developed for clarity and purpose by Mendiak.