AI Skills.

AI Skills › Design设计設計デザイン › dspachos/ai-skills

dspachos/ai-skills

by dspachos · Design skill作者:dspachos · 设计技能作者:dspachos · 設計技能作者:dspachos · デザインスキル

A small collection of agent skills the author uses and shares, each a plain folder with a SKILL.md plus the scripts and assets it needs — no build step, no lock-in. It includes visual-review for reviewing changes on a local page, ui-bridge for turning questions into a local form, and usability-review for checking apps against Nielsen's ten usability heuristics. The visual-review, ui-bridge, and usability-review skills run a local server and need Node 22.18+.作者自用并分享的小型智能体技能合集,每个技能就是一个普通文件夹,含 SKILL.md 以及所需的脚本和素材——没有构建步骤,没有锁定。它包括:在本地页面上评审改动的 visual-review、把问题变成 local 表单的 ui-bridge、按 Nielsen 十大可用性启发式检查应用的 usability-review。visual-review、ui-bridge、usability-review 这三个技能会跑本地服务器,需要 Node 22.18+。作者自用並分享的小型智慧體技能合集,每個技能就是一個普通資料夾,含 SKILL.md 以及所需的腳本和素材——沒有建構步驟,沒有鎖定。它包括:在本機頁面上審查改動的 visual-review、把問題變成本機表單的 ui-bridge、按 Nielsen 十大可用性啟發式檢查應用的 usability-review。visual-review、ui-bridge、usability-review 這三個技能會跑本機伺服器,需要 Node 22.18+。作者自身が使い、共有する小規模なエージェントスキルのコレクション。各スキルは SKILL.md と必要なスクリプトやアセットからなる素朴なフォルダで、ビルド手順もロックインもない。ローカルページで変更をレビューする visual-review、質問をローカルフォームに変える ui-bridge、Nielsen の 10 のユーザビリティヒューリスティクスでアプリを点検する usability-review を含む。visual-review、ui-bridge、usability-review はローカルサーバーを動かし、Node 22.18+ が必要。

Quick start快速上手快速上手クイックスタート

What it does

A small collection of three agent skills the author uses and shares. Each skill is a plain folder: a SKILL.md with the instructions, plus the scripts and assets it needs. There is no build step and no lock-in: you can read them, edit them, and delete them.

How it works

The three skills each run a local page workflow. visual-review reviews a pull request, a commit, two branches, or uncommitted changes on a local web page, and comments on each finding drive the next step. ui-bridge turns questions into a local form page: the agent writes form.json and your answers come back as answers.json. usability-review checks an app against Nielsen's ten usability heuristics on a local page with screenshots and a coverage table.

How to use it

  • Install all skills into your project with
    npx skills add dspachos/ai-skills
    the CLI asks which agents to target.
  • Install one skill globally, for example
    npx skills add dspachos/ai-skills --skill visual-review -g
  • In Claude Code, run
    claude plugin marketplace add dspachos/ai-skills
    and
    claude plugin install ai-skills@dspachos-ai-skills
    or copy a skill folder by hand, for example into ~/.agents/skills/visual-review/.
  • Then invoke a skill by its command, such as
    /visual-review
    /ui-bridge
    or
    /usability-review

Key points

  • Works with any agent that reads SKILL.md, including Claude Code, Cursor, Codex, Copilot, Amp, pi, and OpenCode.
  • The three skills run a local server through Node and need Node 22.18 or later.

它是做什么的

作者使用并分享的三个智能体技能的小合集。每个技能就是一个普通文件夹:包含指令的 SKILL.md,加上它需要的脚本和资源。没有构建步骤、没有锁定:你可以阅读、编辑和删除它们。

它怎么工作

三个技能各自运行一个本地页面工作流。visual-review 在本地网页上评审拉取请求、提交、两个分支或你未提交的改动,你对每条发现的评论会驱动下一步。ui-bridge 把一组问题变成一个本地表单页:智能体写出 form.json,你的答案以 answers.json 返回。usability-review 在带截图和覆盖表的本地页面上,按尼尔森十大可用性启发式检查应用。

怎么用

  • 用
    npx skills add dspachos/ai-skills
    把全部技能装进你的项目;命令行工具会问你要针对哪些智能体。
  • 全局安装单个技能,例如
    npx skills add dspachos/ai-skills --skill visual-review -g
  • 在 Claude Code 里运行
    claude plugin marketplace add dspachos/ai-skills
    和
    claude plugin install ai-skills@dspachos-ai-skills
    或手动复制技能文件夹,例如复制到 ~/.agents/skills/visual-review/。
  • 然后用技能命令调用,如
    /visual-review
    /ui-bridge
    或
    /usability-review

关键要点

  • 适用于任何能读取 SKILL.md 的智能体,包括 Claude Code、Cursor、Codex、Copilot、Amp、pi 和 OpenCode。
  • 三个技能都通过 Node 运行本地服务器,需要 Node 22.18 或更高版本。
  • README 很短,因此本条目只描述所列的三个技能,不做额外补充。

它是做什麼的

作者使用並分享的三個智慧體技能的小合集。每個技能就是一個普通資料夾:包含指令的 SKILL.md,加上它需要的指令碼和資源。沒有建構步驟、沒有鎖定:你可以閱讀、編輯和刪除它們。

它怎麼運作

三個技能各自執行一個本地頁面工作流程。visual-review 在本地網頁上評審拉取請求、提交、兩個分支或你未提交的改動,你對每條發現的評論會驅動下一步。ui-bridge 把一組問題變成一個本地表單頁:智慧體寫出 form.json,你的答案以 answers.json 返回。usability-review 在帶截圖和覆蓋表的本地頁面上,按尼爾森十大可用性啟發式檢查應用。

怎麼用

  • 用
    npx skills add dspachos/ai-skills
    把全部技能裝進你的專案;命令列工具會問你要針對哪些智慧體。
  • 全域安裝單個技能,例如
    npx skills add dspachos/ai-skills --skill visual-review -g
  • 在 Claude Code 裡執行
    claude plugin marketplace add dspachos/ai-skills
    和
    claude plugin install ai-skills@dspachos-ai-skills
    或手動複製技能資料夾,例如複製到 ~/.agents/skills/visual-review/。
  • 然後用技能命令呼叫,如
    /visual-review
    /ui-bridge
    或
    /usability-review

關鍵要點

  • 適用於任何能讀取 SKILL.md 的智慧體,包括 Claude Code、Cursor、Codex、Copilot、Amp、pi 和 OpenCode。
  • 三個技能都透過 Node 執行本地伺服器,需要 Node 22.18 或更高版本。
  • README 很短,因此本條目只描述所列的三個技能,不做額外補充。

何をするのか

著者が使い、共有している 3 件のエージェントスキルの小さなコレクションだ。各スキルはプレーンなフォルダで、指示を書いた SKILL.md と、必要なスクリプトやアセットが入っている。ビルド手順もロックインもない。読んで、編集して、削除できる。

仕組み

3 つのスキルはそれぞれローカルページのワークフローを実行する。visual-review はローカルウェブページ上でプルリクエスト、コミット、2 つのブランチ、未コミットの変更をレビューし、各指摘へのコメントが次の手順を駆動する。ui-bridge は一連の質問をローカルフォームページに変える。エージェントが form.json を書き、回答が answers.json として返る。usability-review はスクリーンショットとカバレッジテーブル付きのローカルページで、ニールソンの 10 のユーザビリティヒューリスティクスに照らしてアプリを検証する。

使い方

  • npx skills add dspachos/ai-skills
    で全スキルをプロジェクトにインストールする。CLI が対象エージェントを尋ねる。
  • 1 件だけをグローバルにインストールする例は
    npx skills add dspachos/ai-skills --skill visual-review -g
    だ。
  • Claude Code では
    claude plugin marketplace add dspachos/ai-skills
    と
    claude plugin install ai-skills@dspachos-ai-skills
    を実行するか、スキルフォルダを手作業でコピーする。たとえば ~/.agents/skills/visual-review/ へコピーする。
  • 次に
    /visual-review
    /ui-bridge
    /usability-review
    などのコマンドでスキルを呼び出す。

押さえておきたい点

  • SKILL.md を読むあらゆるエージェントで動く。Claude Code、Cursor、Codex、Copilot、Amp、pi、OpenCode などだ。
  • 3 つのスキルは Node 経由でローカルサーバーを動かし、Node 22.18 以上が必要だ。
  • README は短いため、この項目は列挙された 3 件のスキルだけを説明し、それ以上を加えない。

Supported platforms支持的平台支援的平台対応プラットフォーム

Claude CodeCursorCodexGitHub CopilotAmpPiOpenCode

Notes备注備註備考

0 stars on the repo page at check time; visual-review, ui-bridge and usability-review run a local server and need Node 22.18+.核查时仓库页面为 0 星;visual-review、ui-bridge、usability-review 会跑本地服务器,需要 Node 22.18+。核查時儲存庫頁面為 0 星;visual-review、ui-bridge、usability-review 會跑本機伺服器,需要 Node 22.18+。確認時点でのリポジトリページのスターは 0。visual-review、ui-bridge、usability-review はローカルサーバーを動かし、Node 22.18+ が必要。

Skills included包含的技能包含的技能含まれるスキル

visual-reviewui-bridgeusability-review

More Design skills更多设计技能更多設計技能その他のデザインスキル

View all →查看全部 →查看全部 →すべて見る →

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. Its v2.0 Design System Generator draws on 79 searchable UI styles, 192 palettes, 74 font pairings, and 192 industry reasoning rules to produce polished interfaces instead of generic layouts. It works with Claude Code and other major coding agents.为多平台构建专业 UI/UX 提供设计智能的 AI 技能。其 v2.0 设计系统生成器基于 79 种可检索 UI 风格、192 套配色、74 组字体搭配和 192 条行业推理规则,产出精致的界面而不是通用布局。支持 Claude Code 及其他主流编码智能体。為多平台建構專業 UI/UX 提供設計智慧的 AI 技能。其 v2.0 設計系統產生器基於 79 種可檢索 UI 風格、192 套配色、74 組字體搭配和 192 條產業推理規則,產出精緻的介面而不是通用版面。支援 Claude Code 及其他主流編碼智慧體。複数プラットフォームでプロ仕様の UI/UX を構築するためのデザインインテリジェンスを提供する AI スキル。v2.0 Design System Generator は、検索可能な UI スタイル 79 種、パレット 192 種、フォントの組み合わせ 74 組、業界推論ルール 192 件を活用し、汎用的なレイアウトではなく磨き上げたインターフェースを生み出す。Claude Code やその他の主要なコーディングエージェントで使える。

Design设计設計デザインClaude CodeCursorWindsurfAntigravity+19 more+19 个更多+19 個更多+19 件
npm install -g ui-ux-pro-max-cli && uipro init --ai <agent>

A curated collection of DESIGN.md analyses of popular brand design systems — 70+ real-brand systems including Claude, Apple, Stripe, and Linear. Drop one file into your project and let your coding agent generate a UI that matches that brand's look. The DESIGN.md concept comes from Google Stitch, and the collection keeps growing.知名品牌设计系统的 DESIGN.md 分析合集,已收录 70 多个真实品牌系统,包括 Claude、Apple、Stripe、Linear 等。把其中一个文件放进项目,编码智能体就能生成与该品牌风格一致的界面。DESIGN.md 这个概念来自 Google Stitch,合集还在持续增长。知名品牌設計系統的 DESIGN.md 分析合集,已收錄 70 多個真實品牌系統,包括 Claude、Apple、Stripe、Linear 等。把其中一個檔案放進專案,編碼智慧體就能生成與該品牌風格一致的介面。DESIGN.md 這個概念來自 Google Stitch,合集還在持續增長。人気ブランドのデザインシステムを DESIGN.md として分析したキュレーション集。Claude、Apple、Stripe、Linear など 70 以上の実在ブランドのシステムを収録する。ファイルを 1 つプロジェクトに置くだけで、コーディングエージェントがそのブランドの見た目に合った UI を生成する。DESIGN.md の概念は Google Stitch 由来で、コレクションは増え続けている。

Design设计設計デザインGeneric
Copy a DESIGN.md file into your project root (no installer; file-drop usage)

Agent skills that give coding agents taste: art direction, reference images, and a browser check instead of generic AI pages. Rather than accepting the first generic layout, the skill pushes the agent to pick a direction, ground it in references, and verify the result in a real browser. Version 2 holds a single skill, design-taste-frontend; older skills moved to taste-skill-classics and imagegen-skills.给编码智能体品味的智能体技能:艺术指导、参考图和浏览器检查,而不是千篇一律的 AI 页面。它不让智能体接受第一个通用布局,而是推动智能体选定方向、用参考图 grounding,并在真实浏览器里验证结果。v2 只有一个技能 design-taste-frontend,旧技能已移到 taste-skill-classics 和 imagegen-skills。給編碼智慧體品味的智慧體技能:藝術指導、參考圖和瀏覽器檢查,而不是千篇一律的 AI 頁面。它不讓智慧體接受第一個通用版面,而是推動智慧體選定方向、用參考圖 grounding,並在真實瀏覽器裡驗證結果。v2 只有一個技能 design-taste-frontend,舊技能已移到 taste-skill-classics 和 imagegen-skills。コーディングエージェントにセンスを与えるスキル。アートディレクション、リファレンス画像、ブラウザチェックによって、汎用的な AI ページを避ける。最初に出た汎用レイアウトを受け入れるのではなく、方向を選び、リファレンスに根付かせ、実際のブラウザで結果を検証するようエージェントを促す。バージョン 2 は design-taste-frontend の 1 件のみで、旧スキルは taste-skill-classics と imagegen-skills に移った。

Design设计設計デザインClaude CodeCodexGeneric
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"