如何使用 OpenCode
制作好看的前端页面
你的 OpenCode 生成的页面是不是总像 2010 年的产物？问题不在 AI，而在你没有给它"设计参考"。本指南教你用 Design Extractor 提取任意网站的配色、字体、布局规范，喂给 OpenCode 后一键复现专业级设计。
默认审美平庸
没装 design skill 的 OpenCode 只会用"保险字体"和居中对称布局，生成的页面千篇一律。
缺乏设计参考
AI 没见过好设计，自然做不出来。你需要先给它一份"设计规范说明书"。
手动调 CSS 费时
生成后再手动改颜色、调间距、换字体？低效。让 AI 一次做对才是关键。
问题诊断
为什么你的 OpenCode 生成的页面不够好看？
AI 默认使用"安全"设计
没有设计参考时，OpenCode 会选择最不会出错但最无聊的方案：浅灰背景、蓝色主色、Inter 字体、标准卡片布局。这是 AI 的"保守策略"，不是设计选择。
没有视觉层级训练
基础模型没有接受过前端视觉设计专项训练。它知道 CSS 属性，但不懂什么时候该用大面积留白、什么时候该用强烈对比、什么时候该打破网格。
Prompt 缺乏设计细节
"做一个好看的 landing page" 对 AI 来说等同于"做一个 landing page"。好看的定义需要被量化：具体的色值、字号比例、间距 token、圆角数值。
未使用 frontend-design skill
OpenCode 支持安装 Skill 来改变 AI 行为。frontend-design skill 专门教 AI 避免常见字体、使用个性配色、创建不对称布局、添加微交互——这才是质变的关键。
方法论
核心思路：给 AI 一份"设计基因"
我们不是教 OpenCode 写代码，而是先让它"看见"优秀设计，再让它复现。Design Extractor + frontend-design skill 的组合，相当于给 AI 配了一位设计总监。
提取真实设计规范
用 Design Extractor 分析任意网站，自动提取配色、字体、间距、组件样式，输出结构化的 DESIGN.md。
转化为 AI 指令
DESIGN.md 中的设计 token（色值、字号、间距）可以直接作为 prompt 中的设计约束，让 AI 精确执行。
安装 frontend-design skill
给 OpenCode 装上设计技能包，让它从根本上改变设计决策逻辑，而非仅仅执行代码。
规划模式先行
OpenCode 的 Plan 模式让 AI 先输出设计方案再编码，避免边写边改的混乱。
迭代优化
用 /undo 和 /redo 快速回退，用多会话并行对比不同设计方案。
Workflow
3 步让 OpenCode 复刻任意网站设计
STEP 01
提取设计规范（Design Extractor）
在 Chrome 中打开你想复现的网站，点击 Design Extractor 扩展图标。30 秒内，它会自动提取配色板、字体栈、间距系统、组件样式，并生成一份完整的 DESIGN.md 文档。
STEP 02
安装 frontend-design skill
在项目目录下运行 opencode，输入命令安装 frontend-design skill。这会教 OpenCode 使用有个性字体、创建不对称布局、避免 AI 默认的"紫色渐变+圆角卡片"套路。
STEP 03
在 OpenCode 中执行设计复现
进入 Plan 模式，将 DESIGN.md 的内容粘贴给 OpenCode 作为设计约束，然后输入构建指令。OpenCode 会严格遵循提取的设计规范生成代码，效果从"模板感"直接跃升到"定制感"。
Prompt 模板
实战 Prompt：直接复制使用
以下 Prompt 模板已经针对 OpenCode + Design Extractor 工作流优化，包含设计约束、技术栈声明和输出要求。
SaaS Landing Page
适合复刻 Stripe、Notion、Linear 等现代 SaaS 产品官网
//frontend-design
基于以下 DESIGN.md 设计规范，创建一个 SaaS 产品落地页：
【设计规范】
（此处粘贴 Design Extractor 生成的 DESIGN.md 内容）
【页面要求】
- 技术栈：React + Tailwind CSS + shadcn/ui
- 包含：导航栏、Hero 区域（大标题+副标题+CTA）、3 个功能特性卡片、1 个定价区域、页脚
- 严格遵循 DESIGN.md 中的配色、字体和间距规范
- 添加 hover 微交互和过渡动画
- 确保移动端响应式
【输出要求】
- 先进入 Plan 模式确认设计方案
- 生成完整可运行的单文件组件
- 代码注释标明每个设计决策对应的 DESIGN.md 章节电商产品页
适合复刻高端电商网站的产品详情页风格
//frontend-design
基于以下 DESIGN.md 设计规范，创建一个电商产品详情页：
【设计规范】
（此处粘贴 Design Extractor 生成的 DESIGN.md 内容）
【页面要求】
- 技术栈：React + Tailwind CSS
- 包含：产品图片展示区、产品标题与价格、颜色/尺寸选择器、加入购物车按钮、产品描述标签页、相关推荐
- 严格遵循 DESIGN.md 中的配色和排版规范
- 图片区域使用设计规范中的圆角和阴影处理
- 按钮和交互元素添加微动效
【输出要求】
- 先规划布局结构再编码
- 确保无障碍访问（ARIA 标签）
- 代码结构清晰，便于后续接入真实数据个人作品集
适合设计师、开发者展示个人项目和作品
//frontend-design
基于以下 DESIGN.md 设计规范，创建一个个人作品集网站：
【设计规范】
（此处粘贴 Design Extractor 生成的 DESIGN.md 内容）
【页面要求】
- 技术栈：HTML + CSS（或 React + Tailwind）
- 包含：个人头像与简介、技能标签云、3-4 个项目卡片（含缩略图+标题+描述）、联系方式
- 严格遵循 DESIGN.md 的视觉风格（暗黑/亮色、字体搭配、间距节奏）
- 项目卡片添加悬停放大和阴影效果
- 整体风格体现个人品牌感，而非通用模板
【输出要求】
- 单文件实现，可直接在浏览器打开预览
- 预留占位数据，方便替换为真实内容案例
真实网站复现演示
以下案例展示了用 Design Extractor + OpenCode 复现知名网站设计风格的完整过程和效果
Stripe 风格 Landing Page
提取 Stripe 官网的深色渐变背景、大标题排版、网格布局系统。OpenCode 在 frontend-design skill 加持下，成功复现了其标志性的紫色光晕和精确的字号层级。
Notion 风格文档站
提取 Notion 的极简白色主题、分栏布局、柔和的阴影系统。生成的页面保留了其标志性的"干净但有温度"的视觉感受，而非冰冷的默认白底黑字。
Linear 风格 Dashboard
提取 Linear 的暗黑玻璃拟态风格、精确的间距 token、图标设计语言。OpenCode 复现了其半透明面板、微妙边框和 indigo 强调色的高级质感。
进阶
让设计更上一层楼的 5 个技巧
掌握这些技巧，让 OpenCode 生成的前端页面从"像样"变成"惊艳"
善用 Plan 模式规划布局
复杂页面先用 Tab 切换到 Plan 模式，让 OpenCode 输出完整的布局规划和设计决策说明。确认后再切回 Build 模式执行，避免反复修改。
组合多个 Skill 使用
frontend-design + react-expert 是黄金组合。前者负责审美决策，后者确保代码规范。做 Python 项目时可以替换为 python-clean-code。
用截图辅助设计沟通
直接将参考网站的截图拖拽到 OpenCode 终端中，让 AI "看到"你想要的效果。配合 DESIGN.md 的量化参数，沟通效率翻倍。
微调 DESIGN.md 中的 token
提取的设计规范不是圣旨。你可以手动调整某些 token（如将主色调从 indigo 改为 emerald）来创造变体设计，而不改变整体系统。
多会话并行对比方案
同时开多个 OpenCode 会话，让不同会话尝试不同的设计风格（如一个暗黑、一个浅色），用 /sessions 切换对比，快速找到最佳方案。
利用 /undo 大胆尝试
OpenCode 的撤销功能让你可以大胆让 AI 尝试激进设计。效果不好就 /undo，好了就继续迭代。设计探索的成本趋近于零。
FAQ
常见问题
OpenCode 本身是开源免费的。但你需要为使用的 AI 模型 API 付费。OpenCode 支持连接 75+ 家模型提供商，包括免费的本地模型。
可以从 Anthropic 官方 skills 仓库（github.com/anthropics/skills）获取，也可以访问 skills.sh 搜索更多社区 skill。在 OpenCode 中输入命令即可一键安装。
Design Extractor 支持绝大多数公开可访问的网页。只要网页没有强反爬机制，都可以提取其颜色、字体、间距等视觉规范。部分动态渲染的内容可能需要等待页面完全加载后再分析。
可以。OpenCode 生成的是标准的前端代码（HTML/CSS/JS 或 React/Vue），直接保存为文件即可在浏览器打开或部署到 Vercel/Netlify 等平台。
三者都支持安装 skill 来提升设计能力。OpenCode 的优势是完全开源免费，社区 skill 生态活跃；Cursor 的优势是 IDE 集成度更高；Claude Code 的优势是底层模型设计能力更强。搭配 Design Extractor 后，三者都能产出专业级设计。
不需要。Design Extractor 会自动生成完整的 DESIGN.md。你只需要复制粘贴到 OpenCode 的 prompt 中即可。当然，你也可以手动调整其中的某些 token 来定制设计。
OpenCode 本身不限定框架。你可以要求它生成 React、Vue、Svelte、Angular、纯 HTML/CSS 或任何其他前端技术栈的代码。frontend-design skill 主要影响设计决策，不绑定特定框架。
完全可以。这就是本方法的核心价值——你不需要懂设计，只需要会"提取好设计"和"告诉 AI 执行"。Design Extractor 负责把优秀设计量化成参数，OpenCode 负责把参数还原成代码。