Stats
Actions
Tags
From artifact-publisher
Visual specification for HTML artifacts. Defines color palette, typography, spacing system, and component styles for dark-themed standalone HTML deliverables.
How this skill is triggered — by the user, by Claude, or both
Slash command
/artifact-publisher:html-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
HTML artifact 的视觉规范。
HTML artifact 的视觉规范。
| Token | Value | 用途 |
|---|---|---|
--bg | #1e1e2e | 页面背景 |
--surface | #2a2a3d | 卡片、面板背景 |
--surface-2 | #33334a | 二级表面（hover、嵌套） |
--text | #e0e0ef | 正文 |
--text-muted | #9090a8 | 次要文字、注释 |
--accent | #7aa2f7 | 主强调色（链接、按钮） |
--success | #4caf78 | 成功状态、正向数据 |
--warning | #f0a830 | 警告、中等风险 |
--danger | #e05c5c | 错误、高风险 |
--code-bg | #252535 | 代码块背景 |
--border | #3a3a52 | 分隔线、卡片边框 |
system-ui, -apple-system, "Segoe UI", "PingFang SC", sans-serif，16px / 行高 1.6"JetBrains Mono", "Fira Code", Menlo, monospace，14px / 行高 1.5--text-muted允许值：8px / 12px / 16px / 24px / 32px / 48px
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
background: linear-gradient(135deg, rgba(122,162,247,0.15), rgba(122,162,247,0.05));
border-left: 4px solid var(--accent);
background: var(--surface-2)，font-weight: 600background: rgba(255,255,255,0.02)<pre> 内 font-family: var(--font-mono)var(--text-muted)，正文 var(--text)@media (max-width: 768px)：导航抽屉化（默认折叠，顶部汉堡按钮展开）、主区单列、字号 -1px、padding 减半所有 artifact 必须采用「左侧固定导航 + 右侧滚动主内容」的二栏布局，禁止使用纯单列布局。Bundle 中每个子页面同样要有该布局。
<body>
<aside class="side-nav">
<header class="brand">
<h1>[Topic Title]</h1>
<p class="meta">[content_type] · [生成时间]</p>
</header>
<nav>
<ul>
<li><a href="#section-id" class="active">章节名</a></li>
<!-- ... -->
</ul>
</nav>
<footer class="side-nav-footer">[可选：源信息、版本、按钮]</footer>
</aside>
<main class="content">
<section id="section-id">...</section>
<!-- ... -->
</main>
</body>
body {
margin: 0;
display: grid;
grid-template-columns: 280px 1fr;
min-height: 100vh;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
}
.side-nav {
position: sticky; top: 0;
height: 100vh;
overflow-y: auto;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 24px 16px;
display: flex; flex-direction: column;
}
.side-nav .brand h1 { font-size: 1.1rem; margin: 0 0 4px; }
.side-nav .brand .meta { color: var(--text-muted); font-size: 12px; margin: 0 0 24px; }
.side-nav nav ul { list-style: none; padding: 0; margin: 0; }
.side-nav nav a {
display: block; padding: 8px 12px;
color: var(--text-muted); text-decoration: none;
border-radius: 6px; font-size: 14px;
border-left: 2px solid transparent;
}
.side-nav nav a:hover { background: var(--surface-2); color: var(--text); }
.side-nav nav a.active {
color: var(--accent);
background: rgba(122,162,247,0.1);
border-left-color: var(--accent);
}
.side-nav-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.content { padding: 48px 56px; max-width: 1100px; }
.content section { scroll-margin-top: 24px; margin-bottom: 64px; }
/* 移动端抽屉 */
@media (max-width: 768px) {
body { grid-template-columns: 1fr; }
.side-nav {
position: fixed; left: 0; top: 0; bottom: 0;
width: 280px; transform: translateX(-100%);
transition: transform 0.2s; z-index: 50;
}
body.nav-open .side-nav { transform: translateX(0); }
.content { padding: 24px; }
.nav-toggle { position: fixed; top: 16px; left: 16px; z-index: 60; }
}
// 滚动高亮
const links = document.querySelectorAll('.side-nav nav a[href^="#"]');
const sections = [...links].map(a => document.querySelector(a.getAttribute('href')));
const io = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
const id = e.target.id;
links.forEach(a => a.classList.toggle('active', a.getAttribute('href') === '#' + id));
}
});
}, { rootMargin: '-30% 0px -60% 0px' });
sections.filter(Boolean).forEach(s => io.observe(s));
// 移动端切换
document.querySelector('.nav-toggle')?.addEventListener('click', () => {
document.body.classList.toggle('nav-open');
});
.active，其他页链接显示文件名var(--surface-2)，居中粗体标签var(--border) 虚线var(--accent) 透明度 0.2，边框 var(--accent)var(--accent)，箭头标记 <marker>，label 位于箭头中点上方 6pxT1 T2 T3...，便于阅读<figure class="zoomable">
<button class="fs-btn">⛶</button>
<svg viewBox="0 0 720 600" xmlns="http://www.w3.org/2000/svg">
<!-- lanes、steps、arrows -->
</svg>
</figure>
.zoomable { position: relative; }
.fs-btn {
position: absolute; top: 8px; right: 8px;
width: 32px; height: 32px;
background: var(--surface-2); color: var(--text);
border: 1px solid var(--border); border-radius: 6px;
cursor: pointer; font-size: 16px;
z-index: 2;
}
.fs-btn:hover { background: var(--accent); color: var(--bg); }
body.fs-active { overflow: hidden; }
body.fs-active::after {
content: ""; position: fixed; inset: 0;
background: rgba(0,0,0,0.85); z-index: 99;
}
.fs-active-zone {
position: fixed !important; inset: 24px !important;
z-index: 100; overflow: auto;
background: var(--bg); border-radius: 12px;
padding: 32px;
box-shadow: 0 24px 48px rgba(0,0,0,0.6);
}
.fs-active-zone svg,
.fs-active-zone pre,
.fs-active-zone table { max-width: none; }
.fs-active-zone .fs-btn::before { content: "✕ "; }
凡可能"过大"的内容必须套 .zoomable：
npx claudepluginhub icarus-go/vibe-coding-plugins --plugin artifact-publisherCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.