Claude Code Meepliton ui-design：先对齐桌游页面设计与前端方案
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/ui-design/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/ui-design/`，把核对后的文件保存为 `.claude/skills/ui-design/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/ui-design`。
中文摘要
让 UX 与前端角色核对页面布局、组件边界、数据类型和键盘交互，再交付共同确认的实施计划。
SKILL.md 中文导读
可复现示例
游戏大厅设计要求复用 RoomCard，输入为 {mobilePx: 375, mobileColumns: 1, desktopPx: 1280, desktopColumns: 3}，所有卡片须能按键盘顺序访问。工作步骤
- 先整理不同宽度的布局及已有组件和交互状态。
- 由 UX 和前端共同核对可实现性后，记录类型、样式边界和验收。
验收方法
计划记录 {mobilePx: 375, mobileColumns: 1, desktopPx: 1280, desktopColumns: 3, reuse: 'RoomCard'}，并说明焦点顺序及负责的样式范围。
GitHub 原文 · 更新日期
适用环境
在 Claude Code 中打开 Meepliton 工作区，保留仓库的 ux、frontend 项目代理和现有组件库。
常见问题
为什么先由前端核对类型与组件？
设计依赖的数据和交互需要和现有模型相符。前端可以指出实现约束，UX 再确认替代方案仍达到原目的。