Papercut Storybook UI
SkillStack Official
Build warm, hand-cut paper storybook websites: layered papercut scenes, picture-book landing pages and bookshops with page-turn interactions — flat colour, hard offset shadows, and read-aloud copy.
Design a children's picture-book publisher landing page in the papercut storybook style: layered paper hero scene, book shelf with age filters, and a page-turn story spread.
What you get
- A complete papercut design system: SKILL.md with IP guardrails, workflow, tokens, components and motion specs; three reference guides (design tokens, components, paste-ready snippets); and two working demos — a picture-book publisher landing page with a page-turn story spread, and a bookshop configurator with format, quantity and gift-wrap pricing.
Good fit
- Children's book publishers, bookshops, libraries and reading apps; craft and gift brands that want a handmade feel; story-driven landing pages where one illustrated scene should carry the emotion.
Not for
- Fintech, dashboards and enterprise SaaS — paper is warm and imperfect by design, not cold and precise.
- Name
- Papercut Storybook UI
- Downloads
- 0
- Category
- Design
- Skills inside
- 1
Download & install
What's new: v1.0.0: Papercut Storybook UI — layered paper design system (tokens, components, snippets) plus two demos: a picture-book publisher landing page (Paper Fox Press) with filterable shelf, page-turn spread, counters and FAQ, and a bookshop configurator (format/quantity/gift-wrap pricing, basket). All scenes hand-drawn SVG; all brands and titles invented.
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 papercut-storybook-ui-v1.0.0.zip -d ~/.claude/skills/papercut-storybook-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.
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
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
Scroll Narrative UI
Scroll Narrative UI
Scroll-driven storytelling UI: pinned chapters, multi-layer parallax, kinetic typography, scroll-scrubbed text, horizontal galleries and scroll-mapped stats — turn a landing page into a cinematic journey the user controls with the scrollbar.
Claude Code · Codex · Cursor · Copilot +3