企业官网建设流程全解析

Daily Focus Board 技能深度解析：用 GitHub Copilot 驱动一张执行功能友好的每日专注面板

【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot

导读

本篇文章围绕awesome-copilot仓库中的daily-focus-board 技能（SKILL.md）展开，讲解如何基于一份自包含的 HTML 模板，为使用者构建一张"可对话驱动"的每日专注面板：任务状态（to-do → in progress → done）带时间戳进度笔记、数字目标任务渲染为进度条计数器、内置 Eisenhower 优先级、Focus 模式、无羞耻感的"not today"顺延、brain-dump 收纳盒等，全部面向执行功能（executive-function）与神经多样性（neurodivergent）人群友好设计。读完本文，你将掌握该技能的触发时机、三步构建流程（收集任务 → 注入 JSON 配置 → 本地伺服并打开）、完整配置 Schema 与字段语义、与 AI 搭档的协作驱动方式，以及从模板源码（board.template.html）到定制升级（主题、文件态 v2、共享信号桥）的底层原理。

一、技能定位：一张"你和 AI 一起运行"的面板

daily-focus-board 不是静态的待办清单，而是一张由对话保持最新状态的专注板：使用者告诉 AI 搭档自己完成了什么，AI 更新面板；任务状态与进度笔记由用户在浏览器里点按维护，而任务列表的增删改由对话驱动。其定位在 SKILL.md 中写得很清楚——"Ember partnership in daily practice: not a static to-do list, a thing you runwithyour AI"，即轻快、鼓励、诚实：庆祝真实进展，但不夸大它。

什么时候触发它

当使用者表达以下意图时，应触发本技能：

• 想规划今天（plan today）；
• "组织一下 / 保持专注"（get organized / stay focused）；
• 开始一段工作会话（start a work session）；
• 对列出的任务集合跟踪进度（track progress）。

哪怕对方只是随口提了一堆要做的事，也值得主动提议把这块板子建起来。

二、三步构建：从对话到浏览器里的一块专注板

整个构建流程在 SKILL.md 的 "How to build it (3 steps)" 中定义，下面结合模板源码逐层展开。

第 1 步：收集任务（4–9 项）

询问（或从使用者已经说过的话里提取）当天的一小撮任务。对每项任务，捕获：

• 短标题（short title，必填）；
• 可选的emoji；
• 可选的一行副注（sub-note）；
• 可选的标签（tag）。

如果某个任务是"朝一个数字计数"（步数、页数、番茄钟、组数），就把它做成带数字目标goal的counter（计数器）任务。条目数量控制在4–9 项——这是专注板，不是积压的 backlog。

第 2 步：生成面板（注入配置对象）

把 board.template.html 复制到工作文件（例如 scratch/working 目录下的focus-board.html——除非被明确要求，否则不要放进源代码仓库）。在副本中，找到模板文件第 28 行的占位标记：

<script>window.__BOARD__ = null; /* SKILL: replace null with the config object above */</script>

把null替换为配置对象。注入时必须把<转义为 JSON 的\u003c，例如JSON.stringify(config).replace(/</g, "\\u003c")——这样任务的文本永远无法逃逸出<script>标签；严禁手工拼接未处理过的用户文本。这一点与模板中前端的 HTML 转义函数（board.template.html 中的esc()：将& < >分别替换为& < >）共同构成了双层的注入安全防线。

标准配置 Schema 如下：

{ name: "Alex", // 可选 —— 显示 "Let's go, Alex 🔥"；省略则显示 "Let's go 🔥" dateKey: "2026-07-27", // 可选 —— localStorage 键；默认今天 (YYYY-MM-DD) mantra: "Small, real, done.", // 可选 —— 今日意图（面板上可编辑） checkin: "above", // 可选 —— 到达签到："below" | "mid" | "above" tasks: [ // counter 任务（数字目标 → 进度条 + set/＋ 按钮）： { id:"pages", emoji:"📖", title:"Read 30 pages", goal:30, start:0, inc:5, unit:"pages", tag:"mind", tagc:"new", quad:"ins" }, // status 任务（to-do → in progress → done + 进度笔记）： { id:"doc", emoji:"⚙️", title:"Finish the design doc", sub:"the anchor", due:"2026-07-27T17:00", tag:"deadline", tagc:"deadline", quad:"iu" }, { id:"move", emoji:"🌿", title:"Move a little — whatever fits your body", tag:"body" } ] }

id 的约束

id必须唯一且稳定，只能使用字母、数字、连字符或下划线（正则[A-Za-z0-9_-]）。原因在 SKILL.md 和模板源码中都有印证：id会被嵌入 HTML 属性、CSS 选择器、localStorage 键以及冒号分隔的笔记键。模板中的validId()函数（board.template.html）正是用/^[A-Za-z0-9_-]+$/校验，非法 id 的任务会在rebuildTasks()时被过滤掉。因此 id 中应避免引号、冒号、方括号和空格。

tagc是可选的配色 class：new（绿）、deadline（红/粉）、career（紫）；省略则为默认灰。这与 customize.md 中"复制一条.tagedit.<name>CSS 规则并传入同名tagc"的扩展方式一一对应。

counter 任务 vs status 任务

• counter 任务：goal（正整数）、start（默认 0）、inc（默认max(1, round(goal/10))）、unit（单位标签）。其余一切都是 status 任务。模板渲染 counter 时用inc = t.inc || Math.max(1, Math.round(g/10))（board.template.html），即步进默认约等于目标的 10%，并保证至少为 1。
• 顺延（"not today"）只属于 status 任务——counter 是"把数字调低"的进度，而不是可以推迟的条目。

due：温柔的倒计时

due（可选，ISO 本地时间字符串）会在卡片上显示温柔的实时倒计时。模板的dueStr()逻辑（board.template.html）会输出类似 "⏰ 2h 10m left (due 5:00pm)"；时间过去之后则显示 "was due 5:00pm — still worth doing"，用柔和的琥珀色（.due.over样式，颜色#ffab6b），永远不会用愤怒的红色。文档建议：只给真正的锚点任务（anchor）设置due，不要给每件事都设。

quad：Eisenhower 优先级

quad（可选）设置任务的 Eisenhower 优先级：

渲染为彩色卡片强调条（模板中.card.q-iu/.q-ins/.q-niu/.q-ninu分别使用红、蓝、琥珀、灰四种左边框），使用者可以在面板上下拉更改。排序函数sortByPriority()按{iu:0, ins:1, niu:2, ninu:3, "":4}的秩重排卡片。值得强调的是，设计意图是让Schedule（重要但不紧急）象限"可见"——文档与模板图例都写着"the good, non-frantic work lives here"。

mantra / checkin：顶层种子配置

mantra与checkin（均为可选，顶层字段）用于播种今日意图与 above/below-the-line 到达签到。可以从对话中设置，也可以留白让使用者自己在面板上设置/点选。模板内置了三组按签到状态分组的 mantra 建议池（board.template.html 中的MANTRAS）：above（如 "Ride the momentum — one block at a time."）、mid（如 "Small, real, done. Repeat."）、below（如 "Be gentle with yourself; one small thing."），点 🔄 按钮随机取一条。

第 3 步：伺服并打开

localStorage 需要一个http://源，所以必须伺服文件夹而不是直接双击文件路径。推荐命令（仅回环地址）：

python -m http.server 8799 --bind 127.0.0.1

在面板所在文件夹下执行。绑定127.0.0.1可以保证个人任务面板不出本地网络。仓库还提供了一个 PowerShell 封装脚本 serve-board.ps1，用法：

pwsh scripts/serve-board.ps1 [-Dir <folder>] [-File focus-board.html] [-Port 8799]

该脚本会：检查端口占用（已监听则报错退出）、以隐藏窗口启动python -m http.server <Port> --bind 127.0.0.1 --directory <Dir>、等待 2 秒校验进程存活、打印http://localhost:<Port>/<File>并自动打开默认浏览器。如果 Python 不可用，任何静态文件服务器都可以——你只需要一个http://源。

打开方式：如果宿主支持browser canvas 侧边面板（例如 GitHub Copilot 应用），优先用面板——它紧挨聊天区，体验最佳；否则在默认浏览器打开http://localhost:8799/focus-board.html。如果实在无法伺服，直接以文件路径打开在多数浏览器也能工作，只是某些浏览器会限制file://下的 localStorage，进度可能无法持久化。

仓库还附带一个已填充好示例配置的面板 sample-board.html：它把模板的window.__BOARD__替换成了name:"Sam"、含锚点任务（ship，带 2 小时后的due）、页数 counter（goal:30, start:8, inc:5）、番茄钟 counter（goal:4, inc:1）与收件箱任务的完整实例，可以直接打开预览或作为起点复制。

三、内置功能：零配置，拿来即用

SKILL.md 明确列出：无需任何配置，模板自带以下功能（在 board.template.html 的源码中均有对应实现）：

• "How are you arriving?" 到达签到+每日 mantra（带 🔄 建议）；
• ➕ 实时添加任务（addTask()用"u"+Date.now().toString(36)生成稳定唯一 id；新任务可被 🗑 移除）；
• ⠿ 拖拽排序+按优先级排序（另有 ▲/▼ 键盘可达的移动按钮）；
• 🧭 优先级图例（四象限的 plain-language 说明，可展开）；
• 每个卡片可编辑的标签（.tagedit输入框）；
• 温柔的过载提示（updateOverload()：活跃任务超过约 9 个时出现提示条，建议顺延几个到明天，文案明确"a nudge, not a rule"）；
• 日落保存（💾 下载 / 📋 复制一份 Markdown recap）；
• Focus 模式（🎯 只高亮一个任务，其余卡片降为 24% 透明度并去饱和，聚焦条可一键"show all ✕"退出）；
• "not today" 顺延（⤳，可随时 ↩ 带回今天）；
• 🧠 brain-dump 收纳盒（"park it, keep going"）；
• reduced-motion 开关（🌙 关闭彩带/过渡动画；模板默认尊重系统prefers-reduced-motion: reduce，即state.rm初始值取自window.matchMedia("(prefers-reduced-motion: reduce)")）；
• 实时时钟（setInterval(tick, 30000)，每 30 秒刷新日期、时钟与 due 倒计时）。

进度环（updateRing()）用 conic-gradient 绘制"完成/活跃"比例，tally 行显示 "N done · M in progress · K to go"；完成一个任务会触发彩带粒子（burst()），全部完成后显示 "Everything you kept for today — done. 🔥"。所有状态写入localStorage，键为focus-board-<dateKey>（无dateKey时用本地日期的YYYY-MM-DD），这样用同一个dateKey重新生成面板会保留已有进度。

四、如何驱动它：对话驱动的"搭档部分"

这是整个技能的核心主张——面板上线之后，要通过对话持续保持它最新：

• 当使用者说完成/开始了某件事时，要么(a) 告诉对方一键操作（"点设计文档卡片上的 pill 标记为完成"），要么(b) 仅在任务列表本身变化（增/改名）时重新生成面板。状态与笔记存在浏览器（localStorage）里、由点按维护，不属于配置；用同一个dateKey重新生成会保留已有进度。点按对实时更新更快。
• 鼓励记录增量笔记（"三张工位桌都跑起来了"）——动量由小胜利累积，动量 feed 最终成为一天的叙事。
• 面板是产物，你是搭档：定期 check-in、轻推锚点任务（带截止时间的那一个）、庆祝真实的完成、并防止过载（卡片太多就不叫专注板了）。

日常节奏在 tutorial.md 中有完整说明：到达（早晨）——签到、设 mantra、列 4–9 项任务并标出锚点；工作（白天）——点 pill 切换状态、记录动量笔记、Focus 模式、brain-dump 收纳、➕ 添加任务、排序与重命名；收尾（傍晚）——💾 下载或 📋 复制 recap，粘贴给 AI 搭档即可写日志并规划明天，未完成项用 ⤳ not today 顺延。快速上手只需一句话："Make me a focus board for today."，Ember 会询问任务、生成面板、本地伺服并打开。

五、执行功能友好的行为准则：真正的帮助在"搭档怎么表现"

SKILL.md 的 "Executive-function-friendly behavior" 一节强调：UI 的 EF/神经多样性设施很重要，但最大的帮助来自 AI 搭档的行为方式。这对所有人都有益，对 ADHD 或执行功能困难的人更是必不可少。这些准则是内建的，而非可选的礼貌：

• 做 body-double（身体替身）。"通过和 AI 说话来驱动你的面板"本身就是一种被充分研究的专注策略（body-doubling）。保持在场：check-in、协同工作、做那个温柔的"房间里另一个人"，而不是搭好板子就消失。
• 打败启动能量：缩小第一步。卡住时别说"just do it"，给一个极小、具体的首个动作（"打开文档，写下你能写出的最丑的第一句话"）。开始才是那堵墙，让第一步小到几乎无法拒绝。
• 只建议"下一件事"，不要列清单。被问"现在做什么？"时，点名一个下一步动作，并提议打开 Focus 模式（调暗其余）。可见的 8 项清单让人不知所措，一项才可行。
• 庆祝"开始"，而不只是"完成"。把任务移到 in progress 就是真实的胜利，把它记进动量 feed。对 ADHD 人群，开始时的多巴胺才是坚持下去的燃料。
• 绝不羞辱未完成。不说"你还没做完"。自由地提供"not today"顺延——决定不做某件事是有效且健康的选择，不是失败。漏掉一项任务不应威胁整个系统（全有或全无的螺旋正是这类工具被弃用的原因）。
• 外部化侵入性想法。如果中途被某件事拉走，告诉对方把它停进 brain-dump 盒然后继续——现在不要追。
• 让时间具体化。时间盲（time blindness）是真实的；引用时钟和温柔倒计时，并在锚点任务due之前轻推——友善地，而非威胁式地。
• 防止过载。面板超过约 9 个活跃任务时会温柔提示；你要帮对方把任务顺延到明天（⤳ not today）。变成 backlog 的专注板就不再是专注板。
• 以签到开场，而非任务清单。邀请对方定位自己当下的状态（above / in-between / below the line，源自 Conscious Leadership）。这是不带评判的觉察；below the line 只意味着"更温柔，缩小第一步"。绝不要给对方下诊断。
• 提供一个意图（mantra）。为今天写一句短话——对方自己的，或你根据签到状态建议的（below 时给落地扎根的，above 时给势头向前的）。保持善意。
• 一起温柔地排优先级。如果一切看起来都同样紧急，就陪对方走一遍 Eisenhower 四象限（Do first / Schedule / Delegate / Later），并提议"按优先级排序"——重点是让Schedule（重要但不紧急）可见，而不是塞更多任务。
• 收尾：保存它。傍晚让对方下载或复制 recap；如果复制了，可以粘贴给你来写日志并规划明天。庆祝完成了什么，把顺延框定为健康的选择，而不是失误。

这些原则背后的"挑战 → 原则 → 功能"映射表（任务启动、时间盲、工作记忆、过载、多巴胺奖励、完美主义羞耻螺旋、侵入性想法、任务切换、身体替身、感官/动效敏感、自我调节/内感受、动机/自我对话、优先级过载、自主性/所有权、收尾/反思共 15 项）详见 neurodivergent-design.md，其行文基调是"不要医学化、不要假定"——对所有人生效的聚焦友好设计，不是诊断工具；神经多样性是异质的（"Meet one person with ADHD, and you've met one person with ADHD"），因此这些是可配置的支持，而非规定性系统。

六、诚实的局限（必要时如实说明）

• 状态存放在浏览器（localStorage）里。它是按浏览器隔离的，AI 搭档无法直接读回。**日落 recap（下载/复制）**正是弥合这一点的桥梁：当对方把复制的内容粘贴给你，你就能据此写日志、做规划。若想要完全自动的读写循环，见 customize.md 的 v2 文件态方案。
• 精致的侧边面板体验需要支持 browser canvas 的宿主（如 GitHub Copilot 应用）。其他场景下就是普通浏览器标签页——同一块面板，集成度低一些。

七、定制与升级路径

主题与标签配色

颜色集中在 board.template.html 的:rootCSS 块（--ember、--ember2、--good、--urgent、--bg、--card、--line、--ink、--sub等变量），默认是暖色/深色外观。内置标签色new（绿）、deadline（红）、career（紫）；自定义标签只需复制一条.tagedit.<name>规则，并把该名字作为任务的tagc传入（类名只能用字母、数字、-、_）。

v2：文件态状态（闭合 AI 读写回路）

v1 把进度存于浏览器，AI 搭档读不回来。升级方案：让面板把状态写到board-state.json（通过一个本地微型端点或 File System Access API），加载时读取它；AI 搭档读写同一个 JSON。于是形成双向回路：你说话 → 面板更新 → AI 搭档能从同一数据源总结一天。这才是真正"agentic"的版本，但需要一条本地写入路径，属于有意的升级，而非零配置的 v1。

可选：共享信号桥（多 Agent 工作坊用户）

面板的动量笔记与 agent 的进度信号（一条带时间戳的"完成了什么"自报告）形状相同。如果运行多 Agent 配置并产生.signals/*.json（例如每单位工作一条信号），可以将其灌入动量 feed，让agent的工作与你的工作共享同一条时间线。该功能必须保持opt-in：面板必须能在零工作坊依赖下完全独立运行——这正是它普适的原因；桥接只是高级用户的加分项，绝不是要求。

八、延伸阅读（仓库内参考文档）

• references/tutorial.md —— 在 GitHub Copilot 应用（browser canvas）或直接通过 Ember 使用面板的完整指南：每日循环（check-in → mantra → plan → work → end-of-day save），以及可以直接对 AI 搭档说的话术示例。
• examples/sample-board.html —— 已注入示例配置的面板，可直接打开预览或作为起点。
• references/neurodivergent-design.md —— 每个功能背后的执行功能/ADHD 设计原则（任务启动、时间盲、工作记忆、过载、奖励、羞耻、收纳、身体替身），以及"让一切可选、不做医学化"的立场。
• references/customize.md —— 主题定制、文件态状态升级（AI 搭档可读写进度），以及面向多 Agent 工作坊的可选"共享信号"桥。
• assets/board.template.html —— 面板的唯一事实来源：渲染、状态管理、localStorage 持久化、彩带动画与 recap 生成的全部前端实现。

结合 plugins/ember/README.md 中的生态定位可知，daily-focus-board 是 Ember 搭档插件体系中的核心技能之一——它把"通过对话驱动的一天"具体化为可运行、可持久、可定制的浏览器工件。如果你正在构建面向个人生产力与 AI 搭档协作的 Copilot 技能，这份技能从配置 Schema、注入安全到状态模型与无羞耻交互设计，都提供了完整的参考实现。

【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot