Dig UI Skill
A prompt-as-code design system for Codex, Cursor and Claude Code: style catalogs, layouts, blocks and personal UI rules.
- 230 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- The npx install runs package code and the skill edits the project interface files.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/dig-ui-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The npx install runs package code and the skill edits the project interface files.
This is third-party code. Review the repository files before installing.
What it does
Dig UI Skill gives an agent the material for consistent interfaces: catalogs of styles and palettes, layout recipes, block contracts, workflows and page previews. It ships no ready component library, everything is set by instructions the agent reads before working. Install with `npx dig-ui-skill install` for Codex, Cursor or Claude Code, with an `--all` mode and a `npx dig-ui-skill status` check. A prompt names a layout and a catalog, for example `dashboard-overview`, and before delivery the agent runs a preflight check. The Monochrome, Hologram and Cyberpunk styles switch on with a phrase like "Use Monochrome Style". There is also a shader effects lab (gradients, dot grids, noise, halos) with preview through `npx dig-ui-skill effect preview`, and a personal rules section where the agent remembers your interface decisions.
Who it is for. Frontend developers and design engineers who build interfaces through Codex, Cursor or Claude Code and want one visual language across sessions.
Good fit when
- The agent draws the interface differently every time and a shared style base is needed.
- A dashboard is built from a ready layout recipe such as the overview dashboard.
- The page needs shader backgrounds and effects with a preview before export.
- The agent has to remember your decisions on buttons, forms and colors in later sessions.
Not a fit when
- You need a regular React component library: the skill does not ship one.
- The project already runs on an established design system that cannot change.
- The agent has no support for Codex, Cursor or Claude Code skills.
Example request
Use Dig UI. Start with references/dig-read.md, use the dashboard-overview layout, apply the dig catalog, and run preflight before delivery.Limitations
Most materials exist in Chinese and English versions, and the install language is chosen with `--lang en` or `--lang zh-CN`. The catalogs describe taste and structure rather than ready code, so interface quality depends on the model and the prompt. Shader effects pull in third-party assets with their own licenses, whose notices sit in `assets/effects/`. The npx install runs package code on your machine, so open `INSTALL.md` before running it. The license is Apache-2.0, the last commit dates from October 2026.
How to disable. Delete the installed `dig-ui-skill` skill from the skills folder of the chosen tool (for example `~/.claude/skills/`) and restart the agent. The install status is shown by `npx dig-ui-skill status`.
FAQ
How do I install Dig UI Skill in Claude Code?
Run `npx dig-ui-skill install claude-code`. For Codex and Cursor replace the last word with `codex` or `cursor`, and add `--all` for all tools at once.
How do I switch on a specific style?
Name it in the prompt: "Use Monochrome Style", "Use Hologram Style" or "Use Cyberpunk Style".
How do I preview shader effects?
Run `npx dig-ui-skill effect preview flowing-ribbon --output ./effect-lab.html` and open the file through a local dev server.
What does the skill include?
Style and palette catalogs, layout recipes, block contracts, workflows, page previews, shader effects and a personal rules section.
Can I choose the install language?
Yes, with `--lang en` or `--lang zh-CN` in the `npx dig-ui-skill install` command.
Discussion
No questions or reviews yet.
Related
SkillsA registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
A skill and CLI for agents: UI without the templated look, 25 commands, rule-based anti-slop checks and a 0 to 100 quality score
The Ludi Design System skill teaches an agent to choose components and build B2B interface pages by rules, with TSX templates
A skill with 107 styles, 127 palettes and 107 font pairings that generates a design system and audits interface code
A skill that bans the stock AI interface with floating cards, gradients and glass and sets plain sizes, radii and shadows like Linear
Ten UX and design skills for Claude Code, Cursor and Codex: research, critique, accessibility, design systems, UX writing
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Dig UI Skill (this card) | no | 230 | |
| design-taste | no | 95 | design-taste sets taste in one skill, while Dig UI adds catalogs, layouts, blocks and an installer for three tools. |
| Impeccable | no | 108,873 | Impeccable reviews and polishes interfaces, while Dig UI supplies the material for generating them from scratch. |
README in short
A design-system repository for AI agents with 89 catalogs, 20 layouts, blocks and workflows. Installed with npx, with shader effects and personal rules.