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
维护状态
新鲜
距上次推送 12 天
风险
需审查
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 信任评分 v5
安装前需人工审查
仅在沙盒中运行，并在用于真实工作前比较接近的替代方案。
Stars
36 个 GitHub Stars
仓库活跃度
36 个 Star，3 个 Fork
维护状态
距上次推送 12 天
许可证
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 验证结果证据
Agent 可读元数据
这个 Skill 的机器可读决策数据。
使用此区块或内嵌 JSON 判断 Agent 是否应安装该 Skill、选择替代方案，或先请求人工审查。
适用任务
- 演示文稿生成 工作流
- 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
替代 Skill
Frontend Design
171.1K Stars
npx skills add anthropics/skills --skill frontend-design
替代 Skill
Taste Skill: Anti-Slop Frontend
79.4K Stars
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
替代 Skill
Canvas Design
171.1K Stars
npx skills add anthropics/skills --skill canvas-design
替代 Skill
Anthropic Brand Guidelines
171.1K Stars
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 工作流中安装此 Skill
通过公开安装端点获取命令、安全清单、目标提示词和该 Skill 的规范链接。
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 返回首选 Skill、替代方案、安全策略、审计说明、安装目标和可直接执行的提示词，无需抓取此页面。
打开 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，而不是再给一个目录页。
通过公开安装端点获取命令、安全清单、目标提示词和该 Skill 的规范链接。
安装交接
/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 元数据
用于自动选择 Skill 的 Agent 可读档案。
本页通过 Registry API 提供相同的决策、信任、审计、场景和安装信号，让 Agent 无需抓取界面即可排序。
Agent 决策面板
Companion skill for Presentation generation
将此 Skill 加入候选列表，并在生产使用前与相近替代方案比较。
栈中角色
辅助 Skill
主要匹配
演示文稿生成
信任标签
强候选
安装路径
命令已就绪
适用场景
- 演示文稿生成 工作流
- Claude Code 团队
- builders willing to evaluate younger projects
证据
- 仓库近期活跃
- 已提供安装命令或 GitHub 仓库
- 73/100 质量档案
- 2 个 OpenAgentSkill 交互事件
先审查
- 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 采用度
检查36 个 GitHub Stars
Star/Fork 活跃度
检查36 个 Star，3 个 Fork; 当前元数据中没有议题活跃度信息
近期维护
通过距上次推送 12 天
许可证清晰度
通过MIT
积极信号
- AI 审查已通过
- 安装路径可用
- 仓库证据可用
- 近期维护的仓库
- 安装命令未发现明显高风险模式
- 结果闭环已就绪，但需要首次真实 Agent 运行
安装前审查
- 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 工作流的候选
可靠的选择，值得加入生产工作流候选列表。
工作流匹配
在这些场景使用此 Skill
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.
替代方案短名单
安装前对比
可能适合该任务的相近 Skill。
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日
决策摘要
辅助 Skill
仓库近期活跃
Agent 验证证据
Agent 验证证据
来自解析、审查、安装和一次小范围运行后的结果报告。
- 成功率
- —
- 近期失败
- —
- 结果
- 0
- 输出质量
- —
- 失败
- 0
- 不相关
- 0
- 安装次数
- 0
- 风险拦截
- 0
- 需要配置
- 0
- 生产环境
- 0
暂时没有 Agent 结果数据。首次 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 社区索引
归属链接指向公开仓库或创作者主页。创作者可认领列表以更新所有权信号。
认领此 Skill所有者认领
认领此 Skill 页面
这条 社区收录 列表归属于 iamzifei，但尚未标记为官方。认领后可增加已验证所有者信号，使后续发布、安装和审计更新更值得信赖。
创作者外链工具包
将证据徽章加入你的 README
在开发者评估仓库的位置展示规范页面、当前信任与审计信号，以及真实的 Agent 验证证据。
[](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 Stars
- 36
- 质量评分
- 45/100
- 最近 GitHub 推送
- 2026年8月11日
- 框架提示
- 未知
- OpenAgentSkill 浏览量
- 2
- 复制安装命令
- 0
- 跳转点击
- 0
社区信号
告诉我们这个 Skill 是否对你的 Agent 工作流有帮助。汇总反馈会持续改善排序。
信任与安全
仅限沙盒
- GitHub 采用度36 个 GitHub Stars检查
- Star/Fork 活跃度36 个 Star，3 个 Fork; 当前元数据中没有议题活跃度信息检查
- 近期维护距上次推送 12 天通过
- 许可证清晰度MIT通过
- README/SKILL.md 完整度元数据包含足够的用法与工作流上下文通过
- 依赖与运行时风险command execution surface, network or browser surface信息
相关 Skill
Frontend Design
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
171.1K StarsTaste Skill: Anti-Slop Frontend
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
79.4K StarsCanvas Design
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
171.1K StarsAnthropic Brand Guidelines
Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
171.1K Stars