前言¶
在 Agent 里写业务代码和写「能给人看的页面」往往是两件事：前者要可维护、可测试，后者还要版式、动效和演示节奏。自己从零搭 HTML/CSS/JS 原型或 Deck，常常卡在审美和结构细节上；让模型随便吐一段 HTML，又容易像文档页而不是设计稿。
下面介绍 SkillHub 社区技能 claude风格的html和deck设计skill（坐标 @user_c4891115/jacobk-claude-design-html）。它把任务收窄到「用 HTML+CSS+JS 做高质量视觉产物」，并在说明里明确不承接纯文档或一般性代码开发。
这是什么¶
一句话定位：面向 HTML 视觉交付的设计向 Skill，覆盖原型、幻灯片、动效、营销页、设计系统、仪表盘等场景。
- 维护方：SkillHub 发布者
user_c4891115，来源标注为 community（社区）。 - 分类：
design-media。 - 当前版本：
1.0.0（以 SkillHub 页面为准）。 - 依赖：标签
requires_api_key=false，不强制额外 API Key。
官方入口：
- API/资源地址：
https://api.skillhub.cn/user_c4891115/jacobk-claude-design-html - SkillHub 展示页：
https://www.skillhub.cn/skills/user_c4891115/jacobk-claude-design-html
核心功能¶
以下能力均来自 SkillHub 简介原文，未在页面单独展开实现细节的部分不展开臆测。
- 交互式原型 / App Mockup：用 HTML 表达界面结构与交互示意。
- 幻灯片 / PPT / Deck：以网页形式组织演示页，而非 Office 文件本身。
- 动画 / Motion Design：在 HTML 场景中处理动效需求。
- Landing Page / 营销页：面向对外展示的落地页视觉。
- 设计系统 / UI Kit：组件与样式层面的 HTML 化表达。
- 数据可视化仪表盘：图表与看板类 HTML 页面。
- 泛化场景：任何需要用 HTML+CSS+JS 完成的精美视觉作品。
触发关键词（官方列出）：原型、mockup、prototype、幻灯片、deck、slides、landing page、设计、design、UI、动画、animation。
明确不适用：纯文档编写，或一般意义上的代码开发任务。
安装与启用¶
Skill 基于通用 SKILL.md 格式分发。安装方式以 SkillHub 官方说明为准。
方式一：让当前 Agent 按文档安装¶
将下面意图发给支持 Skill 的 Agent（SkillHub 页面提供的标准话术）：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_c4891115/jacobk-claude-design-html`。
Agent 会按 SkillHub 安装与优先源配置 检查 CLI、选择 skills 目录并执行安装。
方式二：本机使用 skillhub CLI¶
先确认是否已安装 CLI：
command -v skillhub && skillhub --version
未安装时，官方推荐完整安装（CLI + 默认 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅安装 CLI：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
安装技能时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/ 可能不会被识别。官方文档给出的常见路径示例：
| 环境 | skills 目录（示例） |
|---|---|
| Claude Code | ~/.claude/skills/ |
| Cursor | ~/.cursor/skills/ |
| Codex | ~/.codex/skills/ 或项目下 .agents/skills/ |
安装命令形式（将 <skills 目录> 换成你当前环境的路径）：
skillhub install user_c4891115/jacobk-claude-design-html --dir <skills 目录>
也可先搜索再安装：
skillhub search jacobk-claude-design-html
skillhub install user_c4891115/jacobk-claude-design-html --dir <skills 目录>
装到正确目录后，按你所用 Agent 的说明刷新或重启，使 Skill 被加载。
典型用法¶
官方页面未附带独立代码仓库示例；可复现的用法是：在对话中用自然语言描述视觉目标，并带上简介中的触发词，让 Agent 在加载该 Skill 后生成单文件或多文件 HTML 产物。
示例话术（可按场景改写）：
- Deck：「用 HTML 做一份 8 页的 product deck，风格克制、适合投屏，关键词：deck、slides。」
- Mockup：「做一个移动端 App mockup 的单页 HTML prototype，包含主导航和列表页状态。」
- Landing Page：「写一版 SaaS landing page，强调主标题、三列特性、底部 CTA，输出完整 HTML+CSS。」
- 动效：「在现有页面结构上加 section 进入动画，animation 要轻量、不依赖重型框架。」
经过上面的步骤，产物通常是可直接在浏览器打开的 HTML；若你使用 Cursor 等 IDE，可让 Agent 写入项目内指定路径再本地预览。
适用场景与注意¶
适合谁
- 需要快速出 可演示、可截图、可投屏 的 HTML 视觉稿，而不是先上 Figma 再手写静态页的团队或个人。
- 产品、设计、前端协作时，用 Agent 统一「Claude 系」审美与结构习惯（技能名称即指向该风格取向，具体规则以 Skill 内 SKILL.md 为准）。
限制与注意
- 任务边界写在简介里：不要指望它写长篇技术文档或替代后端/业务逻辑开发。
- SkillHub 统计（页面展示）：评分约 100000，下载 1402，安装 14；数据随平台更新，引用时以页面为准。
- 安装路径错误是常见坑：务必
--dir到当前 Agent 的 skills 目录，见上文第三节。
结尾¶
claude风格的html和deck设计skill 把 Agent 能力聚焦在 HTML 视觉交付上，从 mockup、deck 到 landing page 和仪表盘，用统一 Skill 约束输出形态。若你的工作是「先要看得见的稿」，可以在 SkillHub 查看详情并安装：
https://www.skillhub.cn/skills/user_c4891115/jacobk-claude-design-html
