Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
不二的个人IP设计系统。做HTML页面、个人网站、教程页面、介绍页面、landing page等任何前端设计时自动触发。包含品牌DNA和多个场景子规范。
Install Esther Design System
$ npx skills add esthersjw/esther-design-system --skill esther-design-system -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install esthersjw/esther-design-system esther-design-system --agent claude-codeProject 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/
Install the "esther-design-system" agent skill from https://github.com/esthersjw/esther-design-system/tree/main into .claude/skills/esther-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "esther-design-system", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add esthersjw/esther-design-system --skill esther-design-system -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install esthersjw/esther-design-system esther-design-system --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "esther-design-system" agent skill from https://github.com/esthersjw/esther-design-system/tree/main into .agents/skills/esther-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "esther-design-system", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add esthersjw/esther-design-system --skill esther-design-system -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install esthersjw/esther-design-system esther-design-system --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "esther-design-system" agent skill from https://github.com/esthersjw/esther-design-system/tree/main into .cursor/skills/esther-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "esther-design-system", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add esthersjw/esther-design-system --skill esther-design-system -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install esthersjw/esther-design-system esther-design-system --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "esther-design-system" agent skill from https://github.com/esthersjw/esther-design-system/tree/main into .gemini/skills/esther-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "esther-design-system", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install esthersjw/esther-design-system esther-design-systemInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add esthersjw/esther-design-system --skill esther-design-system -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "esther-design-system" agent skill from https://github.com/esthersjw/esther-design-system/tree/main into .github/skills/esther-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "esther-design-system", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add esthersjw/esther-design-system --skill esther-design-system -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install esthersjw/esther-design-system esther-design-system --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "esther-design-system" agent skill from https://github.com/esthersjw/esther-design-system/tree/main into .opencode/skills/esther-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "esther-design-system", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
esther-design-system- GitHub stars
- 537
- Token cost
- ~638 tokens
- SKILL.md length
- 168 words
- Files
- 30 (incl. references, assets)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- CC-BY-NC-4.0
At a glance
不二的个人IP设计系统。做HTML页面、个人网站、教程页面、介绍页面、landing page等任何前端设计时自动触发。包含品牌DNA和多个场景子规范。
- Works in 7 steps: 澄清需求 → 读规范 → 拷模板 → …
- Tasks that involve Design systems
- SKILL.md covers 使用方式（7步工作流）, 场景类型速查, 关键原则 and 禁忌
- Runs JavaScript scripts from its folder
What it does
Esther Design System is an agent skill from esthersjw/esther-design-system. 不二的个人IP设计系统。做HTML页面、个人网站、教程页面、介绍页面、landing page等任何前端设计时自动触发。包含品牌DNA和多个场景子规范。
Its SKILL.md is about 640 tokens, which your agent loads only when the skill is triggered. The skill folder holds 30 other files, including reference files and assets (for example `README.md`, `assets/html2canvas.min.js` and `brand-dna.md`).
It sits in Frontend & Design, covering Design systems and Landing pages. It works with WeChat.
When your agent uses it
- Tasks that involve Design systems
- Tasks that involve Landing pages
Example prompts
- “/esther-design-system”
Requirements
- Node.js
Workflow steps
7 steps, taken from the step headings in SKILL.md.
- 澄清需求
- 读规范
- 拷模板
- 选布局组合
- 选组件填充
- 自检
- 交付
What it can do on your machine
Read from SKILL.md and the folder at commit e5d8a2e. 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
Ships script files (JavaScript, from the files we listed), which the agent can run.
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
Esther Design System loads about 638 tokens when it runs, and up to ~46k if it reads all its reference files. Until then it costs about 24 tokens; SKILL.md has 168 words of instructions outside code blocks.
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
Its licence (CC-BY-NC-4.0) doesn't allow us to republish the file, so here is its outline and opening line. It has 168 words (~638 tokens).
- name
- esther-design-system
- author
- ESTHER不二 (esthersjw)
- license
- CC BY-NC-SA 4.0
- repo
- https://github.com/esthersjw/esther-design-system
Files
SKILL.md and 29 other files (references, assets) in the repository root of esthersjw/esther-design-system.
- SKILL.md
- .gitignore
- LICENSE
- README.md
- assets/avatar-placeholder.svg
- assets/demo-wechat.html
- assets/design-system-overview-final.png
- assets/html2canvas.min.js
- assets/template-app.html
- assets/template-cards.html
- assets/template-landing.html
- assets/template-tutorial.html
- assets/template-wechat.html
- brand-dna.md
- components-preview.html
- demo-app.html
- demo-cards.html
- demo-landing.html
- demo-layouts.html
- demo-readme-tutorial.html
- … and 10 more
Open the folder on GitHubat commit e5d8a2e
Compare with similar skills
Esther 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Esther Design System this skillesthersjw/esther-design-system | 537 | — | ~638 | Automated safety check: Pass | CC-BY-NC-4.0 | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Design Taste Frontendcaorushizi/oss-client | 113 | 22 repos | ~22k | Automated safety check: Pass | None | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Cc DesignZeroZ-lab/cc-design | 827 | — | ~2.2k | Automated safety check: Notes | None |
Similar skills
Design Taste Frontend
caorushizi/oss-client
Anti-slop frontend skill for landing pages, portfolios, and redesigns.
UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
Cc Design
ZeroZ-lab/cc-design
High-fidelity HTML design and prototype creation. An agent skill from ZeroZ-lab/cc-design.
Auteur
agiwhitelist/auteur
Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…
Related
Works with
Categories
Questions about Esther Design System
What does Esther Design System do?
不二的个人IP设计系统。做HTML页面、个人网站、教程页面、介绍页面、landing page等任何前端设计时自动触发。包含品牌DNA和多个场景子规范。. Esther Design System is an agent skill from esthersjw/esther-design-system.
When should I use Esther Design System?
Esther Design System fits situations like: tasks that involve Design systems; tasks that involve Landing pages.
How do I install Esther Design System in Claude Code?
Run `npx skills add esthersjw/esther-design-system --skill esther-design-system -a claude-code`. Or copy the skill folder (the esthersjw/esther-design-system repository) into .claude/skills/esther-design-system in your project. Claude Code loads it when a task matches its description.
How do I install Esther Design System in Codex?
Run `npx skills add esthersjw/esther-design-system --skill esther-design-system -a codex`. Or copy the skill folder (the esthersjw/esther-design-system repository) into .agents/skills/esther-design-system in your project. Codex loads it when a task matches its description.
Can I use Esther 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 esthersjw/esther-design-system --skill esther-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/esther-design-system, .gemini/skills/esther-design-system, .github/skills/esther-design-system and .opencode/skills/esther-design-system in your project.
What does Esther Design System need to run?
Going by SKILL.md and its folder, Esther Design System needs JavaScript for the scripts in its folder. Our summary lists: Node.js.
Does Esther Design System 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 Esther 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 Esther Design System use?
Esther Design System is published under the CC-BY-NC-4.0 licence (declared in SKILL.md).
How many tokens does Esther Design System use?
About 638 tokens (SKILL.md is roughly 2.6k 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 45k tokens, read only when the agent opens those files.
What are the alternatives to Esther Design System?
Skills that share tags, products or a category with Esther Design System: Impeccable (bestofjs/bestofjs, 3.1k stars), Design Taste Frontend (caorushizi/oss-client, 113 stars), UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars) and Design Style (Castor6/tactus, 376 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Esther Design System?
esthersjw (a GitHub user) maintains it in esthersjw/esther-design-system, which has 537 GitHub stars. The repository was last updated on August 9, 2026.
Source: esthersjw/esther-design-system on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.