Design Skills for AI Agents面向 AI 智能体的设计技能面向 AI 智能體的設計技能AI エージェント向けデザインスキル

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 やその他の主要なコーディングエージェントで使える。

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 由来で、コレクションは増え続けている。

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 に移った。

The design vocabulary for your coding agent: steer with polish and bolder, review with critique and audit, and catch AI slop before it ships. It gives agents a shared language for visual quality instead of vague 'make it nicer' prompts, and ships a CLI detector for checking work outside the agent. It works with Claude Code, Cursor, Codex, Copilot, and many other coding tools.给编码智能体的设计词汇表：用 polish 和 bolder 引导方向，用 critique 和 audit 做评审，在 AI 味设计上线之前就把它拦下来。它让智能体拥有关于视觉质量的共同语言，而不是含糊的“做得好看点”，还附带一个 CLI 检测器，可以在智能体之外检查成果。支持 Claude Code、Cursor、Codex、Copilot 等众多编码工具。給編碼智慧體的設計詞彙表：用 polish 和 bolder 引導方向，用 critique 和 audit 做審查，在 AI 味設計上線之前就把它攔下來。它讓智慧體擁有關於視覺品質的共同語言，而不是含糊的「做得好看點」，還附帶一個 CLI 檢測器，可以在智慧體之外檢查成果。支援 Claude Code、Cursor、Codex、Copilot 等眾多編碼工具。コーディングエージェントのためのデザインボキャブラリー。polish と bolder で方向付けし、critique と audit でレビューし、AI 臭さが出荷される前に食い止める。曖昧な「もっときれいに」ではなく、視覚品質についての共通言語をエージェントに与え、エージェント外で確認できる CLI 検出ツールも付属する。Claude Code、Cursor、Codex、Copilot など多数のツールに対応する。

Skills for designers and engineers, distilled from Emil Kowalski's years of experience at companies like Vercel and Linear. Knowing whether an animation or design choice is right is hard; these skills aim to get you to the right decisions faster, on the premise that AI doesn't replace domain expertise — it amplifies it. The canonical repo is emilkowalski/skills (not /skill).面向设计师和工程师的技能，提炼自 Emil Kowalski 在 Vercel、Linear 等公司多年的经验。判断一个动画或设计选择是否正确很难；这些技能的目标是让你更快做出正确决定，前提是 AI 不会取代领域专业知识——它放大这种知识。规范仓库是 emilkowalski/skills（不是 /skill）。面向設計師和工程師的技能，提煉自 Emil Kowalski 在 Vercel、Linear 等公司多年的經驗。判斷一個動畫或設計選擇是否正確很難；這些技能的目標是讓你更快做出正確決定，前提是 AI 不會取代領域專業知識——它放大這種知識。規範儲存庫是 emilkowalski/skills（不是 /skill）。デザイナーとエンジニアのためのスキル。Emil Kowalski が Vercel や Linear などで積んだ長年の経験を抽出したもの。アニメーションやデザインの選択が正しいかどうかを見極めるのは難しい。このスキルは正しい判断へより速く到達することを目指す。前提は、AI は専門知識に取って代わるのではなく、それを増幅するということである。正規のリポジトリは emilkowalski/skills（/skill ではない）。

A design skill that refuses to look AI-generated. It deals three themes from a catalog of fifty materials, builds the page around what the visitor came to do, and lints the result in a real browser against the tells that read as machine-made — the eyebrow above every heading, tracked-capital labels, and other stock AI patterns. A fresh-context reviewer gets the last word.一款拒绝“AI 味”的设计技能。它从 50 套素材中抽出 3 套主题，围绕访客的真实目标构建页面，并在真实浏览器里对照机器生成的典型痕迹做检查：每段标题上的小眉题、字母间距过大的标签等陈词滥调。最后由一个全新上下文的评审者把关。一款拒絕「AI 味」的設計技能。它從 50 套素材中抽出 3 套主題，圍繞訪客的真實目標建構頁面，並在真實瀏覽器裡對照機器生成的典型痕跡做檢查：每段標題上的小眉題、字母間距過大的標籤等陳腔濫調。最後由一個全新上下文的審查者把關。AI 生成に見えないことにこだわるデザインスキル。50 種類の素材カタログから 3 つのテーマを選び、訪問者の目的に沿ってページを構築し、実際のブラウザで機械生成に見える特徴（見出し上のアイブロウ、字間を広げたラベルなど定番の AI パターン）をチェックする。最後は新しいコンテキストのレビュアーが判断を下す。

A growing collection of design skills for AI coding tools, each a self-contained folder you install only as needed. It currently contains exactly one skill, landing-page-design, which builds a landing page from scratch — intake questions, page structure, conversion copy, and a full visual system of type, spacing, radius, and motion. More skills are on the way, and it works with any tool that reads a markdown rules file.面向 AI 编码工具、持续增长的设计技能合集，每个技能都是独立文件夹，按需安装。目前恰好包含一个技能 landing-page-design，可以从零搭建落地页：需求访谈、页面结构、转化文案，以及字体、间距、圆角、动效的完整视觉系统。更多技能正在路上，任何能读取 markdown 规则文件的工具都可用。面向 AI 編碼工具、持續增長的設計技能合集，每個技能都是獨立資料夾，按需安裝。目前恰好包含一個技能 landing-page-design，可以從零搭建落地頁：需求訪談、頁面結構、轉化文案，以及字體、間距、圓角、動效的完整視覺系統。更多技能正在路上，任何能讀取 markdown 規則檔案的工具都可用。AI コーディングツール向けに増え続けるデザインスキルのコレクション。各スキルは自己完結したフォルダで、必要なものだけをインストールする。現在は landing-page-design の 1 件のみで、ヒアリング、ページ構成、コンバージョンコピー、書体・間隔・角丸・モーションの完全なビジュアルシステムを備えたランディングページをゼロから構築する。さらなるスキルが追加予定で、markdown のルールファイルを読み込むツールなら何でも使える。

A collection of agent skills that help you build great interfaces, covering UI, typography, colors, accessibility, layout, product writing, and polish. The skills distill what Jakub Krehel writes about on his site and in Interfaces, his design engineering magazine. Individual skills review screens and flows across accessibility, layout, writing, typography, color, and UI polish, returning one ranked report.帮助你构建出色界面的智能体技能合集，覆盖 UI、排版、颜色、无障碍、布局、产品文案和打磨。这些技能提炼了 Jakub Krehel 在他个人网站和设计工程杂志 Interfaces 上写的内容。单个技能会从无障碍、布局、文案、排版、颜色、UI 打磨等维度评审界面或流程，返回一份排序后的报告。幫助你建構出色介面的智慧體技能合集，涵蓋 UI、排版、顏色、無障礙、版面、產品文案和打磨。這些技能提煉了 Jakub Krehel 在他個人網站和設計工程雜誌 Interfaces 上寫的內容。單個技能會從無障礙、版面、文案、排版、顏色、UI 打磨等維度審查介面或流程，返回一份排序後的報告。優れたインターフェース構築を助けるエージェントスキルのコレクション。UI、タイポグラフィ、色、アクセシビリティ、レイアウト、プロダクトライティング、磨き上げをカバーする。Jakub Krehel が自身のサイトやデザインエンジニアリング雑誌 Interfaces で書いている内容を抽出したもの。各スキルは画面やフローをアクセシビリティ、レイアウト、ライティング、タイポグラフィ、色、UI の磨き上げの観点からレビューし、順位付きレポートを 1 件返す。

68 ready-to-use design system inspirations in DESIGN.md format: drop one in and Claude Design scaffolds a full UI in one shot. Each file captures a complete visual system — type, color, spacing, and components — so the agent starts from a coherent design instead of a blank page. These are direct DESIGN.md drops, not CLI installs.68 套开箱即用的 DESIGN.md 格式设计系统灵感：放进一个文件，Claude Design 就能一次脚手架出完整界面。每个文件都 captured 一套完整的视觉系统——字体、颜色、间距、组件，让智能体从连贯的设计出发，而不是空白页。这些是直接投放的 DESIGN.md 文件，不是 CLI 安装包。68 套開箱即用的 DESIGN.md 格式設計系統靈感：放進一個檔案，Claude Design 就能一次搭建出完整介面。每個檔案都收錄了一套完整的視覺系統——字體、顏色、間距、元件，讓智慧體從連貫的設計出發，而不是空白頁。這些是直接投放的 DESIGN.md 檔案，不是 CLI 安裝包。DESIGN.md 形式のすぐに使えるデザインシステムの着想 68 件。ファイルを 1 つ置くだけで Claude Design が完全な UI を一度に足場組みする。各ファイルは書体、色、間隔、コンポーネントからなる完全なビジュアルシステムを収めており、エージェントは白紙ではなく一貫したデザインから出発できる。これらは CLI インストールではなく、直接投下する DESIGN.md ファイルである。

Two agent skills for working with shadcn/ui: one for discovering existing components across the ecosystem before building, one for reviewing custom components against shadcn design patterns. The discovery skill searches 1,500+ existing components via the official shadcn MCP or CLI, so agents reuse what's already there instead of reinventing tables, forms, and modals. Both follow the open Agent Skills standard and work with Claude Code, Cursor, Windsurf, Codex, Gemini CLI, and Copilot.两款面向 shadcn/ui 的智能体技能：一款在动手之前先发现生态中已有的组件，另一款按 shadcn 设计模式审查自定义组件。发现技能通过官方 shadcn MCP 或 CLI 检索 1,500 多个已有组件，让智能体复用现成方案，而不是重新发明表格、表单、弹窗。两者都遵循开放的 Agent Skills 标准，支持 Claude Code、Cursor、Windsurf、Codex、Gemini CLI、Copilot。兩款面向 shadcn/ui 的智慧體技能：一款在動手之前先發現生態中已有的元件，另一款按 shadcn 設計模式審查自訂元件。發現技能透過官方 shadcn MCP 或 CLI 檢索 1,500 多個已有元件，讓智慧體重複使用現成方案，而不是重新發明表格、表單、彈窗。兩者都遵循開放的 Agent Skills 標準，支援 Claude Code、Cursor、Windsurf、Codex、Gemini CLI、Copilot。shadcn/ui で使う 2 つのエージェントスキル。1 つは構築前にエコシステム内の既存コンポーネントを発見するためのもの、もう 1 つはカスタムコンポーネントを shadcn のデザインパターンに照らしてレビューするためのもの。発見スキルは公式 shadcn MCP または CLI で 1,500 以上の既存コンポーネントを検索し、テーブルやフォーム、モーダルを再発明するのではなく既存品を再利用させる。どちらもオープンな Agent Skills 標準に準拠し、Claude Code、Cursor、Windsurf、Codex、Gemini CLI、Copilot で使える。

A Claude Code plugin that converts Figma designs into pixel-perfect TypeScript React components with Tailwind CSS. It uses Figma MCP output verbatim to preserve exact layout and styling, downloads and deduplicates assets by content hash, extracts CSS variables as tokens, and validates the result with automated screenshot comparison and iterative fixes. It requires the Figma MCP server and a React + Tailwind project.一款 Claude Code 插件，把 Figma 设计转换成像素级精确的 TypeScript React 组件（Tailwind CSS）。它逐字使用 Figma MCP 的输出以保留精确的布局和样式，按内容哈希下载并去重素材，自动提取 CSS 变量作为设计 token，并通过自动截图对比加反复修正来验证结果。需要 Figma MCP 服务器和一个 React + Tailwind 项目。一款 Claude Code 外掛，把 Figma 設計轉換成像素級精確的 TypeScript React 元件（Tailwind CSS）。它逐字使用 Figma MCP 的輸出以保留精確的版面和樣式，按內容雜湊下載並去重素材，自動擷取 CSS 變數作為設計 token，並透過自動截圖比對加反覆修正來驗證結果。需要 Figma MCP 伺服器和一個 React + Tailwind 專案。Figma デザインをピクセルパーフェクトな TypeScript React コンポーネント（Tailwind CSS）に変換する Claude Code プラグイン。Figma MCP の出力をそのまま使い、レイアウトとスタイルを正確に保ち、アセットをコンテンツハッシュでダウンロード・重複除去し、CSS 変数をトークンとして抽出する。自動スクリーンショット比較と反復修正で結果を検証する。Figma MCP サーバーと React + Tailwind プロジェクトが必要。

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+ が必要。