clidex先试试看
打开一刻 Focus Desk Demo，写下一个今天要完成的小动作，点击「开始专注」。任务和次数只保存在当前浏览器。
我是怎样描述需求的
我把目标、用户路径和边界一起写进提示词：
请创建 focus-desk 静态 Web Demo。面向需要安静工作的个人用户，流程是添加任务、启动 25 分钟专注、完成后累计次数。使用原生 HTML、CSS、JavaScript，不引入后端；用 localStorage 保存数据。视觉是米白纸张、深墨色文字和荧光绿，支持深色模式与手机适配。完成后检查计时器、表单、刷新恢复和窄屏布局。这段描述直接对应 Demo 的页面结构、颜色和交互。之后我又让它优先检查小屏触控面积、文字换行和横向溢出，再调整 CSS。
使用时你会看到什么
输入“整理合同第三版”这样的具体动作，点击开始后专注 25 分钟；完成一轮，今日节奏数字和进度条就会更新。任务勾选后保留删除线，夜间可切换深色模式，手机上模块自动变成单列。
从一个小需求开始
这个 Demo 没有账号同步、历史报表或系统通知，适合先验证“任务加专注时段”是否适合你的习惯。你也可以复制项目，替换标题、目标次数和配色。写需求时先说明谁使用、最短流程、技术约束和验收方式，再亲自打开页面记录下一轮修改。
如果你也想把想法变成页面，可以阅读做第一个 Demo 前，先把需求写清楚。
先确定体验，再选择技术
我先写了一条最短用户路径：输入任务 → 点击开始 → 专注结束 → 看到一次完成记录。所有视觉和技术选择都服务于这条路径。
页面采用单页结构。首屏左侧是圆形计时器，右侧是一句提醒；下方再放任务清单和节奏统计。计时器是视觉中心，任务输入框紧跟其后，用户不需要在导航、弹窗和多个页面之间切换。
技术上选择原生 HTML、CSS 和 JavaScript，而不是引入框架。这个 Demo 的重点是可读、可复制和无需构建步骤：把三个文件放进任何静态服务器就能运行。状态量也保持克制，只保存 seconds、running、tasks 和 sessions 四类数据。
视觉设计的几个决定
整体使用米白背景、纸张色卡片和荧光绿强调色，像一张放在桌面上的工作便签。圆角卡片让模块彼此独立，细边框代替厚重阴影，避免页面变成常见的后台面板。
标题使用很大的字级和紧凑字距，先建立一个安静但有识别度的品牌入口；辅助文字则使用较小的字距和灰色，降低信息噪音。深色模式只切换颜色变量，不改变布局，让它适合夜间工作。
移动端在 700px 以下改为单列：计时器保持首要位置，引用卡片与统计卡片顺序下移。按钮和输入框保留足够的触控面积，任务文本允许自然换行，避免小屏出现横向滚动。
计时器如何工作
计时器用秒数作为唯一事实来源，每秒执行一次递减：
let seconds = 1500;
let running = false;
function tick() {
seconds -= 1;
renderTime(seconds);
if (seconds <= 0) finishSession();
}点击「开始专注」时创建 setInterval，再次点击则清理 interval 并暂停。重置操作会同时停止计时、恢复 25:00，并把按钮文字改回「开始专注」。倒计时结束后，专注次数加一，计时器自动回到下一轮。
这里刻意没有把计时状态拆成复杂的状态机，因为只有开始、暂停、重置和完成四个动作。简单的数据模型让后续维护和修改都很直接。
任务清单与本地保存
任务对象只有两个字段：text 和 done。提交表单时先去除空白，再追加到数组；勾选复选框后更新对应索引，并重新渲染列表。
localStorage.tasks = JSON.stringify(tasks);
const tasks = JSON.parse(localStorage.tasks || '[]');使用 localStorage 是为了让 Demo 保持无后端特性。它适合个人设备上的轻量记录，也能直观展示「刷新后仍然存在」的反馈。真实产品还需要账户同步、数据导出和隐私策略，这些没有在 Demo 阶段提前引入。
反馈如何形成节奏
统计卡片显示完成的专注次数，并用一条进度条映射到四次每日目标。这个目标不是生产力指标，而是一个轻量的视觉反馈：用户完成一轮后立即得到变化，继续工作的动力来自可见的积累。
任务完成数以 已完成 / 总数 显示，列表中的文字加删除线并降低对比度。状态变化只影响必要的元素，页面不会跳转或弹窗打断专注。
验证与边界
我用 npm run build 验证博客内容和静态资源能够被 Astro 正确生成，并确认 /zh/blog/focus-desk/ 页面存在。Demo 本身不依赖 npm 包，可以直接通过浏览器打开；在桌面和窄屏下检查了计时器、表单提交、勾选任务、主题切换及刷新后的数据恢复。
当前版本有三个明确边界：计时器依赖页面保持打开，统计只保存在当前浏览器，专注结束没有声音或系统通知。它们都是可以独立迭代的增强项，不会影响核心路径。
下一步可以怎么做
第一步是加入短休息和长休息模式，并在页面标题和颜色上给出清晰提示。第二步是增加当天与历史趋势，让统计从一次计数变成可回顾的节奏。第三步是提供键盘快捷键和系统通知，让用户在切换窗口后也能收到完成提醒。
这个 Demo 最适合用作一个可继续生长的起点：先让一个动作完整可用，再根据真实使用反馈增加能力。对个人工具来说，少一点配置，往往意味着更快开始。