FrameEvidence：为 DeepSeek Harness 提供有边界的 Figma 只读设计证据
FrameEvidence 是 DeepSeek Harness 的只读 Figma 插件，旨在解决智能体获取设计数据时面临的上下文膨胀及凭据暴露风险。它提供 `figma_inspect` 和 `figma_render` 两个核心工具：前者返回有边界限制的节点树，后者提供临时渲染 URL，从而控制数据规模且不暴露 Figma PAT。 该插件严格遵循安全边界：仅通过主机环境变量读取凭据，禁止写入 Figma，拒绝重定向，并对 API 响应进行字节及节点数限制。安装需满足 Node 版本要求并通过 DSH 命令固定特定 commit 安装。用户需创建仅有只读权限的 Figma PAT，配置环
Read MoreDSH 插件 dsh-plugin-message-timeline-navigation：在 web 会话左侧增加消息时间线
dsh-plugin-message-timeline-navigation 是专为 DSH Web Client 开发的一款纯前端辅助插件，旨在解决长会话中手动滚动定位消息效率低的问题。该插件不修改 DSH 本体，通过叠加层在对话视图左侧显示 Codex 风格的消息时间线，每个刻度对应一个用户回合及其完整 Agent 回复。核心功能包括：悬停刻度时预览消息卡片及级联展开效果；点击刻度平滑跳转至对应消息并短暂高亮；滚动时自动高亮当前阅读回合的刻度以指示进度。该插件仅追踪用户消息以保持时间线密集且可预测。安装推荐使用 pnpm 环境并执行 `dsh plugin add` 命令。它要求 Reac
Read Moredsh-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
Read Moredsh-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
Read Moredsh-sticky-disclosure: Collapse Expandable Blocks in DSH Web Sessions with One Click
`dsh-sticky-disclosure` is an MIT-licensed plugin for the DSH Web client, maintained by Han-1413141, designed to address the problem of accumulated collapsible blocks (such as Think, tool cards, command cards, etc.) during long sessions, which makes them difficult to manage. The plugin allows users to collapse all expanded blocks with a single click via a persistent button in the bottom-right corner of the chat area or a custom keyboard shortcut (default: Ctrl+Alt+C / ⌘⌥C), with a real-time counter displayed. When a block scrolls out of the viewport, its title is automatically pinned to the top for one-click collapsing. The plugin is implemented in pure DOM, does not modify application code, supports both dark and light themes, and automatically restores the original state after uninstallation. Installation requires Node.js ≥ 20 and a DSH environment; it takes effect after installation via a PowerShell script and a restart. Keyboard shortcut settings are saved
Read MoreDSH Session Pins: Providing Persistent Pinned Session Menus for DeepSeek Harness
The DSH plugin `dsh-session-pins` developed by alooshxl aims to solve the difficulty of finding frequently used sessions in the DeepSeek Harness Web sidebar. This plugin is based on the MIT license and integrates through the public `sidebar.footer.action` slot, without relying on private UI source code or patching the host. Its core functionality provides a pinned sessions menu at the bottom of the sidebar, supporting the pinning of regular, non-empty sessions, with data stored in the browser's local `localStorage`, requiring no API key. The plugin features a robust validation mechanism, limiting the maximum number of pinned items to 100, and synchronizes across same-origin tabs via the `storage` event. Installation requires the `dsh plugin` command to add a specified Git tag.
Read More# Figma-Create-Design-System-Rules: Develop Project-Specific Design System Rules for Agents
This is an introduction to `figma-create-design-system-rules` in the openai/skills curated catalog: On the premise of connecting Figma MCP, it analyzes the codebase and generates project-level design system rules, constraining component paths, Design Tokens, styling solutions and the Figma-to-code workflow, and writes them into `CLAUDE.md`, `AGENTS.md` or `.cursor/rules/figma-design-system.mdc` respectively, to alleviate problems such as random use of spacing, hard-coded colors, and repeated creation of components when AI implements UI. The article verifies the installation method, five-step workflow and precautions.
Read MoreBootstrap 5 Alerts: Styling and Scenarios for Notification Messages
The Bootstrap 5 Alert component is used to display prompt messages, status feedback, or operation results. It supports multiple styles, animations, and interactive features, and is fully responsive. To use it, you need to first include the Bootstrap 5 CSS and JS files. A basic alert is created using the `alert` class and color theme classes (such as `alert-primary` for blue, `alert-success` for green, etc.). The `alert-dismissible` class can be added to enable a close button, and `fade show` can be used to enable fade-in and fade-out animations. Functionally, the `alert-link` class can unify link colors, and JavaScript can control automatic hiding (e.g., closing after 5 seconds). Typical scenarios include form submission success prompts, deletion operation confirmations, system notifications, etc. For customization, default styles can be overridden via CSS. Mastering color classes, close buttons, animations, and JavaScript interactions allows flexible enhancement of user experience and prompt clarity.
Read MoreBootstrap 5 Form Groups: Tips for Grouping Controls and Aligning Labels
Bootstrap 5 form groups are a core tool for organizing form elements in web development. They wrap related controls using the `.form-group` class to achieve style consistency and layout management. Basic usage requires combining with `.form-label` (label styling), `.form-control` (input styling), and spacing classes (such as `mb-3`). There are three label alignment methods: horizontal arrangement (implemented with `.row` + `.col-*` to place labels and input fields in the same row), floating labels (`.form-floating`, where the label automatically floats when the input is focused), and vertical arrangement (default, with labels on top, suitable for short forms). When grouping controls, use `.form-check` for radio/multi-select buttons and `.form-select` for dropdown menus. By skillfully applying these techniques, you can build beautiful and user-friendly forms, enhancing the user experience. It is recommended to choose the alignment method according to the scenario and master the Bootstrap 5 form system proficiently.
Read MoreBootstrap 5 Navigation Components: Implementation of Tabs and Breadcrumb Navigation
To use Bootstrap 5 navigation components, you first need to include its CSS and JS files (including Popper.js) in your HTML. Core components include tab navigation and breadcrumb navigation. **Tab Navigation (Tabs)** is used for categorizing content switching: Implemented via `.nav-tabs` (or `.nav-pills` for pill-shaped navigation), it requires wrapping navigation items with `.nav`. Navigation buttons (`nav-link`) are associated with content panels using `data-bs-toggle="tab"` and `data-bs-target`. Content areas are wrapped in `.tab-content` containing `.tab-pane`, where `fade` and `active` classes control transitions and default display. Accessibility attributes are supported to enhance user experience. **Breadcrumb Navigation** displays page hierarchy: Wrapped with the `.breadcrumb` class and an ordered list, each level is represented by `.breadcrumb-item`, with `.active` marking the current page. The default separator can be customized via CSS (e.g., `content: "›"`). It is pure HTML/CSS and does not require JavaScript. **Summary**: Tabs rely on JS for content switching and are suitable for categorized content; breadcrumbs are static and ideal for hierarchical display. Both support accessibility attributes. Bootstrap 5 provides rich extensions (e.g., pill-style, custom separators), enabling quick implementation.
Read MoreBootstrap 5 Dropdown Menus: Click-Expanded Navigation Option Lists
The Bootstrap 5 dropdown menu solves the space - occupying problem caused by a large number of menu items by collapsing to save space while keeping the interface concise. Before use, you need to introduce Bootstrap 5 CSS, Popper.js and Bootstrap JS in the correct order (the order cannot be wrong). The core structure consists of an outer `<div class="dropdown">` container. Inside it, there is a trigger button (`class="btn dropdown - toggle"` with the `data - bs - toggle="dropdown"` attribute) and an option list (`class="dropdown - menu"`). The option list is wrapped with `<li>`, and the menu items are `dropdown - item`, which supports `active` (highlighted), `disabled` (disabled) and divider lines (`dropdown - divider`). The interaction logic is built - in: clicking the trigger button expands or collapses the list, and clicking the menu item automatically closes the list without additional JS. Advanced usage supports right - alignment (`dropdown - menu - end`) and upward expansion (the `dropup` class). When using, you need to ensure that the dependencies are correctly introduced and the structure is correct (such as menu items inside `<li>`), and you can quickly implement a concise navigation menu.
Read MoreFrom Mobile to PC: Implementation Steps of Responsive Layout with Bootstrap 5
Bootstrap 5 is an efficient tool for implementing responsive web layouts, with core advantages including automatic adaptation to multi-device responsive design, a 12-column grid system, rich components, and a lightweight CDN introduction method. When using it, CSS and JS files must first be introduced via CDN in HTML, and the key is to set the `<meta name="viewport">` tag to ensure correct display on mobile devices. Its responsive core lies in the grid system: the page is divided into 12 columns, content is wrapped with `row`, and `col-*` specifies the column width (`*` is the number of columns). Breakpoint prefixes (xs < 576px, sm ≥ 576px, md ≥ 768px, lg ≥ 992px, xl ≥ 1200px) are used to adapt to different screens. Containers are divided into fixed-width `container` and full-screen `container-fluid`. In practice, the grid system can quickly achieve adaptive layouts for content areas and sidebars (e.g., `col-lg-9` for content area and `col-lg-3` for sidebar, which automatically stack into `col-sm-12` on small screens). Utility classes like `text-center` and `bg-*` can optimize styles. Mastering these core points allows pages to be displayed properly on mobile phones, tablets
Read MoreBootstrap 5 Cards: Creating Clean and Attractive Content Display Units
The Bootstrap 5 Card component serves as a "container box" for organizing information neatly, capable of orderly containing content such as images, text, and buttons. It supports responsive layouts to adapt to different devices. The basic structure uses `.card` as the container, with internal classes like `.card-img-top` (top image), `.card-body` (content area containing `.card-title` for titles and `.card-text` for text) to achieve content layering. Core components support various combinations: images can be placed at the top or overlapped with text (using `.card-img-overlay`); lists are presented via `.list-group`; and action buttons can be placed in `.card-footer` or within the card body. In terms of styling and layout, appearance can be adjusted through width control, `shadow-*` utility classes (light/default/dark shadows), and `text-center` (center alignment). For responsive arrangement, `.row` combined with `.row-cols-*` is used to implement multi-column layouts (e.g., 1 column on small screens, 3 columns on medium screens). Precautions: Images must include the `alt` attribute and the `img-fluid` class; avoid duplicate style conflicts; and use spacing utility classes reasonably to prevent content crowding. Cards can efficiently build scenarios like product lists and user profiles, flexibly adapting to content combinations ranging from simple to complex.
Read MoreFrontend Developers Learning Node.js: The Mindset Shift from Browser to Server
This article introduces the necessity and core points for front-end developers to learn Node.js. Based on Google Chrome's V8 engine, Node.js enables JavaScript to run on the server-side, overcoming the limitations of front-end developers in building back-end services and enabling full-stack development. Its core features include "non-blocking I/O" (handling concurrent requests through the event loop), "full-access" environment (capable of operating on files and ports), and the "CommonJS module system". For front-end developers transitioning to back-end roles, mindset shifts are required: changing from the sandboxed (API-limited) runtime environment to a full-access environment; transforming asynchronous programming from an auxiliary task (e.g., setTimeout) to a core design principle (to avoid server blocking); and adjusting from ES Modules to CommonJS (require/module.exports) for module systems. The learning path includes: mastering foundational modules (fs, http), understanding asynchronous programming (callbacks/Promise/async), developing APIs with frameworks like Express, and exploring the underlying principles of tools such as Webpack and Babel. In summary, Node.js empowers front-end developers to build full-stack capabilities without switching programming languages, enabling them to understand server-side logic and expand career horizons. It is a key tool for bridging the gap between front-end and back-end development.
Read MoreNode.js npm Tools: A Comprehensive Guide from Installation to Package Management
This article introduces the core knowledge of Node.js and npm. Node.js is a JavaScript runtime environment based on Chrome's V8 engine, and npm is its default package management tool for downloading, installing, and managing third-party code packages. **Installation**: Node.js can be installed on Windows, Mac, and Linux systems via the official website or package managers (npm is installed alongside Node.js). After installation, verify with `node -v` and `npm -v`. **Core npm Functions**: - Initialize a project with `npm init` to generate `package.json` (project configuration file). - Install dependencies: local (default, project-only) or global (`-g`, system-wide); categorized as production (`--save`) or development (`--save-dev`) dependencies. - Manage dependencies: view, update, uninstall (`npm uninstall`), etc. **Common Commands**: `npm install` (Install), `npm list` (View), `npm update` (Update), etc. For slow domestic access, accelerate with Taobao mirror (`npm config set registry`) or cnpm. **Notes**: Avoid committing `node_modules` to Git, use version numbers (`^` or `~`) reasonably, and prioritize local dependency installation. npm is a core tool for Node.js development; mastering its usage enhances efficiency.
Read More