35 Design Languages for AI

Give AI a
Sense of Design

Structured design language specifications that enable AI agents to understand, apply, and transform UIs with precision and consistency. No more messy layouts. No more inconsistent styling.

npm install ai-design-skills npx ai-design-skills
$ npx ai-design-skills list
35
Design Languages
6
Categories
6
Platforms
0
Dependencies

AI Generates UIs That Look Like AI Generated Them

Inconsistent Spacing

AI throws random padding values everywhere. 16px here, 24px there, 8px somewhere else. No system, no rhythm.

Messy Color Usage

Arbitrary hex codes, random gradients, colors that clash. The output looks like a drunk designer at 3am.

No Design System

Each component looks like it was designed by a different person in a different universe. Nothing connects.

Structured Design Intelligence

Each design language is a complete specification with rules for layout, typography, color, and components. AI follows the rules. You get consistent results.

01

Load a Skill

Pick a design language and load it into your AI workflow. Each skill is a complete design specification.

02

Apply Rules

Feed your UI or describe what you want. The AI follows the design language rules strictly.

03

Get Consistent UI

Output is production-ready, follows the design system, and maintains consistency across all components.

The Collection

35 Design Languages

Core
8 skills
minimalism
flat-design
material-design
swiss-international
enterprise-ui
data-first-dashboard
card-based-ui
bento-grid-layout
Depth
6 skills
glassmorphism
neumorphism
claymorphism
soft-ui
gradient-mesh-design
aurora-ui
Color
5 skills
dark-mode-minimal
monochrome-aesthetic
duotone-design
high-contrast-accessibility
pastel-ui
Bold
5 skills
brutalism
anti-design
retro-web
cyberpunk-ui
vaporwave-aesthetic
Product
5 skills
saas-modern
fintech-ui
ecommerce-conversion
mobile-first-ui
super-app-ui
Futuristic
5 skills
tech-futurism
ai-native-ui
spatial-ui
voice-first-ui
gesture-based-ui
See It In Action

Before and After

Before (AI Random Output)
<div style="background: blue; padding: 50px;">
  <h1 style="font-size: 48px; color: white;">Hello</h1>
  <p style="font-size: 24px;">World</p>
  <button style="background: green; padding: 20px;">Click</button>
</div>
After (Minimalism Applied)
<div class="hero">
  <h1>Hello</h1>
  <p>World</p>
  <button class="cta">Click</button>
</div>
Developer API

Use Anywhere

npm install
JavaScript / TypeScript
import { getDesignLanguage } from 'ai-design-skills';

const design = await getDesignLanguage('glassmorphism');
console.log(design.colors);
Claude / skills.sh
AI Agent Commands
/load promptdesign

/load promptdesign/core/minimalism

/load promptdesign/depth-texture/glassmorphism
What You Get

Everything Structured

Layout Rules

Grid systems, spacing scales, responsive breakpoints. Everything defined.

Typography

Font families, size scales, weights, line heights. No guessing.

Color System

Palettes with hex codes, usage rules, accessibility contrast.

Components

Button styles, form specs, card layouts, state definitions.

Do's / Don'ts

Quick reference for what to do and what to avoid in each style.

Agent Instructions

Clear prompts for AI to follow when transforming UIs.

Output Constraints

Technical specs for HTML, React, Vue, Svelte output.

JSON Schema

Machine-readable rules for programmatic access and integration.

Get Started

Install & Use

npm install
npm install ai-design-skills
CLI - Show Menu
npx ai-design-skills
CLI - List All
npx ai-design-skills list
CLI - Get Command
npx ai-design-skills minimalism
Claude / skills.sh
/load promptdesign
yarn
yarn add ai-design-skills
Compatible With
npm CLI Claude (skills.sh) OpenAI / GPT Cursor VS Code Custom APIs

Stop Fighting Your AI

Give it a design language to follow. Get consistent, production-ready UIs instead of random output.

View on GitHub View on npm