New to Claude Skills? Learn how to install them →

Get Claude Skills
sickn33 on GitHub

Design It

Free

Router for 48 distinct UI design styles.

by sickn3344.7k stars on sickn33/agentic-awesome-skills
1 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Design It does

Design It is a skill designed to enhance the frontend development process by providing access to 48 unique and opinionated UI styles. This skill allows developers and designers to create aesthetically pleasing websites, app screens, and UI components that align with specific design aesthetics rather than relying on generic templates. By utilizing this skill, users can ensure that their interfaces are not only functional but also visually appealing, adhering to the latest design trends and principles.

The skill operates by interpreting user requests for frontend designs and matching them to one of the predefined styles. This is achieved through a fuzzy matching system that identifies keywords in user prompts, enabling the skill to suggest appropriate styles based on the context. For instance, if a user mentions terms like "minimal" or "retro," the skill can automatically select the corresponding design style, making it easier for developers to implement the desired aesthetic without extensive manual searching.

In addition to style selection, Design It provides a structured approach to color palettes, offering 10 universal palettes that can be used if the user does not specify their own colors. This helps maintain a cohesive and sophisticated look across the designs. The skill also emphasizes the importance of following specific design principles, such as the 60-30-10 rule for color distribution, ensuring that the final output is both visually balanced and appealing.

Overall, Design It is an essential tool for frontend developers and designers looking to streamline their design process and create high-quality, stylish user interfaces. It is particularly useful for those who want to avoid the pitfalls of generic design and instead deliver tailored, high-impact visuals that resonate with users.

When to use it

Use this skill when you need to create a frontend interface with a specific design style in mind.

When not to use it

This skill is not suitable for projects requiring extensive custom design elements outside the predefined styles.

What you can build with it

Creating a Minimalist Web App

When tasked with designing a web app, use Design It to select the 'minimalism' style for a clean and modern interface.

Building a Retro-Themed Website

For a project requiring a retro aesthetic, leverage Design It to apply the 'retro-design' style, ensuring a cohesive look.

Implementing a Dark Mode UI

Use Design It to create a dark mode interface by selecting the 'dark-mode' style, enhancing usability in low-light environments.

How to install Design It

View source

1. Install with the skills CLI

npx skills add sickn33/agentic-awesome-skills/design-it --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by sickn33

Design-It: Sophisticated UI Style Router

This is the main entry point for the design-it skill system. Instead of falling back to generic "AI slop" aesthetics, you have access to 48 distinct, deeply opinionated design styles.

When to Use

Use this skill when a user requests building any frontend interface (website, app screen, UI component) and you want to apply a specific, opinionated design aesthetic instead of generic defaults.

How to Use This Skill

When a user asks you to build a frontend interface (web or app):

  1. Identify the Style (Fuzzy Matching): Look for keywords in their prompt (e.g., "minimal", "glass", "retro"). You do not need an exact match. Use your semantic understanding to map their request to one of the 48 styles. For example:
    • "Apple style" or "VisionOS" -> spatial-design, bento-ui, or glassmorphism
    • "Windows 8" or "Metro" -> tile-design
    • "Terminal" or "Hacker" -> sci-fi-interface or brutalist-typography
    • "Bauhaus" or "Clean" -> swiss-design
    • "Cyber" or "Matrix" -> cyberpunk-ui If they don't specify a style, choose one that best fits the project context.
  2. Read the Style Reference: Check the Style Index below to find the correct path for the chosen style. Use the view_file tool to read its specific SKILL.md.
  3. Pick a Palette: If the user explicitly defined a theme or colors, use their requested colors. If they did NOT specify colors, you MUST choose from one of the 10 Universal Palettes below.
  4. Execute: Write the code following the specific principles of the chosen style. Do not blend styles unless requested.

Universal Color Palettes

If the user provides their own colors, use them. Otherwise, you MUST use one of these 10 award-winning, highly sophisticated palettes to avoid generic neon/purplish gradients. When picking a palette, stick to these exact hex codes and establish CSS variables for them.

  1. Yacht Club (Nautical / Classic Elegance)
    • Backgrounds: #F9F6F0
    • Primary Text/Accents: #1B2A49
    • CTA/Highlights: #C85A32
    • Secondary Base: #E2D8C9
  2. Desert Mirage (Warm / Organic)
    • Backgrounds: #F4EFEA
    • Primary Text/Accents: #2D2B2A
    • CTA/Highlights: #A65E44
    • Secondary Base: #8C8781
  3. Industrial Chic (Strong / Minimalist)
    • Backgrounds: #D1D1D1
    • Primary Text/Accents: #111111
    • CTA/Highlights: #9A3B3B
    • Secondary Base: #757575
  4. Monochromatic Brown (Comfort / Nostalgic)
    • Backgrounds: #D9CBBF
    • Primary Text/Accents: #4A362D
    • CTA/Highlights: #7A4C3A
    • Secondary Base: #948275
  5. Earth-Grounded Elegance (Calm / Sustainable)
    • Backgrounds: #F7F5F0
    • Primary Text/Accents: #3A4B3A
    • CTA/Highlights: #8A9A86
    • Secondary Base: #D3CEC4
  6. Minimalist Slate (Professional / Tech)
    • Backgrounds: #F4F4F9
    • Primary Text/Accents: #2B303A
    • CTA/Highlights: #5C6B73
    • Secondary Base: #C0C5C1
  7. Midnight Luxury (Premium / Dark Mode)
    • Backgrounds: #0A0A0A
    • Primary Text/Accents: #F5F5F0
    • CTA/Highlights: #B59A5F
    • Secondary Base: #1C1C1C
  8. Sophisticated Neutral (Upscale / Lifestyle)
    • Backgrounds: #E6E2DD
    • Primary Text/Accents: #1F1C1B
    • CTA/Highlights: #524036
    • Secondary Base: #B8B0A8
  9. Warm Tech (Corporate / Modern)
    • Backgrounds: #EAEAEA
    • Primary Text/Accents: #1C252E
    • CTA/Highlights: #C28F79
    • Secondary Base: #2C3E50
  10. Modern Editorial (Magazine / High Contrast)
    • Backgrounds: #F9F9F9
    • Primary Text/Accents: #121212
    • CTA/Highlights: #D44A3A
    • Secondary Base: #8F8F8F

The 60-30-10 Rule

  • 60%: Backgrounds / Secondary Base
  • 30%: Primary Text / Accents
  • 10%: CTA / Highlights

Style Index (48 Styles)

To use a style, you MUST read its file at <style-folder>/SKILL.md relative to this file's directory.

Modern UI

  • minimalism
  • flat-design
  • flat-design-2
  • material-design
  • glassmorphism
  • neumorphism
  • skeuomorphism
  • claymorphism
  • aurora-ui
  • bento-ui

Depth & 3D

  • 3d-ui
  • isometric-design
  • layered-design
  • floating-ui
  • spatial-design

Typography

  • swiss-design
  • editorial-design
  • typography-first
  • brutalist-typography

Retro & Historical

  • brutalism
  • neo-brutalism
  • retro-design
  • y2k-design
  • cyber-y2k
  • vaporwave
  • synthwave
  • frutiger-aero
  • retro-futurism

Modern Trends

  • dark-mode
  • monochromatic-ui
  • gradient-design
  • duotone-design
  • color-blocking
  • soft-pastel
  • high-contrast
  • vibrant-maximalism
  • maximalism

Futuristic

  • cyberpunk-ui
  • sci-fi-interface
  • holographic-ui
  • ai-native-ui
  • spatial-computing-ui

Data & Product

  • dashboard-design
  • card-based-design
  • widget-based-design
  • tile-design
  • data-dense-design
  • command-center-ui

Web vs App Implementation

  • Web (React/Vue/HTML): Use CSS variables natively. Prioritize CSS grid/flexbox for layout. Use CSS transitions for hover states.
  • App (React Native/Flutter/SwiftUI): Map the palettes to the framework's theme engine. Use platform-specific shadows (elevation) and animations instead of CSS transitions. Maintain the core visual principles while adapting to mobile constraints.

Limitations

  • This skill does not replace environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, or safety boundaries are missing.

Frequently asked questions about Design It

Similar skills

Penpot UI/UX Design

Create professional UI/UX designs in Penpot with ease.

UX Theming

Streamline your VS Code theming process with best practices.

Wireframe

Create low-fidelity UI wireframes in SVG format.

Waitlist Page

Create a clean, focused pre-launch landing page.

Hallmark

Design skill for creating unique, structured UIs.

UI Styling

Create beautiful, accessible user interfaces effortlessly.