Skip to content
Get packs

Framed Tech Dark Design

Styles web interfaces as dark, monochrome, engineered layouts with gradient borders and mono labels

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 when building web pages or interfaces. Instead of generic dark mode or soft floating cards, it uses near-black backgrounds, visible thin frame lines, gradient-edged panels, small corner markers, uppercase monospace labels, and mostly grayscale colors. The skill's text describes the look in detail; the included demo HTML and prompt file show an example of the result.

Great for

  • Designers or developers who want a premium, technical dark-mode look for a landing page or dashboard
  • Teams prototyping an instrument-style or engineered interface aesthetic
  • People who want consistent visual rules applied across a whole page

Skip it if

  • Projects needing a colorful, playful or consumer-app style, since the skill explicitly avoids it
  • Accessibility-critical products without a separate contrast check, since low-contrast borders and subtle backgrounds can reduce readability

Try asking

  • “Build a landing page for my developer tool in the framed dark technical style”
  • “Redesign this dashboard with border-gradient panels and mono section labels”
  • “Create a settings page with active side-bar nav rows and muted locked items”
Step-by-step guide: how to use Framed Tech Dark 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.

    framed-tech-dark-border-gradient.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip framed-tech-dark-border-gradient.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip framed-tech-dark-border-gradient.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 type and content sections you want so the agent can apply the asymmetric grid pattern sensibly
  • Check contrast and text legibility of the thin borders and muted labels before shipping
  • Review demo/index.html to see the intended result before asking for a full build

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.