Design Mapper Skill

Intelligent design brief router. Takes any design request and emits a structured routing plan — which skills to load, in what order, with what focus parameters. Always load this skill FIRST when receiving a design brief. It is the entry point for the entire modular design system. Trigger on: "design a", "create UI for", "branding for", "what should it look like", "color scheme for", "design brief", "visual identity", "/design", intent=design_brief.

5 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add bilioveloso/design-mapper-skill --skill design-mapper-skill

Manual install

git clone --depth 1 https://github.com/bilioveloso/design-mapper-skill.git /tmp/design-mapper-skill
mkdir -p ~/.claude/skills
cp -r /tmp/design-mapper-skill/. ~/.claude/skills/design-mapper-skill

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Design Mapper Skill

**Entry point for the modular design system.** Load this first on any design brief.
It reads the brief, detects signals, and emits a routing plan. The agent then loads
each linked skill in the specified order, carrying context forward.

## The Skill Network

```
design-mapper-skill  ← you are here (always load first)
        │
        ├─► color-combo-skill      (palette, mood, roles)
        ├─► design-effects-skill   (morphism, motion, elevation, effects)
        ├─► font-pairing-skill     (typeface, scale, pairing archetype)
        └─► icon-system-skill      (library, weight, style, animated)
```

Skills are independent but the mapper sequences them and passes carryover context
so each skill builds on the choices made before it.

---

## On First Load

When this skill is first loaded in a new session, before processing any design brief:

1. **Announce the system** in one sentence: "I've loaded design-mapper-skill — the entry point for a modular design system."
2. **Offer the companion skills** — ask the user once:

   > "The full system includes 4 companion skills. Want me to install them now?
   > - **color-combo-skill** — 161 palettes, WCAG contrast ratios, CSS custom property templates
   > - **design-effects-skill** — glass morphism, animation, page-type recipes
   > - **font-pairing-skill** — typeface pairing, type scale, loading strategy
   > - **icon-system-skill** — icon library selection, optical sizing, currentColor"

Read the full skill on GitHub

Details

Skill name: design-mapper-skill
Repository: bilioveloso/design-mapper-skill
License: MIT
Repo updated: 28 June 2026

FAQ

What does the Design Mapper Skill skill do?

How do I install the Design Mapper Skill skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add bilioveloso/design-mapper-skill --skill design-mapper-skill. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design Mapper Skill popular?

It lives in bilioveloso/design-mapper-skill, which has 5 GitHub stars and 0 forks.

Related skills

Design Review

humbleteam/design-review

Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, up to 6 prioritized issues each with Before/After/Why, and one citation per claim. Given two or more variants, compares them on shared dimensions and names a winner. Given a screen plus a decision question, answers the question with the screen as evidence instead of returning a critique. Trigger phrases - "review this design", "critique this screen", "what's wrong with this UI", "score this design", "which of these two is better", "did the redesign improve this", "should I use a modal or a drawer". Do not use for

Frontend & Design

Ascii Shader Tsx

Codeptor/ascii-shader-tsx

Generate animated ASCII art, dithered visuals, and shader-like effects as self-contained React/TSX components. Use when the user wants to create ASCII backgrounds, dithered image/video effects, CRT/retro overlays, matrix rain, noise fields, halftone patterns, particle systems, braille art, terminal aesthetics, or any text/character-based visual effect for the web. Supports both generative (procedural, no input) and source-based (images, video, webcam to ASCII) modes. Also triggers when the user wants to convert an image to ASCII, add a dither effect, create a canvas shader component, build a r

Frontend & Design

Deslopify

AntonioSpagnol/UI-Deslopify-Skill

Audits and refactors vibe-coded UIs by replacing each slop element with modern 21st.dev components or equivalents with real visual character — never removes without replacing. Runs a mandatory grill-me style interview (one question at a time, with recommendations) before touching files, including brand identity and design references. Use when the user asks to deslopify, refatorar UI, limpar design, refactor UI, clean design, replace components, or when the code has glassmorphism, purple/blue gradients, decorative orbs, spinners, or empty corporate copy.

Frontend & Design

AI UIconfig Skill

voderment/AI-UIconfig-skill

Refactor an existing SwiftUI project into a governed UI architecture with render-state boundaries, tokenized styling, preview mocks, and a debug-only runtime tuning + writeback tool. Use when the user wants to improve UI maintainability, live-tune styles, or build a reusable UI debugging workflow without changing the product's visual intent.

Frontend & Design

Figma to Roblox UI

xtrair/figma-to-roblox-ui

Import Figma frames and designs into Roblox Studio GUI (ScreenGui/Frame/ImageLabel): Scale-only layout, centered AnchorPoint, UIStroke ScaledSize, UICorner in Scale, detailed art and custom shapes exported as images. Use for any Figma to Roblox UI transfer.

Frontend & Design

Toutour

matt-ye/Toutour

Add a spotlight onboarding tour to any website. Analyzes the site's layout, tabs and UI components, interviews the developer (step granularity, mask, languages, theming, trigger mode, library), then generates and Playwright-verifies a guided tour. Use when the user asks for an onboarding tour, product tour, guided walkthrough, coach marks, feature introduction overlay, or says users can't figure out their site.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.