09.frontend-design skills技能的使用

 

 下周skills放在 .claude目录下，在.claude目录下只对当前的项目有效，下面是cluade code自带的skills

skills放在.claude目录下之后，再 claude code要使用/skills命令重新加载skills

 

基本使用方式

在与 OpenClaw 交互时，使用触发词结合具体需求描述，例如：

 

• "使用 frontend-design 技能，创建一个面向设计师的作品集展示页面，采用复古未来主义风格"
• "使用 frontend-design 技能，优化我的电商网站产品详情页，提升视觉吸引力"
• "使用 frontend-design 技能，为我的仪表盘界面添加动效和视觉层次"

 

示例使用场景

 

1. 创建新的前端界面

 

1. 使用frontend-design技能，创建一个面向年轻人的音乐流媒体应用登录页面，采用趣味玩具风格，要求：
2. - 有独特的登录表单设计
3. - 包含音乐相关的视觉元素
4. - 有流畅的页面加载动画
5. - 支持深色模式

 

2. 美化现有界面

 

1. 使用frontend-design技能，优化我的博客网站首页，当前界面过于简单，要求：
2. - 提升视觉层次感
3. - 添加独特的排版设计
4. - 为按钮和链接添加悬停效果
5. - 整体风格改为杂志编辑风格

 

3. 创建前端组件

 

1. 使用frontend-design技能，创建一个用于展示产品的卡片组件，采用奢华精致风格，要求：
2. - 包含产品图片、名称、价格和描述
3. - 有精美的悬停动画效果
4. - 支持响应式设计
5. - 与整体电商网站风格统一

 

许可证信息

该技能采用 Apache License 2.0，完整的许可条款如下：

 

1. Apache License Version 2.0, January 2004 http://www.apache.org/licenses/

本许可证允许你：

 

• 复制、修改、分发本技能
• 用于商业用途
• 私有使用
• 对修改后的作品进行再分发

需要遵守的条件：

 

• 必须向其他接收者提供本许可证的副本
• 对修改的文件必须标注修改说明
• 保留原有的版权、专利、商标和归因声明
• 如果原作品包含 NOTICE 文件，修改后的作品也必须包含这些归因声明

 

元数据信息

该技能的元数据信息如下：

 

1. {
2. "ownerId": "kn70pywhg0fyz996kpa8xj89s57yhv26",
3. "slug": "frontend-design",
4. "version": "1.0.0",
5. "publishedAt": 1767651960903
6. }

 

 

以上内容是否对您有帮助：