Ludi Design System Skill
The Ludi Design System skill teaches an agent to choose components and build B2B interface pages by rules, with TSX templates
- 90 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill only adds rules and templates and uses no network or commands
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/ludi-design-system-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill only adds rules and templates and uses no network or commands
This is third-party code. Review the repository files before installing.
What it does
A skill in Chinese for Claude Code, Cursor, Windsurf, Codex and Antigravity turns enterprise interface rules into constraints an agent follows while generating code. It introduces six page skeletons: a list with filters, a stepped form, a document detail, a dashboard, settings and error and result pages. Seven negative component choice criteria tell an agent what not to do. A side Drawer is the default for details, a modal is kept for dangerous operations, a skeleton under one second is forbidden and a Tooltip must not hide critical errors. The styling rules include 0.5px borders, concentric radii, `tabular-nums` figures and `text-wrap: balance`. The repository holds `SKILL.md`, the machine readable component list `components.manifest.json`, seven reference files in `references/`, four TSX templates and the `scripts/audit-design-rules.py` script that checks design rules. Cursor and Windsurf get `.cursorrules` and `.windsurfrules`.
Who it is for. Frontend developers and designers of enterprise dashboards and admin panels on React, TypeScript and Tailwind who generate screens with an agent.
Good fit when
- An agent builds a list page with filters and bulk actions and needs a skeleton
- A three step form should validate fields on blur and protect from data loss
- To view a table row the agent chooses a side panel and skips the modal
- Finished markup has to be run through the design rule audit script
Not a fit when
- You need a consumer site or a landing page: the rules target enterprise dashboards
- The project is not on React and Tailwind: the TSX templates rely on them
- You need documentation in a language other than Chinese: the README and references are in Chinese
Example request
Build an orders list page with the b-end-design-system skill: filters, bulk actions and a side panel viewLimitations
- Documentation and references are in Chinese, with no English README.
- The TSX templates require React, TypeScript, `lucide-react` and Tailwind CSS: they are reference components and serve as no standalone app.
- The skill is not copied with a command: files are moved by hand per `docs/install-claude-code.md` or the matching guides for other editors.
- The `audit-design-rules.py` script requires Python 3.
- The rules are written for enterprise dashboards and fit storefronts and landing pages poorly.
How to disable. Delete the `.claude/skills/b-end-design-system/` folder in the project or in `~/.claude/skills/`.
FAQ
Which agents are supported?
Claude Code, Cursor, Windsurf, Codex and Antigravity: each has an install guide in `docs/`.
What are the negative choice criteria?
Seven rules about when a component does not fit: for instance, under five options the choice is shown as radio buttons with no dropdown.
Is there an automatic check?
Yes, `scripts/audit-design-rules.py` checks code against the design system rules and needs Python 3.
What does the repository contain?
`SKILL.md`, the `components.manifest.json` component list, seven references in `references/`, four TSX templates and an audit script.
What language is the skill written in?
Documentation and references are in Chinese. The agent applies the rules regardless of the language of your request.
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 for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A prompt-as-code design system for Codex, Cursor and Claude Code: style catalogs, layouts, blocks and personal UI rules.
A skill with 107 styles, 127 palettes and 107 font pairings that generates a design system and audits interface code
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 /taste skill turns a URL into design tokens and trade-off principles, with ready rules for Cursor and Claude Code
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Ludi Design System Skill (this card) | no | 90 | |
| shadcn/ui | no | 128,022 | a skill and MCP for shadcn/ui components, while this one holds choice rules and page skeletons for enterprise interfaces |
| Ant Design CLI | no | 261 | an Ant Design reference without page composition rules |
README in short
The Chinese README explains why the skill needs rules and bans, lists six page templates, seven negative criteria and aesthetic rules, shows the repository structure and leads to install guides for Cursor, Windsurf, Claude Code, Codex and Antigravity.