Communitygithub.com

ToshqulovLaziz/naqsh

設計或重新設計前端 UI,使其看起來經過刻意設計,而非隨意生成。支援「頁面」(landing、作品集、行銷、產品頁)與「應用」(ERP、後台、儀表板、表格、表單)兩種表面,以及建構、重新設計、審核三種模式。適用 uz/ru/en(拉丁 + 西里爾字母)專案。

naqsh 是什麼?

naqsh 是一個前端 UI 設計與重構技能,專為 AI 代理(如 Claude Code、Cursor、Codex)打造,幫助開發者將「AI 生成感」的通用介面轉變為經過精心設計、有品味的 UI。它支援兩種表面:「page」適用於 landing page、作品集、行銷與產品頁;「app」適用於 ERP、後台、儀表板、表格與表單等內部工具。模式包含「build」(從零建構)、「redesign」(保留行為與資料,僅改造視覺)、以及「audit」(不修改程式碼,僅產出審核報告)。 naqsh 的執行流程嚴謹:先根據使用者品味設定(`~/.naqsh/taste.json`)與內容特性,透過 `deal.mjs` 腳本自動產生三種設計方向(包含字型、色板、英雄區塊),再由開發者選擇或由 AI 自動選定最佳方案。建構過程中會自動執行 `lint.mjs` 與 `inspect.mjs` 檢查,確保沒有水準滾動、顏色對比度達標、字型正確載入等基礎品質。最後還會啟動「naqsh-reviewer」子代理進行一輪設計審查,確保成品不僅符合規範,更具視覺意圖與簽名時刻。 此技能特別適合處理 uz/ru/en 多語系專案(含西里爾字母),並內建「減少動畫偏好」支援。它的核心哲學是:不要害怕大膽配色與字型對比,真正的「AI 感」問題來自於模板化的圓角陰影卡片、紫色漸層、發光玻璃效果等常見陷阱。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ToshqulovLaziz/naqsh/tree/main/skills/naqsh

在你喜歡的 AI 中提問

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

說明文件

naqsh 是做什麼的?

v0.6。<skill> 表示此技能的基本目錄。腳本需要 Node ≥ 22 以及本地的 Chrome/Edge;無需安裝任何套件。

1. 路由

在執行任何其他操作之前,先用一行陳述表面與模式。

表面信號參考文件
pagelanding、作品集、行銷、產品、一頁式網站references/page.md
appERP、後台、儀表板、表格、表單、設定、CRUDreferences/app.md
模式是否修改程式碼?輸出
build是,建構新 UIUI + 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. 建構循環

  1. Token(作用域化)→ 主要畫面 / 英雄區塊 → 其餘內容。
  2. 每個步驟之後:執行 lint。主要畫面完成後:建構、預覽、對該路由執行 inspect(最寬 + 最窄寬度、第一個語系、兩個主題)。最終:執行完整矩陣。每次都要開啟截圖並仔細查看。修復、重複——第一次完整 pass 後最多 3 輪。只讀取你修改的檔案;保持回合簡短。
  3. 細節 pass: 讀取 references/components.md;每個控制項都必須依此建構(不得遺留未豁免的 native-control),簽名時刻必須存在。執行 inspect ... --details,並開啟 <out>/details/ 中的每一張裁剪圖;修復直到每張圖在 2x 縮放下看起來都經過刻意設計。
  4. 當細節 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 進行審查。
  5. 以 0 個 floor FAIL、每個跡象都已修復或豁免、且專案建構成功作為結束。關閉預覽伺服器。

9. 報告

在專案根目錄(或使用者指定的位置)撰寫 DESIGN.md:發出的選項與選擇、概念說明、token、字型、關鍵決策、簽名時刻、改造前 → 改造後的檢查計數、豁免項目及其原因、經判斷的檢查、未解決項目。最後詢問使用者喜歡與不喜歡的地方,以便改善品味設定檔。

相關技能