642件可写的小事

生成「642件可写的小事」H5 创意写作应用。当用户说「642」「创意写作」「写作灵感」「642件事」「写作应用」「生成写作H5」时触发。Bot 直接生成完整单文件 H5 应用，无需用户提供额外信息。

Install

openclaw skills install @lwter/nexus-642things

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 暖琥珀系

Token	值	用途
`--bg`	`#F7F1E8`	页面底色，暖米白
`--bg-warm`	`#F0E6D4`	次级背景，提示区/标签底色
`--card`	`rgba(255,255,255,0.72)`	毛玻璃卡片背景
`--card-solid`	`#FFFFFF`	实色卡片（写作面板）
`--accent`	`#B8703F`	主强调色，琥珀
`--accent-deep`	`#8B4C1A`	深琥珀，渐变终点
`--accent-glow`	`rgba(184,112,63,0.18)`	强调色光晕
`--sage`	`#7B8B6F`	鼠尾草绿，成功/保存/次要强调
`--sage-light`	`#A8B89C`	浅鼠尾草
`--text`	`#3D2B1F`	主文字，深暖棕
`--text-mid`	`#6B5744`	次级文字
`--text-light`	`#9C8B7A`	辅助文字
`--text-faint`	`#C4B8A8`	极淡文字/占位符
`--border`	`rgba(61,43,31,0.08)`	卡片边框
`--border-strong`	`rgba(61,43,31,0.15)`	按钮边框

阴影

Token	值	用途
`--shadow-sm`	`0 2px 8px rgba(61,43,31,0.06)`	小卡片
`--shadow-md`	`0 8px 32px rgba(61,43,31,0.08)`	主卡片
`--shadow-lg`	`0 16px 48px rgba(61,43,31,0.10)`	写作面板
`--shadow-glow`	`0 0 40px rgba(184,112,63,0.12)`	题目卡片光晕

圆角

Token	值	用途
`--radius-sm`	`10px`	按钮/小卡片
`--radius`	`18px`	主卡片
`--radius-lg`	`28px`	大面板

排版 — Editorial 混排

Token	值	用途
`--font-display`	`'Noto Serif SC', 'Source Han Serif SC', 'STSong', 'SimSun', Georgia, serif`	标题/题目文字
`--font-body`	`-apple-system, 'PingFang SC', 'Noto Sans SC', 'Helvetica Neue', sans-serif`	正文/按钮
`--font-mono`	`'SF Mono', 'Fira Code', 'Consolas', monospace`	数字/代码

排版层级：

页面标题：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 注入脚本渲染。

图标清单：

名称	Lucide 对应	尺寸	使用位置
`sparkle`	sparkles (单星)	14×14	题目徽章、发现页亮点
`btnShuffle`	shuffle	18×18	换一题按钮
`btnPen`	pen-line	18×18	开始写按钮
`navShuffle`	shuffle	22×22	底部导航·灵感
`navBook`	book-open	22×22	底部导航·作品
`navLightbulb`	lightbulb	22×22	底部导航·发现
`titleBook`	book-open	20×20	发现页标题
`titleTarget`	target	20×20	贴士标题
`titleCollection`	book-open	20×20	作品集标题
`writePen`	pen-line	17×17	写作面板标题
`x`	x	16×16	关闭按钮
`fileEdit`	file-edit	48×48	空状态插画
`trash2`	trash-2	14×14	删除按钮
`actionPen`	pen-line	16×16	空状态CTA

渲染机制：

html

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

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

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

页面结构

三个 Tab 页

Tab	图标	标签	内容
灵感	shuffle	首页	统计 + 进度 + 题目卡片 + 操作按钮 + 写作面板
作品	book-open	作品集	作品列表 / 空状态
发现	lightbulb	发现	关于这本书 + 写作贴士

底部导航栏

毛玻璃效果：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 色）

动效体系

动效	实现	用途
错落渐入	`fadeSlideUp/Down` + 递增 delay	页头、统计、卡片、按钮
弹簧缩放	`cubic-bezier(0.34,1.56,0.64,1)`	按钮点击、统计更新、面板弹入
Shake	多段位移+旋转	换题卡片抖动
Shimmer	`background-position` 动画	题目卡片顶部光带
GentleFloat	`translateY` 往复	空状态图标浮动
StaggerIn	递增 delay 的 fadeSlideUp	作品列表逐项渐入
涟漪	radial-gradient 跟随点击	按钮点击反馈
浮动光斑	translate + scale 往复	背景氛围
页面切换	opacity + translateY 过渡	Tab 切换

功能逻辑

数据存储

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

题目系统

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

统计系统

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

写作功能

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

作品集

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

技术约束

单文件：所有 HTML + CSS + JS 内联，零外部依赖（无 CDN、无框架）
图标：Lucide 风格 inline SVG，通过 data-icon + JS 注入，禁止 emoji
移动优先：max-width 440px 居中，适配 safe-area-inset
无障碍：语义化 HTML，按钮可聚焦，文字对比度达标
性能：CSS 动画优先，避免 JS 连续操作 DOM 布局
兼容：-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 首次生成）