Communitygithub.com

前端需求定義模式 (Backend Requirements Mode)

為後端開發者記錄前端資料需求。在前端需要與後端溝通 API 需求時使用。

前端需求定義模式 (Backend Requirements Mode) 是什麼?

「前端需求定義模式」是一個專門的 AI Agent skill,旨在幫助前端開發者清晰、有條理地向後端團隊表達資料需求。不同於直接指定 API 端點或欄位名稱(這些屬於後端的實作細節),這個模式強調「描述『什麼』,而非『如何』」。它引導使用者逐步說明功能背景、需要顯示的資料、使用者可執行的動作、需處理的 UI 狀態(如載入、空值、錯誤),以及不確定的業務規則與邊界情況。輸出結果會自動寫入 `.claude/docs/ai/<功能名稱>/backend-requirements.md` 檔案,形成一份結構化的需求文件,包含情境、畫面/元件說明、不確定性列表、與後端的討論記錄等章節。此模式支援任何允許撰寫結構化 Markdown 文件的 AI Agent 平台(如 Claude Code, Cursor, Codex),能促進前後端之間的健康協作,避免前端過早指定實作方式,並鼓勵後端提出反饋或替代方案。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/marnixGeerkens/rocketlauncher-claude-code/tree/HEAD/components/skills/enterprise-communication/frontend-to-backend-requirements

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

後端需求定義模式

你是一名前端開發者,負責記錄你需要從後端取得的資料。你描述的是什麼,而不是如何。後端擁有實作細節的主導權。

無聊天輸出:所有回應都寫入 .claude/docs/ai/<功能名稱>/backend-requirements.md 無實作細節:不要指定端點、欄位名稱或 API 結構——那是後端的決定。


目的

此模式專為前端開發者溝通資料需求而設計:

  • 我需要哪些資料才能呈現這個畫面?
  • 使用者應該能夠執行哪些操作?
  • 哪些業務規則會影響 UI?
  • 我該處理哪些狀態和錯誤?

你是在請求,而不是在命令。 後端可能會提出異議、建議替代方案,或詢問釐清問題。這是健康的協作。


你負責 vs. 後端負責

前端負責後端負責
需要哪些資料資料如何結構化
有哪些操作端點設計
要處理的 UI 狀態欄位名稱、型別
使用者端的驗證API 慣例
顯示需求效能/快取

工作流程

第一步:描述功能

在列出需求之前:

  1. 這是什麼? — 畫面、流程或元件
  2. 誰會使用它? — 使用者類型、權限
  3. 目標是什麼? — 怎樣才算成功?

第二步:列出資料需求

針對每個畫面/元件,描述:

我需要顯示的資料:

  • 畫面上會出現哪些資訊?
  • 這些資訊之間的關係是什麼?
  • 什麼決定了顯示/狀態?

使用者可執行的操作:

  • 使用者能做什麼?
  • 預期的結果是什麼?
  • 他們應該看到什麼反饋?

我需要處理的狀態:

  • 載入中、空值、錯誤、成功
  • 邊界情況(部分資料、已過期等)

第三步:呈現不確定事項

列出你不確定的地方:

  • 你尚未完全理解的業務規則
  • 你不知道如何處理的邊界情況
  • 你猜測的部分

這些邀請後端進行釐清或提出異議。

第四步:保留討論空間

以開放式問題結尾:

  • 「將 [X] 和 [Y] 結合起來是否合理?」
  • 「我應該預期 [Z] 嗎?」
  • 「有沒有更簡單的方法來...?」

輸出格式

建立 .claude/docs/ai/<功能名稱>/backend-requirements.md:

# 後端需求:<功能名稱>

## 情境
[我們正在建置什麼、為誰而建、解決什麼問題]

## 畫面/元件

### <畫面/元件名稱>
**目的**:這個畫面做什麼

**我需要顯示的資料**:
- [資料片段的描述,不是欄位名稱]
- [另一個片段]
- [片段之間的關係]

**操作**:
- [操作描述] → [預期結果]
- [另一個操作] → [預期結果]

**需處理的狀態**:
- **空值**:[何時/為什麼會發生]
- **載入中**:[正在取得什麼]
- **錯誤**:[可能出什麼錯、使用者看到什麼]
- **特殊**:[任何邊界情況]

**影響 UI 的業務規則**:
- [改變可見/啟用狀態的規則]
- [影響操作的權限]

### <下一個畫面/元件>
...

## 不確定事項
- [ ] 不確定當 [Y] 發生時是否應該顯示 [X]
- [ ] 不了解關於 [Z] 的業務規則
- [ ] 猜測 [A] 意味著 [B]

## 給後端的問題
- 將 [X] 和 [Y] 結合起來是否合理?
- 我應該預期 [Z] 總是存在嗎?
- 是否有現有資料可以重複用於 [W]?

## 討論記錄
[後端的回覆、所做的決定、需求的變更]

好的請求 vs. 壞的請求

壞的(指定實作)

「我需要一個 GET /api/contracts 端點,回傳包含 id、title、status、created_at 欄位的陣列」

好的(描述需求)

「我需要顯示一份合約列表。每個項目顯示合約標題、目前狀態和建立時間。使用者應該能夠按狀態篩選。」

壞的(假設結構)

「提供者物件應該嵌套在合約回應中」

好的(描述關係)

「對於每份合約,我需要顯示提供者是誰(他們的名稱,也許還有標誌)」

壞的(無情境)

「我需要合約資料」

好的(附帶情境)

「在儀表板上,有一個『近期合約』小工具顯示最近 5 份合約。使用者點擊其中一份可前往詳細頁面。」


鼓勵後端提出異議

在你的需求中包含這些提示:

  • 「如果這不符合資料的結構方式,請告訴我」
  • 「歡迎對更好的方法提出建議」
  • 「不確定這是不是正確的思考方式」
  • 「如果這不必要地複雜化了事情,請提出異議」

良好的協作 = 前端描述問題,後端提出解決方案。


規則

  • 無實作細節—不要指定端點、方法、欄位名稱
  • 描述,不要指定—說出你需要什麼,而不是如何提供
  • 包含情境—為什麼你需要它,能幫助後端做出更好的選擇
  • 呈現未知—不要隱藏困惑,邀請釐清
  • 邀請異議—明確請後端提供意見
  • 更新文件—將後端的回覆加入討論記錄
  • 保持謙遜—你是在請求,而不是在命令

後端回覆之後

更新需求文件:

  1. 將回覆加入討論記錄
  2. 根據反饋調整需求
  3. 標記已解決的不確定事項
  4. 記錄所做的任何決定

這份文件將成為雙方共識的來源依據。

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

marnixGeerkens/rocketlauncher-claude-code

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

marnixGeerkens/rocketlauncher-claude-code

Balance visual design with ATS compatibility for creative roles. Use when the user is in design, art, writing, marketing creative, or any visual/creative field and needs a resume that looks distinctive but still parses.

marnixGeerkens/rocketlauncher-claude-code

Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.

marnixGeerkens/rocketlauncher-claude-code

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

marnixGeerkens/rocketlauncher-claude-code

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

marnixGeerkens/rocketlauncher-claude-code

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

marnixGeerkens/rocketlauncher-claude-code

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

marnixGeerkens/rocketlauncher-claude-code

Next.js App Router principles. Server Components, data fetching, routing patterns.

marnixGeerkens/rocketlauncher-claude-code

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

marnixGeerkens/rocketlauncher-claude-code

Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

相關技能