design-it
Helps your agent create interface designs for websites and apps. It can choose from 48 different visual styles for the look.
What it does
This tool helps design the look of websites and apps. It chooses from 48 different design styles instead of using a generic look.
When to use it
- ✓When you want a website or app to have a specific look (e.g., modern, retro).
- ✓When creating a new website, app screen, or interface component.
- ✓If you don't like default looks and want something more defined.
Example of what to ask your AI
“Create a website with a 'cyberpunk' look.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The AI looks for keywords in your request to guess the desired style (like 'minimalist' or 'retro'). Then, it reads the instructions for that style and picks a color palette (or uses the ones you requested) to create the look.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill design-itOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/design-it/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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):
- 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, orglassmorphism - "Windows 8" or "Metro" ->
tile-design - "Terminal" or "Hacker" ->
sci-fi-interfaceorbrutalist-typography - "Bauhaus" or "Clean" ->
swiss-design - "Cyber" or "Matrix" ->
cyberpunk-uiIf they don't specify a style, choose one that best fits the project context.
- "Apple style" or "VisionOS" ->
- Read the Style Reference: Check the Style Index below to find the correct path for the chosen style. Use the
view_filetool to read its specificSKILL.md. - 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.
- 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.
- Yacht Club (Nautical / Classic Elegance)
- Backgrounds:
#F9F6F0 - Primary Text/Accents:
#1B2A49 - CTA/Highlights:
#C85A32 - Secondary Base:
#E2D8C9
- Backgrounds:
- Desert Mirage (Warm / Organic)
- Backgrounds:
#F4EFEA - Primary Text/Accents:
#2D2B2A - CTA/Highlights:
#A65E44 - Secondary Base:
#8C8781
- Backgrounds:
- Industrial Chic (Strong / Minimalist)
- Backgrounds:
#D1D1D1 - Primary Text/Accents:
#111111 - CTA/Highlights:
#9A3B3B - Secondary Base:
#757575
- Backgrounds:
- Monochromatic Brown (Comfort / Nostalgic)
- Backgrounds:
#D9CBBF - Primary Text/Accents:
#4A362D - CTA/Highlights:
#7A4C3A - Secondary Base:
#948275
- Backgrounds:
- Earth-Grounded Elegance (Calm / Sustainable)
- Backgrounds:
#F7F5F0 - Primary Text/Accents:
#3A4B3A - CTA/Highlights:
#8A9A86 - Secondary Base:
#D3CEC4
- Backgrounds:
- Minimalist Slate (Professional / Tech)
- Backgrounds:
#F4F4F9 - Primary Text/Accents:
#2B303A - CTA/Highlights:
#5C6B73 - Secondary Base:
#C0C5C1
- Backgrounds:
- Midnight Luxury (Premium / Dark Mode)
- Backgrounds:
#0A0A0A - Primary Text/Accents:
#F5F5F0 - CTA/Highlights:
#B59A5F - Secondary Base:
#1C1C1C
- Backgrounds:
- Sophisticated Neutral (Upscale / Lifestyle)
- Backgrounds:
#E6E2DD - Primary Text/Accents:
#1F1C1B - CTA/Highlights:
#524036 - Secondary Base:
#B8B0A8
- Backgrounds:
- Warm Tech (Corporate / Modern)
- Backgrounds:
#EAEAEA - Primary Text/Accents:
#1C252E - CTA/Highlights:
#C28F79 - Secondary Base:
#2C3E50
- Backgrounds:
- Modern Editorial (Magazine / High Contrast)
- Backgrounds:
#F9F9F9 - Primary Text/Accents:
#121212 - CTA/Highlights:
#D44A3A - Secondary Base:
#8F8F8F
- Backgrounds:
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
minimalismflat-designflat-design-2material-designglassmorphismneumorphismskeuomorphismclaymorphismaurora-uibento-ui
Depth & 3D
3d-uiisometric-designlayered-designfloating-uispatial-design
Typography
swiss-designeditorial-designtypography-firstbrutalist-typography
Retro & Historical
brutalismneo-brutalismretro-designy2k-designcyber-y2kvaporwavesynthwavefrutiger-aeroretro-futurism
…
FAQ
What are the 48 styles?
They are 48 different ways to design interfaces, such as 'minimalist', 'glass', 'retro', 'futuristic', and others.
What if I don't specify a style?
The AI will try to choose the best style based on the context of your request.
Does the AI use the colors I ask for?
Yes, if you specify colors, it will use them. Otherwise, it picks from 10 predefined color palettes.
Details
Original description by the author
Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.
Popularity
- GitHub stars
- 48k
- Ranking position
- #2763
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC