642件可写的小事

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

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 中使用 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

---

技术约束

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 首次生成）