Skip to content
Get packs

Dark Blue Contrasting Clean Design

Guides the agent to build dark-navy, high-contrast web layouts with cobalt feature blocks and thin framing.

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

What it does

When installed, the agent follows a specific visual style guide for web pages: near-black navy backgrounds, bold cobalt blue banners or call-to-action blocks, thin border lines and corner markers that give the layout an engineered look, and soft blue glows used sparingly. It also suggests light typography, calm fade-in motion, and button and card styles that match this look. It is a design direction for the agent to follow, not a code library.

Great for

  • Designers or developers who want a dark, premium, blue-led landing page or product site
  • Anyone wanting a consistent visual system for a marketing or portfolio page without writing the style rules themselves

Skip it if

  • Projects needing a light or airy look, since the skill explicitly steers away from light sky-blue styles
  • Dense enterprise dashboards, because the guidance says to avoid heavy clutter and this style is built for clean, sparse layouts

Try asking

  • “Build a landing page for my SaaS product in the dark blue contrasting clean style”
  • “Design a pricing section with cobalt gradient feature cards and thin framed borders”
  • “Create a hero banner and footer in this dark navy design system”
Step-by-step guide: how to use Dark Blue Contrasting Clean 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.

    dark-blue-contrasting-clean.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip dark-blue-contrasting-clean.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dark-blue-contrasting-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 the page or section you want (hero, CTA band, footer) so the agent can place the cobalt feature block where it matters most.
  • Review the included demo/index.html to see the intended look before asking for a full build.
  • Ask for a bolder or more subdued blue using the tuning options described in the skill, such as richer royal blue or steel blue.

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • 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.