New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Tofu Design System

by NiuTrans in NiuTrans/ToFu

Build NEW pages, features, or standalone project UIs (翻译项目/企业项目/新页面/新项目 UI, translation tools, enterprise apps, dashboards) on the Tofu design system — every control from frontend/src/ui factories…

MITAuto-check passedFrontend & Design

Install Tofu Design System

skills CLI
$ npx skills add NiuTrans/ToFu --skill tofu-design-system -a claude-code

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

GitHub CLI
$ gh skill install NiuTrans/ToFu tofu-design-system --agent claude-code

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

Manual copy
$ git clone --depth 1 https://github.com/NiuTrans/ToFu.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/tofu-design-system .claude/skills/tofu-design-system && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

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

Facts

Skill name
tofu-design-system
GitHub stars
148
Token cost
~620 tokens
SKILL.md length
247 words
Files
1
Repo updated
First seen
Licence
MIT

At a glance

Build NEW pages, features, or standalone project UIs (翻译项目/企业项目/新页面/新项目 UI, translation tools, enterprise apps, dashboards) on the Tofu design system — every control from frontend/src/ui factories…

  • Works in 5 steps: Start from the scaffold, not a blank file → Every control comes from a factory in… → Feature CSS only for genuinely novel… → …
  • Tasks that involve Design systems
  • SKILL.md covers Workflow, "Not ugly" is… and Agent capability
  • Calls python3 and npm

What it does

Tofu Design System is an agent skill from NiuTrans/ToFu. Build NEW pages, features, or standalone project UIs (翻译项目/企业项目/新页面/新项目 UI, translation tools, enterprise apps, dashboards) on the Tofu design system — every control from frontend/src/ui factories and every value from design tokens; never hand-rolled CSS, one-off buttons, or raw hex/px spacing.

Its SKILL.md is about 620 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design systems, Design tokens and Translation. The repository describes itself as: Self-hosted AI assistant with tool use, multi-agent orchestration, coding copilot and a lightweight Flask + vanilla JS stack. The licence is MIT.

When your agent uses it

  • Tasks that involve Design systems
  • Tasks that involve Design tokens
  • Tasks that involve Translation

Example prompts

  • “/tofu-design-system”

Requirements

  • Python 3

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Start from the scaffold, not a blank file
  2. Every control comes from a factory in frontend/src/ui/index.ts
  3. Feature CSS only for genuinely novel visuals, and then tokens only
  4. Layout by primitives (.ui-stack/.ui-row/.ui-grid/.ui-toolbar) so
  5. Register new shared controls in designs/ui-gallery/index.html.

What it can do on your machine

Read from SKILL.md and the folder at commit 079e58e. 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

    Shell commands in SKILL.md call:

    • python3
    • npm

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

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    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

Tofu Design System loads about 620 tokens when it runs. Until then it costs about 79 tokens; SKILL.md has 247 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~79
When it runs · the whole SKILL.md, loaded when a task matches
~620

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 NiuTrans/ToFu at commit 079e58e, republished under its MIT licence (© NiuTrans). 247 words, ~620 tokens.

Download SKILL.mdSave it as .claude/skills/tofu-design-system/SKILL.md (or your agent's skills folder).
name
tofu-design-system
description
Build NEW pages, features, or standalone project UIs (翻译项目/企业项目/新页面/新项目 UI, translation tools, enterprise apps, dashboards) on the Tofu design system — every control from frontend/src/ui factories and every value from design tokens; never hand-rolled CSS, one-off buttons, or raw hex/px spacing.

Build UI on the Tofu design system

Use this workflow whenever a request asks for a new page, feature surface, or a whole new project UI (including translation/enterprise tools that reuse Tofu's agent runtime). The authority contract is docs/DESIGN_SYSTEM.md — read it first; do not duplicate its tables here.

Workflow

  1. Start from the scaffold, not a blank file: designs/ui-gallery/scaffold.html is a complete app shell (sidebar + toolbar + content) built only from the kit. Copy it, then replace its demo content with the feature's real structure.
  2. Every control comes from a factory in frontend/src/ui/index.ts (button, field, dialog, drawer, tabs, dropdown, toast, alert, table, choice, progress, empty state…). Do not hand-write ui-* class strings for behavioral controls, and NEVER invent a new button/input/checkbox style — extend the kit instead (factory + 30-ui-kit.css + gallery entry, all three together).
  3. Feature CSS only for genuinely novel visuals, and then tokens only: spacing from --space-*, font sizes from --font-size-*, colors from the token contract in 00-design-tokens.css. Raw hex colors and raw px margins/paddings fail npm run check:styles — that gate is the definition of done.
  4. Layout by primitives (.ui-stack/.ui-row/.ui-grid/.ui-toolbar) so alignment is a construction property, not manual margin tuning.
  5. Register new shared controls in designs/ui-gallery/index.html.

"Not ugly" is machine-checkable — run the loop

bash
python3 designs/ui-gallery/verify.py   # 37 structural/behavioral checks
python3 designs/ui-gallery/capture.py  # 3-theme screenshots + WCAG contrast gate
npm run check:styles                   # token gate + size budgets

Post the regenerated designs/ui-gallery/previews/*.png for user review; do not claim visual quality without these artifacts.

Agent capability

The agent side of the project (tasks, tools, streaming) reuses Tofu's existing surfaces — see docs/AGENT_CAPABILITY_GUIDE.md and docs/FRONTEND_ARCHITECTURE.md. Do not build a parallel agent runtime.

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

Files

Just SKILL.md in .agents/skills/tofu-design-system of NiuTrans/ToFu.

Open the folder on GitHubat commit 079e58e

Compare with similar skills

Tofu Design System 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.

Tofu Design System compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tofu Design System this skillNiuTrans/ToFu148—~620Automated safety check: PassMIT
Tsh Implementing FrontendTheSoftwareHouse/copilot-collections284—~2.6kAutomated safety check: PassMIT
Composer UIdxos/dxos526—~9.3kAutomated safety check: PassCustom licence
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT

Similar skills

  • Tsh Implementing Frontend

    TheSoftwareHouse/copilot-collections

    Frontend component patterns, composition, design token integration, barrel file organization, error handling, and Figma-to-code workflow.

    284 GitHub stars~2.6k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed

  • Composer UI

    dxos/dxos

    A skill your agent uses when building or styling plugin UI with Composer's design system — the @dxos/react-ui packages.

    526 GitHub stars~9.3k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

More from NiuTrans/ToFu

  • Tofu Debugging

    NiuTrans/ToFu

    Debug a Tofu conversation or task by conversation ID — inspect the sidecar transcript, storage lineage, and app logs with debug/inspectconversation.py before touching the database.

    148 GitHub stars~283 tokensUpdated yesterday
    Auto-check passed

  • Tofu Frontend

    NiuTrans/ToFu

    Change the Tofu browser UI — edit retained sources under frontend/src/ and rebuild with npm run build:frontend, never editing generated bundles under static/ or frontend/src/runtime/app-runtime.js.

    148 GitHub stars~213 tokensUpdated yesterday
    Auto-check passed

  • Goal Coordinator

    NiuTrans/ToFu

    Coordinate one Tofu evolution goal through owner conversation, new materials, experimental reports, executor assignments and explicit update acknowledgements.

    148 GitHub stars~889 tokensUpdated yesterday
    Auto-check passed

Categories

Questions about Tofu Design System

What does Tofu Design System do?

Build NEW pages, features, or standalone project UIs (翻译项目/企业项目/新页面/新项目 UI, translation tools, enterprise apps, dashboards) on the Tofu design system — every control from frontend/src/ui factories…. Tofu Design System is an agent skill from NiuTrans/ToFu. Build NEW pages, features, or standalone project UIs (翻译项目/企业项目/新页面/新项目 UI, translation tools, enterprise apps, dashboards) on the Tofu design system — every control from frontend/src/ui factories and every value from design tokens; never hand-rolled CSS, one-off buttons, or raw hex/px spacing.

When should I use Tofu Design System?

Tofu Design System fits situations like: tasks that involve Design systems; tasks that involve Design tokens; tasks that involve Translation.

How do I install Tofu Design System in Claude Code?

Run `npx skills add NiuTrans/ToFu --skill tofu-design-system -a claude-code`. Or copy the skill folder (.agents/skills/tofu-design-system in NiuTrans/ToFu) into .claude/skills/tofu-design-system in your project. Claude Code loads it when a task matches its description.

How do I install Tofu Design System in Codex?

Run `npx skills add NiuTrans/ToFu --skill tofu-design-system -a codex`. Or copy the skill folder (.agents/skills/tofu-design-system in NiuTrans/ToFu) into .agents/skills/tofu-design-system in your project. Codex loads it when a task matches its description.

Can I use Tofu Design System 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 NiuTrans/ToFu --skill tofu-design-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tofu-design-system, .gemini/skills/tofu-design-system, .github/skills/tofu-design-system and .opencode/skills/tofu-design-system in your project.

What does Tofu Design System need to run?

Going by SKILL.md and its folder, Tofu Design System needs the command-line tools its instructions call (python3 and npm). Our summary lists: Python 3.

Does Tofu Design System access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Tofu Design System 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 Tofu Design System use?

Tofu Design System is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tofu Design System use?

About 620 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Tofu Design System?

Skills that share tags, products or a category with Tofu Design System: Tsh Implementing Frontend (TheSoftwareHouse/copilot-collections, 284 stars), Composer UI (dxos/dxos, 526 stars), Figma Design System Builder (warpdotdev/warp, 65k stars) and Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tofu Design System?

NiuTrans (a GitHub organization) maintains it in NiuTrans/ToFu, which has 148 GitHub stars. The repository was last updated on October 10, 2026.

Source: NiuTrans/ToFu on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.