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

design-tesla

Applies Tesla's design system tokens and component styles to UI generation.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Tesla's visual identity requires exact knowledge of its restrained color palette, typography scale, and component rules, which are otherwise scattered and hard to reproduce consistently. ## Core Features & Use Cases - Complete Design Tokens: Provides exact hex colors (Electric Blue #3E6AE1, Carbon Dark #171A20), typography specs (Universal Sans Display/Text, 400/500 weights), spacing, and border-radius values. - Component Recipes: Defines buttons, navigation bars, vehicle cards, category cards, forms, and a persistent chat bar with Tesla-accurate styling rules. - Light and Dark Previews: Bundled preview.html and preview-dark.html files show the full system implemented for visual verification. - Use Case: When asked to build a product landing page styled like Tesla, the skill produces a full-viewport hero with a 40px title, an Electric Blue primary CTA, and a white secondary button with 4px radius. ## Quick Start Use the design-tesla skill to create a landing page hero section styled like Tesla's website.

Frequently Asked Questions about design-tesla

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

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

Invoke this skill when generating UI code and it applies Tesla's exact design tokens: Electric Blue #3E6AE1 for primary CTAs, white surfaces, 14px body text at weight 400, and 4px border-radius buttons with no shadows or gradients.

What colors does the Tesla design system use?▼

The palette is monochrome plus one accent: Electric Blue #3E6AE1 for primary CTAs, Pure White #FFFFFF for surfaces, and grays including Carbon Dark #171A20, Graphite #393C41, Pewter #5C5E62, and Silver Fog #8E8E8E for text hierarchy.

Does the Tesla design skill support dark mode?▼

Yes, the skill bundles a preview-dark.html file alongside the light preview.html. Both files implement the full token set, components, and elevation levels so you can verify styling in either theme.

What typography rules does Tesla's design system follow?▼

It uses Universal Sans Display for hero titles at 40px weight 500 and Universal Sans Text for all UI and body text at 14px. Only weights 400 and 500 are used, with normal letter-spacing and no uppercase transforms.

When should I avoid using Tesla's design style?▼

Avoid it when a project needs rich color coding, decorative elements, or dense information layouts. Tesla's system deliberately uses one accent color, no shadows, no gradients, and viewport-height sections, which suits product showcases but not data-heavy dashboards.

Related Skills

Explore More Design & Creative Skills→
CutTheChexxCutTheChexx

render

Generate cohesive brand visual identity systems with templates and prompts.

Community
Advanced
JNZader-VaultJNZader-Vault

frontend-design

Generate production-grade frontend interfaces with unique aesthetics in React, Vue, or Svelte.

Official
Advanced
dudqks0319-cpududqks0319-cpu

ui-testing

Validates UI components against accessibility standards using contrast, visibility, and touch-target checklists.

Community
Basic
fengjutianfengjutian

brandkit

Generate brand guidelines images with logo systems and identity decks.

Community
Advanced