Mist Academy UI
SkillStack Official
Design calm, mist-blue online learning platforms and course academies — fog gradients, deep pine ink, transformative teal, contour-line motifs, progress rings, filterable course catalogues and pricing that sells memberships.
Build me an online academy landing page in the Mist Academy style — mist-blue ground, deep pine ink, a filterable course catalogue with progress rings, and calm, specific copy.
What you get
- A complete design system for calm online learning platforms: exact mist/pine/teal tokens, six drawn course-cover recipes, a filterable course catalogue system, syllabus drawer with progress rings, pricing with a monthly/yearly toggle, and two working demo pages (academy landing page + full course catalogue).
Good fit
- Online academies, course platforms, bootcamps, workshop series and school programme pages that should feel calm, trustworthy and unhurried.
Not for
- Loud event pages, flash sales, children's products, or dark-mode developer tooling.
- Name
- Mist Academy UI
- Downloads
- 1
- Category
- Design
- Skills inside
- 1
Download & install
What's new: v1.0.0 — Mist Academy UI: mist-blue online learning design system. SKILL.md with IP guardrails, workflow, tokens, motion recipes and QA checklist; references/design-tokens.md, references/components.md, references/snippets.md; two demos: landing-page.html (Northlight Academy: search-led hero, course catalogue, learning path, method section, mentors, pricing, FAQ) and courses.html (9-course catalogue with My learning progress rings and learning paths).
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip mist-academy-ui-v1.0.0.zip -d ~/.claude/skills/mist-academy-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Like this free skill? Premium unlocks 91 exclusive skills.
One subscription unlocks every premium skill, prompt and pack — plus all future drops.
Reviews
Related skills
Stripe-Style UI Design
Stripe-Style UI Design
Fintech-grade marketing pages in a gradient-mesh language — luminous white canvas, animated warm-to-cool gradient hero band, thin 300-weight display type with tight tracking, one indigo action color, near-square geometry, deep-navy dashboard mocks. Build fintech landing pages, pricing pages, and API/developer marketing with financial-infrastructure polish.
Claude Code · Codex · Cursor · Copilot +3
Claymorphism UI
Claymorphism UI
Design websites in the Claymorphism style — puffy inflated 3D surfaces like modeling clay, pastel colors, big rounded corners, triple-layer shadows (soft outer drop + inset top-left highlight + inset bottom-right shade), rounded display type, and springy bouncy motion.
Claude Code · Codex · Cursor · Copilot +3
Media Kit Writer
Media Kit Writer
Build a one-page media kit that turns an audience into sponsor revenue — prove who reads, price the placement on delivered opens with honest CPM math, and close with a dated next step. Includes a fillable media kit template, an interactive rate calculator, and verbatim pitch emails.
Claude Code · Codex · Cursor · Copilot +3
Change Order Writer
Change Order Writer
Turn a mid-project scope change into a signed, priced change order in 30 minutes: name the request, price it line by line, move the date honestly, and get a signature before any new work starts — so 'just one more thing' never becomes unpaid work.
Claude Code · Codex · Cursor · Copilot +3