القائمة
Visual specification for HTML artifacts. Defines color palette, typography, spacing system, and component styles for dark-themed standalone HTML deliverables.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Visual pattern library for explanation-type artifacts. Provides decision rules for choosing between annotated code blocks, call-flow diagrams, concept accordions, comparison tables, and insight cards.
Feishu (Lark) document Block API specification. Covers authentication, block types, document creation, content insertion, image upload, and rate limits.
Quality checklist for generated artifacts. Covers HTML file structure validation, Chinese encoding integrity, code block annotation, external dependency checks, and Feishu document validation.
Structural specifications for plan-type documents covering high-level design through low-level design with ADR formatting.
Pattern library for code review reading-guide artifacts. Provides five template skeletons (trace, layer, data, state, storyline) that each anchor the reader on a different mental model.
Layout pattern library for summary-type artifacts. Provides rules for TL;DR writing, key finding importance grading, and source credibility scoring.
| name | html-design-system |
| description | Visual specification for HTML artifacts. Defines color palette, typography, spacing system, and component styles for dark-themed standalone HTML deliverables. |
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：