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.
你能得到
- 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).
适合场景
- Online academies, course platforms, bootcamps, workshop series and school programme pages that should feel calm, trustworthy and unhurried.
不适合
- Loud event pages, flash sales, children's products, or dark-mode developer tooling.
- 名称
- Mist Academy UI
- 下载数
- 1
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: 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).
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip mist-academy-ui-v1.0.0.zip -d ~/.claude/skills/mist-academy-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
喜欢这个免费 skill？Premium 解锁 91 个独家 skills。
一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。
评价
相关技能
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