mcpField
F
frontend-design-system

frontend-design-system

github.com/akillness设计与 UI53341 次安装4 天前更新
代码仓库

关于 frontend-design-system

Frontend Design System 是一项兼容技能，供要求使用该确切名称的旧工作流和集成调用。它将实质性的 UI 系统工作转交给规范技能 `design-system`，而非作为独立默认入口。

主要功能

  1. 01兼容旧名称
  2. 02转向 `design-system`
  3. 03迁移与同步指引
  4. 04关联相邻 UI 技能

适用场景

  1. 01维护依赖旧文件夹名称的脚本
  2. 02处理明确指定 `frontend-design-system` 的请求
  3. 03将 UI 系统工作流迁移到 `design-system`

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/akillness/jeo-skills --skill frontend-design-system

安装后在 Claude Code 中输入/frontend-design-system确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

SKILL.toon
evals/
evals.json
references/
alias-routing.md
compact-surface-sync.md

详细介绍

前端设计系统

此技能是 design-system 的兼容性封装。它的存在是为了让旧工作流和精确名称集成能够继续运行，同时避免让前端 UI 系统领域看起来像是有两个同等优先级的默认技能。

何时使用此技能

  • 用户或工具明确要求使用 frontend-design-system
  • 设置、同步或迁移流程要求旧文件夹名/名称存在
  • 需要保持向后兼容，同时将实际设计系统工作转交给 design-system

不要将此技能选为一般 UI 系统设计工作的默认技能。

说明

步骤 1：确认别名意图

仅当旧名称本身很重要时才使用此别名。

适用情况：

  • 用户直接指定 frontend-design-system
  • 脚本或平台按字面引用文件夹名/名称
  • 在迁移或清理过程中保留兼容性

否则，请切换到 ../design-system/SKILL.md。

步骤 2：转向规范技能

先使用别名侧的资料包，然后跳转到规范技能以开展实质性的 UI 系统工作：

  • 别名路由说明：./references/alias-routing.md
  • 精简版/发现同步说明：./references/compact-surface-sync.md
  • 规范技能：../design-system/SKILL.md
  • 范围边界说明：../design-system/references/scope-boundaries.md
  • 相关技能：
    • ../ui-component-patterns/SKILL.md，用于实现层面的组件模式
    • ../responsive-design/SKILL.md，用于设备适配工作
    • ../web-accessibility/SKILL.md，用于无障碍审计/整改
步骤 3：在输出中保留兼容性

如果通过别名名称激活，请说明规范指导现在位于 design-system，以便后续维护集中到一个主要入口。

示例

示例 1：明确要求使用旧名称

输入：“使用 frontend-design-system 为我们的 SaaS 仪表板设计 UI 系统。” 输出：确认这是别名，然后应用规范的 design-system 指导，处理设计令牌、布局层级、动效规则和无障碍设计。

示例 2：一般 UI 系统问题

输入：“我们需要为一个共享组件的落地页和仪表板建立设计系统。” 输出：不要停留在别名上。直接转到 design-system。

最佳实践

  1. 将其视为重定向层，而不是独立的知识库。
  2. 将触发措辞限定在较窄范围内，以确保一般提示优先匹配 design-system。
  3. 每当底层 UI 系统指导发生变化时，优先更新规范技能。
  4. 在 README/设置/清单页面中明确说明规范状态与兼容性状态。

参考资料

  • ./references/alias-routing.md
  • ./references/compact-surface-sync.md
  • ../design-system/SKILL.md
  • ../design-system/references/scope-boundaries.md
  • ../ui-component-patterns/SKILL.md
  • ../responsive-design/SKILL.md
  • ../web-accessibility/SKILL.md

评论

支持 Markdown