# Shape

面向设计师和程序员的桌面 IDE，集代码编辑、本地项目工作流、可视化设计检查、Git 工具与 AI 聊天于一体。

- Findings24: <https://findings24.com/zh-CN/tools/shape>
- 网站: <https://www.useshape.org>
- 价格: Freemium
- 分类: AI开发者工具

## 什么是 Shape？

Shape 是一款面向网页项目的桌面 IDE，将代码、可视化设计、本地开发、Git 和 AI 辅助整合在同一个工作台中。用户可以打开现有文件夹或克隆代码仓库，检查项目文件，安装依赖，运行包脚本，并在集成的 Browser 标签页中预览本地应用。

Shape 的核心用途是让设计师和程序员无需切换开发环境，即可在源文件、运行中的本地页面、项目诊断、版本控制变更和 AI 辅助编辑之间进行切换。文档所述工作流以本地优先为基础：项目通过用户的包管理器和开发服务器运行，而 IDE 提供编辑、预览、设计检查和聊天界面。

## Shape 能做什么？

### 项目和代码仓库访问

打开包含现有网页项目的文件夹，或通过 Git URL 克隆代码仓库。Explorer、快速打开和项目搜索工具支持在整个代码库中导航。

### 集成终端和脚本运行器

使用 npm、pnpm、yarn 或 bun 安装依赖，然后从终端或标题栏的 Scripts 菜单运行项目脚本。本地开发服务器可以提供应用以供预览。

### 带设计模式的浏览器预览

在集成的 Browser 标签页中打开本地 URL，并使用设计模式检查实时页面。可以使用调色板和设计控件将布局或颜色变更应用到源代码。

### 支持 Ask 和 Code 模式的 AI 聊天

Ask 模式提供关于已打开项目的只读回答。在 Code 模式下，代理可以搜索、编辑并运行检查；用户可以附加文件、文件夹、代码库或选定内容，并通过 Keep 或 Undo 查看编辑结果。

### 代码编辑和诊断

使用熟悉的导航和搜索命令编辑并保存项目文件，然后在 Problems 面板中检查 TypeScript 或 ESLint 报告。快速入门还介绍了保存时格式化和编辑器配置。

### Git 工作流工具

从差异标签页暂存单个代码块，并使用 Git Manager 处理拉取请求和检查，让常见的代码仓库任务与编辑和预览集中在一起。

## 使用场景

### 修改现有网页项目

打开文件夹或已克隆的代码仓库，安装其依赖，启动开发脚本，并在 Browser 标签页中查看结果的同时进行小范围源代码修改。

### 编辑前使用 AI 检查代码库

使用 Ask 模式询问入口文件或项目其他部分的作用，在不应用更改的情况下获得回答。适合在修改陌生代码之前了解其结构和功能。

### 在处理源代码的同时进行页面视觉调整

在本地运行项目，在 Browser 中打开其本地 URL，并使用设计模式检查渲染后的页面，将支持的布局或颜色变更应用到底层源代码。

### 审查 AI 生成的代码变更

使用 Code 模式在一次对话中搜索项目、进行编辑并运行检查，然后通过 Keep 或 Undo 审查建议的变更，再决定是否保留。

### 准备和审查代码仓库变更

开发时使用编辑器和诊断功能，然后暂存选定的差异代码块，并访问 Git Manager 处理拉取请求和检查。

## 常见问题

### Shape 是什么类型的应用？

Shape 是一款面向设计师和程序员的桌面 IDE，集代码编辑、本地开发、可视化设计检查、Git 工具与 AI 聊天于一体。

### 如何在 Shape 中启动项目？

在欢迎屏幕中选择 Open Project，或选择 File → Open Folder，然后选取包含项目的文件夹。你也可以选择 Clone Repository，粘贴 Git URL，并选择父文件夹。

### Shape 可以运行本地网页项目吗？

可以。打开终端，使用项目所需的包管理器安装依赖，并运行类似 npm run dev 的脚本。然后在 Shape 的 Browser 标签页中输入生成的本地 URL。

### AI 可以修改我的文件吗？

可以。在 Code 模式下，代理可以在同一线程中搜索、编辑并运行检查。可以通过 Keep 或 Undo 审查建议的编辑。Ask 模式为只读，不会应用编辑。

### Shape 提供哪些套餐？

定价页面列出了 Free、Plus、Pro 和 Max 套餐。Free 包含 Auto 模型、每月 Auto 令牌额度以及本地优先的桌面编辑器；付费套餐列出每月额度、所有模型的访问权限和其他特定于套餐的权益。

## 快速信息

- **类别**: 开发者工具；设计工具；AI 聊天
- **平台**: 桌面 IDE
- **主要用户**: 设计师和程序员
- **核心工作流**: 打开或克隆项目，在本地运行、编辑源代码、预览并使用 AI 聊天
- **套餐**: Free、Plus、Pro 和 Max
- **来源域名**: useshape.org