Papercut Storybook UI
官方精选
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.
你能得到
- 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.
适合场景
- 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.
不适合
- Fintech, dashboards and enterprise SaaS — paper is warm and imperfect by design, not cold and precise.
- 名称
- Papercut Storybook UI
- 下载数
- 0
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: 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.
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip papercut-storybook-ui-v1.0.0.zip -d ~/.claude/skills/papercut-storybook-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 和内容包，以及未来的每一期新品。
评价
相关技能
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