podo/design-agent-skills

awesome-design-skills

Registry of 67 visual aesthetic and style skills for Claude Code, Cursor, Codex, and other agents.

ソースを見る

使い方

  1. インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
  2. 必要なツール、認証情報、対応環境を原文で確認します。
  3. 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/podo/design-agent-skills --skill awesome-design-skills

開始前の確認

  • 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
  • スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

awesome-design-skills

Catalogue stub — full registry: bergside/awesome-design-skills

Install a style skill

Browse available skills:

bash
npx typeui.sh list

Install a specific style:

bash
npx typeui.sh pull <slug>
# examples:
npx typeui.sh pull glassmorphism
npx typeui.sh pull brutalism
npx typeui.sh pull claymorphism
npx typeui.sh pull editorial
npx typeui.sh pull bento

Skills install to your local agents directory and are immediately available.

Available styles (67 total)

Aesthetic moods: agentic, ant, artistic, bento, bold, brutalism, cafe, claymorphism, clean, colorful, contemporary, corporate, cosmic, creative, dashboard, dithered, doodle, dramatic, editorial, elegant, energetic, enterprise, expressive, fantasy, fiction, flat, friendly, futuristic, glassmorphism, gradient, immersive, luxury, minimal, modern, mono, neobrutalism, neon, neumorphism, paper, perspective, premium, professional, publication, refined, retro, riso, simple, sketch, skeuomorphism, sleek, spacious, storytelling, vibrant, vintage, and more.

What it does

Each skill in the registry includes:

  • SKILL.md — agent instructions: token palette, component rules, accessibility constraints, quality gates
  • DESIGN.md — human-readable rationale: brand mission, style foundations, do/don't patterns

The agent reads both files to apply the aesthetic consistently across any UI task — colors, typography, spacing, shadows, motion, tone of voice.

When NOT to use

  • Functional design tooling (Figma, tokens, accessibility audits) — use the relevant tool skill
  • Brand-specific tokens for a real product — use design-tokens-skill or author your own DESIGN.md
  • Material Design 3 / platform HIG — use material-3-skill or platform-design-skills

タスクに関連する項目