naqsh 是做什麼的?
v0.6。<skill> 表示此技能的基本目錄。腳本需要 Node ≥ 22 以及本地的 Chrome/Edge;無需安裝任何套件。
1. 路由
在執行任何其他操作之前,先用一行陳述表面與模式。
| 表面 | 信號 | 參考文件 |
|---|---|---|
page | landing、作品集、行銷、產品、一頁式網站 | references/page.md |
app | ERP、後台、儀表板、表格、表單、設定、CRUD | references/app.md |
| 模式 | 是否修改程式碼? | 輸出 |
|---|---|---|
build | 是,建構新 UI | UI + DESIGN.md |
redesign | 是;保留行為、資料與文案 | UI + DESIGN.md |
audit | 否 | 附有檔案:行號與修復建議的排名清單 |
在執行檢查前,務必先讀取 references/rules.md。如果沒有人能回答問題,請自行決定並記錄原因。
2. 上下文
- 技術棧、樣式方法、現有 token、字型及其載入方式、主題切換(及其 localStorage 鍵)、i18n(+ 語系鍵)、路由、建構指令。
- 哪些可以修改,哪些不能動(其他頁面、共用元件、商業邏輯)。
- 語系:若任一語系使用西里爾字母,則每個選定的字型都必須支援它。
3. 基線
對當前狀態執行以下兩個檢查,並保留輸出:這是報告的「改造前」狀態,通常能揭露真實的錯誤(字型從未載入、對比度不足、溢位)。
node <skill>/scripts/lint.mjs <projectRoot>
node <skill>/scripts/inspect.mjs http://localhost:PORT --surface <surface> --routes ... --locales ... --themes ...
audit 模式:從此處開始遵循 references/audit.md 進行,然後停止。不要編輯專案檔案。
4. 盤點
- 主體: 8–12 個僅屬於此產品或人物的獨特事物(名稱、地點、真實數字、真實作品)。
- 素材: 為每個視覺空缺標記為
real(真實素材)、picture(可合法取得的圖片)或absent(無)。 永遠不要捏造證明:不要使用假標誌、假推薦、假指標或假截圖。 - 受眾與任務: 誰在看這個畫面,他們必須先做什麼或先學習什麼。
5. 方向(經由品味驅動的牌組)
n'ode <skill>/scripts/deal.mjs --surface <page|app> --options 3 --project <projectRoot>
該腳本會根據使用者的品味設定檔(~/.naqsh/taste.json,可在 <project>/.naqsh/taste.json 中為專案覆寫)以及最近的選擇來評分字型庫,並從不同家族中發出 3 個方向。
- 如果使用者在場,則展示這三個方向(概念、字型、色板、英雄區塊),讓他們選擇。否則自動選擇最適合內容的方向,並說明原因。
deal.mjs --pick <id>會輸出完整設計表(章節、動畫、字型匯入、淺色/深色 token),並記錄此次選擇。 從設計表開始建構:其字型、色板和英雄區塊是合約。根據實際內容調整尺寸與章節;僅在有書面原因時偏離(例如缺少素材)。page:同時讀取references/page.md。app:同時讀取references/app.md;設計表中的system區塊決定外殼、密度、KPI、表格、狀態與圖表樣式。
設計摘要 vs 品味。 設計摘要中的形容詞(「平靜」、「簡約」、「專業」)描述的是工作任務,而非外觀。應透過清晰度、密度與動畫克制來滿足這些形容詞,而非選擇品味設定檔會避開的方向。切勿只因方向比摘要的形容詞更大膽就放棄它;如果摘要與品味真的衝突,則選擇符合品味的,並在 DESIGN.md 中註明。
品味回饋。 當使用者表示喜歡或不喜歡某個結果時,更新 ~/.naqsh/taste.json(boldness 1–5、temperature warm|cool|neutral|any、typeStyles、likes、avoid、notes),並告知他們。僅適用於單一表面的偏好,應放在其 page 或 app 區塊中,該區塊會覆蓋一般設定。
6. 基礎規範(不可豁免;腳本會檢查大部分項目)
- 所有語系的可見文字均來自 i18n;不得使用自創文案。
- 字型已載入並支援所有語系字集;最長語系在 375px 寬度下能完整顯示。
- 字型
@import必須寫在@import "tailwindcss"之前;元素樣式放在@layer base內。 - 無水平頁面滾動;使用
overflow-x: clip,切勿使用hidden或100vw。 - 每個主題中顏色對比度 ≥ 4.5:1(大型文字 3:1);焦點指示器可見;點擊目標 ≥ 24px(建議 44px)。
- 尊重
prefers-reduced-motion;不要使用transition: all;只對 transform/opacity 屬性做動畫。 - 新的 token 必須作用域化,以免影響未修改的頁面。
7. AI 生成 UI 的常見跡象(直覺:僅當牌組允許時才能豁免)
預設的 Tailwind 靛藍/紫色;發光、玻璃、極光 blob、軌道環繞圖示、閃爍按鈕、漸層文字;每個標題上方都有的追蹤大寫眉題;完全相同的圓角+陰影卡片網格;圓形指標的英雄區塊;同一個名稱或標題在一個畫面中重複出現。大膽的字體級別、強烈的顏色以及襯線/無襯線對比不是跡象——膽怯同樣是失敗:如果結果看起來像範本,請更用力地推動牌組的概念。
8. 建構循環
- Token(作用域化)→ 主要畫面 / 英雄區塊 → 其餘內容。
- 每個步驟之後:執行
lint。主要畫面完成後:建構、預覽、對該路由執行inspect(最寬 + 最窄寬度、第一個語系、兩個主題)。最終:執行完整矩陣。每次都要開啟截圖並仔細查看。修復、重複——第一次完整 pass 後最多 3 輪。只讀取你修改的檔案;保持回合簡短。 - 細節 pass: 讀取
references/components.md;每個控制項都必須依此建構(不得遺留未豁免的native-control),簽名時刻必須存在。執行inspect ... --details,並開啟<out>/details/中的每一張裁剪圖;修復直到每張圖在 2x 縮放下看起來都經過刻意設計。 - 當細節 pass 完成且建構達到 0 個基礎規範 FAIL 時,撰寫
DESIGN.md(草稿),並在新的上下文中啟動審查者——使用 Agent 工具,subagent_type: "naqsh:naqsh-reviewer"——並傳入:專案根目錄、表面、模式、方向 ID、<skill>路徑、截圖資料夾(含details/)、預覽 URL 以及 inspect 旗標。套用其floor、idea與fidelity修復(其他項目自行判斷),然後重新執行檢查。一輪審查;只有在結果為rework時才進行第二輪。 如果沒有 Agent 工具可用,請在重新檢視截圖後,自行從agents/naqsh-reviewer.md進行審查。 - 以 0 個 floor FAIL、每個跡象都已修復或豁免、且專案建構成功作為結束。關閉預覽伺服器。
9. 報告
在專案根目錄(或使用者指定的位置)撰寫 DESIGN.md:發出的選項與選擇、概念說明、token、字型、關鍵決策、簽名時刻、改造前 → 改造後的檢查計數、豁免項目及其原因、經判斷的檢查、未解決項目。最後詢問使用者喜歡與不喜歡的地方,以便改善品味設定檔。