关于 oma-design
oma-design 是用于定义、创建和验证项目设计系统的设计技能,核心产物是 DESIGN.md。它帮助团队制定视觉方向、组件指引,并审查响应式布局、无障碍和界面质量。
主要功能
- 01创建或修订 DESIGN.md
- 02制定字体、颜色和布局方向
- 03提供组件与设计系统指引
- 04审查响应式表现和无障碍
- 05检查界面反模式
适用场景
- 01为项目建立设计系统文档
- 02审查现有界面的视觉与交互质量
- 03为网站或应用改版确定设计方向
- 04在前端实现前提供组件指引
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ first-fluke/ oh-my-agent --skill oma-design安装后在 Claude Code 中输入/oma-design确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
reference/accessibility.mdcolor-and-contrast.mdcomponent-patterns.mdmotion-design.mdresponsive-design.mdshader-and-3d.mdspatial-design.mdtypography.mdvisual-hierarchy.mdresources/anti-patterns.mdasset-strategy.mdchecklist.mddesign-md-spec.mddesign-tokens.mderror-playbook.mdexecution-protocol.mdgetdesign-fetcher.mdprompt-enhancement.mdredesign-protocol.mdstitch-integration.md详细介绍
oma-design
调度
目标
负责设计的专家,用于定义、创建和验证项目设计系统。 DESIGN.md 是核心产物;所有设计工作都围绕它展开。
意图特征
- 用户要求设计系统、
DESIGN.md、视觉方向、字体排印、颜色、动效、无障碍设计、反模式审查或组件指导。 - 用户需要在前端实现前确定设计方案,或希望从设计角度审查 UI 质量。
适用场景
- 定义或修订项目设计系统
- 创建或审查
DESIGN.md - 选择字体排印、颜色、布局、动效或组件方向
- 审查 UI 工作的响应式行为、无障碍设计和视觉质量
- 重新设计现有网站或应用(保留模式与全面改版模式)
- 使用来自 Stitch MCP 或 getdesign 的可选供应商灵感
不适用场景
- 实现前端组件或应用 UI -> 使用
oma-frontend - 规划产品范围或任务拆分 -> 使用
oma-pm - 后端、数据库、基础设施或移动端实现 -> 使用相关专家技能
- 对视觉、交互和无障碍设计以外的问题进行常规质量或安全审查 -> 使用
oma-qa
预期输入
- 产品、品牌、受众、平台以及 UI/设计问题
- 现有的
.design-context.md、DESIGN.md、截图、参考资料或组件限制 - 无障碍设计、响应式设计、语言和实现限制
预期输出
- 设计方向、修订后的
DESIGN.md、审查结果、组件指导或交接说明 - 以响应式设计优先且符合 WCAG 的设计建议
- 使用 getdesign 时提供可选的供应商种子归属说明
outputs:
- name: design-doc
description: Updated DESIGN.md when the run materially advances the design system
artifact: "DESIGN.md"
required: false
- name: design-context
description: Refreshed .design-context.md snapshot when a discovery pass runs
artifact: ".design-context.md"
required: false
依赖项
.design-context.md和DESIGN.md- 设计资源、参考资料、反模式目录以及可选的 Stitch/getdesign 集成
- 提供组件建议时所需的 shadcn/组件库上下文
控制流特征
- 根据上下文缺失情况、CJK 语言支持、供应商种子可用性和反模式审查结果分支处理
- 可读取/写入设计文档并调用可选的设计/供应商工具
- 仅在存在尚未解决的重要选择时询问设计方向;否则遵循提供的设计简报
结构流程
入口
- 阅读相关的现有设计上下文;仅在当前决策需要时收集缺失的上下文。
- 确定目标受众、平台、内容语言和设计产物。
- 判断是否需要供应商灵感或 Stitch 集成。
转换
- 如果调研阶段显著影响设计系统决策,则创建
.design-context.md。 - 如果目标是现有网站/应用,则加载
resources/redesign-protocol.md,并在提出方案前将其归类为保留模式或全面改版模式。 - 如果需要支持 CJK,则优先选择适用于 CJK 的字体。
- 如果获取供应商种子失败,则选择重试、在不使用种子的情况下继续,或中止。
- 如果发现反模式,则在最终确定前提出替代方案。
失败与恢复
- 如果设计上下文不足,则提出一个重点明确的澄清问题,或说明假设并给出方案。
- 如果无法获取供应商灵感,则继续进行本地设计综合。
- 如果无障碍检查未通过,则在交接前进行修订。
退出
- 成功:设计产物针对具体项目,响应式设计优先、具备无障碍性且可供审查。
- 部分成功:明确说明缺失的上下文、供应商故障或尚未解决的设计决策。
逻辑操作
工具与手段
- 设计参考资料、反模式目录、检查清单、Stitch 集成、getdesign 获取器
- 需要组件指导时提供 shadcn CLI 建议
标准工作流路径
1. Inspect relevant existing context; create `.design-context.md` only when substantive discovery is needed.
2. Use the chosen direction. Offer alternatives only for requested exploration or a material unresolved design decision.
3. Generate or revise `DESIGN.md`, then run the design checklist.
可选的供应商种子发现:
bunx getdesign@latest list
资源范围
| 范围 | 资源目标 |
|---|---|
LOCAL_FS | .design-context.md、DESIGN.md、设计资源 |
CODEBASE | 现有 UI 和组件模式 |
NETWORK | 可选的 getdesign/供应商参考资料 |
PROCESS | 可选的 CLI/工具调用 |
前置条件
- 目标设计问题和产物可以明确识别。
- 已存在设计上下文,或可以通过设置创建。
影响和副作用
- 可能创建或修改
DESIGN.md和设计上下文产物。 - 可能获取供应商种子素材并附加 MIT 署名信息。
- 不会直接实现前端代码。
护栏
- 检查相关的现有上下文和设计令牌。对于实质性的探索工作,创建
.design-context.md,而不是为每次视觉调整都创建。 - 默认使用系统字体栈(
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)。只有在项目有充分理由时才添加自定义字体。 - 如果服务支持 CJK 语言(ko/ja/zh):优先选择适配 CJK 的字体(Pretendard Variable > Noto Sans CJK > system-ui 回退)。如果仅支持拉丁字母,则选择适合目标受众的字体。
- 严格杜绝反模式;拒绝 AI 垃圾设计。参见
resources/anti-patterns.md。 - 使用语义化名称和十六进制值命名颜色:“深海藏青(#1a2332)”,而不是“深蓝色”。
- 推荐组件时附上安装命令(shadcn CLI)。
- 所有输出都必须响应式优先(默认采用移动端布局,再逐步增强)。
- 所有设计至少符合 WCAG AA 标准。
- Stitch MCP 为可选项;所有阶段都可以在不使用它的情况下进行。
- 如果用户要求探索设计,或尚未确定重要设计方向,则提供不同方向;如果已有选定方向,则沿用该方向。
- 当重要设计假设会影响结果时,明确说明。只询问尚未确定的选择;无需使用固定的开场白。
- 改版应遵循
resources/redesign-protocol.md:判断应保留还是彻底改版,动手前先审核,绝不悄悄更改 URL、导航标签、表单字段名称或品牌标志。 - 视觉素材应遵循
resources/asset-strategy.md:优先使用图像生成(oma-image),其次使用 picsum 种子,最后才使用带标签的占位符。禁止使用 div 模拟截图。 - 一致性约束:每个页面使用一种强调色、一套圆角体系和一种主题。尽早锁定这些设置,并在第 6 阶段依据清单中的第 6 节“机械检查”进行审核。
参考资料
resources/execution-protocol.md:选定的设计操作及其阶段resources/redesign-protocol.md:现有网站改版resources/design-md-spec.md:创建或修改 DESIGN.mdresources/checklist.md:适用的视觉验证检查项resources/anti-patterns.md:受影响的视觉或文案类别resources/getdesign-fetcher.md:明确相关的供应商灵感素材resources/stitch-integration.md:用户要求的 Stitch 操作resources/asset-strategy.md:选择视觉素材resources/design-tokens.md:设计令牌导出resources/prompt-enhancement.md:不完整的设计简报resources/error-playbook.md:观察到的设计工具故障reference/visual-hierarchy.md:7 项层次原则(对齐、颜色、对比、邻近、尺寸、纹理、时间)reference/typography.md:字体选择、字号层级、CJKreference/color-and-contrast.md:色彩心理学、WCAG 对比度reference/spatial-design.md:8px 网格、断点、间距reference/motion-design.md:motion/react、GSAP、Three.js、ogl、Temporal UXreference/responsive-design.md:移动端优先、主题系统reference/component-patterns.md:shadcn/Aceternity/React Bits 组件目录reference/accessibility.md:WCAG 2.2、ARIA、焦点reference/shader-and-3d.md:WebGL、R3F、ogl、性能
评论
支持 Markdown