之前用过Claude Code的CLI和IDEA插件,但是总觉得差点意思!最近发现Claude Code官方发布了桌面端,免登陆即可使用,体验了一把,确实很强。尤其是它的Claude Preview功能,能实时预览前端代码修改后的效果,今天给大家分享下它的使用!
简介
Claude Code Desktop是Anthropic推出的桌面应用程序,集成了Chat、Cowork和Code三个核心功能,支持在Windows和MacOS下使用。
它的核心特性如下:
- 会话机制:每个会话都有自己独立的聊天记录、项目目录,多个会话可以并行跑且Git互相隔离,不会串。
- 代码开发与审查:Diff可视化、PR状态追踪、终端和编辑器全内置,改完代码到审查合并不需要跳出应用。
- 应用预览:改完代码Claude会自动起开发服务器,在内嵌浏览器里看效果,还能自己截图、点击、填表单做测试,有问题直接修。
- 权限模式:Ask permissions、Auto accept edits、Plan mode、Auto、Bypass permissions五档可选。
- 运行环境选择:本机(Local)、Anthropic 云端(Remote)、SSH远程服务器三种环境,本地资源不够就丢云上,需要碰生产就SSH过去。
- 工作区布局:聊天、Diff、预览、终端、编辑器这些面板支持拖拽自由拼接,按自己的工作习惯排布就行。
下面是Claude Code Desktop使用过程中的效果图,还是挺炫酷的!
这或许是一个对你有用的开源项目,mall项目是一套基于 SpringBoot3 + Vue3 的电商系统(Github标星60K),后端支持多模块和微服务架构,采用Docker和K8S部署。包括前台商城项目和后台管理系统,能支持完整的订单流程!涵盖商品、订单、购物车、权限、优惠券、会员、支付等功能!
- Boot项目:github.com/macrozheng/…
- Cloud项目:github.com/macrozheng/…
- 文档网站:www.macrozheng.com
项目演示:
安装及配置
这里以Windows下的安装为例,带你无需登陆即可使用Claude Code Desktop。
- 首先我们需要下载
Claude Code Desktop的安装包,直接从官网下载即可,地址:claude.com/download
- 下载完成后双击exe文件安装,安装完成后可以从
系统->应用中找到Claude应用,点击左上角设置->帮助->故障排除->开启开发者模式功能;
- 如果使用国内大模型的话,需要安装CC Switch
v3.15.0以上版本来配置国内大模型,下载地址:ccswitch.io/
- 配置CC Switch设置开启路由总开关;
- 切换到右下角有电脑的Claude图标对应面板,添加模型并启用;
- 这里以DeepSeek为例,选好预设供应商后仅需填写API_KEY即可;
- 接下来我们需要打开
Claude Code Desktop中设置->开发者->配置第三方接口功能;
- 由于我们在CC Switch中开启了本地路由,这里的网关信息会直接配置好;
- 然后点击右下角的
应用在本地按钮即可开始使用,里面的模型都是我们在CC Switch中配置好的DeepSeek模型,随便发个消息测试下,有回复代表配置成功了。
使用
- 点击左下角的文件夹图标,可以绑定当前会话的工作目录;
- 点击右下角的模型名称,可以切换模型和推理强度;
- 点击左下角的模式名称,可以切换Claude Code的工作模式;
- 如果你想上传文件或者图片,可以点击左下角的加号;
- 点击左侧的自定义按钮,可以添加SKILL或者插件;
- 最让我惊艳的是它的Claude Preview工具,我之前使用Open Design+Claude Code开发了几个商城页面,它不仅运行起来了还调整成了移动端样式显示;
- 如果你有需要修改的地方,直接点击右上角的按钮进入选择模式,选中对应元素后直接提要求即可,修改非常迅速且页面实时刷新;
- Claude Code Desktop还支持注解视图,选择需要修改的部分点击添加到聊天,就会把注解好的图片发送给Claude Code,这里我使用的模型并不支持图像识别但是也能识图。
总结
今天给大家分享了Claude Code Desktop的使用,这款工具功能还是非常强大的,尤其是它的Claude Preview,用来开发前端非常方便,比用MCP来操作Chrome效率提高很多!