用于 Dig 网页与产品界面的设计系统 skill。Use when the user mentions dig-ui, dig-ui-skill, Dig UI, catalog/wise, catalog/dig, CSS token, layout recipe, block library, dashboard, runtime, marketing, docs, or…

Apache-2.0Auto-check passedFrontend & Design

Install Dig UI

skills CLI
$ npx skills add originaleric/dig-ui-skill --skill dig-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install originaleric/dig-ui-skill dig-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
dig-ui
GitHub stars
232
Token cost
~1.1k tokens
SKILL.md length
319 words
Files
583 (incl. references, assets)
Skills in repo
1
Repo updated
First seen
Licence
Apache-2.0

At a glance

用于 Dig 网页与产品界面的设计系统 skill。Use when the user mentions dig-ui, dig-ui-skill, Dig UI, catalog/wise, catalog/dig, CSS token, layout recipe, block library, dashboard, runtime, marketing, docs, or…

  • Works in 7 steps: 输出 Dig Read → 选择 layout → 选择 catalog → …
  • The user mentions dig-ui
  • SKILL.md covers 读取优先级, 工作流, 个人 Local Rules and Runtime 命名边界
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Dig UI is an agent skill from originaleric/dig-ui-skill. 用于 Dig 网页与产品界面的设计系统 skill。Use when the user mentions dig-ui, dig-ui-skill, Dig UI, catalog/wise, catalog/dig, CSS token, layout recipe, block library, dashboard, runtime, marketing, docs, or frontend UI review. Read global-rules.md first, then local rules and local extensions when present.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 586 other files, including reference files and assets (for example `INSTALL.md`, `INSTALL.zh-CN.md` and `OPEN_SOURCE_REVIEW.zh-CN.md`).

It sits in Frontend & Design, covering Frontend development. The repository describes itself as: Built by Dig:An agent-readable, prompt-as-code design system for Codex, Cursor, and Claude Code: catalogs, layouts, blocks, workflows, and personal UI customization. The licence is Apache-2.0.

When your agent uses it

  • The user mentions dig-ui
  • Frontend UI review

Example prompts

  • “/dig-ui”

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. 输出 Dig Read
  2. 选择 layout
  3. 选择 catalog
  4. 选择 blocks
  5. 应用 token / primitive / global rules
  6. 过滤 anti-tells
  7. Preflight 和 Render Ops

What it can do on your machine

Read from SKILL.md and the folder at commit a4b9a32. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are bash).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Dig UI loads about 1.1k tokens when it runs, and up to ~1.7M if it reads all its reference files. Until then it costs about 74 tokens; SKILL.md has 319 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~74
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.7M

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from originaleric/dig-ui-skill at commit a4b9a32, republished under its Apache-2.0 licence (© originaleric). 319 words, ~1,128 tokens.

Download SKILL.mdSave it as .claude/skills/dig-ui/SKILL.md (or your agent's skills folder). This skill also uses 582 other files; get the full folder from GitHub.
name
dig-ui
description
用于 Dig 网页与产品界面的设计系统 skill。Use when the user mentions dig-ui, dig-ui-skill, Dig UI, catalog/wise, catalog/dig, CSS token, layout recipe, block library, dashboard, runtime, marketing, docs, or frontend UI review. Read global-rules.md first, then local rules and local extensions when present.

dig-ui

Dig UI 是 AI 可执行的产品界面设计系统。它通过 dig-read + workflow + layout + catalog + block + token + global/local rules + render ops 帮助 agent 生成、审查和维护稳定的产品 UI。

读取优先级

  1. 用户当前 prompt
  2. references/local/palettes/ 或 ~/.config/dig-ui-skill/palettes/(当用户指定本地/custom palette 时)
  3. references/local/styles/ 或 ~/.config/dig-ui-skill/styles/(当用户指定本地/custom style 时)
  4. references/global-rules.local.md(若存在)
  5. references/local/(若存在,用于项目级 layout / block 扩展)
  6. 当前安装语言的 references/global-rules.md
  7. 当前安装语言的 references/dig-read.md、references/anti-tells.md、references/preflight.md、references/workflows/
  8. 当前安装语言的 references/layouts/、references/catalogs/、references/blocks/
  9. references/shared/ 中的 manifest、token、primitive

若用户明确说「不使用 global / skip global / no global rules」,本次任务跳过 global rules 和 local global rules,但仍可使用 layout、catalog、block、primitive。

工作流

1. 输出 Dig Read

对页面生成或 UI review 任务,先读取 references/dig-read.md,再用一句话确认:

text
<task type> page for <target user / job>,
using <layout> layout + <catalog> catalog.

然后给出四个 dials:

  • INFORMATION_DENSITY
  • BRAND_EXPRESSIVENESS
  • INTERACTION_ENERGY
  • OPERATIONAL_CRITICALITY

如果任务明显属于 review、redesign、execution 或 image-reference 场景,同时读取 references/workflows/ 中的对应 workflow。

2. 选择 layout

先读 references/layouts/README.md,再读取最匹配的 layout 文件。layout 负责信息结构、slots、响应式顺序和 QA notes,不负责品牌色。

若存在 references/local/manifest.yaml 或 references/local/layouts/,优先判断是否有项目级 layout 更适合。local layout 应使用 extends,避免静默复制官方 layout。

3. 选择 catalog

写 CSS 前必须先选一个 catalog。用户明确指定时用户优先;未指定时按 layout 的 default_catalog 和 recommended_catalogs 推断。

常用 catalog:

  • dig:Dig 默认产品语言
  • mono:克制、灰阶、高密调试
  • editorial:叙事、发布、品牌表达
  • wise:移动优先、消费级 fintech
  • apple:高端产品发布、系统原生感
  • paletteXX:以整体网站配色为入口的 color palette catalog;当用户指定 mood、配色组合或整体色彩方向而非品牌时使用
  • style-catalog:以完整视觉语法为入口;当用户指定非品牌风格、截图风格、材质/形态/插画/组件气质时使用,例如 cozy-arcade、quant-signal-console
  • custompalette:用户通过 Palette Lab 导入到 ~/.config/dig-ui-skill/palettes/,并可同步到 references/local/palettes/ 的本地 palette;只属于用户资产,不写入内置 catalog
  • customstyle:用户通过 Style Lab 导入到 ~/.config/dig-ui-skill/styles/,并可同步到 references/local/styles/ 的本地 style;只属于用户资产,不写入内置 catalog

用户明确指定本地 style 资产或复用已导出的风格时使用 customstyle。同一页面或同一组组件不要混用多个 base catalog。

当决定使用内置 style catalog 时,读取 references/catalogs/styles/README.md 后再选择具体 style。它按任务、avoid 边界与 render archetype 路由,避免仅因颜色或标题气质相似而误选 style。

4. 选择 blocks

涉及常见组件或业务模块时,读取 references/blocks/README.md 和相关 block 文件。优先使用 block 协议,不临时发明重复结构。

常见 blocks:

  • primitive:button、input、select、form-row、toast、modal、tooltip、tabs
  • product:table-toolbar、runtime-log-stream、run-status-header、step-timeline、settings-row、empty-state、notification-item、search-result-row

若存在 references/local/blocks/,先判断项目级 block 是否更适合。

5. 应用 token / primitive / global rules

实现样式时先定义 token、font、type scale、spacing、radius、shadow、background/grid 行为。组件样式引用 --dig-* token 或项目主题变量,不写死 dark/light hex。

6. 过滤 anti-tells

交付前读取 references/anti-tells.md,过滤 AI 常见坏味道,尤其是:

  • 通用紫蓝 AI SaaS 渐变
  • 所有内容都塞 card
  • runtime / execution 页面 landing 化
  • 同一业务列表混用 table / card / feed
  • 用 glow 替代真实状态层级
7. Preflight 和 Render Ops

交付前读取 references/preflight.md。如果修改了 catalog 或 render 相关资产,还应运行或建议运行:

bash
dig-ui-skill render all
dig-ui-skill validate renders

render 只用于 catalog 视觉维护预览,不是第二套规范;layout 和 block 以 Markdown 协议为准。若 render 与 markdown 冲突,以 markdown / manifest 为准。

个人 Local Rules

当用户明确要求“记住”、“沉淀”或“加入我的 Dig 本地规则”时,当前 Host Agent 必须读取 references/local-rules-builder.md,将偏好归类、去重并写入用户配置中心:

text
~/.config/dig-ui-skill/global-rules.local.md
  • 这是个人规则的唯一真源;不要编辑共享 references/global-rules.md,也不要编辑项目仓库中的 ignored local 文件。
  • 使用 local add --no-sync 写入后再同步:用户未指定范围时执行 dig-ui-skill local sync --all --from-config,仅同步已安装的受支持 Host Agent;指定范围时只同步该目标并显式使用 --from-config。
  • 规则写入完成后,报告章节、写入内容和各目标的同步结果。
  • 仅当用户明确要求持久化时写入;讨论、建议或不明确的偏好不得自动沉淀。
  • Host Agent 是通用角色,不假定当前工具为 Codex、Cursor、Claude Code 或任何特定产品。

Runtime 命名边界

runtime 历史上既像 page type 又像视觉皮肤。新规则中优先使用:

  • task_type: execution 表示运行、调试、观测类任务
  • catalog: runtime 仅在未来作为视觉皮肤落地时使用

保留旧的 page_type: runtime 只是为了兼容既有 layout 与历史资产。

© originaleric, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 582 other files (references, assets) in the repository root of originaleric/dig-ui-skill.

  • SKILL.md
  • .cursorindexingignore
  • .gitignore
  • .npmignore
  • INSTALL.md
  • INSTALL.zh-CN.md
  • LICENSE
  • OPEN_SOURCE_REVIEW.zh-CN.md
  • README.md
  • README.zh-CN.md
  • SKILL.en.md
  • SKILL.zh-CN.md
  • USAGE.md
  • USAGE.zh-CN.md
  • adapters/cursor/dig-ui.mdc
  • agents/openai.yaml
  • assets/catalog-preview.css
  • … and 566 more

Open the folder on GitHubat commit a4b9a32

Compare with similar skills

Dig UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Dig UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Dig UI this skilloriginaleric/dig-ui-skill232—~1.1kAutomated safety check: PassApache-2.0
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
React UI State PatternsChrisWiles/claude-code-showcase6.1k7 repos~1.6kAutomated safety check: PassNone
GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills16k4 repos~2.6kAutomated safety check: PassMIT
Svelte Core Best Practicesrilldata/rill2.9k4 repos~1.8kAutomated safety check: PassApache-2.0
Vuetify Playgroundvuetifyjs/vuetify41k—~730Automated safety check: PassCustom licence

Similar skills

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed
  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 7 repos~1.6k tokens
    Frontend & DesignAuto-check passed
  • GSAP in Vue, Nuxt and Svelte

    greensock/gsap-skills

    Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.

    16k GitHub starsUsed in 4 repos~2.6k tokens
    Frontend & DesignAuto-check passed
  • Rules for writing idiomatic Svelte 5 code: when to reach for runes like state, derived and effect, and how to handle props, attachments and bindings.

    2.9k GitHub starsUsed in 4 repos~1.8k tokens
    Frontend & DesignAuto-check passed
  • Vuetify Playground

    vuetifyjs/vuetify

    Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.

    41k GitHub stars~730 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Starts the right Tabler dev server, keeps it from clashing with builds and verifies changes in the browser before a page or component is handed back.

    42k GitHub stars~1.2k tokensUpdated today
    Frontend & DesignAuto-check passed

Questions about Dig UI

What does Dig UI do?

用于 Dig 网页与产品界面的设计系统 skill。Use when the user mentions dig-ui, dig-ui-skill, Dig UI, catalog/wise, catalog/dig, CSS token, layout recipe, block library, dashboard, runtime, marketing, docs, or…. Dig UI is an agent skill from originaleric/dig-ui-skill. 用于 Dig 网页与产品界面的设计系统 skill。Use when the user mentions dig-ui, dig-ui-skill, Dig UI, catalog/wise, catalog/dig, CSS token, layout recipe, block library, dashboard, runtime, marketing, docs, or frontend UI review.

When should I use Dig UI?

Dig UI fits situations like: the user mentions dig-ui; frontend UI review.

How do I install Dig UI in Claude Code?

Run `npx skills add originaleric/dig-ui-skill --skill dig-ui -a claude-code`. Or copy the skill folder (the originaleric/dig-ui-skill repository) into .claude/skills/dig-ui in your project. Claude Code loads it when a task matches its description.

How do I install Dig UI in Codex?

Run `npx skills add originaleric/dig-ui-skill --skill dig-ui -a codex`. Or copy the skill folder (the originaleric/dig-ui-skill repository) into .agents/skills/dig-ui in your project. Codex loads it when a task matches its description.

Can I use Dig UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add originaleric/dig-ui-skill --skill dig-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/dig-ui, .gemini/skills/dig-ui, .github/skills/dig-ui and .opencode/skills/dig-ui in your project.

What does Dig UI need to run?

SKILL.md names no scripts, command-line tools or credentials: Dig UI is instructions for the agent only.

Does Dig UI access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Dig UI safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Dig UI use?

Dig UI is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Dig UI use?

About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.7M tokens, read only when the agent opens those files.

What are the alternatives to Dig UI?

Skills that share tags, products or a category with Dig UI: React Router Development (remix-run/react-router, 57k stars), React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars), GSAP in Vue, Nuxt and Svelte (greensock/gsap-skills, 16k stars) and Svelte Core Best Practices (rilldata/rill, 2.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Dig UI?

originaleric (a GitHub user) maintains it in originaleric/dig-ui-skill, which has 232 GitHub stars. The repository was last updated on September 7, 2026.

Source: originaleric/dig-ui-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.