npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@fce/design-md

v0.2.1

Published

Pull DESIGN.md files from awesome-design-md into your project root

Readme

design-md

中文:@fce/design-md 是一个交互式 TUI CLI。运行后,你只需要跟着界面选择语言、选择 design、确认下载,即可把设计资源拉到当前项目里。
English: @fce/design-md is an interactive TUI CLI. Run it, follow the prompts, choose a design, and it will pull design resources into your current project.

中文:当前 npm 包默认从你的仓库 chengzhaobing/awesome-design-mddesign-md/ 目录动态拉取资源。
English: This npm package now pulls resources dynamically from the design-md/ directory of chengzhaobing/awesome-design-md.

中文:这样即使官方仓库结构调整,只要你的 fork 维持兼容结构,CLI 仍然可以正常工作,并随着你的仓库更新读取新的站点目录。
English: This keeps the CLI working even if the upstream official repository changes structure, as long as your fork keeps a compatible layout. New site folders added to your repository will become selectable automatically.

安装 / Install

中文:临时使用可以直接运行。
English: For one-off usage, run it directly.

npx @fce/design-md
pnpm dlx @fce/design-md

中文:如果你想全局安装后长期使用,可以这样安装。
English: If you want to install it globally and use it regularly, install it like this.

npm install -g @fce/design-md
design-md

使用方式 / Usage

中文:核心命令只有一个。
English: There is only one main command to remember.

design-md

中文:如果你想跳过覆盖确认,可以加 --force
English: If you want to skip overwrite confirmation, use --force.

design-md --force

交互流程 / Interactive Flow

中文:

  1. 启动 design-md
  2. 选择 ChineseEnglish
  3. 选择下载方式
  4. 从你的仓库 design-md/ 子文件夹中选择需要的 design
  5. 确认下载
  6. 下载完成后,直接让 AI 使用对应网站的 DESIGN.md

English:

  1. Start design-md
  2. Choose Chinese or English
  3. Choose a download mode
  4. Select designs from your repository's design-md/ folders
  5. Confirm the download
  6. After download, let your AI use the corresponding site's DESIGN.md

交互模式 / Modes

中文:

  • 下载一个 design:下载单个站点
  • 全选:下载全部站点
  • 自定义:从列表中多选站点

English:

  • 下载一个 design: download a single site
  • 全选: download all sites
  • 自定义: choose multiple sites from the list

输出规则 / Output Rules

中文:

  • 单个站点下载后会生成:
    • ./DESIGN.md
    • ./design-md/<site>/DESIGN.md
  • 多个站点下载后会统一生成到:
    • ./design-md/<site>/DESIGN.md

English:

  • When downloading one site, the CLI creates:
    • ./DESIGN.md
    • ./design-md/<site>/DESIGN.md
  • When downloading multiple sites, the CLI creates:
    • ./design-md/<site>/DESIGN.md

为什么适合 npm 使用 / Why It Works Well On npm

中文:

  • 用户不需要手动去 GitHub 复制文件
  • 用户不需要记复杂命令,只要执行 design-md
  • CLI 会读取你仓库里最新的 design-md/ 目录
  • 你后续新增的资源会自动出现在交互选择中

English:

  • Users do not need to manually copy files from GitHub
  • Users do not need to remember complex commands, only design-md
  • The CLI reads the latest design-md/ folders from your repository
  • New resources added later will automatically appear in the interactive selector

发布到 npm / Publish To npm

中文:

  1. 登录 npm:npm login
  2. 检查打包内容:npm pack --dry-run
  3. 升级版本:npm version patch
  4. 正式发布:npm publish --access public

English:

  1. Log in to npm: npm login
  2. Inspect package contents: npm pack --dry-run
  3. Bump the version: npm version patch
  4. Publish publicly: npm publish --access public

中文:发布成功后,其他用户就可以直接运行 npx @fce/design-mdpnpm dlx @fce/design-md,或者全局安装后执行 design-md
English: After publishing, other users can run npx @fce/design-md, pnpm dlx @fce/design-md, or install it globally and execute design-md.