Minimal Design System Skill

How to Use

Learn how to install and use the Minimal Design System Skill in Claude AI and other LLMs.

How to Use This Skill

In Claude.ai (Web & Desktop App)

1

Enable Skills Feature

Go to Settings → Capabilities and ensure "Skills" is enabled. (Note: Skills require Code execution to be enabled)

2

Download the Complete Skill

Click the "Download Complete Skill" button in the header above. This downloads a ready-to-upload ZIP file with all templates and references.

3

Upload to Claude

In Claude, go to Settings → Capabilities → Skills

Click "Upload skill" and select the ZIP file

4

Use the Skill

Simply describe your task in natural language. Claude will automatically recognize when to use the Skill:

"Create a landing page for my product" "Build a minimal dashboard" "Use minimal design system for this website"

In Claude Code (Terminal)

1

Download and Extract

Download the ZIP file and extract it

2

Copy to Claude Skills Directory

cp -r minimal-design-system ~/.claude/skills/
3

Restart Claude Code

Restart Claude Code to load the new Skill. It will be automatically available in all your sessions.

Using in Other LLMs

This skill can also be used in other AI assistants like ChatGPT, Gemini, or others. The skill consists of multiple files that work together, so you'll need to provide them to your AI assistant.

General Setup Instructions

1

Download and Extract

Click the "Download Complete Skill" button in the header above to download the ZIP file, then extract it on your computer. You'll find several files and folders inside.

2

Review the Files

The skill package contains:

  • • SKILL.md - Main instructions (start with this)
  • • assets/ - HTML templates (base-template.html, showcase.html)
  • • references/ - Design tokens, components, and button documentation
3

Provide Files to Your AI Assistant

Upload or paste the content of these files to your AI assistant. The exact method depends on which platform you're using (see platform-specific instructions below).

Platform-Specific Instructions

ChatGPT

ChatGPT supports custom instructions and file uploads:

  1. 1. Go to Settings → Personalization → Custom Instructions
  2. 2. Copy the content of SKILL.md and paste it into the instructions field
  3. 3. When working on a project, upload the reference files from the assets/ and references/ folders to your chat
  4. 4. Ask ChatGPT to reference these files when creating designs: "Use the minimal design system to create a landing page"

Google Gemini

Gemini supports file uploads in conversations:

  1. 1. Start a new chat
  2. 2. Upload SKILL.md using the file upload button
  3. 3. Ask Gemini to read and follow the instructions: "Please read the SKILL.md file and use it as guidelines for creating designs"
  4. 4. Upload additional files from assets/ and references/ as needed during your conversation

Other AI Assistants

For other LLMs that support file uploads or custom instructions:

  1. 1. Look for custom instructions, system prompts, or file upload features
  2. 2. Provide the SKILL.md content as a system prompt or at the beginning of your conversation
  3. 3. Share relevant reference files when working on specific components or layouts

💡 Pro Tips

Start by sharing SKILL.md first, then add specific reference files only when needed for your project

Use clear instructions like "Use the minimal design system" or "Follow the SKILL.md guidelines" in your requests

Reference the base-template.html when asking for complete pages, and specific component files when working on individual elements

Keep the extracted files organized in a folder for easy access across multiple projects