Dark-slate design system for developer-tools landing pages and consoles: install-command hero, live terminal, latency charts, trace waterfalls and alert builders — built for CLIs, APIs and observability products.
Build a dark developer-tools landing page for my API with an install-command hero, a live terminal and a latency chart, using devtools-slate-ui.
你能得到
- A complete dark-slate devtools design system: SKILL.md with IP guardrails, workflow, tokens, motion and QA checklist; three references (design tokens, components, paste-ready snippets); and two working demo pages — a Tracefield observability landing page (install-command hero, live terminal, latency chart, trace waterfall, pricing) and an interactive console (traces table, waterfall detail, alert-rule builder) with self-hosted fonts.
适合场景
- Teams shipping a CLI, API, SDK, database or observability product who need a dark, code-first landing page that earns a developer's trust in seconds.
不适合
- Consumer, lifestyle or luxury products; light-mode-first brands; pages that need photography as the hero.
- 名称
- Slate DevTools UI
- 下载数
- 1
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: v1.0.0 — Slate DevTools UI: deep-slate developer-tools design system (Tracefield observability demos). Install-command hero, live terminal with log stream, p50/p95/p99 latency chart with range tabs, trace waterfall, alert-rule builder console, pricing with annual toggle, FAQ accordion. Self-hosted Inter + JetBrains Mono fonts; prefers-reduced-motion fallbacks throughout.
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip devtools-slate-ui-v1.0.0.zip -d ~/.claude/skills/devtools-slate-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
喜欢这个免费 skill？Premium 解锁 91 个独家 skills。
一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。
评价
相关技能
Aurora-Glass UI Design
Aurora-Glass UI Design
Dark, high-motion landing pages in the aurora-glass language — drifting multi-color aurora gradients, frosted-glass cards, glow CTAs, mouse parallax, canvas waveforms. Ships tokens, components, snippets, and an animated Prismwave demo.
Claude Code · Codex · Cursor · Copilot +3
Bento-Style UI Design
Bento-Style UI Design
Design bento-grid landing pages — modular unequal cards where tile size carries the editorial hierarchy, each card with its own mini-visualization, choreographed stagger/reveal/hover motion. Ships tokens, components, copy-paste snippets, and an animated Hexagrid demo.
Claude Code · Codex · Cursor · Copilot +3
AI Aesthetic UI
AI Aesthetic UI
Build landing pages and product UI in the AI product aesthetic — near-black luminous base, violet→cyan intelligence gradient, chat-first hero, streaming text, glow cards.
Claude Code · Codex · Cursor · Copilot +3
Neon Noir UI
Neon Noir UI
Design neon-noir cyberpunk websites — a near-black night city lit by two neon hues, pink and cyan, with cut-corner panels, HUD mono labels, and a perspective grid floor. Use when the user asks for a cyberpunk look, a neon night-city aesthetic, an electronic music festival site, or a "dark, glowing, after-midnight" mood.
Claude Code · Codex · Cursor · Copilot +3