Skip to content
Get packs

High-Contrast Skeuomorphic Design

Guides the agent to build dark, tactile, high-contrast clean UI design systems

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

Once installed, the agent follows a detailed visual style guide when designing interfaces. It produces dark, molded-looking panels with subtle inner shadows, crisp light borders, and a single restrained accent color, while keeping the layout clean and modern rather than flat or glossy. It also knows which elements (buttons, cards, search fields, progress bars) should look physically tactile and how motion should feel.

Great for

  • Designers or front-end developers who want a premium, industrial-clean dark UI direction
  • Teams building dashboards, product landing pages, or instrument-style interfaces
  • People who find flat minimal cards too plain and neumorphism too washed-out

Skip it if

  • Projects needing a playful, soft or consumer-glossy look, since the guide explicitly rejects those styles
  • Accessibility-critical work without a separate contrast check, since the guide sets style goals but does not verify contrast ratios

Try asking

  • “Design a high-contrast skeuomorphic landing page for a hardware monitoring product”
  • “Create a dark tactile dashboard layout with cards, status lights and a single accent color”
  • “Build a clean skeuomorphic settings screen with inset input fields and layered buttons”
Step-by-step guide: how to use High-Contrast Skeuomorphic DesignInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    high-contrast-skeuomorphic-clean.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip high-contrast-skeuomorphic-clean.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip high-contrast-skeuomorphic-clean.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your brand accent color up front so the agent can use it sparingly for status lights and focal details
  • Specify the product type and audience so the agent can balance editorial copy against the molded modules
  • Ask for a specific level of depth (subtle or pronounced) since the guide lets you tune bevel and shadow intensity

What's inside

  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.