nexus-642things — 642件可写的小事 H5 应用生成器

根据标准设计 prompt，由 bot 直接生成完整单文件 H5 创意写作应用（642-things-to-write.html），零外部依赖，可直接在浏览器运行。

触发词

用户说以下任意关键词时触发本 skill：

• 642件事 / 642件可写的小事
• 创意写作应用 / 写作灵感 / 写作H5
• 生成642 / nexus-642things

工作流程（Bot 直接执行）

Step 1：确认输出路径

默认输出到当前工作区的 data/642-things-to-write.html。若用户指定路径则使用用户路径。

Step 2：按规范生成完整 HTML 文件

按照以下完整产品规范直接生成单文件 H5 应用，写入输出路径。

完整产品规范

产品定位

• 目标用户：文艺青年、写作爱好者、创意写作者
• 品牌调性：温暖文艺 × 咖啡馆氛围 × 灵感激发
• 核心体验：低压力创作——无字数要求、无体裁限制、无时间限制
• 平台：移动端 H5（max-width: 440px 居中），兼容 iOS/Android 浏览器

设计系统

配色 — Coffee Roast 暖琥珀系

阴影

圆角

排版 — Editorial 混排

排版层级：

• 页面标题：32px / 700 / serif / 渐变色
• 题目文字：20px / 600 / serif / line-height 1.8
• 按钮文字：15px / 600 / sans-serif
• 正文：14-15px / 400 / sans-serif / line-height 1.8-2
• 辅助文字：11-12px / 500 / 浅色

图标系统 — Lucide Inline SVG

禁止使用 emoji 作为图标。所有图标使用 Lucide 风格的 inline SVG，定义在 JS 对象 L 中，通过 data-icon 属性 + DOM 注入脚本渲染。

图标清单：

渲染机制：

\x3C!-- HTML 中使用 data-icon 属性 -->
\x3Cspan class="icon" data-icon="btnShuffle">\x3C/span>

\x3C!-- JS 中定义 SVG -->
const L = { btnShuffle: `\x3Csvg ...>...\x3C/svg>`, ... };

\x3C!-- 页面加载时注入 -->
document.querySelectorAll('[data-icon]').forEach(el => {
  const name = el.getAttribute('data-icon');
  if (L[name]) { el.innerHTML = L[name]; el.removeAttribute('data-icon'); }
});

页面结构

三个 Tab 页

底部导航栏

• 毛玻璃效果：backdrop-filter: blur(20px) + 半透明背景
• 活跃项：图标弹性放大 scale(1.15) translateY(-2px) + 顶部渐变指示条
• 适配 safe-area-inset-bottom

组件规范

1. 氛围层（Atmosphere）

• 浮动光斑：两个 radial-gradient 椭圆，amber + sage 色，20s/25s 缓慢漂移动画
• 纸张纹理：SVG feTurbulence fractalNoise，2.5% 透明度叠层
• 均为 position: fixed; pointer-events: none

2. 页头（Header）— Editorial 风格

• Eyebrow 文字：11px / 500 / uppercase / letter-spacing 4px / sage 色
• 主标题：serif 32px / "642" 渐变色（accent → accent-deep）
• 副标题：serif 14px / italic / text-light
• 装饰线：40px 宽渐变条（accent → sage）
• 全部带错落渐入动画（0.1s-0.4s delay）

3. 统计卡片（Stats Row）

• 3 列 grid，Glassmorphism 卡片（blur 16px + 半透明 + border）
• 数值：serif 28px / 700 / 渐变色；标签：11px / 500 / text-light
• 点击缩放反馈

4. 进度条（Progress）

• 标签 + 分数（mono 字体）
• 5px 高轨道，渐变填充（accent → sage）
• 弹簧过渡 cubic-bezier(0.34,1.56,0.64,1)

5. 题目卡片（Prompt Card）— 核心组件

• Glassmorphism：blur 20px + 半透明 + border + shadow-md + shadow-glow
• 顶部 3px 渐变光带（shimmer 动画，3s 循环）
• 右上角 sparkle 装饰（12% 透明度，hover 25% + 旋转）
• 题号徽章：渐变背景 + 白色文字 + 圆角 20px
• 题目文字：serif 20px / 600 / line-height 1.8
• 标签：bg-warm 底色 + border + 圆角 14px
• 换题时 shake 动画 + 文字淡入淡出

6. 操作按钮（Actions）

• 双按钮横排：secondary（白底+边框）+ primary（渐变+光晕阴影）
• 涟漪点击效果（radial-gradient 跟随点击位置）
• 弹簧缩放 scale(0.96)

7. 写作面板（Write Panel）

• 弹入动画：translateY(30px) scale(0.97) → 原位
• 题目提示条：bg-warm 底色 + 左侧 3px accent 竖线
• 文本区：bg 底色 + 聚焦时 accent 光晕边框
• 保存按钮：sage 渐变 + 阴影

8. 作品卡片（Work Item）

• Glassmorphism 卡片
• 题目：serif 13px / accent 色 + 左侧 2px 竖线
• 内容：4 行截断，点击展开
• 删除按钮：trash-2 图标 + hover 红色

9. 空状态（Empty State）

• 大图标（48px）+ gentleFloat 浮动动画
• 引导文案 + CTA 按钮（accent 渐变）

10. 发现页（Discover）

• 关于这本书：book-open 图标 + serif 标题
• 亮点区：sage 左竖线 + 三个 sparkle 标签横排（flex + gap 16px + wrap）
• 写作贴士：target 图标 + 箭头列表（→ accent 色）

动效体系

功能逻辑

数据存储

• 使用 localStorage，key：642_works（作品数组）、642_used（已写题目索引数组）
• 作品结构：{ id, promptIndex, promptText, content, wordCount, time, date }

题目系统

• 内置 120+ 道精选创意写作题，覆盖书中多种风格
• 每题含 text（题目文字）和 tags（标签数组，如 ["拟人", "日常"]）
• 随机选题优先选未写过的题
• 换题时关闭写作面板

统计系统

• 已写篇数、总字数、连续天数（streak）
• 创作进度：已写不同题数 / 642
• 数值更新时弹跳动画

写作功能

• 点击"开始写"展开写作面板，显示当前题目提示
• 实时字数统计
• 保存后记录到 localStorage，更新统计和进度

作品集

• 按时间倒序展示
• 内容默认 4 行截断，点击展开
• 支持删除（confirm 确认）
• 空状态显示引导 CTA

技术约束

1. 单文件：所有 HTML + CSS + JS 内联，零外部依赖（无 CDN、无框架）
2. 图标：Lucide 风格 inline SVG，通过 data-icon + JS 注入，禁止 emoji
3. 移动优先：max-width 440px 居中，适配 safe-area-inset
4. 无障碍：语义化 HTML，按钮可聚焦，文字对比度达标
5. 性能：CSS 动画优先，避免 JS 连续操作 DOM 布局
6. 兼容：-webkit- 前缀（backdrop-filter、text-fill-color、line-clamp 等）

Step 3：预览

生成完成后，调用 preview_url 工具打开 HTML 文件展示给用户。

注意事项

• 本 skill 由 bot 全程自动完成，无需调用任何外部脚本，直接生成 HTML 文件
• 题目内容（120+题）需 bot 自行创作，覆盖日常/感官/回忆/想象/拟人/对话等多风格
• 每次生成可适当丰富或调整题目内容，保持多样性
• 已有参考实现：data/642-things-to-write.html（2026-05-07 首次生成）