Communitygithub.com

williamsnieves/landing-factory

當使用者想要設計、重新設計、塑造、評論、審核、打磨、簡化、強化、動畫化或以其他方式改善前端介面時使用:網站、登陸頁面、儀表板、產品 UI、元件、表單、設定、入門流程、空狀態以及原生 iOS 或 Android 畫面。處理 UX 審查、層級結構、佈局、排版、色彩、動態、UX 文案、無障礙性、響應式行為、邊界情況,以及捕捉或記錄設計系統(DESIGN.md、tokens)。也用於讓平淡的 UI 更大膽、喧鬧的 UI 更低調,或實現有野心的視覺效果。不適用於純後端或非 UI 任務。

landing-factory 是什麼?

此技能賦予您工具與權限,打造名副其實的「超群工藝」設計。它以獲得獎項的設計總監思維運作:生成可供生產的程式碼、具備清晰的觀點、深刻理解客戶與使用者需求,並展現卓越工藝。其核心原則包括:交付完整的成果、根據表面模式(說服、操作、閱讀、體驗)調整野心規模,以及透過查看實際渲染結果進行批量驗證。它提供超過20個子指令(例如 `craft`、`shape`、`critique`、`polish`、`animate`、`bolder`),涵蓋從建構與評估到細化與修復的完整設計工作流程。技能支援透過一個獨立二進位啟動器處理專案上下文(PRODUCT.md、DESIGN.md),並在啟動器不可用時提供優雅的降級方案。可於任何命令列環境(包括無 `sh` shell 的 Windows)中使用,主要為 Claude Code 等 AI 編碼代理設計,但也可整合至 Cursor、Windsurf 或 Copilot 等支援技能參考的編輯器中。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/williamsnieves/landing-factory/tree/HEAD/.claude/skills/impeccable

在你喜歡的 AI 中提問

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

說明文件

此技能賦予您工具與權限,打造名副其實的「超群工藝」設計。以獲獎設計總監的方式工作:生產級程式碼、清晰的觀點、深刻理解客戶與其使用者的需求,以及卓越的工藝。

核心原則:

  • 完成任務。不迴避、不走捷徑:交付物是完整的,除非使用者必須提供素材。
  • 根據表面模式調整野心規模(見模式)。「說服」和「體驗」模式需要全心投入:大膽、獨特、有觀點的作品。在「操作」和「閱讀」模式中,野心表現為精準與克制,訪客已熟悉的模式自然有其價值。
  • 透過查看最終發佈尺寸下的渲染結果來驗證,並批次檢查:在一次查看中修復所見的問題,然後再進行下一次查看,而不是每次調整後都截圖。

設定

  1. 每工作階段執行一次 <skill-base-dir>/scripts/impeccable context,其中 <skill-base-dir> 是包含此 SKILL.md 的目錄(技能資料夾,而非其上兩層的外掛根目錄);將 cwd 保持在使用者的專案目錄。該基礎目錄會解析此技能及其參考文件中每個 .claude/skills/impeccable/scripts/impeccable <verb> 命令,而 .claude/skills/impeccable/scripts 僅在執行時期回報無基礎目錄時作為備用。在沒有 sh 的 Windows shell 上,請改為呼叫 .claude/skills/impeccable/scripts/impeccable.cmd。啟動器執行一個與其一同發佈或在首次執行時下載的獨立二進位檔案;不需要 Node 或其他執行時期。將具名來源檔案或路由作為 --target <path> 傳遞。它會載入 PRODUCT.md、DESIGN.md、對應的表面簡報,以及適用的原生平台指南;請遵循其指示,且不要重新執行。
  2. 載入請求的腳本:其指令表中明確或暗示的子指令參考,或針對新表面或取代視覺世界的 reference/new-work.md。在編輯前檢查目標與現有視覺事實。當應用程式無法執行時,從已提交的視覺回歸黃金截圖或螢幕截圖測試夾具開始;根據目前的 token、CSS、元件或素材驗證目標與新鮮度,解決衝突,並比較主題/變體的擷取結果。
  3. 在完成分析與方向確認後,在進行任何 UI 編輯(包括小幅度改良)之前,立即閱讀 reference/craft-floor.md。它包含了品質底線、絕對禁止事項,以及檢測工具無法捕捉的反應。僅在純規劃工作時不需載入。

啟動器不可用: 若拒絕或失敗,請在下一次工具呼叫之前發送一條單獨訊息:「Context loading did not run; I’ll read the existing project context directly.」然後直接讀取現有的 PRODUCT.md 和 DESIGN.md,不憑空創造缺失的上下文,遵循適用的步驟 2–3,並繼續使用允許的工具。這同時適用於規劃和編輯;啟動器失敗並不會阻止這兩者。

如何設計

  • 簡報至上。 尊重固定的美學、時代、材料、字型和調色盤,即使它們與飽和模式警告衝突。將明確的簡報引導至您的個人品味是失敗。
  • 改良保留;重新設計取代。 改良保留現有的識別、行為、文案和範圍外的所有內容。在替換事實性文案或添加宣稱前先詢問。重新設計則保留產品事實、內容、功能、原生直覺和約束,但將舊外觀視為證據和反參考;在 new-work 中選擇一個替代世界並取代 DESIGN.md。切勿在放棄的外觀上進行「修飾」式的改良。
  • 帶有象徵意義的符號不得用於裝飾。 一個主題的世界並不允許將與軍國主義、至上主義或仇恨運動相關的徽章(例如旭日旗的光線、南方邦聯戰旗,或納粹時代的徽章及其風格化變體)用作圖案、徽章或裝飾;請使用該世界中的中性形式。記錄此類符號為事實的內容則維持原狀。
  • 視覺權威是證據,不是檔案名稱。 缺少 DESIGN.md 本身並不使專案變成全新開發;new-work 決定是保留、擴展還是取代現有世界。

模式

模式描述了訪客在此表面上的成功樣貌。

  • 說服: 訪客決定並採取行動;設計即產品。登陸頁面、行銷、活動、定價頁面。爭取注意力和行動。當簡報需要時提供真實圖片;遵循確立的世界,而非類別習慣。
  • 操作: 訪客完成任務。應用程式 UI、儀表板、編輯器、管理後台、設定、工具。可掃描性、一致性、原生期望和真實使用場景重於表現。品牌存在於精確的細節中。
  • 閱讀: 訪客理解某些內容。文件、文章、指南、幫助中心、更新日誌。以理解為目標建構結構,然後讓閱讀體驗值得留下。
  • 體驗: 訪客置身於作品本身。作品集、藝廊、展示廳。讓作品從第一個視口開始主導;介面退居其次。

從請求的表面選擇模式,而非產品,並僅在該表面簡報中持續使用。一個工具的登陸頁面仍然是「說服」;一個時尚品牌的文件仍然是「閱讀」;一個文件索引是「閱讀」,而非「說服」。新表面請參見 new-work.md,更深入的操作/閱讀指引請參見 operate.md。

指令

指令類別描述參考文件
craft [feature]建構已棄用,作為一般新工作請求的別名reference/craft.md
shape [feature]建構在撰寫程式碼前規劃 UX/UIreference/shape.md
init建構將持久的產品上下文捕捉至 PRODUCT.mdreference/init.md
document建構從現有專案程式碼生成 DESIGN.mdreference/document.md
extract [target]建構將可重複使用的 token 和元件提取至設計系統reference/extract.md
critique [target]評估含啟發式評分的 UX 設計審查reference/critique.md
audit [target]評估技術品質檢查(無障礙性、效能、響應式)reference/audit.md · 原生:reference/audit.native.md
polish [target]細化發佈前的最終品質檢查reference/polish.md
bolder [target]細化放大安全或平淡的設計reference/bolder.md
quieter [target]細化降低過於強勢或過度刺激的設計reference/quieter.md
distill [target]細化萃取精髓,移除複雜性reference/distill.md
harden [target]細化生產就緒:錯誤處理、國際化、邊界情況reference/harden.md
onboard [target]細化設計首次使用流程、空狀態、啟動流程reference/onboard.md
animate [target]增強添加有目的的動態效果與動畫reference/animate.md
colorize [target]增強為單色 UI 添加策略性色彩reference/colorize.md
typeset [target]增強改善排版階層與字型reference/typeset.md
layout [target]增強修正間距、節奏和視覺階層reference/layout.md
delight [target]增強添加個性與令人難忘的觸感reference/delight.md
overdrive [target]增強突破常規限制reference/overdrive.md
clarify [target]修正改善 UX 文案、標籤和錯誤訊息reference/clarify.md
adapt [target]修正適應不同裝置與螢幕尺寸reference/adapt.md · 原生:reference/adapt.native.md
optimize [target]修正診斷並修正 UI 效能問題reference/optimize.md
live迭代視覺變體模式:在瀏覽器中選取元素,迭代替代方案reference/live.md
generate [n] [action] [element]迭代在即時瀏覽器中生成 n 個具名元素的變體、版本或替代方案供選擇;無需手動選取reference/generate.md

路由:

  • 無參數: 閱讀 routing.md 並呈現其情境感知選單;絕不自動執行指令。
  • 明確或清楚暗示要執行指令的請求: 載入其參考文件(在原生平台上使用原生變體)並遵循。如果兩個指令都符合,則詢問一次。
  • 工作流程或指令選擇問題: 閱讀 工作流程問題。
  • 其他情況: 將請求視為一般設計工作。缺少 PRODUCT.md 會將新表面或取代世界路由至 init,然後是 new-work;對現有程式碼的狹義改良則如 impeccable context 指示,繼續處理現有實作,並在事後提供 init 選項,而非阻擋在此步驟。
  • teach 是 init 的別名。craft 是已棄用的別名,用於一般新工作,不增加任何功能。shape 負責任務探索,僅在需要視覺世界和表面概念決策時才進入 new-work。

在 init 寫入 PRODUCT.md 後,無需重新執行 impeccable context 即可繼續;當 init 記錄的平台是 ios、android 或 adaptive 時,它會自行載入原生平台參考。

固定 / 取消固定: .claude/skills/impeccable/scripts/impeccable pin <pin|unpin> <command> 建立或移除獨立的 /<command> 快捷鍵。簡潔地回報指令碼的結果;錯誤時逐字轉發 stderr。

掛鉤: /impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> 管理此專案的設計檢測器掛鉤(在 UI 檔案編輯後自動執行檢測器並顯示發現結果)。當使用者以任何參數呼叫時,請載入 reference/hooks.md。

診斷: /impeccable doctor 報告並修復此專案的 Impeccable 工件(PRODUCT.md、DESIGN.md 及其附帶檔案、設定、表面簡報、掛鉤)與此版本讀取內容之間的偏差。當使用者呼叫此指令,或詢問哪些內容已過期、陳舊或需要更新時,請載入 reference/doctor.md。設定輸出中的 CONTEXT_STALE 指示是同一報告的精簡版本;請依照其自身指示處理,而不是在未詢問的情況下執行 doctor。

切勿將修復偏差作為設計任務的副作用。 除非使用者要求,否則 CONTEXT_STALE 的發現僅被回報,不會被處理。唯一的例外是標記為 auto 的發現,下一次對該檔案的寫入無論如何都會執行它。

Individual skills in this repo

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

williamsnieves/landing-factory

Turn a public reference website into an abstract pattern sheet in patterns/<slug>.md (section map, hero type, grid and spacing, type scale, palette in generic terms, density, motion inventory with the technique behind each effect, detected libraries) without storing any of the site''s assets, copy or code. Use when the user runs /analyze-reference <url> or asks to analyze, study, break down or extract patterns from an inspiration or reference site for a landing. Checks robots.txt and text-and-data-mining reservations first and aborts if access is disallowed. Not for cloning or rebuilding a site.

williamsnieves/landing-factory

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML/CSS, React, Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated, "AI-made", sloppy, or asks to make it look designed, premium, award-level or less like every other site. Not for dashboards or app screens.

williamsnieves/landing-factory

Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks. Also use when the user says "openspec apply", "opsx apply", or "openspec implement".

williamsnieves/landing-factory

Archive a completed OpenSpec change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete. Also use when the user says "openspec archive" or "opsx archive".

相關技能