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.
用软泥拟态风格给我的儿童 STEM 课程做一个落地页 / Design a claymorphism landing page for a kids' STEM course
What you get
- SKILL.md with full workflow (frontmatter with Chinese trigger words, IP guardrails, design tokens summary, motion specs, copy voice EN+ZH, QA checklist, anti-patterns) + 3 reference files (design-tokens.md, components.md, snippets.md) + 2 demo landing pages (kids STEM education brand "Sproutlet")
Good fit
- kids and education products, parenting apps, gamified learning, playful fintech, pets, bakery/desserts, toys, holiday marketing pages, onboarding flows, rewards systems
Not for
- enterprise admin panels, data-dense dashboards, finance compliance, serious medical topics, luxury brands, long-form reading
- Name
- Claymorphism UI
- Downloads
- 1
- Category
- Design
- Skills inside
- 1
Download & install
What's new: v1.0.0: Claymorphism UI design skill — puffy 3D clay style, pastel tokens, triple-layer shadow formula, 8 animation types, 2 demo pages (Sproutlet kids STEM brand)
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 claymorphism-ui-v1.0.0.zip -d ~/.claude/skills/claymorphism-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.
Reviews
Related skills
Vercel-Style UI Design
Vercel-Style UI Design
Teach your AI agent to design like Vercel: monochrome palette, oversized tight typography, hairline borders, subtle gradient glows and grid textures. Ships with design tokens, copy-paste components, and a complete example landing page.
Claude Code · Codex · Cursor · Copilot +1
Hallmark
Hallmark
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots.
Impeccable
Impeccable
Design-director skill by Paul Bakaus (ex-Google/Chrome DevTools): UX review, visual hierarchy, typography, color, motion, accessibility, plus a deterministic detect CLI for CI.
Apple-Style UI Design
Apple-Style UI Design
Design web pages in Apple's marketing-site visual language — gallery-like product storytelling, the SF type ramp, binary light/dark panels, and one blue reserved for action.
Claude Code · Codex · Cursor · Copilot +3