OpenCode + Skills 实战：一键生成企业网站

、暮雨而桐

925人浏览 · 2026-04-17 00:54:21

、暮雨而桐 · 2026-04-17 00:54:21 发布

前言

企业官网是企业的线上门户，传统开发周期长、成本高。Skills 提供了标准化、可复用的工作流，结合 AI 编辑器，可以零代码 / 低代码快速生成企业官网，大幅降低开发门槛与时间成本。

本文将从环境准备 → 需求梳理 → Skills 生成 → 代码导出完整实战。

环境准备（详细步骤）

1.0 Node.js安装

网址：https://nodejs.org/en/download

1.1 OpenCode 环境安装（Windows）

OpenCode 是基于 Claude Code 规范的本地 AI 编程工具，支持通过 Skills 工作流 自动完成项目开发、页面搭建、代码生成等任务。

OpenCode 官网地址：https://opencode.ai

命令提示符窗口下载

c:\User\xx>

安装命令：

npm install -g opencode-ai

安装完成后，验证是否安装成功：

opencode -v

出现版本号即表示安装完成。

1.2 下载 anthropics/skills 官方技能库

skills 是 Anthropic 官方提供的标准化技能工作流，包含企业网站开发、代码重构、项目构建、API 开发等预置流程。

由于国内直接访问 GitHub 较慢，我使用 国内中文文档 Anthropic Skills 中文文档 | Anthropic Skills 中文文档：

进入：GitHub - anthropics/skills: Public repository for Agent Skills · GitHubhttps://github.com/anthropics/skills

downlosd下载完成后，会得到一个 skills 文件夹，里面包含所有官方工作流配置。

1.3 配置项目级目录（关键）

为了让 OpenCode 能够识别并加载 Skills，需要配置系统环境变量：

1. 项目级目录（只对当前项目生效）

在你的项目根目录下，创建这样的结构：

你的项目文件夹/ --- 这里demo1
 └─ .opencode/  
        └─ skills/
            ├─ 技能目录1/
            │    ├─ SKILL.md （核心配置文件，必填）
            │    ├─ references/ （可选，参考资料）
            │    ├─ scripts/ （可选，脚本文件）
            │    └─ assets/ （可选，静态资源）
            └─ 技能目录2/
               └─ SKILL.md

示例：

配置完成后，将anthropics/skills 官方技能库中的frontend-design放置到：

1.4 启动 OpenCode 并加载 Skills

在demo1的「地址栏（Address Bar）」，也常被叫做「路径栏」，中使用cmd（英文）启动终端 。

在终端执行：

opencode

启动成功后，

切换模型：

点击黄线，我选择的是免费的。

在输入框中，进行提问：

环境搭建完成，可以直接使用 Skills 工作流全自动开发企业网站。

企业网站需求梳理

一个标准企业站必须包含：

首页（Banner、企业介绍、产品展示、新闻、底部）
关于我们
产品 / 解决方案
新闻动态
联系我们
底部版权 + 联系方式

设计风格：简约大气、商务风、响应式适配。

例如：

1. 主题：企业云盘服务

（面向企业客户的SaaS文件存储与协作平台）

2. 具体要求落地

模块	内容要求
顶部标题	“企业云盘 — 文件统一管理，团队实时协作”
3个产品卡片	① 全平台同步 ② 权限精细管控 ③ 历史版本回溯
优势对比（4条）	对比项：传输速度 / 安全性 / 团队协作 / 价格
底部按钮	【免费试用】（蓝色高亮）+ 【联系销售】