Skip to content
Get packs

Blue Cloudy Clean Modern

Gives the agent a luminous blue-sky, airy, premium web design system to apply to pages

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

What it does

When this skill is installed, the agent follows a specific visual direction for web interfaces: a full-screen blue sky background with soft drifting cloud light, white typography, thin container lines, and gentle motion. Asked to build a landing page or hero section, it will design around that calm, airy, premium look instead of a generic SaaS style. The skill is a set of written design rules and a reference demo, not a program.

Great for

  • Designers or front-end developers who want a calm, airy, sky-blue landing page look
  • Teams prototyping a premium brand hero with minimal framing and soft motion
  • Anyone who wants a consistent aesthetic applied quickly to a new page

Skip it if

  • Dashboards or dense data interfaces, because the skill explicitly avoids heavy cards and grids
  • Brands that need a bold, dark, or highly colourful identity, since the rules restrict the palette to blue and white
  • Projects needing accessibility-critical contrast without review, since white text over pale blue gradients may fail contrast checks

Try asking

  • “Build a landing page hero for a skincare brand using the blue cloudy clean modern style”
  • “Design a clean modern sign-up page with a sky-blue background and white headline”
  • “Create a product announcement section with gradient-border pills and a minimal logo row in this style”
Step-by-step guide: how to use Blue Cloudy Clean ModernInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    blue-cloudy-clean-modern.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip blue-cloudy-clean-modern.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip blue-cloudy-clean-modern.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 brand mood in your request so the agent can tune the blue from cobalt to pastel azure
  • Ask for a demo file or preview so you can check contrast and motion before using the design
  • Review the generated text colour on the pale lower gradient for readability

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.