Use Kunchenguid Design System Skill
- 11 installs
- 13 repo stars
- Updated March 27, 2026
Helps with design & ui/ux tasks.
npx skills add https://github.com/kunchenguid/kunchenguid-design-system --skill use-kunchenguid-design-systemWhat use-kunchenguid-design-system covers
- use-kunchenguid-design-system
- Design & UI/UX
- AI-coding skill
use-kunchenguid-design-system by the numbers
| All-time installs | 11 | skills.sh registry |
|---|---|---|
| Repo stars | ★ 13 | GitHub |
| Repo last updated | March 27, 2026 | GitHub |
| Repository | kunchenguid/kunchenguid-design-system ↗ | |
Data as of Oct 24, 2026 (Skillselion catalog sync)
What files ship with use-kunchenguid-design-system?
Build a Page with the Design System
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/
Boilerplate
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.
Mandatory: The Annotation Title
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:
- Only bracket one core concept per title
- Keep titles short and declarative
- End with a period
Typography Roles
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 |
Layout Components
Sections
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>Section Labels
Use .section-label for small uppercase labels that categorize content. The standard labels from the essay format are:
- PREMISE
- BROKEN DEFAULT
- NEW MODEL
- MECHANISM
- PROOF
- IMPLICATION
<p class="section-label">Mechanism</p>Grid
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>Cards
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>Tables
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>Code Blocks
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>Dividers
Thin horizontal rules between content blocks within a section.
<hr class="divider" />Content Structure
Every essay or post should follow this six-part format:
- Claim — one sharp sentence (the annotated headline)
- Broken Default — what's wrong today
- New Model — name the concept
- Mechanism — how it works
- Proof — example, diagram, code, or benchmark table
- Implication — what becomes possible
Each part maps to a .section with a .section-label.
Visual Artifacts
Whenever appropriate, we should present a thinking artifact:
- Comparison table (before vs after)
- Code block / terminal output
- Benchmark table with data
Never use decorative illustrations. Prefer thinking artifacts — visuals that carry information.
Utility Classes
| 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 |
Color Tokens
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 |
Writing Style
- Precise, not performative
- Opinionated, but justified
- Systems-level thinking
- Calm tone, no hype
Avoid: buzzwords, over-explaining, marketing language, decorative elements.
Which skills are related to use-kunchenguid-design-system?
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.1M175k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.790k30.9k
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.685k84.6kHigh End Visual DesignMake every AI-generated interface look and feel like it was crafted by a $150k premium design agency.459k84.6kRedesign Existing ProjectsUpgrade an existing website or web app from generic AI-generated styling to premium, intentional design while preserving the current tech stack.459k84.6kMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita425k84.6kAdd a use-kunchenguid-design-system badge
Show developers this skill is listed on Skillselion. Paste this into your README.
