English · 简体中文
A Claude Code / Claude.ai skill that gives Claude a complete, opinionated visual style for building dark-themed technical web pages: architecture overviews, product showcases, dashboards, roadmaps, technical landing pages, one-pagers.
Hero of
docs/demo.html— a fictional "Tessera" deploy-pipeline page rendered entirely from this skill's tokens and components. See the full demo and the SaaS variant in the gallery below.
A signature aesthetic: near-black 4-level background, barely-there 6% borders, ultra-tight 800-weight headlines, a 7-color accent palette with dim variants, glassmorphic nav, gradient stat numbers, and 14 ready-to-use component classes.
Same skill, different content. Both pages were generated from assets/tokens.css + assets/starter.html, no per-page custom CSS.
| Tessera · deploy pipeline | Drift · SaaS landing |
|---|---|
 |
 |
| Engineering-process feel: horizontal 6-stage pipeline, asymmetric maturity ladder with "you-are-here" highlight, horizontal Gantt roadmap with quarter columns. | Product-marketing feel: trusted-by logo strip, asymmetric 1-large + 2-small feature highlight with code snippet, big-number social proof, 3-tier pricing, terminal CTA. |
- Background:
#0a0c14→#10121c→#161924→#1c1f2e(four levels) - Text:
#e2e5ef/#7a7f96/#4a4e63(three levels, no pure white) - Borders:
rgba(255,255,255,0.06), lifts to0.12on hover - Accents: orange / blue / green / gold / purple / red / cyan — each with a 15%-alpha
dimvariant - Type: SF Pro / PingFang for body; SF Mono / Fira Code for code
- Headlines:
font-weight: 800,letter-spacing: -0.02emto-0.03em - Radii:
14pxfor cards,8pxfor chips - Effects: 20px backdrop-blur nav, radial-gradient hero halo, pulse animation on status dots, 135° gradient text for stats
git clone https://github.com/harrisliangsu/dark-tech-style.git ~/.claude/skills/dark-tech-styleOr clone elsewhere and symlink:
git clone https://github.com/harrisliangsu/dark-tech-style.git ~/dev/repo/dark-tech-style
ln -s ~/dev/repo/dark-tech-style ~/.claude/skills/dark-tech-styleRestart Claude Code (or start a new session) and the skill will appear in the available-skills list.
Upload the directory as a custom skill via Settings → Skills.
Just describe what you want to build:
- "Architecture page, 6-stage pipeline, with a roadmap"
- "Landing page for an AI coding agent, dark theme, 4 hero stats"
- "Tech briefing one-pager: 3-layer architecture + defense mechanisms + KPIs"
- "Dashboard overview, dark tech style"
The skill auto-triggers and Claude will pull the design tokens, pick an accent color per section, and output a single-file HTML page using the component recipes.
You can also invoke it explicitly:
/dark-tech-style help me build an architecture page for a KMS system
dark-tech-style/
├── SKILL.md # rules, color laws, section patterns, anti-patterns
├── assets/
│ ├── tokens.css # CSS variables + 14 component classes
│ └── starter.html # section skeletons (hero / cards / layers / timeline / terminal)
├── docs/
│ ├── demo.html # architecture overview example
│ ├── demo-saas.html # SaaS landing example
│ ├── preview.png # rendered architecture preview
│ └── preview-saas.png # rendered SaaS landing preview
├── README.md # English
├── README.zh.md # Simplified Chinese
└── LICENSE
These are the rules you'll see Claude apply — they're the ones most often violated when this style gets imitated by hand:
- One accent per section. Pick a color (orange / blue / green / etc.) and use it for every element in that section — kicker, card rail, badge, dot, stat gradient. Don't mix.
-dimvariants are backgrounds only. Never use a 15%-alpha color as text — it's unreadable. Use the solid accent for text/border/icon, the-dimvariant only for fills.- Take colors from tokens, never hardcode hex. If you find yourself typing
#3b82f6, usevar(--accent-blue)instead.
The visual language was extracted from a "Ship Rail" architecture page authored by YiKong (易空) — credit to the original designer for the aesthetic. This repo packages the system as a reusable Claude skill.
MIT — see LICENSE.