DSH 插件 dsh-plugin-message-timeline-navigation：在 web 会话左侧增加消息时间线
dsh-plugin-message-timeline-navigation 是专为 DSH Web Client 开发的一款纯前端辅助插件，旨在解决长会话中手动滚动定位消息效率低的问题。该插件不修改 DSH 本体，通过叠加层在对话视图左侧显示 Codex 风格的消息时间线，每个刻度对应一个用户回合及其完整 Agent 回复。核心功能包括：悬停刻度时预览消息卡片及级联展开效果；点击刻度平滑跳转至对应消息并短暂高亮；滚动时自动高亮当前阅读回合的刻度以指示进度。该插件仅追踪用户消息以保持时间线密集且可预测。安装推荐使用 pnpm 环境并执行 `dsh plugin add` 命令。它要求 Reac
阅读全文dsh-md-html-render：在 DSH 中把 Markdown 渲染为独立 HTML
dsh-md-html-render 是一款 DeepSeek Harness（DSH）插件，由 LeslieWylie 维护，基于 MIT 许可证。该插件旨在将 Markdown 渲染为独立、自包含且无外部依赖的 HTML 页面，适用于转发、存档或离线查看。它提供两个入口：一是模型可调用的 `md_html_render` 工具，支持在 headless profile 中生成并保存 HTML；二是 Web GUI 中的 MD drawer，允许用户在会话中就地浏览、编辑和导出 Markdown。 插件核心特点包括无运行时依赖、所有文件操作均通过 harness fs service 及 s
阅读全文dsh-ui-workspace：为 DeepSeek Harness 浏览器插件提供可组合工作区原语
`@ch4acko3/dsh-ui-workspace` 是一个专为 DeepSeek Harness UI 浏览器插件设计的工作区界面库。它建立在 `dsh-ui-container` 之上，将常见的复杂交互拆解为可组合的 UI 原语，包括可拖动面板堆叠、递归树视图、标签式文档编辑器、文档渲染器及操作入口等，并支持 VS Code 风格的资源管理器行为。该库专注于解决界面骨架搭建问题，而将产品特定的导航逻辑、数据提供者、命令及样式实现留给使用方。 安装时需在同一 DSH profile 中先安装 `dsh-ui-container`，再安装 `dsh-ui-workspace`。环境要求 N
阅读全文dsh-sticky-disclosure：一键收起 DSH Web 会话中的可折叠区块
`dsh-sticky-disclosure` 是 DSH Web 客户端的 MIT 许可插件，由 Han-1413141 维护，旨在解决长会话中可折叠区块（如 Think、工具卡片、命令卡片等）累积过多导致管理不便的问题。该插件允许用户通过聊天区右下角的常驻按钮或自定义快捷键（默认 Ctrl+Alt+C / ⌘⌥C）一键收起所有展开区块，并实时显示计数。当区块滑出视口时，其标题会自动钉在顶部供点击收起。插件采用纯 DOM 实现，不修改应用代码，支持深色/浅色主题，卸载后自动还原。安装需 Node.js ≥ 20 及 DSH 环境，通过 PowerShell 脚本安装后重启生效。快捷键设置保存
阅读全文DSH Session Pins：为 DeepSeek Harness 提供持久固定会话菜单
alooshxl 开发的 DSH 插件 `dsh-session-pins` 旨在解决 DeepSeek Harness Web 侧边栏中常用会话查找困难的问题。该插件基于 MIT 许可证，通过公开的 `sidebar.footer.action` 槽位集成，不依赖私有 UI 源码或修补宿主。核心功能是在侧边栏底部提供固定会话菜单，支持将普通、非空会话固定，数据保存在浏览器本地 `localStorage`，无需 API 密钥。插件具备完善的校验机制，限制最多 100 个固定项，并通过 `storage` 事件实现同源标签页同步。安装需使用 `dsh plugin` 命令添加指定 Git 标签
阅读全文figma-create-design-system-rules：给 Agent 写一套项目专属设计系统规则
介绍 openai/skills 策展目录中的 figma-create-design-system-rules：在已连接 Figma MCP 的前提下，分析代码库并生成项目级设计系统规则，约束组件路径、Design Token、样式方案与 Figma-to-code 流程，分别写入 CLAUDE.md、AGENTS.md 或 .cursor/rules/figma-design-system.mdc，缓解 AI 落地 UI 时乱用间距、硬编码颜色、重复造组件等问题。文中核实安装方式、五步工作流与注意事项。
阅读全文Bootstrap5警告框：提示信息样式与场景应用
Bootstrap5警告框（Alert）组件用于展示提示信息、状态反馈或操作结果，支持多种样式、动画及交互功能，完全响应式。使用时需先引入Bootstrap5的CSS和JS文件。基础警告框通过`alert`类和颜色主题类（如`alert-primary`蓝色、`alert-success`绿色等）创建，可添加`alert-dismissible`类实现带关闭按钮的效果，配合`fade show`启用淡入淡出动画。 功能上，`alert-link`类可统一链接颜色，JS可控制自动隐藏（如5秒后关闭）。典型场景包括表单提交成功提示、删除操作确认、系统通知等。如需自定义，可通过CSS覆盖默认样式。掌握颜色类、关闭按钮、动画及JS交互，能灵活提升用户体验与提示清晰度。
阅读全文Bootstrap5表单组：分组控件与标签对齐技巧
Bootstrap5表单组是网页开发中组织表单元素的核心工具，通过`.form-group`类包裹相关控件，实现样式统一与布局管理。基础用法需结合`.form-label`（标签样式）、`.form-control`（输入框样式）及间距类（如`mb-3`）。 标签对齐有三种方式：水平排列（用`.row`+`.col-*`实现标签与输入框同行）、浮动标签（`.form-floating`，输入框聚焦时标签自动浮动）、垂直排列（默认，标签在上，适合短表单）。分组控件时，单选/多选按钮用`.form-check`包裹，下拉菜单用`.form-select`。 通过合理运用这些技巧，可构建美观易用的表单，提升用户体验。建议根据场景选择对齐方式，熟练掌握Bootstrap5表单系统。
阅读全文Bootstrap5导航组件：标签页与面包屑导航实现
要使用Bootstrap5导航组件，需先在HTML引入其CSS和JS文件（含Popper.js）。核心组件包括标签页导航和面包屑导航。 标签页导航（Tabs）用于分类内容切换：通过`.nav-tabs`（或`.nav-pills`胶囊式）实现，需用`.nav`包裹导航项，`nav-link`按钮通过`data-bs-toggle="tab"`和`data-bs-target`关联内容面板。内容区域用`.tab-content`包裹`.tab-pane`，通过`fade`和`active`实现切换与默认显示，支持无障碍属性提升体验。 面包屑导航（Breadcrumb）展示页面层级：用`.breadcrumb`类包裹有序列表，`.breadcrumb-item`表示层级项，`.active`标记当前页。默认分隔符可通过CSS自定义（如`content: "›"`），纯HTML/CSS即可实现，无需JS。 总结：标签页依赖JS，适合分类内容；面包屑纯静态，用于层级展示。两者均支持无障碍属性，Bootstrap5提供丰富扩展（如胶囊式、自定义分隔符），便于快速上手。
阅读全文Bootstrap5下拉菜单：点击展开的导航选项列表
Bootstrap5下拉菜单可解决菜单项多导致的空间占用问题，通过折叠节省空间并保持界面简洁。使用前需引入Bootstrap5 CSS、Popper.js和Bootstrap JS（顺序不可错）。 核心结构为：外层 `<div class="dropdown">` 容器，内部包含触发按钮（`class="btn dropdown-toggle"`，带 `data-bs-toggle="dropdown"` 属性）和选项列表（`class="dropdown-menu"`）。选项列表用 `<li>` 包裹，菜单项为 `dropdown-item`，支持 `active`（高亮）、`disabled`（禁用）及分割线（`dropdown-divider`）。 交互逻辑内置：点击触发按钮展开/收起列表，点击菜单项自动关闭，无需额外JS。进阶用法支持右对齐（`dropdown-menu-end`）和向上展开（`dropup` 类）。 使用时需确保依赖正确引入，结构无误（如菜单项在 `<li>` 内），即可快速实现简洁导航菜单。
阅读全文从手机到PC：Bootstrap5响应式布局实现步骤
Bootstrap5是实现网页响应式布局的高效工具，核心优势包括自动适配多设备的响应式设计、12列栅格系统、丰富组件及轻量CDN引入方式。使用时需先在HTML中通过CDN引入CSS和JS文件，关键是设置`<meta name="viewport">`确保手机端正确显示。 其响应式核心为栅格系统：页面分为12列，用`row`包裹内容，`col-*`指定列宽（`*`为列数），通过断点前缀（xs<576px、sm≥576px、md≥768px、lg≥992px、xl≥1200px）适配不同屏幕。容器分为固定宽度的`container`和全屏的`container-fluid`。 实战中，通过栅格系统可快速实现内容区与侧边栏的自适应布局（如`col-lg-9`内容区、`col-lg-3`侧边栏，小屏幕自动堆叠为`col-sm-12`）。辅助类如`text-center`、`bg-*`可优化样式。掌握这些核心点，即可让页面在手机、平板
阅读全文Bootstrap5卡片组件：打造简洁美观的内容展示单元
Bootstrap5卡片（Card）组件是用于整齐组织信息的“容器盒子”，能有序收纳图片、文字、按钮等内容，支持响应式布局，适配不同设备。 基础结构以`.card`为容器，内部通过`.card-img-top`（顶部图片）、`.card-body`（内容区，含`.card-title`标题和`.card-text`文本）等类实现内容分层。核心组件支持多种组合：图片可顶部放置或叠加文字（`.card-img-overlay`）；列表用`.list-group`呈现；操作按钮可放在`.card-footer`或卡片主体内。 样式与布局方面，可通过宽度控制、`shadow-*`工具类（浅/默认/深阴影）、`text-center`（居中对齐）调整外观；响应式排列用`.row`+`.row-cols-*`实现多列布局（如小屏幕1列、中等屏幕3列）。 注意事项：图片需加`alt`属性和`img-fluid`类，避免重复样式冲突，合理使用间距工具类避免内容拥挤。通过卡片可高效构建产品列表、用户资料等场景，灵活适配简单到复杂的内容组合需求。
阅读全文前端开发者学Node.js：从浏览器到服务器的思维转变
本文介绍前端开发者学习Node.js的必要性及核心要点。Node.js基于Chrome V8引擎，让JavaScript可在服务器端运行，解决前端做后端服务的局限，实现全栈开发。其核心特点是“非阻塞I/O”（通过事件循环处理并发请求）、“全权限”环境（可操作文件/端口）、“CommonJS模块系统”。 前端转后端需思维转变：运行环境从沙箱（限API）到全权限；异步编程从辅助（如setTimeout）到核心设计（避免服务器阻塞）；模块系统从ES Modules到CommonJS（require/module.exports）。 学习路径包括：掌握基础模块（fs、http），理解异步编程（回调/Promise/async），用Express等框架开发API，探索Webpack/Babel等工具底层原理。 总结：Node.js助力前端开发者构建全栈能力，无需切换语言，理解服务器逻辑，拓展职业边界，是打通前后端的关键工具。
阅读全文Node.js npm工具：从安装到包管理全攻略
本文介绍Node.js和npm的核心知识。Node.js是基于Chrome V8引擎的JavaScript运行环境，npm是其默认包管理工具，用于下载、安装、管理第三方代码包。 安装部分：Windows、Mac、Linux系统均可通过官网或包管理器安装Node.js（npm随Node.js一同安装），安装后可通过`node -v`和`npm -v`验证。 npm核心功能：初始化项目需执行`npm init`生成`package.json`（项目配置文件）；安装依赖分本地（默认，仅项目可用）和全局（-g，系统级），依赖分生产（--save）和开发（--save-dev）两类；管理依赖包括查看、更新、卸载（`npm uninstall`）等。 常用命令：`npm install`（安装）、`npm list`（查看）、`npm update`（更新）等。国内访问慢可通过淘宝镜像（`npm config set registry`）或cnpm加速。 注意事项：避免提交`node_modules`到Git，合理使用版本号（^或~），优先本地安装依赖。 npm是Node.js开发核心工具，掌握其使用可提升效率，
阅读全文