skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-mintlify

Apply Mintlify's design system tokens, typography, and components when generating UI interfaces.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#dark mode#mintlify#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-mintlify-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-mintlify
Source: https://github.com/deepparser/skills/tree/main/design-mintlify
Command: npx skills add https://github.com/deepparser/skills --skill design-mintlify-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Mintlify's visual identity requires exact design tokens — colors, typography scales, spacing, and component styles — that are tedious to reverse-engineer by hand. This Skill provides the complete Mintlify design system so generated UI matches the brand accurately. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (brand green #18E299, near-black #0d0d0d, neutral grays), typography hierarchy (Inter and Geist Mono with precise sizes, weights, and letter-spacing), and spacing/radius scales. - Component Specifications: Detailed styling rules for buttons, cards, forms, navigation, badges, and hero sections, including dark mode variants and responsive breakpoints. - Visual Reference Previews: Bundled light and dark theme HTML previews (preview.html, preview-dark.html) for verifying exact CSS values and component structure. - Use Case: When asked to build a documentation landing page styled like Mintlify, the Skill supplies the atmospheric gradient hero, full-pill buttons, 5% opacity borders, and tight-tracked Inter headlines needed to reproduce the look. ## Quick Start Use the design-mintlify skill to create a documentation landing page styled like Mintlify with a gradient hero and pill-shaped buttons.

Frequently Asked Questions about design-mintlify

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

FAQPage Schema
How do I build a UI that looks like Mintlify?▼

Invoke this Skill when generating the interface and it will apply Mintlify's exact design tokens: white background, near-black #0d0d0d text, brand green #18E299 accents, Inter typography with tight negative tracking, and full-pill buttons with 9999px radius.

What fonts and colors does the Mintlify design system use?▼

Mintlify uses Inter for all readable content and Geist Mono for code and technical labels. The palette centers on pure white #ffffff, near-black #0d0d0d, and brand green #18E299, with a neutral gray scale and semantic amber, blue, and red accents.

Does this Skill support dark mode designs?▼

Yes, the Skill defines a full dark mode palette with #0d0d0d background, #ededed text, and white-opacity borders, plus a bundled preview-dark.html file showing the dark theme implementation of every component.

What are the HTML preview files used for?▼

The preview.html and preview-dark.html files are visual references showing the design system implemented in real CSS. Read them when you need to verify exact values, component structure, or responsive behavior before generating UI code.

When should I not use the Mintlify design system?▼

Avoid it when the target brand is not Mintlify, since its identity is distinctive: full-pill shapes, green accent, and border-driven depth. Use a different brand design skill or a neutral system for non-Mintlify projects.

Related Skills

Explore More Design & Creative Skills→
app-vitalsapp-vitals
9

shipwright-brand

Create Shipwright Harness marketing assets using locked brand tokens and templates.

Official
Advanced
felix-howardfelix-howard

ck:mintlify

Generate and deploy static documentation websites from Markdown and MDX using Mintlify.

Community
Advanced
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
Adham7843Adham7843

ckm:design

Design brand identities, UI elements, and AI-generated mockups.

Community
Advanced