使用这个配方创建一个 Fabric 应用，将 CSV 文件转换为交互式数据浏览器。 Claude Code 检查文件，搭建项目支架，实现符合可用列的筛选器和可视化，并从终端验证应用。
完成的应用在静态内容中包含CSV文件，并在浏览器中加载数据。 这种方法适用于不需要实时连接的样本、公共或非敏感数据。
在本教程中，你将了解：
- 安装并启动 Claude Code。
- 请让 Claude Code 为 Fabric 应用生成脚手架并进行检查。
- 基于你的 CSV 文件创建一个交互式探索工具。
- 审查并验证生成的更改。
- 将应用部署到Fabric。
- 验证部署后打开应用。
先决条件
- Node.js 20 或更高版本。
- 一个由Claude Code支持的终端。
- 一个具有 Claude Code 访问权限的 Claude Pro、Max、Team、Enterprise 或 Console 账户。
- 可访问 Fabric 的 Microsoft 帐户。
- 具有参与者、成员或管理员权限的Fabric工作区。
- Fabric Apps 工作负载已为你的租户启用。
- 一个带有头行的UTF-8 CSV文件。 在开始使用 Claude Code 之前，先了解文件的完整路径。
Important
作为静态应用内容部署的CSV文件，向能够访问应用的用户开放。 不要用这个配方来获取秘密、个人数据或其他敏感信息。
有关Claude Code系统需求和账户选项，请参见 Claude Code设置文档。
安装 Claude Code
使用适用于你的操作系统的对应方法安装 Claude Code。
Windows操作系统
用WinGet安装Claude代码：
winget install Anthropic.ClaudeCode
macOS、Linux 或 适用于 Linux 的 Windows 子系统
使用原生安装程序：
curl -fsSL https://claude.ai/install.sh | bash
验证安装：
claude --version
claude doctor
有关其他安装方法，请参见 安装Claude代码。
启动 Claude Code
在你想创建项目的父文件夹里打开一个终端。
启动 Claude Code：
claude如果被提示，请完成浏览器认证流程。
检查 Claude Code 请求的文件夹访问权限和命令权限。
不要在包含你不希望它检查或修改的无关文件的文件夹里启动Claude代码。
搭建支架并运行应用
将以下提示词粘贴到 Claude 代码中：
Set up a new Rayfin app for me, end to end.
Create the project in a folder named csv-data-explorer. Before changing code, read any
CLAUDE.md, copilot-instructions.md, and agent guidance included in the scaffolded project.
Do the work yourself instead of only printing instructions:
1. Run `npm create @microsoft/rayfin@latest csv-data-explorer`.
2. Inspect the scaffolded project. Explain the purpose of rayfin/rayfin.yml,
rayfin/data/, and src/.
3. Install dependencies if the scaffold command didn't install them.
4. Run `npx rayfin login` and pause while I complete sign-in.
5. Deploy the backend with `npx rayfin up`.
6. Confirm the deployment with `npx rayfin up status`.
7. Start the frontend with `npm run dev`.
8. Tell me the local URL to open and summarize what you created.
Ask before making a destructive change or using a force option.
只有在你审核命令后才批准。 在提示时完成Rayfin浏览器登录。 前端启动后，打开 Claude Code 报告的本地 URL。
请Claude Code来构建数据探索器
向 Claude Code 提供 CSV 文件的完整路径，并说明应如何探索数据。 代理可以检查表头和示例值，以根据数据集定制控件和可视化。
请使用以下提示作为起始食谱。 用你文件的路径替换 <full-path-to-csv-file> 。
Turn this Fabric app into a data explorer for the CSV file at
<full-path-to-csv-file>.
Requirements:
- Inspect the headers and a representative sample of rows first. Summarize the
inferred date, numeric, Boolean, and categorical columns before editing.
- Don't modify the source file. Copy it into an appropriate static asset folder with
a clear name so the deployed app can load it.
- Parse quoted fields, escaped commas, missing values, and line breaks correctly.
Use an existing CSV dependency if the project includes one. Otherwise, add a
well-maintained parser and explain why it's needed.
- Build KPI callouts and two useful charts based on the columns actually present.
Don't invent fields or values.
- Add a global search, column filters appropriate to each inferred data type, sortable
columns, pagination, and a control to clear all filters.
- Show the filtered row count, and calculate KPIs and charts from the filtered rows.
- Add a detailed data grid and preserve the original column names.
- Include loading, empty, and error states.
- Report malformed rows without crashing the app.
- Make the layout usable with a keyboard and responsive at desktop and mobile sizes.
- Follow the scaffolded project's existing component and styling patterns.
- Don't add dependencies unless they're necessary.
Before editing, inspect the relevant files and give me a short implementation plan.
Then make the changes, run the existing build, start the app, and validate the main
flows in a browser at desktop and mobile sizes. Explain any errors you fix.
在Claude Code编辑项目前，请先审查计划。 如果计划不符合您的要求，请在批准实施前进行修正。
查看生成的更改
Claude Code 完成后，让它审查自己所做的工作：
Review the changes you made against every requirement in my previous prompt.
Check for:
- Incorrect parsing of quoted fields, escaped commas, missing values, or line breaks.
- Type inference that changes valid identifiers or loses numeric precision.
- KPIs or charts that don't update from the filtered rows.
- Search, filtering, sorting, pagination, or clear-filter controls that don't work.
- Invented fields, values, or fallback data that aren't in the CSV file.
- The original CSV file being modified.
- Missing loading, empty, or error states.
- TypeScript, build, browser console, or responsive layout errors.
Fix confirmed issues, rerun the existing build and browser checks, and summarize the
final behavior.
亲自查看源代码管理差异。 需要特别注意以下指标：
- 复制的 CSV 资源以及是否适合发布。
- CSV 解析和类型推断。
-
rayfin/rayfin.yml中的服务配置。 -
package.json中的新依赖项。 - 不得提交的密钥或凭据。
验证应用
请让Claude Code运行项目现有的验证：
Validate the app without adding new tools.
1. Run the existing build and type-check commands from package.json.
2. Start the frontend if it isn't already running and report the local URL.
3. In a browser, verify the initial row count against the CSV file.
4. Test search, each filter type, sorting, pagination, clear filters, and malformed-row
handling. Confirm that KPIs and charts update with the filtered rows.
5. Check desktop and mobile layouts and report browser console errors.
6. Fix confirmed issues and rerun the failed check.
在浏览器中，将几行、总计和筛选结果与源CSV文件进行比较。 测试空白结果、数据变形、键盘导航和狭窄屏幕。
部署完成的应用
在你审查更改并测试应用后，请让Claude Code部署它：
Deploy the reviewed app to Fabric.
1. Show me the current git diff and summarize what will be deployed.
2. Run `npx rayfin up`.
3. Run `npx rayfin up status`.
4. Confirm that the deployment is healthy.
5. Give me the hosted app URL and Fabric portal link from the command output.
Stop and explain the issue if deployment or verification fails.
同样 npx rayfin up 的命令会在你继续开发应用时更新现有部署。
继续使用 Claude Code 进行迭代
在后续修改中使用聚焦的提示词。 包括期望的行为、受影响的用户、约束和验证步骤。
Add saved views to the CSV data explorer.
Let users name and save the current search, filters, sort order, and visible columns
in browser storage. Don't store or duplicate CSV rows in browser storage. Add controls
to apply, rename, and delete a saved view. Run the existing build and browser checks,
then list the user flows I should retest.
保持每个请求足够小以便审核。 在让 Claude Code 进行重大或可能具有破坏性的更改之前，先提交当前可正常工作的状态。
Claude Code 工作流程问题排查
Claude Code 只打印命令
告诉Claude Code执行命令并报告结果。 审核并批准所请求的指挥权限。
命令等待登录
完成浏览器登录流程。 然后告诉Claude Code登录完成，这样才能继续。
Claude Code 在错误的文件夹中运行
退出会话，在支架项目文件夹中打开终端，再次运行 claude 。
Claude Code 找不到命令
去 claude doctor 检查一下Claude Code的安装情况。 执行 Rayfin 命令前，请确认已安装 Node.js 20 或更高版本以及项目依赖。
应用能打开，但CSV数据没有加载
请让Claude Code检查浏览器网络和控制台错误，验证部署的资产路径，并确认CSV文件是否包含在静态构建输出中。
克劳德·科德提出 --force
要求Claude代码先显示可能破坏性的模式操作。 仅当你已了解并接受可能发生的数据丢失时，才接受 --force。
对于其他应用问题，请参见 Fabric 应用故障排除。