Botanical Apothecary UI preview 1
1 / 3
Live demo
Open the actual demo page in a new tab — click, hover and scroll it for real.
Open demo
FreeFeaturedv1.0.0

Botanical Apothecary UI

SkillStack Official

Design botanical apothecary skincare websites — warm paper, deep botanical green, herbarium specimen motifs, arch image frames, Fraunces serif + Inter. Includes 10 motion patterns with paste-ready code and two demo pages for a fictional skincare brand.

Works withClaude CodeCodexCursorCopilotGemini CLIWindsurfCline
Try it

Design a landing page for a botanical skincare brand in botanical apothecary style.

What you get

  • SKILL.md design language guide (IP guardrails, workflow, tokens, motion, copy voice, QA checklist) + 3 reference files (design-tokens, components, paste-ready snippets) + 2 demo pages (brand landing + ritual quiz & shop) + 4 AI-generated botanical product photos.

Good fit

  • Skincare, beauty and wellness brands; apothecary product lines; herbal remedy shops; spa and ritual services that want a calm, premium, trustworthy feel.

Not for

  • Fintech, dev tools, gaming, or any brand that needs high-energy color — this palette is deliberately quiet.
Name
Botanical Apothecary UI
Downloads
2
Category
Design
Skills inside
1

Download & install

v1.0.0Updated 10/20/2026 · 1.5 MB · 13 files · 2 downloads

What's new: Initial release: botanical apothecary design language for skincare brands. SKILL.md with IP guardrails, design tokens / components / snippets references, 10 motion patterns with paste-ready code and reduced-motion fallbacks, 2 demo pages (Fernwick Apothecary landing + ritual quiz & shop) with 4 AI-generated product photos.

Sign in to download

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 botanical-apothecary-ui-v1.0.0.zip -d ~/.claude/skills/botanical-apothecary-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 77 exclusive skills.

One subscription unlocks every premium skill, prompt and pack — plus all future drops.

See Premium →

Reviews

No reviews yet — be the first to rate this skill.

Related skills

FreeFeatured

Art Nouveau UI

Art Nouveau UI

Build Art Nouveau web pages — whiplash curves, arch frames, stylised florals, muted botanical colour and gold accents — for flower ateliers, salons and brands that want organic elegance. Includes full design tokens, component specs, copy-paste motion snippets, and two working demos: a flower atelier landing page and a bouquet builder.

Claude Code · Codex · Cursor · Copilot +3

Design
FreeFeatured

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

Design
FreeFeatured

Aurora-Glass UI Design

Aurora-Glass UI Design

Dark, high-motion landing pages in the aurora-glass language — drifting multi-color aurora gradients, frosted-glass cards, glow CTAs, mouse parallax, canvas waveforms. Ships tokens, components, snippets, and an animated Prismwave demo.

Claude Code · Codex · Cursor · Copilot +3

Design
FreeFeatured

Wabi-Sabi Japanese Minimal UI

Wabi-Sabi Japanese Minimal UI

A wabi-sabi Japanese-minimal design skill for AI agents: warm handmade-paper backgrounds, soft ink typography, one vermillion seal accent, generous negative space (ma), and quiet asymmetric layouts. Includes design tokens, component specs, paste-ready snippets, IP guardrails, and copy-voice guides (EN + 中文).

Claude Code · Codex · Cursor · Copilot +3

Design