把界面想法变成可以检查的页面
用清楚的目标、参考风格和页面状态指导 Agent 做界面。了解设计与网页测试 Skills，检查电脑、手机和深色模式下的效果，让页面既好看也能用。
适合想改进现有网页，或准备做一个小页面的人。
按这个顺序开始
描述页面要完成的事
说清用户是谁、最重要的操作是什么，再提供现有页面或参考图。约定保留的内容和功能，比单独说「做得高级一点」更容易得到合适结果。
先做一个页面
让 Agent 先沿用项目的组件、颜色和字体。设计 Skill 提供工作指导，是否能预览和测试还取决于 Agent 的工具与本机环境。
检查外观和交互
在宽屏与窄屏查看文字、滚动和按钮；切换明暗主题，再验证表单提交、失败反馈和返回路径。
调整这个设置页面，让它延续现有的粗边框和简洁风格。保持字段、保存行为和接口不变，优先改善分组、间距和按钮层级。请检查窄屏、深色模式、错误提示和键盘操作，给我预览后再扩大修改范围。
得到可打开的页面预览，并能逐项确认正常、空白、加载和失败状态；截图只代表外观，按钮仍需实际操作验证。
教程与常见问题
- 怎样把前端页面设计需求交给 AI Agent？
先打开包含前端代码的项目目录，再说清页面、用户和验收条件；分步实现后对照补丁与实际页面检查。
- 怎样检查 Agent 做出的代码改动？
先核对补丁文件，再查看本轮实际运行的测试和复核证据；没运行的检查不要当作已通过。
- 如何判断一个 Skill 适不适合自己的任务？
先匹配实际任务，再查看来源、Agent 兼容性、文件和权限；谨慎处理不熟悉的内容。
- 怎样从社区选择并安装一个 Skill？
社区页面用于发现资源；实际安装应在客户端审阅兼容性、文件和冲突后确认。
- Skill 已安装，怎样让 Agent 在任务中使用它？
已安装不等于已启用；按 Agent 的 Skills 管理和兼容方式应用，然后在新会话验证。
- Skill 显示已安装，为什么 Agent 没有使用？
安装只是把 Skill 放到本机；还要检查启用状态、权限和兼容性，再在目标 Agent 或当前工作区明确选择。
按任务了解相关 Skills
先看用途和准备条件，再决定是否需要。以下是来源阅读说明；社区是否已收录、客户端是否兼容，以各自页面为准。
为网页界面确定鲜明的设计方向
frontend-design从产品对象、受众和用途出发，先选定视觉方向，再落实到排版、色彩、布局和细节。适合制作或重塑网页、组件与仪表盘。
准备、示例与检查方法
- 使用前准备
- 提供界面用途、目标用户、技术框架和无障碍或性能约束。已有产品应补充品牌和设计系统要求。
- 示例任务
- 为一个独立咖啡品牌设计首页。先说明受众、视觉概念、字体与配色，再实现响应式页面，并检查窄屏布局和键盘可用性。
- 怎么检查结果
- 检查视觉选择是否服务于产品内容，页面是否可用、响应式且符合项目约束。避免只追求装饰效果。
用浏览器验证本地 Web 应用
webapp-testing为本地运行的 Web 应用规划并执行 Playwright 浏览器检查，观察页面行为、控制台和截图。适合验证真实交互流程。
准备、示例与检查方法
- 使用前准备
- 提供启动命令、测试地址、目标流程和测试账号或数据。避免使用生产账户及真实付款等有副作用的操作。
- 示例任务
- 启动本地商店并用 Playwright 检查搜索、筛选和空结果状态；保存关键页面截图，报告复现步骤和控制台错误。
- 怎么检查结果
- 确认页面已完成加载，断言覆盖用户可见结果，并记录失败步骤。不要仅凭脚本执行成功就判断体验正常。
设计清楚、容易使用的 API 与模块接口
api-and-interface-design先明确输入、输出、错误和兼容约束，再实现接口。适合新建 API、前后端协作和修改已有公共接口。
准备、示例与检查方法
- 使用前准备
- 提供真实调用场景和旧调用方依赖的行为。若已有用户，说明哪些字段和错误格式必须兼容。
- 示例任务
- 为任务列表设计分页接口，列出请求参数、返回结构、错误和边界情况，兼容现有调用方。先给设计与示例，不直接修改服务端。
- 怎么检查结果
- 检查分页、空结果、权限错误和旧调用方兼容性。不能只因为测试通过，就认为改变公共行为没有影响。
通过 RunComfy 完成图片生成与编辑任务
gpt-image-2这份 Skill 使用 RunComfy 的工具与服务。适合把图片需求整理为生成或编辑任务，不代表 Lumoswitch 已提供同名模型或免费出图额度。
准备、示例与检查方法
- 使用前准备
- 需要 RunComfy CLI、对应账号和可用服务权限。费用与额度由该服务决定，不能用 Lumoswitch 的文本模型余额代替。
- 示例任务
- 帮我准备一张活动海报的生成方案，说明尺寸、画面布局、文字和需要保留的元素。先展示方案与所需服务，确认后再生成。
- 怎么检查结果
- 确认实际调用服务、费用和输出要求。编辑图片时检查需要保留的文字、人物和布局，不要只看缩略图。