minimalist-ui
Premium Minimalistische Web-Oberflächen erstellen
Die meisten KI-generierten Oberflächen wirken generisch und abgeleitet. Dieses Skill führt Claude dazu, verfeinerte, redaktionelle Webdesigns mit warmen monochromen Paletten, typografischer Hierarchie und Premium-Ästhetik zu erstellen.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "minimalist-ui". Erstelle einen minimalistischen Preisbereich mit drei Stufen
Erwartetes Ergebnis:
Ein Preisbereich mit drei Karten im Bento-Grid-Layout. Jede Karte hat 1px #EAEAEA Rahmen, großzügiges 32px Padding, scharfe 8px Rahmenradius. Primäre Stufe hat #111111 CTA-Button. Sekundärer Text verwendet #787774. Keine Schatten, keine Verläufe.
Verwendung von "minimalist-ui". Design einen FAQ-Akkordeon-Bereich
Erwartetes Ergebnis:
Ein Akkordeon ohne Container-Boxen. Jedes Element getrennt durch 1px #EAEAEA Rahmen unten. Saubere + und - Toggles mit Radix oder Phosphor Icons. Dunkler Text (#2F3437) mit 1,6 Zeilenhöhe für Lesbarkeit.
Verwendung von "minimalist-ui". Erstelle einen Hero-Bereich für ein SaaS-Produkt
Erwartetes Ergebnis:
Ein Hero mit redaktioneller Serif-Überschrift mit Playfair Display oder Newsreader, engem -0.02em Tracking, 1.1 Zeilenhöhe. Warmes, fast-weißes Hintergrund (#FBFBFA). Untertitel in Switzer oder SF Pro mit großzügiger Zeilenhöhe. Optionaler ambivalenter Radialverlauf bei 0.03 Deckkraft.
Sicherheitsaudit
SicherAll 102 static findings are false positives triggered by CSS font-family declarations and UI design terminology. The SKILL.md is a legitimate design specification document. No actual shell commands, cryptographic code, keyloggers, or network exfiltration patterns exist. The hardcoded URL is a standard placeholder image service (picsum.photos) commonly used in web development.
Erkannte Muster
Qualitätsbewertung
Was du bauen kannst
Startup-Landingpages
Erstellung anspruchsvoller, minimalistischer Landingpages, die sich von typischen SaaS-Designs abheben.
Dokumentationsseiten
Generierung cleaner, lesbarer Dokumentationslayouts mit redaktioneller Typografie.
Design-System-Komponenten
Aufbau konsistenter UI-Komponenten nach minimalistischen Designprinzipien.
Probiere diese Prompts
Design a minimalist landing page for [PRODUCT NAME]. Use the Premium Utilitarian Minimalism style with warm monochrome palette, editorial serif headings, and bento-grid feature sections. Include a hero section, three feature cards, and a pricing table.
Create the following UI components using minimal design principles: (1) Primary CTA button with #111111 background, (2) Tag badges with muted pastel backgrounds, (3) Accordion FAQ section with only 1px bottom borders. Use the defined color palette and typography.
Design a pricing table with three tiers using bento-grid layout. Each tier should have generous padding (24px-40px), 1px #EAEAEA borders, and crisp 8px border-radius. Use off-black text (#2F3437) and muted gray secondary text (#787774).
Create a complete landing page for [PRODUCT TYPE]. Follow the Premium Utilitarian Minimalism protocol: warm monochrome palette (#FFFFFF, #F7F6F3, #111111), editorial serif headings (Lyon Text/Newsreader), system sans-serif body (SF Pro/Geist). Include: hero with tight-tracking headlines, bento feature grid, testimonials section, and sticky navbar with minimal blur. Add scroll-entry animations with translateY(12px) fade-in.
Bewährte Verfahren
- Beginne mit der Definition der Farbpalette und typografischen Hierarchie, bevor Komponenten hinzugefügt werden
- Verwende großzügigen Weißraum (py-24 oder py-32 zwischen Abschnitten), um ein Premium-Gefühl zu erzeugen
- Begrenze die Inhaltsbreite auf max-w-4xl oder max-w-5xl für optimale Lesbarkeit
- Implementiere Scroll-Entry-Animationen mit IntersectionObserver für subtile, performante Einblendungen
Vermeiden
- Verwendung generischer Schriften wie Inter, Roboto oder Open Sans, die sich corporate und abgeleitet anfühlen
- Anwendung schwerer Tailwind-Schatten (shadow-md, shadow-lg), die die minimalistische Ästhetik widersprechen
- Verwendung heller Primärfarben, Verläufe oder Glassmorphism-Effekte, die die monochrome Palette brechen
- Hinzufügen von abgerundeten Pillenformen zu großen Containern oder primären Buttons