pulkitxm/claude-directory

解決的問題

提供一個精心挑選的開源畫廊，展示使用 Claude（特別是 Fable 5）生成的高保真度 Web UI 實驗與前端元件。它作為開發者與設計師的參考，展示 AI 在現代 Web 界面、動畫與 3D 場景方面的建構能力。

如何運作

此倉儲包含一系列自包含的專案資料夾。每個專案都包含生成的程式碼（使用 React、TypeScript、Vite、Tailwind CSS、Three.js 與 GSAP 等技術堆疊）以及建立該專案所使用的特定提示（prompt.md）。這讓使用者可以複製貼上元件，或研究實現特定視覺效果所使用的提示技巧。

適用對象

• 尋找 AI 生成 UI 靈感或可直接複製的範本的 前端開發者。
• 對如何使用 LLM 產生複雜網頁設計與版面提示感興趣的 提示工程師。
• 探索 Claude 在「氛圍編碼」與快速原型設計方面能力的 AI 愛好者。

亮點

• 多樣化類別：包含英雄區塊、登陸頁面、GLSL 着色器、設計系統、3D/WebGL 場景與動畫。
• 提示透明度：每個專案皆附帶原始提示，使生成過程可重現。
• 現代技術堆疊：採用 Framer Motion、Three.js 與 Tailwind CSS 等業界標準工具。
• 即時目錄：托管的畫廊讓使用者可在深入程式碼前先視覺瀏覽這些實驗。