响应式网页设计生成

技能简介

将产品需求转化为生产级前端代码，采用现代CSS框架实现自适应布局，内置自动化测试流水线，通过Playwright验证跨浏览器渲染、交互功能及无障碍标准达标情况。

能做什么

• 设计组件结构与交互模式
• 沉淀可复用的界面规范
• 支持前端页面与组件实现

使用说明

• 明确组件目标和使用场景。
• 设计结构、样式与交互规范。
• 联调实现并复核可复用性。

npm install -g @playwright/mcp-server

"command": "npx",

英文名

Web Design Builder

输入与输出

见下方输入与输出表格。

风险提示

• 涉及外部平台接口、账号或权限时，先确认授权边界与数据访问范围。
• 自动生成或自动执行结果应保留人工复核，避免直接替代最终业务判断。
• 若处理内部资料、客户信息或经营数据，应先完成脱敏与权限控制。

来源信息

原始链接：https://github.com/rknall/claude-skills
来源类型：GitHub 开源仓库