page-gen

为文学作品（小说、电影、动漫、游戏等）生成精美的响应式单页 HTML 介绍和解析页面。当用户要求"介绍XX作品"、"做一个XX的介绍页面"、"生成作品解析页面"、"创建作品展示页"、"帮我做个XX的网页"时触发。支持主题配色提取、交互组件、多内容分区展示。

Zhou Chang@zhouchang1988

Install

openclaw skills install @zhouchang1988/page-gen

文学作品页面生成器

为文学作品生成自包含的单页 HTML 展示页面，包含主题配色、响应式布局和交互功能。

设计流程

1. 提取主题配色

根据作品类型选择配色方案（以下为参考建议，实际配色需根据作品具体氛围、用户偏好或品牌要求灵活调整）：

作品类型	建议配色
武侠/修仙	金色 (#d4a853) + 翠绿 (#2dd4a8) + 深色 (#0a0e1a)
奇幻/玄幻	冰蓝 (#4a9eff) + 深蓝 (#0a1628)
历史/权谋	金色 (#d4a853) + 朱红 (#c0392b) + 深色 (#0f1419)
神话/志怪	紫色 (#8e44ad) + 粉色 (#f8cdda) + 青色 (#a8edea)
家庭/情感	暖棕 (#8B4513) + 金色 (#DAA520) + 米白 (#FFFAF0)
科幻/赛博	霓虹青 (#00f5ff) + 深色 (#0a0a0a) + 紫罗兰 (#a78bfa)
都市/现代	纯白 + 蓝色 (#3b82f6) + 灰色

重要提示：上表配色仅为参考建议，实际生成时应根据以下因素灵活调整：

作品的具体氛围和情感基调
用户明确指定的配色偏好
作品中标志性的视觉元素（如封面、海报主色调）
品牌或官方配色（如有）
可访问性要求（对比度、色盲友好等）

2. 配置字体

使用 Google Fonts 国内镜像：

html

<link rel="preconnect" href="https://fonts.loli.net">
<link href="https://fonts.loli.net/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">

标题字体: 'Noto Serif SC', serif — 优雅文艺
正文字体: 'Noto Sans SC', sans-serif — 清晰易读

3. 响应式断点

768px — 平板：单列布局，缩小字体
480px — 手机：紧凑布局，减少内边距

页面结构

必需区块（按顺序）

Hero 区 — 全视口，作品标题 + 副标题 + 关键数据 + 行动按钮
粘性导航 — 区块链接 + 滚动进度指示器
作品简介 — 概览卡片 + 标签
作者介绍 — 作者简介 + 头像占位
世界观/设定 — 世界观卡片（小说）或创作背景（非虚构）
主要人物 — 角色卡片网格
情节/章节 — 时间线或卷册卡片
经典语录 — 引用卡片
评析/价值 — 分析卡片
页脚 — 简单页脚

可选区块（根据内容选择）

种族/阵营 — 阵营卡片（奇幻作品）
武功/法宝 — 能力体系卡片（武侠/修仙）
战斗名场面 — 战斗场景卡片（动作作品）
人物关系图 — 关系图（复杂角色群）
时间线 — 历史时间线（历史作品）
幕后故事 — 幕后花絮（影视作品）
社会影响 — 文化影响（经典作品）

组件模板

Hero 区

html

<section class="hero">
    <div class="hero-badge">
        <span class="hero-badge-dot"></span>
        {分类标签}
    </div>
    <h1 class="hero-title">
        <span class="char-gold">{作品名}</span>
    </h1>
    <p class="hero-subtitle">{一句话概括}</p>
    <blockquote class="hero-quote">"{经典语录}"</blockquote>
    <div class="hero-stats">
        <div class="hero-stat">
            <div class="hero-stat-value">{数值}</div>
            <div class="hero-stat-label">{标签}</div>
        </div>
    </div>
    <a href="#section1" class="hero-cta">
        开始探索
        <span class="hero-cta-arrow">→</span>
    </a>
</section>

导航栏

html

<nav class="nav" id="nav">
    <div class="nav-inner">
        <div class="nav-brand">{作品名}</div>
        <ul class="nav-links">
            <li><a href="#intro" class="nav-link active">作品简介</a></li>
            <li><a href="#author" class="nav-link">作者介绍</a></li>
        </ul>
        <div class="nav-right">
            <div class="nav-progress">
                <svg class="nav-progress-ring" viewBox="0 0 36 36">
                    <circle class="bg" cx="18" cy="18" r="15" />
                    <circle class="fill" id="progressRing" cx="18" cy="18" r="15"
                        stroke-dasharray="94.25" stroke-dashoffset="94.25" />
                </svg>
                <span id="progressText">0%</span>
            </div>
        </div>
    </div>
</nav>

卡片组件

html

<div class="card">
    <div class="card-icon">📚</div>
    <h3 class="card-title">{标题}</h3>
    <p class="card-text">{描述}</p>
    <div class="card-tags">
        <span class="tag">{标签1}</span>
        <span class="tag jade">{标签2}</span>
    </div>
</div>

角色卡片

html

<div class="character-card">
    <div class="character-avatar">👤</div>
    <div class="character-name">{角色名}</div>
    <div class="character-role">{身份}</div>
    <div class="character-desc">{描述}</div>
</div>

时间线组件

html

<div class="timeline">
    <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-year">{时间}</div>
        <div class="timeline-title">{事件}</div>
        <div class="timeline-desc">{描述}</div>
    </div>
</div>

引用卡片

html

<div class="quote-card">
    <p class="quote-text">"{语录内容}"</p>
    <p class="quote-source">—— <strong>{出处}</strong></p>
</div>

交互功能

滚动进度条

javascript

const progressBar = document.getElementById('progressBar');
window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = (scrollTop / docHeight) * 100;
    progressBar.style.width = progress + '%';
});

导航激活状态

javascript

const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-link');

window.addEventListener('scroll', () => {
    let current = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop - 100;
        if (window.scrollY >= sectionTop) {
            current = section.getAttribute('id');
        }
    });
    
    navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href') === '#' + current) {
            link.classList.add('active');
        }
    });
});

返回顶部按钮

html

<button class="back-to-top" id="backToTop" aria-label="返回顶部">↑</button>

<script>
const backToTop = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
    backToTop.classList.toggle('visible', window.scrollY > 300);
});
backToTop.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>

滚动淡入动画

css

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

javascript

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, { threshold: 0.1 });

document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));

CSS 设计令牌模板

以下为示例模板，实际值需根据作品主题和配色方案调整：

css

:root {
    /* 颜色 - 根据作品主题调整（以下为示例值） */
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --bg-card: rgba(15, 23, 42, 0.85);
    --bg-card-hover: rgba(30, 41, 59, 0.95);

    --gold-primary: #d4a853;
    --gold-light: #f0d78c;
    --gold-glow: rgba(212, 168, 83, 0.4);
    --gold-subtle: rgba(212, 168, 83, 0.1);

    --accent: #2dd4a8; /* 按主题更换 */
    --accent-glow: rgba(45, 212, 168, 0.3);

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --border-subtle: rgba(212, 168, 83, 0.15);
    --border-active: rgba(212, 168, 83, 0.5);

    /* 字体 */
    --font-display: 'Noto Serif SC', serif;
    --font-body: 'Noto Sans SC', sans-serif;

    /* 间距 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* 圆角 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* 阴影 */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 12px 48px rgba(212, 168, 83, 0.25);

    /* 过渡 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-normal: 0.3s;
}

内容指南

Hero 区数据（选 3-5 项）

作品类型	推荐数据
小说	总字数、章节数、出版年份、销量
电影	豆瓣评分、票房、片长、上映年份
动漫	集数、评分、首播年份、制作公司
历史	跨度年数、册数、覆盖朝代

角色卡片（6-12 个角色）

包含主角、反派和关键配角
使用 emoji 作为头像占位符
描述保持简洁（2-3 句）

语录（4-8 条）

选择标志性、令人难忘的台词
标注出处角色或旁白
混合哲理性和情感性语录

标签分类

类型标签：历史、奇幻、武侠、都市
主题标签：友情、成长、权谋、爱情
风格标签：幽默、热血、虐心、治愈

输出要求

生成单个自包含 HTML 文件：

所有 CSS 在 <style> 标签内
所有 JavaScript 在 <script> 标签内
仅依赖 Google Fonts CDN（使用国内镜像）
响应式设计
语义化 HTML 结构
无障碍访问（正确使用标题层级、alt 属性、ARIA 标签）

质量检查清单

使用示例

用户输入：

text

帮我做一个《三体》的介绍页面

提取信息：

标题：三体
作者：刘慈欣
类型：科幻小说
主题色：深空蓝 + 红色（文革时代）
关键数据：三部曲、88万字、雨果奖
角色：叶文洁、罗辑、程心、章北海等
核心概念：黑暗森林法则、降维打击、面壁者
经典语录："给岁月以文明，而不是给文明以岁月"

page-gen

Install

文学作品页面生成器

设计流程

1. 提取主题配色

2. 配置字体

3. 响应式断点

页面结构

必需区块（按顺序）

可选区块（根据内容选择）

组件模板

Hero 区

导航栏

卡片组件

角色卡片

时间线组件

引用卡片

交互功能

滚动进度条

导航激活状态

返回顶部按钮

滚动淡入动画

CSS 设计令牌模板

内容指南

Hero 区数据（选 3-5 项）

角色卡片（6-12 个角色）

语录（4-8 条）

标签分类

输出要求

质量检查清单

使用示例

Related skills