# Less Is More UI Agent Skill

> Source: <https://github.com/Mendiak/less-is-more-ui>
> Published: 2026-11-06 19:50:36+00:00

"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 the[Museum of the Essential](https://mendiak.github.io/less-is-more-ui/) 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](https://mendiak.github.io/less-is-more-ui/) 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.

1. **Less is more.** (Reduction to the essential)
2. **Form follows function.** (Logic over decoration)
3. **Less but better.** (Instinctive simplicity)

Developed for clarity and purpose by [Mendiak](https://github.com/Mendiak).