OpenCode GUI - VSCode 扩展版

基于哈雷佬的 Claudix 改造，将 OpenCode 带入 VSCode 侧边栏。

一句话介绍

在 VSCode 里直接使用 OpenCode，自动连接本地 server。

核心功能

• 侧边栏聊天 - 复用 Claudix 的精美 UI，在 VSCode 侧边栏直接对话
• 自动启动 - 配置本地地址后，扩展自动拉起 opencode serve
• 快速上下文 - Ctrl+L 发送选中代码，右键菜单添加文件
• 配置管理 - 设置页可视化编辑 OpenCode 配置（含 oh-my-opencode）
  
  
  

开发状态

早期版本，未经深度测试！ 可能存在各种 bug，欢迎试用并在 Issues 反馈问题。

安装

下载 最新 Release，在 VSCode 中：扩展 → “从 VSIX 安装…”

前置要求

• VS Code >= 1.98
• 已安装 OpenCode CLI (安装文档)

项目地址

致谢

感谢 @Haleclipse 提供的 Claudix UI 基础

佬友们好，由于写代码经常遇到 json/sql/class/struct 之间转换的需求，因此 vibe 了一个 vscode 插件，支持配置 ai 自动转换代码

项目地址

功能

• 急速响应：本地简单解析
• AI 兜底：本地解析失败，AI 直接生成
• 多语言输出：支持基本所有主流语言
• 多格式输入：JSON/SQL/CODE/ 自然语言
• 操作简单： 复制文本然后按下 Ctrl + Alt + V (Mac: Cmd + Alt + V)

演示

欢迎佬友们下载并使用，有好的建议或者遇到 bug 可以直接提 issue 或者 pr，觉得好用可以点个 star，感谢

一个解决 AI 写代码 "丑" 问题的开源项目

项目地址

为什么做这个？

兄弟们，不知道你们有没有这种感觉：用 AI 写代码很爽，但是让 AI 写出好看的前端界面真的太难了！

每次让 AI 生成 UI，结果都是：

• 风格不一致，这次生成一个样，下次又变样了
• 缺乏设计感，一看就是 "AI 味" 很重
• 想参考 Stripe、Vercel 这些优秀网站的设计？只能手动复制粘贴，累死

所以我就想：能不能把优秀网站的设计 "喂" 给 AI，让它照着写？

于是就有了 Design-Learn 这个项目。

生成的效果

Chrome 插件

VSCode 插件

MCP 截图

配置到 rules 也行，然后生成的网页对比

后续可以加一些特效的提示词的增强

核心功能

一键提取页面设计

看到好看的网站？直接点一下插件图标，2-5 秒就能提取：

• 完整快照：HTML + CSS + 图片 + 字体，一个不落
• 设计元素：颜色、字体、间距、阴影、圆角，自动识别
• 组件识别：按钮、卡片、导航、表单，统统给你标出来

比如你看到 Stripe 的配色很好看，点一下，它的颜色系统、字体规范、间距体系就都存下来了。

AI 智能分析

提取完还不够，我还加了 AI 分析功能：

• 自动生成设计规范文档（Style Guide）
• 分析色彩系统：主色、辅助色、语义色、渐变
• 分析字体排版：字体族、字号层级、行高、字重
• 分析间距系统：基础单位、常用间距值
• 分析组件规范：按钮样式、卡片阴影、输入框状态

这样 AI 就能理解这套设计语言了。

MCP 集成 Claude Code

这是我觉得最酷的功能！配置好之后，Claude Code 可以直接查询你收集的设计库：

# 在 Claude Code 里直接说：
> 用 stripe.com 的设计风格写一个定价页面

# AI 会自动查询你提取的 Stripe 设计规范，生成风格一致的代码 

支持的 MCP 工具：

• list_designs - 列出所有已提取的设计
• search_designs - 按关键词 / URL 搜索
• get_design - 获取完整设计详情
• get_rules - 获取设计规则（颜色 / 字体 / 间距）
• get_styleguide - 获取 AI 生成的设计规范文档

多端协同

整个系统由三个组件组成：

Chrome Extension ──┐
                   ├──> Design-Learn Server (port 3100)
VSCode Extension ──┤    - REST API
                   │    - MCP (SSE/stdio)
Claude Code ───────┘    - SQLite + 文件存储

• Chrome 插件：提取页面、AI 分析、本地存储
• VSCode 插件：查看快照、管理设计库、启停服务
• 本地服务：数据持久化、MCP 工具、多端同步

快速开始

安装 Chrome 插件

chrome://extensions/ → 开发者模式 → 加载已解压的扩展程序 → 选择 chrome-extension/

提取页面

1. 访问目标网站（比如 https://stripe.com）
2. 点击工具栏插件图标
3. 点击 "提取页面风格"
4. 等待 2-5 秒，完成！

配置 MCP 集成（可选）

# 安装服务端依赖 cd design-learn-server && npm install

# 添加到 Claude Code
claude mcp add -s user design-learn -- node /YOUR/PATH/Design-Learn/design-learn-server/src/stdio.js

# 验证
claude mcp list

技术栈

• Chrome 插件：Manifest V3，纯 JS，零依赖
• 本地服务：Node.js + SQLite (better-sqlite3) + MCP SSE
• VSCode 插件：TypeScript + Webview

未来计划

1. 集成 ui-uxpro

   • 把 ui-uxpro 项目整合进来，增强设计分析能力
   • 支持更智能的组件识别和分类

2. 设计库管理优化

   • 支持标签、分类、收藏
   • 支持批量导入导出
   • 支持设计库分享

3. AI 分析增强

   • 支持更多分析维度（无障碍、响应式、性能）
   • 支持自定义分析模板
   • 支持批量分析

4. 参考 lovable 实现选择主题直接生成可预览的 UI/UX 参考界面

这个项目我一个人在搞，有时候会有点慢，但我会持续更新。你们的支持就是我最大的动力！