mcpField
F
frontend-ui-ux

frontend-ui-ux

github.com/yeachan-heo设计与 UI40.4k66 次安装今天更新
代码仓库

关于 frontend-ui-ux

面向 Claude 工作流的前端 UI/UX 技能，可将设计任务交给 Gemini MCP，或回退到 Claude 设计 Agent。涵盖组件实现、响应式布局、设计一致性和无障碍要求。

主要功能

  1. 01将前端任务路由给设计 Agent
  2. 02Gemini MCP 与 Claude Agent 回退
  3. 03组件设计与实现
  4. 04响应式布局支持
  5. 05设计一致性与无障碍

适用场景

  1. 01设计并实现 UI 组件
  2. 02适配不同屏幕尺寸的布局
  3. 03检查设计系统一致性
  4. 04处理无障碍要求

MCP 相关

执行设计任务前会发现 MCP 工具，并以设计师角色调用 `mcp__g__ask_gemini`；未发现 MCP 工具时则改用 Claude 设计 Agent。

安装

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

$npx skills add https://github.com/yeachan-heo/oh-my-claudecode --skill frontend-ui-ux

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

详细介绍

前端 UI/UX 命令

将前端工作路由到 designer Agent 或 Gemini MCP。

用法

/oh-my-claudecode:frontend-ui-ux <design task>

路由

首选：MCP 直连

在首次使用 MCP 工具前，调用 ToolSearch("mcp") 以发现延迟加载的 MCP 工具。 对于设计任务，使用 mcp__g__ask_gemini 并设置 agent_role: "designer"。 如果 ToolSearch 未找到任何 MCP 工具，请使用下方的 Claude Agent 回退方案。

回退：Claude Agent
Task(subagent_type="oh-my-claudecode:designer", model="sonnet", prompt="{{ARGUMENTS}}")

能力

  • 组件设计与实现
  • 响应式布局
  • 设计系统一致性
  • 无障碍合规

任务：{{ARGUMENTS}}

评论

支持 Markdown