想做出让设计师点赞的前端页面？ 不想花时间研究设计，直接让 AI 帮你搞定配色、字体、布局？ 这篇安装教程，覆盖三个最主流的 AI 编程平台，手把手带你装好、用起来。
开头
前端开发者的一个普遍困境：
你会写代码，但页面做出来总是「差点意思」。 配色靠猜，字体靠系统默认，布局靠 Bootstrap。 结果就是做出来的东西能用，但不好看。
frontend-design 这个 skill 解决的就是这个问题。 它不是帮你写 HTML/CSS，是帮你建立设计思维，让 AI 生成「像设计师做的」页面。
今天这篇，是安装教程。 覆盖三个平台：OpenClaw、Claude Code、Codex。 以及一种更聪明的方式：通过 CC Switch 一键搞定。
一、前置准备
安装之前，确保你的环境满足以下条件：
通用要求：
- 网络畅通（需要访问 npm / GitHub）
- 磁盘空间：至少 500MB 空闲
按平台选一个：
| 平台 | 环境要求 |
|---|---|
| OpenClaw | QClaw 客户端，已完成基础配置 |
| Claude Code | Node.js 18+，npm 已安装 |
| Codex | 支持 Linux/macOS/Windows，CLI 环境 |
不确定有没有 Node.js？运行下面命令查一下：
css
node --version
npm --version如果提示「找不到命令」，先装 Node.js，官网 nodejs.org 下载安装包，一路点下一步即可。
二、通过 OpenClaw 安装（最简单）
OpenClaw 用户安装 frontend-design，是最简单的方式。
步骤一：找到这个 skill
在 OpenClaw 对话框里输入：
安装 frontend-design系统会自动调起 skillhub，搜索并列出结果。
步骤二：一键安装
找到 frontend-design 这条，点击「安装」。 等待几秒钟，出现「安装成功」的提示。
步骤三：验证是否装好
重新开一个对话，试试输入：
帮我做一个个人作品集页面如果 AI 响应并开始生成有设计感的页面代码，说明安装成功了。
如果提示找不到这个 skill，先运行
openclaw skills update更新一下本地索引，再重试。
三、通过 Claude Code 安装
Claude Code 用户通过 npm 全局安装。
步骤一：打开终端
macOS 用 Terminal，Windows 用 PowerShell 或 VS Code 内置终端。
步骤二：执行安装命令
npm install -g frontend-design-skill如果遇到权限报错（EACCES），加上 sudo：
sudo npm install -g frontend-design-skill步骤三：验证安装
css
frontend-design --version输出版本号（如 1.0.0）说明装好了。
步骤四：配置到 Claude Code
在 Claude Code 的配置文件里（通常在 ~/.claude/settings.json），加入一行：
json
"skills": ["frontend-design"]保存后重启 Claude Code 即可使用。
四、通过 Codex 安装
Codex 用户通过命令行安装。
步骤一：确认 Codex 已安装
css
codex --version提示找不到命令的话，先去官网安装 Codex CLI。
步骤二：安装 frontend-design
codex install frontend-design步骤三：激活 skill
bash
codex skills enable frontend-design步骤四：验证
codex skills list看到 frontend-design 在列表里，说明安装成功了。
五、通过 CC Switch 安装（最聪明的方式）
如果你已经在用 CC Switch 管理多平台配置，这条最适合你。
CC Switch 的 Skills 功能支持一键安装扩展，frontend-design 就在支持列表里。
步骤一：确认 CC Switch 是最新版本
css
ccswitch --version低于 1.4.0 的话，先更新：
sql
ccswitch update步骤二：安装 frontend-design
csharp
ccswitch skills add frontend-design这条命令会自动识别你当前激活的是哪个平台（OpenClaw / Claude Code / Codex），并把 skill 安装到对应位置。
步骤三：验证
ccswitch skills list看到 frontend-design 前面有勾选标记，即安装成功。
为什么说这是最聪明的方式？
- 不需要手动指定平台，CC Switch 自动判断
- 切换平台时，skill 配置跟着一起切换
- 一条命令搞定，不需要记三套不同的安装语法
这也是 CC Switch 作为「AI 编程工具配置管理器」的扩展能力体现------不只是切换 API 配置，还能统一管理所有的扩展能力。
六、第一次使用
安装完成后，来试试效果。
通用触发方式：
直接告诉它你想做什么，不需要写专业术语：
帮我做一个个人作品集页面
做一个科技感的产品介绍页
做一个适合设计师的深色主题作品展示页AI 会做什么？
以「做一个个人作品集页面」为例，AI 会：
- 分析需求，选定一个设计方向（比如「极简杂志风」）
- 决定配色方案（不只是蓝紫色）
- 选择一对有特色的字体组合
- 规划布局（打破三卡片模板）
- 加入一个让你「哇」一下的入场动画
- 输出完整的 HTML/CSS/JS 代码
你只需要描述想要的感觉，剩下的由 frontend-design 驱动 AI 完成。
七、常见问题
1. 网络超时，安装失败
原因： npm / GitHub 在国内访问不稳定。
解决方案：
ini
# 使用国内镜像
npm install -g frontend-design-skill --registry=https://registry.npmmirror.com或者给 npm 配置代理：
arduino
npm config set proxy http://127.0.0.1:7890
npm config set https-proxy http://127.0.0.1:7890（7890 是常见端口，换成你实际的代理端口）
2. 权限报错（EACCES）
原因： 全局目录没有写入权限。
解决方案：
bash
mkdir -p ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc然后重试安装命令。
3. Node 版本太低
原因： frontend-design 要求 Node.js 18 以上。
解决方案：
去 nodejs.org 下载 LTS 版本安装，或使用 nvm 管理多版本：
perl
nvm install 18
nvm use 184. OpenClaw 找不到 skill
原因： 本地索引过期。
解决方案：
sql
openclaw skills update更新完再试。
5. CC Switch 安装后不生效
原因： 没有重启当前终端。
解决方案：
关掉当前终端，重新打开，让环境变量生效。
八、效果展示
说了这么多，来看看 frontend-design 能做出什么。
个人作品集页面： 采用「杂志编辑风」，大标题居左，大图右置，文字与图片形成非对称布局。动效：页面加载时，标题字母依次滑入，图片从下方浮上来。
产品介绍页： 采用「科技极简风」，深色背景，荧光绿点缀，无卡片布局，用线条分隔不同模块。动效：滚动时触发视差效果，每个模块依次淡入。
移动端 H5 页面： 采用「柔和粉彩风」，圆角卡片，手写风格字体，留白充足。动效：点击按钮时，卡片轻微弹跳反馈。
以上效果均由 frontend-design 驱动 AI 生成，代码完整可运行，没有用任何截图或占位符。
九、适合谁？
个人开发者 有自己的小工具或作品，想做一个好看的展示页面，又不想研究设计。
设计师转码 有审美直觉但代码不熟，让 AI 帮你把设计想法转成代码。
创业者 想快速出 Landing Page，不需要完美，但要足够好看，提升访客的第一印象。
前端工程师 已经会做页面，但想让 AI 帮你做「更有设计感」的版本，用于参考或直接使用。
写在最后
frontend-design 不是一个普通的代码生成器。 它是一套设计思维的注入器。
当你告诉它「帮我做一个好看的页面」，它不是在生成一段 HTML，它是在替你做一个设计决策： 选什么风格、什么配色、什么字体、什么布局、什么动效。
这些决策，以前需要一个有经验的设计师来做。 现在，AI 可以帮你做了。
如果这篇内容对你有帮助，欢迎收藏备用。 有问题欢迎评论区留言交流。
点点赞和关注不迷路，后续还会分享更多 AI 工具与效率提升。
👨💻 H先生出品 | 专注 AI 工具与效率提升