skills.rest
discountry
discountryCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

teenage-engineering-ui

Generate hardware-inspired web UIs with Teenage Engineering design tokens and component recipes.

1|Updated Mar 12, 2026
Search Tags:#design tokens#css components#hardware ui#functionalist design#teenage engineering#retro interface#synth aesthetic
One-click install
npx skills add https://github.com/discountry/ritmex-skills --skill teenage-engineering-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: teenage-engineering-ui
Source: https://github.com/discountry/ritmex-skills/tree/main/skills/teenage-engineering-ui
Command: npx skills add https://github.com/discountry/ritmex-skills --skill teenage-engineering-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Building user interfaces that match the functionalist hardware aesthetic of Teenage Engineering and Braun devices requires consistent design tokens, reusable component patterns, and strict aesthetic guardrails that are time-consuming to develop from scratch. This Skill eliminates that manual work by providing a complete, ready-to-use system for creating cohesive, physical instrument-inspired interfaces.

Core Features & Use Cases

  • Pre-built design system: Includes two complete themes (warm bone light, warm graphite dark), a single-accent color system, and full typography, spacing, and shadow tokens to ensure visual consistency across all UI elements.
  • Reusable component recipes: Provides working HTML/CSS for all core hardware UI controls including knobs, tactile buttons, segmented mode chips, recessed LCD/CRT screens, LED indicators, and device enclosures with chrome details like corner screws and serial numbers.
  • Quality guardrails: Comes with a self-review checklist to avoid common mistakes like excessive accents, missing labels, or mushy depth, ensuring the final UI reads as an authentic physical device.
  • Use case: Ideal for building synthesizer interfaces, audio gear dashboards, retro-futurist tool UIs, or any web interface that needs to feel like a beautifully designed physical instrument.

Quick Start

Use the teenage-engineering-ui skill to build a retro audio controller interface with a bone theme, TE orange accent, rotary knob, mode selector chips, and a recessed CRT display.

Frequently Asked Questions about teenage-engineering-ui

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

FAQPage Schema
How do I build a Teenage Engineering-style hardware UI for a web project?▼

Build Teenage Engineering-style hardware UI by applying pre-defined design tokens and reusable HTML/CSS component recipes for knobs, tactile buttons, and recessed screens, ensuring cohesive physical instrument aesthetics without manual token development.

What design tokens are needed for a functionalist retro synth interface?▼

Functional retro synth interfaces require design tokens for single-accent color systems, typography, spacing, and shadows. This Skill provides complete warm bone light and warm graphite dark themes to ensure visual consistency across hardware-styled controls.

Can I create audio gear dashboard components like rotary knobs and LED indicators without manual CSS?▼

Yes, you can create audio gear dashboard components using provided working HTML/CSS recipes for rotary knobs, segmented mode chips, LED indicators, and device enclosures with chrome details like corner screws and serial numbers.

How do I avoid common design mistakes when creating minimalist hardware-styled applications?▼

Avoid common minimalist hardware UI mistakes like excessive accent colors, missing labels, or mushy depth by applying the included self-review checklist guardrails to ensure the final interface reads as an authentic physical device.

Does this hardware UI design system support both light and dark themes for retro audio gear interfaces?▼

Yes, the hardware UI design system supports both light and dark themes, specifically providing warm bone light and warm graphite dark themes with full typography, spacing, and shadow tokens for production-ready retro audio gear interfaces.

What's the best way to ensure theme consistency across device-like tool interfaces?▼

Ensure theme consistency across device-like tool interfaces by using a complete pre-built design system with a single-accent color system, full token definitions, and reusable component recipes that maintain cohesive functionalist hardware aesthetics throughout the project.

Related Skills

Explore More Design & Creative Skills→
markwang2658markwang2658
31

popular-web-designs

Render design-system templates into production-ready HTML and CSS artifacts.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

audio-jingle

Generate a glassmorphic HTML/CSS audio player card for single-track media.

Community
Intermediate
sebasdvsebasdv
1

daisy-firmware

Develop bare-metal C++ firmware for Daisy audio hardware with libDaisy and DaisySP.

Community
Advanced
marcioaltoemarcioaltoe
14

ui-designer

Design and implement accessible React UI components with shadcn/ui and Tailwind CSS.

Community
Intermediate