skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-voltagent

Apply VoltAgent's design system tokens to generate brand-accurate UI interfaces.

Updated Feb 23, 2026
Search Tags:#typography#design system#brand guidelines#design tokens#ui design#voltagent#dark theme
One-click install
npx skills add https://github.com/deepparser/skills --skill design-voltagent-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-voltagent
Source: https://github.com/deepparser/skills/tree/main/design-voltagent
Command: npx skills add https://github.com/deepparser/skills --skill design-voltagent-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match VoltAgent's visual identity requires exact knowledge of its colors, typography, spacing, and component styles, which is difficult to reproduce from memory or screenshots alone. ## Core Features & Use Cases - Complete Design Token Catalog: Provides exact hex colors (Abyss Black #050507, Emerald Signal Green #00d992), typography scales (system-ui headings, Inter body, SFMono code), spacing, radius, and elevation levels. - Component Specifications: Defines button variants, card styles, navigation patterns, code blocks, and distinctive elements like the npm install command block and logo marquee. - Light and Dark Previews: Bundled HTML preview files show the design system rendered in both themes for visual verification. - Use Case: When asked to build a landing page or dashboard styled like VoltAgent, the skill supplies every token and rule needed to produce a faithful dark, developer-terminal aesthetic with green accent glows. ## Quick Start Use the design-voltagent skill to create a landing page hero section styled like VoltAgent with a dark background and green accent headline.

Frequently Asked Questions about design-voltagent

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a UI that looks like VoltAgent's website?▼

Use this skill to apply VoltAgent's design tokens: Abyss Black (#050507) page background, Carbon Surface (#101010) cards, Warm Charcoal (#3d3a39) borders, and Emerald Signal Green (#00d992) accents. Headings use system-ui with tight line-heights, body text uses Inter, and code uses SFMono-Regular.

What colors does the VoltAgent design system use?▼

The palette centers on Abyss Black (#050507) and Carbon Surface (#101010) backgrounds, Emerald Signal Green (#00d992) as the sole accent, VoltAgent Mint (#2fd6a1) for CTA text, and warm grays (#3d3a39, #8b949e, #b8b3b0) for borders and secondary text.

Does the VoltAgent design system support light mode?▼

Yes, the skill bundles both a light theme preview (preview.html) and a dark theme preview (preview-dark.html). The dark theme is the primary identity, while the light preview adapts the same tokens to white surfaces with adjusted borders and shadows.

How does VoltAgent handle elevation and shadows in UI design?▼

Depth is communicated primarily through border weight and color rather than shadows: 1px Warm Charcoal for standard cards, 3px for emphasis, and 2px Emerald Signal Green for active states. Shadows appear only at high elevation levels as warm ambient glows or dramatic dark floats.

What fonts should I use for a VoltAgent-style interface?▼

Use system-ui for headings with compressed line-heights (1.0-1.11) and negative letter-spacing, Inter for body and UI text at 400-600 weights, and SFMono-Regular for all code content. Enable calt and rlig OpenType features throughout.

Related Skills

Explore More Design & Creative Skills→
lucaspedrozaemlucaspedrozaem
1

ui-design

Translate wireframes and requirements into token-level UI specifications for SaaS products.

Community
Intermediate
cchrisvcchrisv

frontend-design

Generate polished React and HTML/CSS frontend interfaces with strong design aesthetics.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced