CodeFlicker 产品介绍

CodeFlicker 是一款 AI 驱动的代码编辑器，通过自然语言理解您的代码库，帮助您实现代码理解、代码生成、缺陷解决和需求实现。它帮助开发者提高编码效率，更有效地交付代码。

预约体验

CodeFlicker 即将发布，访问预约页面加入候补名单，抢先体验。

核心功能

Jam (智能对话)

专为复杂开发任务设计的自主 AI 编码助手，具备自主决策、环境感知和工具使用等能力。

Duet 模式

专为复杂任务设计的人机深度协作开发模式，强调早期共识建立和系统性技术设计。

代码补全

专为加速编码设计的智能辅助功能，提供整行或函数级别的代码建议。

MCP 协议

专为 AI 工具集成设计的标准化协议，允许 LLM 访问自定义工具和服务。

了解更多

扩展管理

CodeFlicker 中的扩展管理功能

更新日志

查看我们最新的更新日志

反馈

向我们提供您的反馈

Agent 模式

Agent 聊天根据不同的使用场景分为多种模式，每种模式都有独立的优化和不同的可用功能。您可以通过输入框附近的下拉选项或使用快捷键 (⌘.) 来切换模式。

Agent Mode

这是默认模式，推荐在复杂任务场景中使用。AI 可以进行复杂的逻辑理解，也可以实现具体的代码逻辑。

Ask Mode

Ask 模式是一种只读模式，通过搜索代码库来回答用户问题，但不会对代码库执行任何写入操作。此外，Ask 模型的整体响应速度更快，更适合问答或理解等轻量级场景。

智能对话 (Jam)

从想法到发布的自主编码代理，深度理解您的代码库。代理具备自主决策、环境感知和工具使用等能力。它可以根据开发者的编码需求，使用工程搜索、文件编辑和终端等工具端到端地完成编码任务。

自主决策能力

• 代码搜索
• 正则表达式搜索
• 文件读取
• 目录读取
• 文件编辑
• 命令执行

智能工作流程

• 无需用户确认的自主执行
• 基于工具返回结果自主决策
• 灵活处理各种开发场景
• 提供详细的工具执行结果

高效内容引用

自动内容填充

默认情况下，当前打开的文件会自动填充为内容。

一键添加选中代码块

支持使用快捷键 ⌘L 一键添加选中的代码块，或通过右键菜单快速添加选中区域到代理。

复制粘贴智能识别

复制多行代码粘贴到输入框时，支持自动识别并以"文件 + 行号"的形式显示在上下文区域。

变更文件工作区

• 逐行显示代码变更
• 完全控制多文件代码修改
• 批量接受或拒绝变更
• 独立处理单文件变更

恢复检查点

• 一键回滚到特定对话版本
• 确保每次修改可控可追踪
• 悬停显示"回滚"按钮
• 确认后自动恢复代码状态

Lint 错误自动修复 (Beta)

代理完成代码生成后，支持自动检查修改文件中的增量 lint 错误，并提供一键修复能力。

您可以在设置 > 启用自动 Lint 问题检测中选择是否启用 lint 自检和修复功能。

代码补全

在编码过程中，工程师可以在编辑器内接收来自 CodeFlicker 的整行或函数建议。

智能补全特性

• 按 Enter、Space 或其他键时自动生成代码补全建议
• 使用 Tab 键接受建议，Esc 键拒绝，或继续编程
• 默认在行尾不显示建议
• 基于上下文和代码模式的智能预测

Duet 模式

深度人机协作

Duet (/duˈet/) 模式是一种人机深度协作开发模式，专为复杂任务设计。它模仿人类专家团队解决复杂需求的自然行为，强调早期共识的建立，基于需求进行深入讨论、分析和研究，从而制定系统性的技术设计方案，然后通过分工执行。

研究阶段

基于用户原始输入生成粗粒度研究大纲计划，通过提问明确目标和边界。

行动阶段

使用深度搜索和工具调用能力进行综合研究，生成标准化的用户故事和技术设计。

审查阶段

自主规划并将文档分解为可执行和可追踪的详细开发任务。

核心概念

概念术语	定义
研究计划	基于用户原始输入生成的粗粒度研究大纲计划，通过提问明确目标和边界。
用户故事 (requirement.md)	将用户输入转化为清晰、完整、可测试/可接受和可追踪需求的结构化用户故事。
技术设计 (design.md)	复杂项目工程的整体视图，包括系统架构、关键实现/组件/模块和时序图交互。
开发任务 (To-dos)	独立可执行和可追踪的开发任务，每个都有明确的描述、预期结果和必要依赖项定义。

扩展管理

IDE 提供全面的扩展管理功能，包括安装、停用和删除操作。扩展可以通过多种渠道添加到 IDE：内置扩展市场、VS Code 官方市场，或直接导入本地 .vsix 包。

通过内置扩展市场安装

步骤 1：打开扩展市场

点击左侧边栏中的扩展市场图标，打开扩展市场面板。

步骤 2：浏览和安装

在可用部分中浏览或搜索所需的扩展，选择扩展后查看详细信息，然后点击安装按钮。

通过 VS Code 市场安装

获取扩展信息

当内置市场没有所需扩展时，可以从 VS Code 官方市场获取。需要收集以下信息：

• itemName：URL 中的 itemName 参数
• version：版本号

通过本地 VSIX 文件安装

安装步骤

访问扩展市场，定位面板右上角的菜单按钮（···），选择"从 VSIX 安装"，然后选择所需的 .vsix 文件。

停用扩展

在已安装部分找到目标扩展，悬停在扩展条目上并选择设置 > 停用。

删除扩展

在已安装部分找到要删除的扩展，右键点击或悬停选择卸载。

故障排除

当扩展版本依赖较新的 VS Code API 时，可能会与 IDE 产生兼容性冲突。解决方法：

• 检查扩展的版本历史记录
• 选择较早的兼容版本进行下载

Figma 转代码

Figma 转代码功能使 AI 编程在代理模式下能够将您输入的 Figma 设计稿转换为相应的前端网页实现。相比 Figma MCP 功能，我们的设计稿还原更加准确和清晰。

步骤 1：选择项目目录

打开 IDE 并选择一个项目目录。

步骤 2：复制 Figma 链接

在 Figma 页面上，选择相应的设计稿节点，然后右键选择 Copy/Paste as > Copy link to selection。

步骤 3：输入到代理模式

将复制的 URL 粘贴到 CodeFlicker 的代理模式输入中，输入您的需求并发送，然后按提示完成 Figma 授权。

预览功能

预览功能可以通过 Agent 识别 Web 项目的"启动脚本"并运行相应的本地服务。您可以选择在 IDE 内查看页面或在浏览器中查看。

自动识别启动脚本

• npm run dev
• yarn dev
• pnpm dev
• 其他自定义启动命令

预览模式选择

• IDE 内嵌预览
• 独立浏览器预览
• 自动解析服务地址
• 实时热更新

交互式调试工具栏

通过预览打开的页面在右下角有调试工具栏，支持元素选择和发送控制台错误。

浏览器模式

IDE 模式

元素选择功能

点击页面上的目标元素可将相应的 DOM 元素信息发送到 IDE。您可以直接基于当前选中元素的上下文与 Agent 对话，无需用文字描述 UI 相关的变化。

在页面内可以使用快捷键 (cmd+i) 调用此功能。

支持的前端框架版本

功能	React 16	React 18	React 19	Vue 2	Vue 3
tagName	✅	✅	✅	✅	✅
class	✅	✅	✅	✅	✅
attributes	✅	✅	✅	✅	✅
path	✅	✅	❌	✅	✅
Start line number	✅	✅	❌	❌	✅
End line number	❌	❌	❌	❌	❌
style	✅	✅	✅	✅	✅