AI Agent Skill

Museum of the Essential

A specialized design system for AI agents to build calm, high-quality web interfaces. The principles of modernism are applied to remove visual noise and focus on what truly matters: the user's content.

6 Axioms 7 Case Studies 4 Pillars

The Origins

Minimalism isn't just an aesthetic; it's a structural necessity. These are the classic ideas that demonstrate how to design with purpose.

Ludwig Mies van der Rohe
The Architect

Ludwig Mies van der Rohe

"Less is more."

Mies spent his career proving that stripping away decoration doesn't make a design "empty"—it makes it clearer. By focusing on essential materials and open space, his work reveals the true character of a project.

Design for the Web: Clarity over Decoration

In modern web development, this means removing every border, shadow, and icon that isn't helping the user complete their task. Typography and whitespace are used to guide the eye.

This content block uses nothing but whitespace and a single vertical line to establish its presence. There are no shadows or borders to distract you from the text.

Keep your HTML clean and your CSS focused:
<div class="content-block">
    <p>Pure content. No noise.</p>
</div>
Louis Sullivan
The Functionalist

Louis Sullivan

"Form follows function."

Sullivan believed that the shape of anything—a building, a tool, or a website—should come directly from what it's supposed to do. Decoration is not a substitute for purpose.

Honest Materials: Semantic Structure

Web 'materials' are HTML tags. An interactive element should be a <button>, not a div with an event listener. Using the right tags for the right jobs results in code that is simpler, more accessible, and easier to maintain.

A button should look and act like a button:
<nav>
    <button class="primary">Action</button>
    <a href="...">Link</a>
</nav>
Dieter Rams
The Industrialist

Dieter Rams

"Less but better."

Rams' ten principles for good design established that an object should be as little designed as possible. He championed the idea that design is a service to the user, not a platform for the designer's ego.

Subtle Utility: The Invisible Interface

Good design is unobtrusive. In web design, this translates to interfaces that stay in the background, appearing only when needed and never competing with the user's primary task.

Jony Ive
The Craftsperson

Jony Ive

"It's very easy to be different, but very difficult to be better."

Ive focused on the intersection of materials and experience. He proved that digital interfaces should feel as deliberate and carefully crafted as physical objects, focusing on the essential core of an interaction.

Instinctive Design: Removing Friction

Great interfaces feel natural. This is achieved by using consistent patterns and removing anything that creates "visual friction." The goal is a design that requires no explanation.

Material Selection Aluminium
Interaction Model Direct Manipulation
Massimo Vignelli
The Systematist

Massimo Vignelli

"If you do it right, it will last forever."

Vignelli believed that design should be semantically correct, syntactically consistent, and pragmatically understandable. He treated design as a single coherent system governed by structural discipline and grid-based order.

The Grid System: Structural Discipline

In web design, this means relying on repeated proportions, consistent vertical rhythm, and alignment instead of visual separators. A strong grid guides the eye effortlessly and groups information naturally.

01 Semantics Understanding the search for meaning in design.
02 Syntax The structural language and cohesion of elements.
03 Pragmatics How clearly the design communicates with the user.
Use semantic, clean grid layouts without visual borders:
<div class="grid-system">
    <div class="grid-row">
        <span>01</span>
        <h5>Semantics</h5>
    </div>
</div>

Methodology

Translating these classic principles into modern web design decisions.

Foundational Framework

Axioms of the Essential

These are the universal rules applied to judge every design choice. This approach moves beyond "style" and into the realm of architectural logic for the web.

  • Justification: Every pixel must have a reason to be there. If it's there "just because," it's an error.
  • Typographic Dominance: If the fonts are right, the interface is done. Adding a gradient won't save a bad typeface.
  • Material Honesty: Digital elements lack physical depth; avoid faking it. Your button isn't a physical object; don't pretend it casts a shadow from a sun that doesn't exist.
  • The Silent Grid: Alignment creates order without lines or boxes. Boxes are for people who don't trust their own layout.
  • Proximity and Void: Whitespace is a powerful structural tool. It is used actively to group, separate, and guide the eye.
  • Paradox of Choice: Limit options to increase clarity and intent. A dashboard with 50 toggles isn't "powerful"; it's an admission of architectural failure.

All 6 Axioms in Practice

Axioms 1–4 are demonstrated through the designer profiles above: Justification through Mies van der Rohe, Material Honesty through Sullivan, Typographic Dominance through Rams & Ive, and The Silent Grid through Vignelli. The two remaining axioms require a direct visual comparison to be fully understood:

Axiom 5 — Proximity and Void
Cramped

User name

mikel@example.com

Active account

Member since 2021

Essential

Mikel Aramendia

mikel@example.com · Active · 2021

Axiom 6 — Paradox of Choice
Curated
Work About Contact

Case Studies

Seven real UI patterns, compared side by side. The noisy way versus the essential way — same content, radically different clarity.

Case Study 01
The Information Card

Reducing the container to amplify the content. A card is a logical group, not a physical object in a box.

The Noisy Way
✨
Project Alpha

Active Status

The Essential Way

Active

Project Alpha
Case Study 02
Global Navigation

Curation over decoration. If everything is highlighted, nothing is important.

The Noisy Way
The Essential Way
Case Study 03
The Silent Checkout

Removing anxiety through typographic clarity. Error states should inform, not panic.

The Noisy Way
⚠️ CRITICAL ERROR: INVALID EMAIL FORMAT
The Essential Way
Please enter a valid email.
Case Study 04
Product Specifications

Using alignment and typography to create structure. Borders are for people who don't trust their own grid.

The Noisy Way
Weight1.2kg
Size240mm
ColorGraphite
The Essential Way
Weight1.2kg
Size240mm
ColorGraphite
Case Study 05
Search & Discovery

Filtering as a thought process, not a technical operation.

The Noisy Way
All Categories
New Items
The Essential Way
All New Archived
Case Study 06
Purposeful Animation

Motion should confirm an action, not decorate a page. Hover both buttons.

The Noisy Way
Bounces & glows on hover — always
The Essential Way
Only animates to confirm the action
Case Study 07
Color Restraint

Color as semantic signal, not decoration. One accent color, used only to communicate state.

The Noisy Way
Dashboard Overview
New Sale Hot Info

The Essential Way

Dashboard

New items 12
Active sales 3
Status Nominal

How to Use It

This design philosophy is built directly into an AI-powered agent skill for developers.

The Method

The Substractive Pass

Before finalizing any interface, run this three-step process. It is not a style guide — it is a quality filter that transforms functional layouts into essential ones.

01 — Identify
Find the Noise

Scan for shadows, decorative gradients, redundant icons, unnecessary borders, and anything that exists for visual richness rather than function.

→
02 — Remove
Delete & Re-evaluate

Remove each noisy element. If the interface still communicates the same information, the element was unnecessary. Leave it out.

→
03 — Refine
Restore with Type & Space

Compensate for the removed noise by improving typographic hierarchy, line-height, letter-spacing, and whitespace. Structure through rhythm.

For Developers

AI Agent Integration

Designing is a rational process, not a decorative one. For an AI agent, minimalism is a functional choice: reducing visual noise simplifies the experience for both the machine and the human user.

Getting Started

This skill provides your AI agent with a curated set of rules, references, and a custom design system. It allows you to skip the "generic" web look and build professional, focused interfaces by default.

Installation
npx skills add Mendiak/less-is-more-ui
Talk to your agent like a design partner:
"Apply the less-is-more-ui principles to this layout.
Prioritize the typography and remove all the noise."