Dark Blue Mesh Gradient Design
Gives the agent a dark navy mesh-gradient design system for futuristic, minimal web pages.
- Repository
- MengTo/Skills
- Stars
- 7,187
- Licence
- MIT
- Files
- 4 files
What it does
Once installed, the agent builds web interfaces in a specific visual style: a near-black navy background, a large rounded hero panel with a glowing blue animated gradient behind the content, thin rails and corner markers, glass-like navigation pills, and slow, subtle motion. The skill supplies ready-made color tokens, CSS, and a JavaScript canvas routine that draws the animated gradient, so the agent does not have to invent the look from scratch.
Great for
- Designers who want a consistent dark, premium tech-style landing page
- Front-end developers building hero sections for infrastructure or AI-product sites
- Anyone wanting a starting design system they can adapt
Skip it if
- Brands needing light, airy, or colorful designs, since this style is deliberately dark and restrained
- Accessibility-critical projects without review, because the animated, low-contrast gray-blue text and motion need checking (the skill does respect reduced-motion preferences in its canvas code)
Try asking
- “Create a landing page hero for an AI infrastructure startup using the dark blue mesh gradient style”
- “Build a navigation bar and CTA buttons in the mesh-gradient dark blue clean design system”
- “Turn this design into a single HTML page with an animated canvas background”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 4 original files, the MIT licence and an attribution note.
mesh-gradient-dark-blue-clean.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip mesh-gradient-dark-blue-clean.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip mesh-gradient-dark-blue-clean.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 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
- Ask for the full page or a single section; the skill covers hero, navigation, nodes, and CTAs, so state which parts you want.
- Mention whether you want WebGL or the 2D canvas fallback, since the skill recommends WebGL for the final build when available.
- Review the generated text colors and contrast before publishing, since the palette uses muted gray-blue body copy.
What's inside
- demo/index.html
- 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.