OpenClaw Skills 前端设计（Frontend Design）技能使用参考手册

概述

Frontend Design 是用于创建独特、生产级前端界面的 OpenClaw 技能，该技能专注于避免通用的 "AI 生成风格"，帮助用户创建具有高设计质量、视觉独特且达到生产级别的前端界面。当用户需要构建网页组件、页面、应用程序或美化现有界面时，可使用此技能生成富有创意、精致的代码和用户界面设计，告别千篇一律的 AI 美学风格。

该技能由 Anthropic 官方维护，在 ClawHub 平台上广受开发者欢迎，能够为 AI 助手赋予专业的前端设计能力，从排版、配色、动效到布局都提供了明确的设计指导，帮助用户打造令人印象深刻的前端界面。

技能信息

名称：frontend-design
描述：创建具有高设计质量、独特且达到生产级别的前端界面。当用户要求构建网页组件、页面或应用程序时使用此技能，生成富有创意、精致的代码，避免通用的 AI 美学风格。
版本：1.0.0
作者：steipete（Peter Steinberger）
许可证：Apache License 2.0
触发词："前端设计"、"界面美化"、"网页 UI 设计"、"前端界面优化"、"创建独特前端界面"

👤 作者：Peter Steinberger
🦞 官方地址：https://clawhub.ai/steipete/frontend-design
👉 Skills 下载地址：frontend-design-1.0.0.zip

设计思维

在编写代码之前，首先需要理解需求上下文并确定一个明确的设计方向：

1. 明确目的

这个界面需要解决什么问题？
目标用户是谁？他们的使用场景是什么？

2. 确定风格基调

选择一个明确的极端风格方向，例如：

极简主义
极繁主义
复古未来主义
有机自然风格
奢华精致风格
趣味玩具风格
杂志编辑风格
粗野主义风格
装饰艺术风格
柔和 pastel 风格
工业实用风格

3. 考虑约束条件

技术要求（使用的框架、性能要求、可访问性要求）
开发时间限制
兼容性要求

4. 打造差异化

什么让这个界面令人难忘？
有什么独特的设计元素能让用户记住这个界面？

关键原则：选择一个清晰的设计方向并精确执行。大胆的极繁主义和精致的极简主义都能成功，关键是要有明确的设计意图，而不是随意的设计。

然后实现满足以下要求的代码（HTML/CSS/JS、React、Vue 等）：

达到生产级别且功能完整
视觉上引人注目且令人难忘
具有清晰的美学观点，风格统一
每个细节都经过精心打磨

前端美学指南

1. 排版设计

选择美观、独特且有趣的字体，避免使用通用字体如 Arial、Inter、Roboto 等系统字体
使用有特色的标题字体搭配精致的正文字体
建立清晰的排版层次结构
合理设置行高、字间距和段落间距

2. 颜色与主题

坚持使用统一的美学风格，使用 CSS 变量确保颜色一致性
优先使用大胆的主色调搭配鲜明的点缀色，而不是平淡均匀的配色方案
确保颜色对比度符合可访问性标准
考虑深色模式和浅色模式的适配

3. 动效设计

使用动画增强用户体验和微交互
HTML 优先使用纯 CSS 实现动画效果，React 项目可使用 Motion 库
专注于高影响力的时刻：一个精心编排的页面加载动画（使用 animation-delay 实现 staggered 效果）比零散的微交互更能带来愉悦感
使用滚动触发动画和令人惊喜的悬停效果

4. 空间布局

使用出人意料的布局方式
尝试不对称布局、元素重叠、对角线流动、打破网格的元素
合理使用留白或控制元素密度，避免过于拥挤或空旷

5. 背景与视觉细节

不要默认使用纯色背景，创造有氛围和深度的背景效果
添加与整体美学风格匹配的上下文效果和纹理，例如：
- 渐变网格
- 噪点纹理
- 几何图案
- 分层透明效果
- 戏剧性阴影
- 装饰性边框
- 自定义光标
- 颗粒叠加效果

禁止使用的通用 AI 美学

过度使用的字体：Inter、Roboto、Arial、系统字体
陈词滥调的配色方案：特别是白色背景上的紫色渐变
可预测的布局和组件模式
缺乏特定上下文特色的千篇一律设计
重复使用常见的设计选择（例如 Space Grotesk 字体）

重要提示：实现复杂度要与美学愿景匹配。极繁主义设计需要复杂的代码和丰富的动画效果，而极简主义设计需要克制、精确和对间距、排版、微妙细节的关注。优雅来自于对设计愿景的完美执行。

使用方法

基本使用方式

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

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

示例使用场景

1. 创建新的前端界面

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

2. 美化现有界面

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

3. 创建前端组件

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

许可证信息

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

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

本许可证允许你：

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

需要遵守的条件：

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

元数据信息

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

{
  "ownerId": "kn70pywhg0fyz996kpa8xj89s57yhv26",
  "slug": "frontend-design",
  "version": "1.0.0",
  "publishedAt": 1767651960903
}