James Design
Expert UI design skill for Claude Code — create hi-fi HTML designs, prototypes, slide decks, and animations
供給アセットの概要
プレゼンとスライドのワークフロー
PPTX generation, HTML slides, pitch decks, speaker notes, and presentation workflow skills.
シナリオ
プレゼン生成
I need my agent to create a polished presentation deck from a brief, document, URL, or research notes, preferably with editable PPTX or HTML slides.
Agent 適合
Claude Code + Browser agents + CLI
Codex、Claude Code、Cursor、CLI、またはカスタム Agent に対応します。
インストール
準備完了
npx skills add iamzifei/james-design
メンテナンス
新しい
最終プッシュから 11 日
リスク
要レビュー
Permission surface may require sandboxing
GitHub 品質
36
73/100 品質 · 75/100 信頼
対象タグ
レビュー注記
Permission surface may require sandboxing · Financial research output is not financial advice; require human review before any live investment decision
Agent 導入スコアカード
信頼、監査、インストール準備状況を一目で確認
公開リポジトリのメタデータ、OpenAgentSkill のレビューシグナル、保守の鮮度、インストール準備状況を組み合わせたスコアです。候補選定の目安であり、人によるレビューの代替ではありません。
品質
強い本番ワークフローの候補に値する堅実な選択肢です。
信頼
サンドボックス限定信頼シグナルが不足または混在する有用な候補です。結果ループがタスク適合を示すまで、隔離されたワークスペースで使用してください。
監査
要レビューインストール準備、安全メタデータ、保守、採用リスクの機械可読なレビュー。
OpenAgentSkill Trust Score v5
インストール前に人のレビュー
実作業で使う前に、サンドボックスでのみ実行し、近い代替と比較してください。
スター
GitHub スター 36
リポジトリ活動
スター 36、フォーク 3
メンテナンス
最終プッシュから 11 日
ライセンス
MIT
インストール
npx skills add iamzifei/james-design
インストール安全性
標準パッケージまたはランタイムのインストールパス
権限範囲
shell or command execution, filesystem or document access
Agent の成果
Agent の成果データはまだありません
ドキュメント
README/SKILL.md の文脈が十分です
リスク概要
本番前にレビュー
- Financial research output is not financial advice; require human review before any live investment decision.
- Low GitHub adoption signal
- Quality score needs review
- Permission surface needs review: shell or command execution, filesystem or document access
インストール準備状況
インストールパスを利用可能
- インストールパスを利用できます
- リポジトリの根拠を利用できます
- ライセンスが明示されています
- Agent-Proven の成果エビデンスはまだありません
Agent 可読メタデータ
このスキルの機械可読な判断データ。
このブロックまたは埋め込み JSON を使い、Agent がこのスキルをインストールすべきか、代替を選ぶべきか、先に人のレビューを求めるべきかを判断できます。
適したタスク
- プレゼン生成 ワークフロー
- Claude Code チーム
- builders willing to evaluate younger projects
- Choose the right deck format
適した Agent
インストール判断
- コマンド
- npx skills add iamzifei/james-design
- ポリシー
- レビュー
- 人によるレビュー
- はい
信頼とリスク
- 信頼
- 67/100
- 監査
- 81/100
- リスクレベル
- 要レビュー
成果ループ
- エンドポイント
- /api/agent/outcome
- イベント ID
- resolve
- 成果
- 5
使わない場合
- ベンダー提供の SLA が必要なチーム
- production agents without a repository review
- Low GitHub adoption signal
- 高リスク権限のヒント: Shell またはコマンド実行
- Permission surface may require sandboxing
代替スキル
Frontend Design
171.1K スター
npx skills add anthropics/skills --skill frontend-design
代替スキル
Taste Skill: Anti-Slop Frontend
79.4K スター
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
代替スキル
Canvas Design
171.1K スター
npx skills add anthropics/skills --skill canvas-design
代替スキル
Anthropic Brand Guidelines
171.1K スター
npx skills add anthropics/skills --skill brand-guidelines
Agent セーフティ v2
49/100 · 自動インストールを避ける
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
高
Shell またはコマンド実行
Skill メタデータに端末、CLI、Shell、サブプロセス、またはコマンド実行のワークフローが含まれます。
中
Browser automation
Skill may drive a browser or interact with web pages.
中
ネットワークアクセス
Skill はリモートページ、API、リポジトリ、外部サービスにアクセスする可能性があります。
中
ファイルシステムアクセス
Skill はプロジェクトファイル、ドキュメント、生成物、ローカルワークスペース状態を読み書きする可能性があります。
- 高リスク権限のヒント: Shell またはコマンド実行
- Permission surface may require sandboxing
インストール先
Agent ワークフローにこのスキルをインストール
公開インストールエンドポイントからコマンド、安全チェックリスト、対象プロンプト、正規リンクを取得します。
OpenAgentSkill CLI
Resolve policy, run the source installer safely, and report a verified install receipt.
$ npx --yes https://github.com/Leon-Drq/openagentskill/releases/download/cli-v0.2.1/openagentskill-0.2.1.tgz install iamzifei-james-designAgent 解決プラン
インストール前に Agent に適合性を検証させます。
Resolve API は第一候補、代替、安全ポリシー、監査メモ、インストール先、Agent がそのまま使えるプロンプトを返します。
JSON を開く
/api/agent/resolve?task=Use%20James%20Design%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve テキスト
/api/agent/resolve?task=Use%20James%20Design%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
インストール引き継ぎ
/api/skills/iamzifei-james-design/install
Agent が確認すべきこと
- Resolve API でタスク適合と代替を確認。
- 監査・信頼スコアと安全ポリシーの警告を確認。
- Codex、Claude Code、Cursor、CLI のインストール先互換性を確認。
プロンプトをコピー
Task: Use James Design in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20James%20Design%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/iamzifei-james-design/install
Install command: npx skills add iamzifei/james-design
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent 引き継ぎ
別のディレクトリではなく、インストール経路を Agent に渡します。
公開インストールエンドポイントからコマンド、安全チェックリスト、対象プロンプト、正規リンクを取得します。
インストール引き継ぎ
/api/skills/iamzifei-james-design/install
LLM テキスト形式
/api/skills/iamzifei-james-design/install?format=text
代替を探す
/api/skills/search?q=James%20Design&limit=3
Agent プロンプト
Use James Design for this task. Review https://www.openagentskill.com/api/skills/iamzifei-james-design/install, then install with: npx skills add iamzifei/james-designRegistry メタデータ
自動スキル選択用の Agent 可読プロファイル。
Registry API 経由で判断、信頼、監査、ユースケース、インストールのシグナルを提供し、UI をスクレイピングせずに Agent が順位付けできます。
Agent 判断パネル
Companion skill for Presentation generation
本番採用前にこのスキルを候補化し、近い代替と比較してください。
スタック内の役割
補助スキル
主な適合
プレゼン生成
信頼ラベル
有力候補
インストールパス
コマンド準備済み
使う場面
- プレゼン生成 ワークフロー
- Claude Code チーム
- builders willing to evaluate younger projects
根拠
- 最近のリポジトリ活動
- インストールコマンドまたは GitHub リポジトリが利用可能
- 品質プロファイル 73/100
- OpenAgentSkill エンゲージメント 2 件
先にレビュー
- Low GitHub adoption signal
実装パス
- 1サンドボックスの Agent にインストールし、プレゼン生成 タスクを一度最初から最後まで実行します。
- 2Compare output quality, latency, and failure behavior against at least one alternative.
- 3Promote it into production only after reviewing repository permissions, license, and maintenance signals.
信頼プロファイル
サンドボックス限定
信頼シグナルが不足または混在する有用な候補です。結果ループがタスク適合を示すまで、隔離されたワークスペースで使用してください。
GitHub 採用度
確認GitHub スター 36
スター／フォーク活動
確認スター 36、フォーク 3; 現在のメタデータでは Issue 活動を利用できません
最近のメンテナンス
合格最終プッシュから 11 日
ライセンスの明確さ
合格MIT
良いシグナル
- AI レビュー承認済み
- インストールパスを利用できます
- リポジトリの根拠を利用できます
- 最近保守されたリポジトリ
- インストールコマンドに明確な高リスクパターンはありません
- 成果ループは準備済みですが、最初の実行が必要です
インストール前にレビュー
- Financial research output is not financial advice; require human review before any live investment decision.
- Low GitHub adoption signal
- Quality score needs review
- Permission surface needs review: shell or command execution, filesystem or document access
- GitHub adoption: 36 GitHub stars
- Stars/forks activity: 36 stars, 3 forks; issue activity unavailable in current metadata
- Permission surface: shell or command execution, filesystem or document access
- 実際の Agent 成果レポートはまだありません
- 無人インストールの前に人によるレビューが必要です
推奨アクション
実作業で使う前に、サンドボックスでのみ実行し、近い代替と比較してください。
品質プロファイル
強い Agent ワークフロー向けの候補
本番ワークフローの候補に値する堅実な選択肢です。
ワークフロー適合
このスキルを使うシナリオ
Create decks
Presentation generation
I need my agent to create a polished presentation deck from a brief, document, URL, or research notes, preferably with editable PPTX or HTML slides.
Create assets
Design and creative
I need my agent to produce design assets, UI directions, presentations, or creative media workflows.
Build and ship code
Coding agents
I need a coding agent that can understand a repository, edit code, and review pull requests.
ワークフロー適合
完全なワークフローに追加
Design, build, test, and ship interfaces
Frontend and UI
A practical workflow for agents that turn product briefs or Figma designs into polished frontend code, review the result, test it in a browser, and prepare a safe deployment.
Inspect, patch, and verify code
Coding review agent
A workflow for software agents that inspect repositories, review pull requests, generate tests, and turn findings into shippable patches.
Scrape, clean, and reuse web data
Web data pipeline
A practical workflow for agents that crawl public pages, extract clean content, normalize data, and hand it to downstream research or RAG workflows.
代替候補
インストール前に比較
このタスクに適する可能性のある類似スキル。
Frontend Design
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
Taste Skill: Anti-Slop Frontend
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
Canvas Design
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
Anthropic Brand Guidelines
Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
概要
[English](README.md) | [中文](README.zh-CN.md)
# james-design
[](https://ko-fi.com/H2T024VDBG)
An expert UI design skill for Claude Code. Turns your AI coding assistant into a designer that creates high-fidelity HTML designs, interactive prototypes, slide decks, animations, and visual explorations.
## What it does
- **Slide decks** — Presentation-ready HTML slides with keyboard/touch navigation - **Interactive prototypes** — Clickable hi-fi mockups with React + Babel - **UI explorations** — Multiple design variations with toggleable Tweaks panel - **Animations** — CSS transitions, React state, or Popmotion-powered motion - **Visual design** — Color studies, typography, layout explorations
All output is **pure HTML** — no build step, no dependencies to install. Open in any browser.
## Install
### Option A: Using `skills` CLI (recommended)
```bash npx skills add https://github.com/iamzifei/james-design -y -g ```
### Option B: Manual install
Copy `SKILL.md` into your Claude Code skills directory:
```bash mkdir -p ~/.claude/skills/james-design cp SKILL.md ~/.claude/skills/james-design/ ```
## Usage
Once installed, trigger the skill in Claude Code:
``` /james-design make a landing page for a SaaS product
/james-design create a 10-slide pitch deck about AI trends
/james-design prototype a mobile onboarding flow
/james-design design a dark-mode dashboard UI ```
Or use natural language — the skill auto-triggers on design-related requests:
``` Design a pricing page with 3 tiers Build an interactive prototype for a chat app Make slides for my quarterly review ```
## How it works
1. **Asks clarifying questions** — audience, style, constraints, variations 2. **Explores context** — reads your design system, UI kit, brand assets if provided 3. **Builds iteratively** — shows early drafts, refines based on feedback 4. **Outputs HTML** — single-file deliverables that work in any browser
### Design principles
-
技術詳細
- バージョン
- 1.0.0
- ライセンス
- MIT
- 最終更新
- 2026年8月18日
- 公開日
- 2026年8月11日
判断の要約
補助スキル
最近のリポジトリ活動
Agent 実証エビデンス
Agent 実証エビデンス
Resolve、レビュー、インストール、限定実行後の成果レポート。
- 成功率
- —
- 直近の失敗
- —
- 成果
- 0
- 出力品質
- —
- 失敗
- 0
- 非該当
- 0
- インストール数
- 0
- リスクによりブロック
- 0
- 設定が必要
- 0
- 本番
- 0
Agent の実行結果はまだありません。最初の実行では /api/agent/outcome を通じて成功、設定要件、リスクによるブロック、失敗、非該当を報告できます。
成長ループ
共有キット
James Design 用のシナリオベース草案です。X へ手動投稿できます。
James Design: Expert UI design skill for Claude Code that generates high-fidelity HTML designs, prototypes,... 36 stars https://www.openagentskill.com/skills/iamzifei-james-design?ref=x
任意：インストールコマンド付きの返信
Listing + install path for James Design: https://www.openagentskill.com/skills/iamzifei-james-design?ref=x Install: npx skills add iamzifei/james-design
掲載元
コミュニティにより登録
この掲載は公開ソースから登録されており、メンテナー申請が承認されるまで公式として表示されません。
- 作成者
- iamzifei
- インデックス作成者
- OpenAgentSkill コミュニティインデックス
帰属は公開リポジトリまたは作成者プロフィールにリンクされています。作成者は掲載を申請して所有権シグナルを更新できます。
このスキルを申請所有者の申請
このスキル掲載を申請
この コミュニティにより登録 掲載は iamzifei に帰属していますが、まだ公式として表示されていません。申請すると、確認済み所有者シグナルが追加され、今後の公開、インストール、監査更新の信頼性が高まります。
クリエイター被リンクキット
README にエビデンスバッジを追加
開発者がリポジトリを評価する場所で、正規掲載、現在の信頼・監査シグナル、実際の Agent-Proven エビデンスを表示します。
[](https://www.openagentskill.com/skills/iamzifei-james-design)
[](https://www.openagentskill.com/skills/iamzifei-james-design)
[](https://www.openagentskill.com/skills/iamzifei-james-design/audit)
[](https://www.openagentskill.com/skills/iamzifei-james-design)作者
iamzifei
@iamzifei
プラットフォーム適合
健全性シグナル
- GitHub スター
- 36
- 品質スコア
- 45/100
- 最終 GitHub プッシュ
- 2026年8月11日
- フレームワークのヒント
- 不明
- OpenAgentSkill 閲覧数
- 2
- インストールコピー数
- 0
- 外部クリック
- 0
コミュニティシグナル
このスキルが Agent ワークフローに役立つかを共有してください。集約されたフィードバックがランキングを改善します。
信頼と安全性
サンドボックス限定
- GitHub 採用度GitHub スター 36確認
- スター／フォーク活動スター 36、フォーク 3; 現在のメタデータでは Issue 活動を利用できません確認
- 最近のメンテナンス最終プッシュから 11 日合格
- ライセンスの明確さMIT合格
- README/SKILL.md の完全性メタデータには十分な利用・ワークフロー文脈があります合格
- 依存関係／ランタイムのリスクcommand execution surface, network or browser surface情報
関連スキル
Frontend Design
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
171.1K スターTaste Skill: Anti-Slop Frontend
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
79.4K スターCanvas Design
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
171.1K スターAnthropic Brand Guidelines
Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
171.1K スター