关于 fusion-design
Fusion Design 是面向 Fusion 生态前端代码编写与审查的参考技能，汇集必须遵循的设计规则，并要求编码前查阅对应文档。若项目根目录存在 DESIGN.md，则以其作为该应用设计决策的权威依据。
主要功能
- 01EDS 字体排版要求
- 02EDS 间距变量规则
- 03导航与布局参考
- 04操作和空状态指引
- 05错误与上下文帮助模式
- 06本地 DESIGN.md 优先规则
适用场景
- 01实现 Fusion 前端页面
- 02审查 Fusion 界面代码
- 03检查间距与字体选择
- 04应用 DESIGN.md 中的本地设计决策
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/fusion-design确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
CHANGELOG.mdreferences/actions.mdcontextual-help.mdeds-typography.mdempty-states.mderror-messages.mdlayout-centered-content.mdlayout.mdnavigation-sidemenu.mdnavigation-tabs.mdspacing.md详细介绍
Fusion Design
适用场景
每当你在 Fusion 生态系统中编写或审查前端代码，并需要了解界面应如何呈现、表现或组织时。
不可妥协的原则
无论任务是什么，这些原则都适用于你编写的每个文件——不要等读完参考资料后才遵守，也绝不要输出违反这些原则的“占位内容”：
- 所有文本都使用 EDS
<Typography>。 绝不要使用裸露的<h1>–<h6>、<p>或<span>编写文本——即便只是临时标题或占位内容也不行。页面标题使用<Typography variant="h1">，正文使用<Typography variant="body_short">。请参阅references/eds-typography.md。 - 所有间距都使用 EDS 间距变量。 绝不要在
padding/margin/gap中硬编码px。请参阅references/spacing.md。
说明
此技能用于查阅资料。编写任何代码之前，请阅读所有参考文件——其中定义的是强制要求，而非可选的样式规范。
1. 阅读参考资料
| 主题 | 文件 |
|---|---|
| EDS Typography | references/eds-typography.md |
| 导航 — 侧边菜单 | references/navigation-sidemenu.md |
| 导航 — 标签页 | references/navigation-tabs.md |
| 布局 — 内容区域模式 | references/layout.md |
| 布局 — 居中内容 | references/layout-centered-content.md |
| 间距 | references/spacing.md |
| 操作 — 操作栏、破坏性操作、按钮位置 | references/actions.md |
| 空状态 | references/empty-states.md |
| 错误消息 | references/error-messages.md |
| 情境帮助（ℹ / ? 图标、密度） | references/contextual-help.md |
2. 检查本地 DESIGN.md
如果应用根目录下有 DESIGN.md，请先阅读。它是该应用设计决策的权威来源，会覆盖或补充参考规则。
3. 应用规则
按照这些规则实现 UI。如果不存在 DESIGN.md，且任务需要做出布局决策，请将其记录在该文件中。
评论
支持 Markdown