SuperAPI AI 工具集

opensquad-dashboard-design

前端与建站

查看项目

更新于 10-16 09:50

技能介绍

用途:面向 opensquad 仪表盘的 2D 虚拟办公场景,处理房间布局、家具摆放、氛围调整、头像集成等设计与修改任务,凭截图验证确认结果。

主要流程:按阶段一理解需求(模糊时提一个问题)→阶段二截图诊断现状(自动探测仪表盘 URL:查看 dashboard/vite.config.ts 的 server.port、dashboard/package.json 的 --port,缺省 http://localhost:5173;使用 npx playwright screenshot --browser chromium "URL" "/tmp/dashboard-before.png" --viewport-size "1400x900")→阶段三给出按文件分组的方案并等待用户批准→阶段四按独立分组并行实现(RoomBuilder.ts、assetKeys.ts 与资源文件、palette.ts、AgentSprite.ts,遵循先副本资源、再注册键、再摆放、最后视觉调整的依赖顺序)→阶段五截图与自动质量清单核验并请求用户确认→阶段六根据反馈循环。另有阶段七完整精灵审查,仅在用户明确要求时触发,替代阶段二至六,包含清单梳理、截图、按尺寸/透明背景/语义位置/异常重叠四项逐精灵评估、写入 /tmp/sprite-review.md、按问题类型分组修复、重新审查与批准。

关键约定:禁止从零绘制像素画,必须使用 dashboard/public/assets/ 或 temp/pixel-assets/town/ 的现有资源;新精灵必须登记在 assetKeys.ts 的 FURNITURE_KEYS 与 FURNITURE_PATHS;避免硬编码像素,使用 MARGIN / 2、roomW / N 等相对表达式;深度按 Y 值画家算法排序(墙面装饰 0、地毯 -0.5、地面家具与桌子取 y、头像 y + 1、名牌 y + 99/101);布局常量 TILE=32、CELL_W=96、CELL_H=96、MARGIN=96、WALL_H=96。

限制与缺失:需运行仪表盘开发服务器(cd dashboard && npm run dev),URL 不可达时需先启动;具体资源清单与代码示例需查阅 .claude/skills/opensquad-dashboard-design/reference.md。其余收费、平台支持、效果等信息暂未提供。