iflytek
What is the Skillhub Design skill?
Skillhub Design is a design skill by iflytek for Claude Code, Cursor, Codex and other AI coding agents. SkillHub 页面、主题和组件视觉工作的入口。读取仓库随附的主题、完整组件契约、设计规范和实际 React API，按需加载并核对正文完整性。
先读 .trellis/spec/frontend/index.md 和 design-system.md，按任务选择视觉基础、组件与质量规范。 按 .trellis/spec/workflow/context-reading.md 有界读取和恢复；无需用户手动触发本 Skill。
- Author
- iflytek
- Pack
- iflytek/skillhub (25 skills)
- Category
- Design, #579 of 606
- Alyn Score
- 48 / 99
- Files
- 1
- License
- Apache-2.0
- Last updated
- 18 h ago
- Works with
- Claude Code, Claude, Cursor, Codex, Gemini CLI, Copilot
Skillhub Design compared to similar skills
| Skill | Alyn Score | GitHub stars | Updated |
|---|---|---|---|
| Skillhub Design · iflytek | 48 | 5.4k | 18 h ago |
| Audio Design · gamedev-skills | 81 | 8.4k | 10 h ago |
| Design To Code · davila7 | 77 | 33k | 5 h ago |
| Stitch::Extract Design Md · Google Labs | 72 | 8.7k | 3 months ago |
Install Skillhub Design
Pick your agent. Every command is ready to paste.
npx alyn-cli add skillhub-designDetects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.
npx skills add iflytek/skillhub --skill skillhub-designOr use the open skills CLI directly.
01
Install it
Run the command above, or upload the folder in Claude.
02
Ask naturally
Describe the task. Your agent loads skillhub-design when the request matches its description.
03
Name it if needed
If it does not trigger, say “use the skillhub-design skill”. In Codex, type $skillhub-design.
SkillHub 视觉工作
先读 .trellis/spec/frontend/index.md 和 design-system.md，按任务选择视觉基础、组件与质量规范。
按 .trellis/spec/workflow/context-reading.md 有界读取和恢复；无需用户手动触发本 Skill。
- 主题：读取
design-system/skillhub中的主题与相关规范，再核对web/src/index.css与web/tailwind.config.ts的实际映射。 - 组件：读取核心包中所用组件的完整 contractData，再核对 shared/ui、调用方和测试，保留受控状态、键盘、焦点与权限。
- 页面：读取页面模式和相关业务契约，不从原型推断业务能力。
- 读取：使用
scripts/read-design-system.py默认读取分支内核心资源；主题/组件/规范按任务选择并逐页补齐。只有用户指定其他资源时才使用--library PATH，不隐式替换默认来源。 - 检查：使用实施阶段相同的适用规范，按影响运行工程检查及浏览器验收。只读审查同样核对必需正文，不能以未运行测试为由省略质量要求。
可用 python3 scripts/read-context.py check --source .trellis/spec/frontend/design-system.md 核对正文送达，
再追加本次实际依赖的来源。只读任务无需写任务清单。来源缺失、截断或变化时先补读，
不以目录、哈希或过去的检查通过替代当前完整正文，也不声称遵循未取得的外部设计契约。
Tips for Skillhub Design
- • Start a fresh session after installing so your agent picks up the new skill.
- • It is part of a pack with 25 skills. Install only the ones you need with --skill to keep triggers precise.
- • If two skills overlap, mention the one you want by name.
Questions about Skillhub Design
What does the Skillhub Design skill do?
SkillHub 页面、主题和组件视觉工作的入口。读取仓库随附的主题、完整组件契约、设计规范和实际 React API，按需加载并核对正文完整性。
How do I install Skillhub Design?
Run "npx alyn-cli add skillhub-design" in your project. The Alyn CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.
Does Skillhub Design work in Cursor and Codex?
Yes. Skillhub Design uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.
What is a good alternative to Skillhub Design?
Audio Design by gamedev-skills is the highest-ranked similar skill from another creator, with an Alyn Score of 81 compared to 48 for Skillhub Design.
Is Skillhub Design free?
Skillhub Design is open source on GitHub under the Apache-2.0 license. It is free to install; check the license before commercial use.
Who made Skillhub Design?
Skillhub Design is published by iflytek in the iflytek/skillhub repository, together with 24 other skills.
