Communitygithub.com

ToshqulovLaziz/naqsh

フロントエンドUIを、生成されたものではなく「意図的にデザインされた」ように設計・再設計します。「page」(ランディング、ポートフォリオ、マーケティング、プロダクトページ)と「app」(ERP、管理者、ダッシュボード、テーブル、フォーム)の2つのサーフェスをサポート。モードは「build」「redesign」「audit」。ユーザーがウェブページやアプリ画面のデザイン、構築、スタイル変更、再設計、磨き上げ、レビューを依頼したとき、「AIが作った」と感じさせる外観を改善したいとき、またはnaqshを指定したときに使用します。uz/ru/en(ラテン文字+キリル文字)のプロジェクトに対応。

naqsh とは?

naqshは、フロントエンドUIを生成された「AI臭さ」から脱却させ、意図的にデザインされた洗練された外観に仕上げるためのAIエージェントスキルです。主に2つのサーフェス、すなわち「page」(ランディングページ、ポートフォリオ、マーケティングサイト、プロダクトページ)と「app」(ERP、管理画面、ダッシュボード、テーブル、フォーム)を対象とし、3つのモード(新規構築「build」、既存UIの再設計「redesign」、問題点の指摘を行う「audit」)を提供します。このスキルは、Node.js 22以上とローカルのChrome/Edgeのみで動作し、追加のインストールは不要です。処理の流れは、ルーティング、コンテキスト収集、現状のベースライン計測、インベントリ(コンテンツの現実性評価)、方向性の提示(ユーザーのテイストプロファイルに基づいた複数のデザイン案)、フロア条件(アクセシビリティやフォントなどの厳守事項)のチェック、生成UI特有の「臭い」の排除、ビルドループ(トークン定義→実装→詳細品質チェック→レビューアーによる検証)、そして最終的なレポート出力までを体系的に実行します。特に、ビルドプロセスでは「署名モーメント」と呼ぶ核となるデザイン要素の実装と、2倍表示でも意図的に見える細部へのこだわりが重視されており、結果は常に「DESIGN.md」に設計判断と共に記録されます。ユーザーからのフィードバックはテイストプロファイルに自動学習され、次回以降のデザイン提案に反映されます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ToshqulovLaziz/naqsh/tree/main/skills/naqsh

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

naqsh は何をしますか?

v0.6。<skill> はこのスキルのベースディレクトリを意味します。スクリプトは Node ≥ 22 とローカルの Chrome/Edge が必要です。インストールは不要です。

1. ルーティング

何よりも先に、サーフェスとモードを1行で示します。

サーフェスシグナル参照ファイル
pageランディング、ポートフォリオ、マーケティング、プロダクト、ワンページreferences/page.md
appERP、管理画面、ダッシュボード、テーブル、フォーム、設定、CRUDreferences/app.md
モードコードを触る?出力
buildはい、新しいUIUI + DESIGN.md
redesignはい。動作、データ、文言は維持するUI + DESIGN.md
auditいいえファイル:行番号と修正案付きの順位付けられた指摘

チェックを実行する前に必ず references/rules.md を読んでください。誰も質問に答えられない場合は、自分で判断し、その理由を記録してください。

2. コンテキスト

  • スタック、スタイリング、既存のトークン、フォントとその読み込み方法、テーマスイッチ(+ そのlocalStorageキー)、i18n(+ ロケールキー)、ルート、ビルドコマンド。
  • 変更してよいものと、絶対に変更してはいけないもの(他のページ、共有コンポーネント、ビジネスロジック)。
  • ロケール:いずれかのロケールがキリル文字を使用する場合、選択するすべての書体がそれをカバーしている必要があります。

3. ベースライン

現在の状態に対して以下の両方のチェックを実行し、出力を保持します。これはレポートの「Before」であり、実際のバグ(フォントが読み込まれない、コントラスト不足、オーバーフロー)を明らかにすることがよくあります。

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. 方向性(テイストに基づいて決定)

node <skill>/scripts/deal.mjs --surface <page|app> --options 3 --project <projectRoot>

このスクリプトは、ライブラリをユーザーのテイストプロファイル(~/.naqsh/taste.json。プロジェクトごとに <project>/.naqsh/taste.json で上書き可能)と最近の選択に対してスコアリングし、異なるファミリーから3つの方向性を提示します。

  • ユーザーがいる場合は、3つの方向性(アイデア、書体、パレット、ヒーロー)を表示し、選択してもらいます。いない場合は、コンテンツに最も適したものを選び、その理由を述べてください。
  • deal.mjs --pick <id> は完全なシート(セクション、モーション、フォントのインポート、ライト/ダークトークン)を表示し、選択を記録します。そのシートに従って構築してください。シートの書体、パレット、ヒーローが契約です。サイズとセクションは実際のコンテンツに適応させてください。逸脱する場合は、書面による理由(例:素材の欠如)を添えてください。
  • 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)を更新し、その旨を伝えます。1つのサーフェスにのみ当てはまる好みは、その 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 をアニメーションに使用。
  • 新しいトークンはスコープ化され、触っていないページが変更されないようにすること。

7. 生成UIの「臭い」(反射的に対処。配布されたシートが許可する場合のみ免除)

デフォルトのTailwind indigo/violet、グロー、ガラス、オーロラブロブ、周回するアイコン、シャイマーボタン、グラデーションテキスト、すべての見出しの上のトラッキングされた大文字のアイブロー、同一の角丸+影のカードグリッド、丸い指標のヒーローバンド、1つの画面で同じ名前やタイトルが繰り返されること。大胆なスケール、強い色、セリフ/サンセリフのコントラストは「臭い」ではありません — 臆病さも失敗です。結果がテンプレートと見分けがつかない場合は、シートのアイデアをより強く推し進めてください。

8. ビルドループ

  1. トークン(スコープ化)→ メイン画面 / ヒーロー → 残り。
  2. 各ステップの後:lint。メイン画面の後:ビルド、プレビュー、そのルートのみで inspect(最も広い幅と最も狭い幅、最初のロケール、両テーマ)。最後に:完全なマトリックス。毎回スクリーンショットを開いて確認します。修正、繰り返し — 最初の完全なパスの後は最大3ラウンド。変更したファイルのみを読み、ターンは短く保ちます。
  3. 詳細パス: references/components.md を読んでください。すべてのコントロールがそれに従って構築され(native-control は免除されていない限り残さない)、署名モーメントが存在します。inspect ... --details を実行し、<out>/details/ 内のすべてのクロップを開いて、2倍表示でもそれぞれが意図的に見えるまで修正します。
  4. 詳細パスが完了し、ビルドがフロアFAIL 0になったら、DESIGN.md(ドラフト)を書き、新しいコンテキストでレビューアーを起動します — エージェントツール、subagent_type: "naqsh:naqsh-reviewer" — プロジェクトルート、サーフェス、モード、方向性ID、<skill> パス、スクリーンショットフォルダ(details/ を含む)、プレビューURL、inspectフラグを渡します。レビューアーの floor、idea、fidelity の修正を適用し(その他は判断に委ねる)、チェックを再実行します。レビューは1ラウンド。評決が rework だった場合のみ2ラウンド目を許可します。エージェントツールが利用できない場合は、agents/naqsh-reviewer.md から自分でレビューを行い、スクリーンショットを再確認してください。
  5. フロアFAIL 0、すべての「臭い」が修正または免除され、プロジェクトのビルドが成功した状態で終了します。プレビューサーバーを停止します。

9. レポート

プロジェクトルート(またはユーザーが指定した場所)に DESIGN.md を作成します:提示された方向性と選択、アイデアの一文、トークン、書体、主要な決定事項、署名モーメント、Before→After のチェックカウント、理由付きの免除、判断されたチェック、未完了項目。最後に、ユーザーに何が好きで何が嫌いかを尋ね、テイストプロファイルが改善されるようにします。

関連スキル