Eine Intergalactic-Anleitung mit aktuellen semantischen und Diagramm-Design-Tokens, nativen Filtersteuerelementen, Vergleichen mit fester Skalierung, ausgewählten Details und einer vollständigen, reproduzierbaren Beispieldatengrundlage.
Semrush Intergalactic Designsystem: Vorschau der Benutzeroberfläche
Filtere Begriffe, beschränke die Ansicht auf erfasste Datensätze, ändere die Kennzahl und prüfe ausgewählte Werte, ohne den Skalierungskontext zu verlieren.
Semrush Intergalactic Designsystem: Layout für analytische Workspaces
Lege eine konkrete Fragestellung für den Vergleich fest
Das Beispiel vergleicht sechs fiktive Keywords anhand einer ausgewählten Kennzahl. Über dem Ergebnis befinden sich ein Filter, eine Option zur Beschränkung auf erfasste Keywords und Schaltflächen zur Auswahl der Kennzahl. Ein separater Inspektor zeigt beide Kennzahlen für den ausgewählten Begriff an. So lassen sich eine Ranglistenansicht und die zugrunde liegenden Werte miteinander vergleichen.
Von Menschen erstellte Daten von Messdaten unterscheiden
Jede Zahl stammt aus einem festen Beispieldatensatz und ist als veranschaulichend gekennzeichnet. Die Seite stellt Suchvolumen oder Schwierigkeitsgrad nicht als aktuelle Semrush-Messwerte dar. Den Balken liegen weder Netzwerkabfragen noch ein Analytics-Konto oder heruntergeladene Kundendaten zugrunde.
Semrush Intergalactic Designsystem: Theme- und Token-Generierung
Das aktuelle Theme-Paket gezielt einsetzen
Die Laufzeitumgebung verwendet @semcore/ui 17.6.0 und @semcore/theme 2.3.1. Die nativen Komponenten benötigen das aktuelle Theme-Paket; der Einstiegspunkt importiert dessen light.css. Die Tabelle übernimmt die OKLCH-Werte aus diesem Stylesheet, statt sie durch nicht zugehörige ältere Hexadezimalwerte zu ersetzen.
Rollen für Komponenten und Diagramme getrennt halten
Die nativen Steuerelemente beziehen ihr Erscheinungsbild aus dem Intergalactic-Styling, während der eigene Balkenvergleich die erste Reihenfarbe aus der Diagrammpalette verwendet. Eine Auswahl wird durch einen dezenten Zeilenhintergrund und einen aktivierten Zustand kenntlich gemacht. Eine Reihenfarbe sollte nicht wahllos für sämtliche Aktionen oder Fehlermeldungen wiederverwendet werden.
Semrush Intergalactic Designsystem: Typografie für dichte Ergebnisansichten
Beschriftungen, Einheiten und Werte zusammenhalten
Jede Balkenzeile enthält den Begriff und einen ausgeschriebenen Zahlenwert. Der kleine Achsenhinweis gibt an, ob die Skala beispielhafte Suchanfragen oder einen Wert von 0 bis 100 darstellt. Der Inspektor wiederholt beide Einheiten, damit ähnlich lange Balken nicht den Eindruck erwecken, die Kennzahlen seien austauschbar.
Kompakte Texte verwenden, ohne Kontext auszublenden
Das native Eingabefeld verwendet die große Größe, damit sich der Filter bequem bedienen lässt. Ergebnisbeschriftungen bleiben kompakt, während der Workspace-Titel und die Abschnittsüberschriften größer gesetzt sind. Auf schmalen Bildschirmen wird das Keyword oberhalb des Balkens und des Werts angezeigt, statt unleserlich abgeschnitten zu werden.
Semrush Intergalactic Designsystem: Diagrammskalierung und Sortierung
Die Skala beim Filtern stabil halten
Das Volumendiagramm verwendet stets einen Höchstwert von 8,100, das Schwierigkeitsdiagramm einen von 100. Beim Filtern wird der längste verbleibende Balken nicht auf die volle Breite skaliert. So bleibt die Bedeutung des Vergleichs erhalten, wenn die Nutzenden die Auswahl eingrenzen.
Nach der aktiven Kennzahl sortieren
Semrush Intergalactic Designsystem: natives Eingabefeld und Kontrollkästchen
Die zusammengesetzte Anatomie des Eingabefelds verwenden
Input stellt die äußere Komponente bereit, während Input.Value das tatsächlich bearbeitbare Steuerelement enthält. Sein onChange-Callback erhält den Zeichenfolgenwert als erstes Argument. Das unterscheidet sich von der Behandlung als standardmäßiges DOM-Änderungsereignis. Die sichtbare Beschriftung verweist auf die ID von Value.
Boolesche und textbasierte Filter unabhängig halten
onChange des nativen Checkbox-Elements erhält den booleschen Wert checked. Textfilter und der Status „Nur erfasste Keywords“ werden bei der Ermittlung der Zeilen zusammengeführt. Daher kann jede der beiden Optionen berechtigterweise zu einem leeren Ergebnis führen. Beim Zurücksetzen der Filter werden beide Steuerelemente zurückgesetzt, während der Kontext der ausgewählten Detailansicht erhalten bleibt.
Semrush Intergalactic Designsystem: Auswahldetails und Leerzustand
Auswahl an Identität gebunden halten
Der ausgewählte Begriff wird unabhängig von der Array-Reihenfolge gespeichert. Ein Klick auf einen Balken aktualisiert den Begriff und dessen aktivierten Zustand, während der Inspektor den vollständigen Datensatz des Beispiels abruft. Die Sortierung nach einer anderen Kennzahl kann daher nicht dazu führen, dass der Inspektor unbemerkt auf einen anderen Zeilenindex verweist.
Eine Auswahl außerhalb des Filters erklären
Ist der ausgewählte Begriff nicht mehr sichtbar, bleibt der Inspektor mit einer erklärenden Beschriftung verfügbar. Das ist hilfreich, wenn ein Eintrag vor und nach dem Filtern verglichen werden soll. Der Bereich mit den Ergebnissen zeigt bei leerer Auswahl eine ausdrückliche Aktion zum Zurücksetzen an, statt ein leeres Diagrammfeld darzustellen.
Balken sind dekorative Elemente innerhalb echter Schaltflächen. Begriff und Wert bilden den zugänglichen Text, und aria-pressed kennzeichnet die Auswahl. Die Daten bleiben auch ohne die Balkenlänge oder den Farbton der Datenreihe verständlich. Der Tastaturfokus ist deutlich von der Hervorhebung der ausgewählten Zeile unterscheidbar.
Wählen Sie „Schwierigkeit“ aus und prüfen Sie die neu sortierten Balken und die Einheit des Werts.
Filtern Sie nach einem Begriff ohne Treffer und verwenden Sie „Filter zurücksetzen“.
Wählen Sie einen Begriff aus, filtern Sie ihn heraus und lesen Sie die Erklärung zur beibehaltenen Auswahl.
Testen Sie die Wiederherstellung nach dem Filtern
Das native Eingabefeld und das Kontrollkästchen stellen ihre tatsächlichen Bedienelemente bereit. Für Metriken werden Schaltflächen mit gedrücktem Zustand verwendet, und die ursprüngliche Zurücksetzen-Aktion entfernt beide Filter. Das Layout lässt den Ergebnistitel und den Hinweis zur Einheit sichtbar, sodass leere und nicht leere Zustände denselben Kontext bieten.
Semrush Intergalactic Komponentenimporte und Theme-Einrichtung des Designsystems
Komponenteneinstiegspunkte importieren
Der @semcore/ui-Stammeinstiegspunkt löst absichtlich einen Fehler aus, statt alle Komponenten zu exportieren. Dieser Quellcode importiert Button, Input und Checkbox jeweils über ihren eigenen Einstiegspunkt und bindet @semcore/theme/light.css ein. Der vollständige Eintrag enthält das Fixture und die gesamte Ableitungslogik.
Separate Importe aus @semcore/ui/button, input und checkbox.
Eingebundenes @semcore/theme/light.css.
Originale Logik für Balken mit fester Skala und Fixture im vollständigen JSX.
Die eigenen Balken nicht als natives D3-Diagramm bezeichnen
Semrush Intergalactic Komponentenbeispiele des Designsystems
main.jsx — vollständiges, funktionsfähiges Beispiel
Vergleichen Sie einen fiktiven Keyword-Datensatz. Der folgende Quellcode ist der vollständige Eintrag mit React, einschließlich aller Zustände und Validierungen.
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Button from "@semcore/ui/button";
import Input from "@semcore/ui/input";
import Checkbox from "@semcore/ui/checkbox";
import "@semcore/theme/light.css";
import "./intergalactic.css";
const data = [
{ term: "design tokens", volume: 8100, difficulty: 42, tracked: true },
{ term: "component library", volume: 6600, difficulty: 58, tracked: false },
{ term: "accessible forms", volume: 2900, difficulty: 31, tracked: true },
{
term: "responsive typography",
volume: 1900,
difficulty: 24,
tracked: false,
},
{ term: "semantic colors", volume: 1300, difficulty: 18, tracked: false },
{ term: "design system audit", volume: 720, difficulty: 36, tracked: true },
];
function App() {
const [q, setQ] = useState(""),
[tracked, setTracked] = useState(false),
[metric, setMetric] = useState("volume"),
[selected, setSelected] = useState("design tokens");
const rows = data
.filter((d) => d.term.includes(q.toLowerCase()) && (!tracked || d.tracked))
.sort((a, b) => b[metric] - a[metric]);
const max = metric === "volume" ? 8100 : 100;
const item = data.find((d) => d.term === selected);
return (
<main className="research">
<header>
<p>RESEARCH WORKSPACE / FICTIONAL DATA</p>
<h1>Compare a keyword set</h1>
<span>
Six authored sample records · figures are illustrative, not Semrush
measurements
</span>
</header>
<div className="research-toolbar">
<div className="research-search">
<label htmlFor="term-search">Filter keywords</label>
<Input size="l">
<Input.Value
id="term-search"
placeholder="Find a sample term"
value={q}
onChange={setQ}
/>
</Input>
</div>
<Checkbox
label="Tracked only"
checked={tracked}
onChange={setTracked}
/>
<div
className="metric-options"
role="group"
aria-label="Comparison metric"
>
<Button
use={metric === "volume" ? "primary" : "secondary"}
aria-pressed={metric === "volume"}
onClick={() => setMetric("volume")}
>
Volume
</Button>
<Button
use={metric === "difficulty" ? "primary" : "secondary"}
aria-pressed={metric === "difficulty"}
onClick={() => setMetric("difficulty")}
>
Difficulty
</Button>
</div>
</div>
<div className="research-grid">
<section className="chart-panel">
<div className="chart-heading">
<h2>
{metric === "volume"
? "Illustrative monthly volume"
: "Illustrative difficulty score"}
</h2>
<span>{rows.length} terms</span>
</div>
<p className="axis-note">
{metric === "volume"
? "Fixed scale: 0–8,100 sample searches"
: "Fixed scale: 0–100 sample score"}
</p>
{rows.length ? (
<div className="bars">
{rows.map((r) => (
<button
className={
"bar-row " + (r.term === selected ? "selected" : "")
}
key={r.term}
onClick={() => setSelected(r.term)}
aria-pressed={r.term === selected}
>
<span className="bar-name">{r.term}</span>
<span className="bar-track" aria-hidden="true">
<i style={{ width: (r[metric] / max) * 100 + "%" }} />
</span>
<strong>{r[metric].toLocaleString("en-US")}</strong>
</button>
))}
</div>
) : (
<div className="no-results">
<h3>No matching terms</h3>
<p>
Clear the text and tracked filter to restore the full
comparison.
</p>
<Button
onClick={() => {
setQ("");
setTracked(false);
}}
>
Reset filters
</Button>
</div>
)}
<p className="chart-note">
Values are written beside every bar. Click a term to inspect both
metrics.
</p>
</section>
<aside>
<h2>{item.term}</h2>
<dl>
<dt>Sample volume</dt>
<dd>{item.volume.toLocaleString("en-US")}</dd>
<dt>Sample difficulty</dt>
<dd>{item.difficulty} / 100</dd>
<dt>Tracking</dt>
<dd>{item.tracked ? "Tracked" : "Not tracked"}</dd>
</dl>
<div className="inspector-note">
<h3>Comparison context</h3>
<p>
The bar scale stays fixed when filters change. Difficulty and
volume have separate units and are not added together.
</p>
</div>
{!rows.some((r) => r.term === selected) && (
<p className="retained">
Selected term is outside the current filter; details are retained.
</p>
)}
</aside>
</div>
<footer>
Native Intergalactic Input, Checkbox and Button from @semcore/ui 17.6.0.
Original accessible HTML bar comparison; no analytics service request.
</footer>
</main>
);
}
createRoot(document.getElementById("root")).render(<App />);
Speichern Sie die Datei neben main.jsx. Diese benutzerdefinierten Layoutregeln sind von der Token-Referenz der Bibliothek getrennt.
04
Semrush Intergalactic Einrichtung des Designsystem-Agenten
Ausgangspunkt für die Implementierung
Das Beispiel mit den festgelegten nativen Komponenten wurde gebündelt und lokal im Browser geprüft. Das Beispiel verwendet ausschließlich den lokalen Anwendungszustand.
Erstellen Sie einen kompakten analytischen Vergleich mit nativen Intergalactic-Steuerelementen, separaten Importen und aktuellen Theme-Token. Sorgen Sie für einheitliche Einheiten, feste Skalen, Sortierungen und ausgewählte Identitäten. Stellen Sie Werte als Text dar und ermöglichen Sie die Wiederherstellung nach einem leeren Ergebnis. Kennzeichnen Sie Fixture-Metriken und eigenen Diagrammcode korrekt, statt sie als gemessene Semrush-Daten auszugeben.
05
Semrush Intergalactic Quellen und Umfang des Designsystems
OpenDesign Anwendungsleitfaden. Die sechs Keyword-Datensätze und alle Metriken sind fiktiv. Native Intergalactic-Steuerelemente umrahmen ein eigenes Diagramm mit HTML; es handelt sich weder um einen Semrush-Bericht noch um eine native D3-Diagrammimplementierung.
