skills.rest
asarchami
asarchamiCOMMUNITY
Explore all skills by this author →
GitHub

minimalist-ui

Generates editorial-style minimalist web interfaces with warm monochrome palettes and bento-grid layouts.

1|2|Updated Nov 25, 2017
Search Tags:#typography#minimalist#frontend#ui design#tailwind#editorial#bento grid
One-click install
npx skills add https://github.com/asarchami/dotfiles --skill minimalist-ui-asarchami
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: minimalist-ui
Source: https://github.com/asarchami/dotfiles/tree/main/dot_config/opencode/skills/ui_skills/minimalist-ui
Command: npx skills add https://github.com/asarchami/dotfiles --skill minimalist-ui-asarchami

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Generic AI-generated frontend code tends to produce cookie-cutter SaaS designs with default fonts, heavy shadows, gradients, and clichéd copy. This Skill enforces a strict design protocol so generated HTML/Tailwind interfaces follow a refined, editorial, ultra-minimalist aesthetic without manual restyling. ## Core Features & Use Cases - Design Constraint Enforcement: Bans generic fonts (Inter, Roboto), heavy shadows, gradients, pill-shaped containers, emojis, and AI copywriting clichés. - Complete Design System: Defines typography hierarchies (serif hero headings, monospace metadata), a warm monochrome palette with muted pastel accents, and precise component specs for bento grids, buttons, tags, accordions, and keystroke UIs. - Motion Guidelines: Specifies subtle scroll-entry animations, staggered reveals, and hover micro-interactions using transform and opacity only. - Use Case: Ask the AI to build a landing page or dashboard, and receive production-quality markup with 1px #EAEAEA borders, generous whitespace, and editorial typography instead of generic template output. ## Quick Start Use the minimalist-ui skill to build a landing page for a note-taking app with a bento feature grid and FAQ accordion.

Frequently Asked Questions about minimalist-ui

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

FAQPage Schema
How do I generate minimalist UI designs with AI?▼

Invoke this Skill when requesting frontend code and it applies a strict design protocol covering typography, color, spacing, and components. The output uses warm monochrome palettes, serif hero headings, and 1px light-gray borders instead of generic SaaS defaults.

What fonts and colors does a minimalist editorial design use?▼

This protocol specifies SF Pro Display or Geist Sans for body text, Newsreader or Playfair Display for hero headings, and Geist Mono for code. Colors use white or warm off-white backgrounds, off-black #111111 text, and muted pastel accents like #FDEBEC and #E1F3FE.

Does this design system work with Tailwind CSS?▼

Yes, the protocol references Tailwind conventions such as py-24 spacing, max-w-4xl containers, and text-xs badges. It bans Tailwind defaults like shadow-md and rounded-full for large containers, replacing them with custom values.

What UI elements are banned in minimalist design?▼

Banned elements include Inter and Roboto fonts, Lucide or Feather icons, heavy drop shadows, gradients, glassmorphism, pill-shaped cards, emojis, placeholder names like John Doe, and copywriting clichés such as Elevate or Seamless.

When should I not use an ultra-minimalist design approach?▼

Avoid this protocol when a project requires vibrant branding, playful consumer aesthetics, or dense data-visualization interfaces. The strict monochrome palette and flat components suit editorial and productivity contexts, not entertainment or gaming products.

Related Skills

Explore More Design & Creative Skills→
Adam-GuerinAdam-Guerin
1

copywriting

Generate conversion-focused marketing copy for landing pages and emails.

Community
Advanced
kortix-aikortix-ai
20.2k

web-publishing-and-deployments

Publish sandbox websites to public URLs via Cloudflare temporary deploys or Vercel permanent hosting.

Official
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
PostalocityPostalocity
1

ckm:ui-styling

Integrate shadcn/ui with Tailwind CSS to enforce design tokens and CSS variable theming.

Official
Advanced