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.
Design a landing page for a botanical skincare brand in botanical apothecary style.
你能得到
- 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.
适合场景
- Skincare, beauty and wellness brands; apothecary product lines; herbal remedy shops; spa and ritual services that want a calm, premium, trustworthy feel.
不适合
- Fintech, dev tools, gaming, or any brand that needs high-energy color — this palette is deliberately quiet.
- 名称
- Botanical Apothecary UI
- 下载数
- 2
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: 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.
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip botanical-apothecary-ui-v1.0.0.zip -d ~/.claude/skills/botanical-apothecary-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
喜欢这个免费 skill？Premium 解锁 77 个独家 skills。
一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。
评价
相关技能
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
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
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
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