brand-landingpage
設計以品牌為核心的登陸頁面，搭配互動式品牌訪談
多數登陸頁面之所以失敗，是因為跳過了品牌識別這個步驟。本技能引導使用者完成結構化的品牌訪談，然後使用 Stitch SDK 生成精美的登陸頁面與相應的設計系統。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「brand-landingpage」。 為我的 API 工具 DataPipe 建立一個登陸頁面
預期結果:
技能會詢問您的產品目的，然後引導您選擇 3 個品牌形容詞，例如簡潔、技術感和現代感。在確認採用靛藍色點綴的深色主題後，它會生成包含英雄區塊、程式碼片段、功能介紹與頁尾區塊的桌面版登陸頁面。
正在使用「brand-landingpage」。 顏色感覺不對，可以換掉嗎？
預期結果:
技能會詢問顏色哪裡不對勁：太亮、太暗，還是色調不對。當您說太亮時，它會生成一個保留相同版面但調整色彩飽和度的柔和版本。
正在使用「brand-landingpage」。 我想比較不同的版面選項
預期結果:
技能會生成 3 種不同版本的登陸頁面：置中英雄區塊、左右分割版面，以及全幅頁首。它會在三種瀏覽器分頁中全部開啟，並詢問您偏好哪個方向。
安全審計
低風險All 295 static analysis findings were evaluated against actual file content. All 'weak cryptographic algorithm' findings are false positives caused by hex color codes in brand design reference tables. All 'Ruby/shell backtick execution' findings are false positives from markdown code blocks showing SDK method names and CLI commands. The 'C2 keywords', 'system reconnaissance', 'Windows SAM database', and 'Windows cmd.exe' findings are all false positives resulting from design terminology, brand interview questions, and legitimate file-opening instructions. The 'environment file access' finding is confirmed but represents proper API key management with documented security practices. The 'hardcoded URL' findings are low-severity documentation links for the Stitch SDK. The heuristic 'dangerous combination' finding is a false positive reflecting expected SDK integration patterns (API key + SDK calls + documentation references). No prompt injection, data exfiltration, or malicious intent was detected.
低風險問題 (1)
風險因素
品質評分
你能建構什麼
為 side project 建立登陸頁面
正在開發 CLI 工具或開源專案的開發者需要登陸頁面卻沒有設計經驗。本技能執行品牌訪談並生成專業的頁面。
建立新創公司行銷網站
早期階段的新創公司需要為 SaaS 產品建立登陸頁面。本技能協助定義品牌識別，並產出包含功能、定價與客戶見證區塊的頁面。
建立開發者作品集頁面
開發者或設計師想要個人作品集的登陸頁面。本技能進行品牌訪談，並生成包含精選專案與個人簡介區塊的頁面。
試試這些提示
為我的專案 [Project Name] 建立一個登陸頁面。這是一個 [description]。目標使用者是 [audience]。
我想為我的產品 [Project Name] 設計一個登陸頁面。讓我先透過品牌訪談來定義視覺識別。
我的登陸頁面上的英雄區塊感覺太單調了。能不能生成一個更大膽的版面配置、色彩對比更強的版本？請保留原本的配色方案。
我有一個昨天儲存的設計工作階段。從我中斷的地方繼續，並幫我完成部署套件的最後步驟。
最佳實務
- 即使想跳過，也請完成品牌訪談。整個過程只需 5 分鐘，卻能讓頁面從千篇一律的範本變成真正符合產品風格的設計。
- 透過在瀏覽器中開啟 HTML 來審查生成的頁面，而不是要求文字描述。視覺反饋能帶來更好的設計迭代效果。
- 在開始之前先將 Stitch API 金鑰儲存在環境變數中，這樣技能才能不中斷地生成和迭代設計。
避免
- 要求技能嵌入公司標誌或上傳圖片。Stitch SDK 是從文字提示生成內容，不接受圖片輸入。
- 提供 CSS 層級的意見，例如「加上 padding-top 40px」。應將反饋轉換為設計意圖，例如「在標題上方增加更多留白空間」。
- 跳過行動版型。桌面版版面通常需要針對行動裝置進行調整，同時生成兩種版本才能確保一致的使用者體驗。