React + Tailwind 組件生成提示詞（文字描述 → 可直接用的組件，含響應式、深色模式與無障礙）
要做一個前端組件或頁面區塊（表單、卡片列表、導航欄、彈窗）又不想從零寫樣式時用：描述功能和狀態，得到 TypeScript + Tailwind 的 React 組件、所有狀態的處理（加載、空、錯誤、禁用）和使用示例。
通用大模型 對話模型通用
【角色】你是一名資深前端工程師，寫的組件要能直接合進生產代碼：類型完整、狀態齊全、移動端可用、鍵盤和讀屏軟件可用。 【技術約束】 - 框架：[如 React 19 + TypeScript/Next.js App Router] - 樣式：Tailwind CSS [版本，如 v4/v3] - 已有組件庫（沒有就寫無）：[如 shadcn/ui] - 圖標庫：[如 lucide-react/無] 【組件需求】 - 組件名稱與用途：[組件名稱與用途] - 展示的數據（字段、類型、示例值）：[數據字段] - 用戶交互：[如點擊、輸入、拖拽、鍵盤操作] - 需要的狀態：[如加載中、空數據、出錯、禁用] - 視覺參考（文字描述）：[視覺風格描述] 【實現要求】 1. 先列出 Props 接口設計（名稱、類型、是否必填、預設值），數據通過 props 傳入，不在組件裏寫死請求地址。 2. 寫組件代碼： - 移動優先的響應式寫法，說明在哪個斷點改變佈局； - 同時提供深色模式樣式（dark: 變體）； - 用語義化標籤；表單控件有關聯的 label；只有圖標的按鈕要有 aria-label；可聚焦元素有清晰的 focus-visible 樣式；彈窗類組件要處理 Esc 關閉和焦點管理； - 需要唯一 id 時用 useId 生成，避免同一頁面放多個組件時 id 衝突； - 不要用字符串拼接動態生成類名（如把顏色變量拼進 bg- 前綴），Tailwind 掃描不到這種類名，要寫成完整類名的映射表。 3. 覆蓋所有狀態：加載（骨架屏）、空狀態（說明 + 下一步操作）、錯誤（可重試）、禁用。 4. 給出一個使用示例和一份模擬數據。 5. 列出你做的假設，以及需要我確認的交互細節。 【輸出格式】 Props 表 → 組件代碼（一個 tsx 代碼塊）→ 使用示例 → 假設與待確認。
高亮處換成你自己的內容：[版本，如 v4/v3]、[如 shadcn/ui]、[如 lucide-react/無]、[組件名稱與用途]、[數據字段]、[如點擊、輸入、拖拽、鍵盤操作]、[如加載中、空數據、出錯、禁用]、[視覺風格描述]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：[版本] 要寫清——Tailwind v4 改為在 CSS 中配置（@import "tailwindcss"; 加 @theme），預設不再需要 tailwind.config.js；v3 項目則需要在配置文件的 content 裏包含組件路徑，否則樣式不會生成。[視覺風格描述] 寫「白底卡片、圓角、淺灰邊框、懸停時輕微上浮」這種可執行的描述，比「好看、高級」有效得多。
常見坑：
- AI 預設寫出來的組件往往只有「正常狀態」，加載、空數據、出錯這幾個狀態要明確列在需求裏。
- 用純 div 加 onClick 做按鈕，鍵盤無法操作，讀屏軟件也識別不了，要用 button 元素。
- 一次只讓它做一個組件；整頁需求先讓它拆成組件樹再逐個生成。
追問技巧：生成後追問「檢查這個組件的無障礙問題，按 WCAG 列出來」；要改樣式時直接描述差異，比如「卡片間距改小，標題最多顯示兩行，超出用省略號」。
示例輸出
示例，僅供參考（帶清空按鈕的搜尋框）
tsx
import { useId } from 'react'
type SearchBoxProps = {
value: string
onChange: (value: string) => void
placeholder?: string
}
export function SearchBox({ value, onChange, placeholder = '搜尋' }: SearchBoxProps) {
const id = useId()
return (
<div className="relative w-full max-w-md">
<label htmlFor={id} className="sr-only">搜尋</label>
<input
id={id}
type="text"
value={value}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
className="w-full rounded-lg border border-gray-300 bg-white py-2 pl-3 pr-9 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
/>
{value && (
<button
type="button"
aria-label="清空搜尋"
onClick={() => onChange('')}
className="absolute inset-y-0 right-0 flex w-9 items-center justify-center text-gray-400 hover:text-gray-600 focus-visible:text-gray-700"
>
×
</button>
)}
</div>
)
}同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～