菜单
Build a web page using the kunchenguid design system. TRIGGER when: user asks to create an HTML page, essay, post, or landing page that should use the design system. DO NOT TRIGGER when: user is editing the design system itself (CSS/JS tokens, components).
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/kunchenguid/kunchenguid-design-system --skill use-kunchenguid-design-system命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | use-kunchenguid-design-system |
| description | Build a web page using the kunchenguid design system. TRIGGER when: user asks to create an HTML page, essay, post, or landing page that should use the design system. DO NOT TRIGGER when: user is editing the design system itself (CSS/JS tokens, components). |
Create HTML pages that follow the kunchenguid design system. The result should feel like editorial × system console × field manual.
Live reference: https://kunchenguid.github.io/kunchenguid-design-system/
Every page starts with this structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{Page Title}</title>
<link
rel="stylesheet"
href="https://kunchenguid.github.io/kunchenguid-design-system/css/design-system.css"
/>
<script
src="https://kunchenguid.github.io/kunchenguid-design-system/js/design-system.js"
defer
></script>
</head>
<body>
<div class="container">
<!-- content here -->
</div>
</body>
</html>
All content goes inside a single .container div.
Every page MUST have a headline with a [bracketed concept] — the single most important idea. Add data-annotate to the heading and the JS auto-wraps the bracketed text in accent color.
<h1 data-annotate>The future of work is [agent-native].</h1>
Rules:
Fonts have assigned roles. Never mix them arbitrarily.
| Role | Font | Use for | Applied by |
|---|---|---|---|
| Thesis | Source Serif 4 | Headlines, big ideas | h1–h4 (automatic), .font-serif |
| Explanation | Inter | Body text, descriptions, UI | body (automatic), .font-sans |
| Proof | JetBrains Mono | Code, commands, benchmarks | code, pre (automatic), .font-mono |
Wrap each major content block in a .section. Adjacent sections get an automatic thin top border.
<section class="section">
<p class="section-label">Premise</p>
<h2 data-annotate>One person should operate like an [enterprise].</h2>
<p>Body text goes here.</p>
</section>
Use .section-label for small uppercase labels that categorize content. The standard labels from the essay format are:
<p class="section-label">Mechanism</p>
Use .grid with a column modifier. Collapses to single column on mobile (<768px).
<div class="grid grid--2">
<!-- 2 columns -->
<div class="grid grid--3">
<!-- 3 columns -->
<div class="grid grid--4"><!-- 4 columns --></div>
</div>
</div>
Surface-colored boxes for grouping content.
<div class="card">
<p class="section-label">Category</p>
<h3 data-annotate>Card title with [annotation].</h3>
<p class="text-sm text-muted mb-0">Description text.</p>
</div>
Use for benchmarks, comparisons, and structured data. Always wrap in .table-wrap for mobile overflow.
<div class="card">
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th>Approach</th>
<th>Setup</th>
<th>Leverage</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Row label</strong></td>
<td>Value</td>
<td>Value</td>
</tr>
</tbody>
</table>
</div>
</div>
For terminal output, commands, or benchmarks — the "proof" layer.
<pre><code>$ axi run transform --input data --task "clean and analyze"
[ok] Pipeline initialized
[ok] 3 agents active</code></pre>
Thin horizontal rules between content blocks within a section.
<hr class="divider" />
Every essay or post should follow this six-part format:
Each part maps to a .section with a .section-label.
Whenever appropriate, we should present a thinking artifact:
Never use decorative illustrations. Prefer thinking artifacts — visuals that carry information.
| Class | Effect |
|---|---|
.font-serif | Force serif font |
.font-sans | Force sans font |
.font-mono | Force mono font |
.text-muted | Muted text color (#6B6560) |
.text-accent | Accent text color (#1A6B5A) |
.text-sm | Small text (0.875rem) |
.text-lg | Large text (1.25rem) |
.mt-sm through .mt-2xl | Margin-top |
.mb-0 through .mb-lg | Margin-bottom |
Only use these colors. Accent is reserved for meaning (links, annotations, highlights) — never decoration.
| Token | Hex | Use |
|---|---|---|
--color-bg | #F5F2ED | Page background |
--color-bg-surface | #ECEAE4 | Cards, surfaces |
--color-bg-code | #E2DED7 | Code blocks |
--color-text | #1A1A1A | Primary text |
--color-text-muted | #6B6560 | Secondary / labels |
--color-accent | #1A6B5A | Links, annotations |
--color-border | #D1CCC4 | Dividers, card edges |
Avoid: buzzwords, over-explaining, marketing language, decorative elements.
基于 SOC 职业分类
