98.8K+Download
Skip to the usage guide
minimalist-uiby Leonxlnx

Minimalist UI Skill.

A Claude Code and Codex skill for UI design: clean, monochrome, editorial-style interfaces.

  • Web & UI
  • UI code
Download OpenDesignView usage guide
Leonxlnx/taste-skill · skills/minimalist-skill/SKILL.mdSKILL.md
--- name: minimalist-ui description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows. --- ## 2. Absolute Negative Constraints (Banned Elements) ## 3. Typographic Architecture ## 4. Color Palette (Warm Monochrome + Spot Pastels) ## 5. Component Specifications ## 6. Iconography & Imagery Directives ## 7. Subtle Motion & Micro-Animations
Front matter and section headings read from the upstream file on 2026-09-14 · 7,896 characters in full

01 What it does

What the minimalist-ui Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill generates ultra-minimalist, document-style web interfaces inspired by premium workspace platforms. It enforces a warm monochrome palette with off-white and charcoal tones, bespoke typographic hierarchies using editorial serifs and geometric sans-serifs, and flat bento-grid layouts with muted pastel accents.

The protocol strictly bans Inter, Roboto, and Open Sans fonts, standard icon libraries like Lucide and Heroicons, Tailwind's default heavy shadows, gradients, emojis, and AI copywriting clichés. Components use 1px solid #EAEAEA borders, crisp 8-12px border radius, generous internal padding, and scroll-entry animations with IntersectionObserver. Motion is invisible and sophisticated, animating only via transform and opacity.

What it produces

  • Frontend code in HTML, React, Tailwind, or Vue reflecting the high-end, uncluttered, editorial aesthetic natively
  • Layouts with bento-grid asymmetrical CSS Grid structures and generous macro-whitespace
See the example prompt ↗

How It Works

  1. 01
    Establish macro-whitespace First

    Use massive vertical padding between sections, specifically py-24 or py-32 in Tailwind units.

  2. 02
    Constrain Content Width

    Limit main typography content to max-w-4xl or max-w-5xl to maintain editorial proportions.

  3. 03
    Apply Typographic Hierarchy and Monochromatic Variables

    Immediately set custom fonts and color variables following the warm monochrome palette specifications.

  4. 04
    Enforce Border Standards

    Every card, divider, and border must use exactly 1px solid #EAEAEA.

  5. 05
    Add scroll-entry Animations

    Apply animations to all major content blocks using IntersectionObserver, never window scroll listeners.

  6. 06
    Ensure Visual Depth

    Sections need depth through imagery, ambient gradients, or subtle textures rather than empty flat backgrounds.

02 Find your fit

When to Use the minimalist-ui Skill

Use the minimalist-ui skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Creating highly refined, ultra-minimalist, document-style web interfaces analogous to top-tier workspace platforms
  • Interfaces requiring extreme typographic contrast and premium font selection to establish an editorial feel
  • Designs needing asymmetrical bento box feature grids with generous internal padding of 24px to 40px
  • Projects requiring subtle, invisible motion that feels sophisticated with scroll-entry animations using IntersectionObserver

Know the Boundaries

  • Generic SaaS design trends with primary colored backgrounds for large elements or sections
  • Designs requiring gradients, neon colors, or 3D glassmorphism beyond subtle navbar blurs
  • Interfaces using pill shapes (rounded-full) for large containers, cards, or primary buttons
  • Content requiring emojis in any form or generic placeholder names like John Doe or Acme Corp

03 Inside the skill

Rules the minimalist-ui Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Banned Typefaces

    Never use Inter, Roboto, or Open Sans. Use SF Pro Display, Geist Sans, Helvetica Neue, or Switzer for body and UI instead.

  2. Banned Icon Libraries

    Do not use Lucide, Feather, or standard Heroicons. Use Phosphor Icons in Bold or Fill weights, or Radix UI Icons instead.

  3. Shadow Opacity Limit

    Do not use Tailwind's shadow-md, shadow-lg, or shadow-xl. Shadows must be practically non-existent or ultra-diffuse with opacity below 0.05.

  4. No Emojis Anywhere

    Do not use emojis in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives.

  5. Banned Copywriting Phrases

    Do not use AI copywriting clichés: Elevate, Seamless, Unleash, Next-Gen, Game-changer, or Delve. Write plain, specific language instead.

  6. Body Text Color Constraint

    Body text must never be absolute black #000000. Use off-black or charcoal #111111 or #2F3437 with line-height of 1.6.

  7. Card Border Specification

    Cards must have exactly 1px solid #EAEAEA borders with crisp border-radius of 8px or 12px maximum.

  8. Animation Performance Requirement

    Animate exclusively via transform and opacity. Never use layout-triggering properties like top, left, width, or height.

04 Put it to work

Install minimalist-ui in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add minimalist-ui to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill minimalist-ui

Generic skills CLI form for skills/minimalist-skill/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Build a project dashboard using an asymmetrical bento-grid layout with the warm monochrome palette. Include feature cards with 1px solid #EAEAEA borders and 24px internal padding, a primary CTA button with #111111 background, status badges using pale blue and pale green pastels, and scroll-entry animations for each grid item. Use Geist Sans for body text and Instrument Serif for the hero heading. Add keystroke hints as <kbd> elements and ensure no Tailwind shadow utilities are used.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Verify scroll-entry animations use IntersectionObserver and translateY(12px) with 600ms duration

In OpenDesign import minimalist-ui from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill file
skills/minimalist-skill/SKILL.md Content checksum recorded at verification; commit ccbc156
License
MIT From LICENSE.
Repository stars
86,946 GitHub snapshot taken 2026-09-14 for the whole Leonxlnx/taste-skill repository, which contains 11 skills in this catalog. Not a rating or usage count for minimalist-ui.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Protocol OverviewIntroduces the directive for ultra-minimalist, document-style web interfaces with warm monochrome palette and flat architecture
  2. Absolute Negative Constraints (Banned Elements)Lists strictly forbidden design elements including Inter font, Lucide icons, heavy shadows, gradients, emojis, and copywriting clichés
  3. Typographic ArchitectureSpecifies font families, sizes, and hierarchy using geometric sans-serifs, editorial serifs, and monospace with tight tracking
  4. Color Palette (Warm Monochrome + Spot Pastels)Defines base colors including pure white, warm bone backgrounds, charcoal text, and four muted pastel accents
  5. Component SpecificationsDetails implementation for bento grids, buttons, tags, accordions, keystroke UIs, and faux-OS window chrome
  6. Iconography & Imagery DirectivesSpecifies Phosphor or Radix icons, monochromatic illustrations, desaturated photography, and subtle background treatments for depth
  7. Subtle Motion & Micro-AnimationsDefines scroll-entry reveals, hover states, staggered cascades, and ambient motion using transform and opacity only
  8. Execution ProtocolProvides step-by-step workflow for implementing the design system from whitespace to animations
The Skill's Own Description
“Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.”

Front-matter description from SKILL.md. The full file is about 7,896 characters. Read the full file on GitHub.

06 Before you install

Questions About the minimalist-ui Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Which fonts should I use instead of Inter or Roboto?

For body and UI text, use SF Pro Display, Geist Sans, Helvetica Neue, or Switzer. For hero headings and quotes, use Lyon Text, Newsreader, Playfair Display, or Instrument Serif with tight tracking. For code and keystrokes, use Geist Mono, SF Mono, or JetBrains Mono.

What icon libraries are recommended for this style?

Use Phosphor Icons in Bold or Fill weights, or Radix UI Icons for a technical, slightly thicker-stroke aesthetic. Do not use generic thin-line libraries like Lucide, Feather, or standard Heroicons. Standardize stroke width across all icons for consistency.

Minimalist UI

Run minimalist-ui on a Real UI Design Task.

Download OpenDesign, import minimalist-ui from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill minimalist-ui

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows