Una guía de Intergalactic con tokens semánticos y de gráficos actuales, controles de filtrado nativos, comparación con una escala fija, detalles de la selección y un conjunto de datos de ejemplo completo y reproducible.
Guía de OpenDesign8 capítulos38 entradas de referenciaGuía de aplicación original
01
Semrush Intergalactic Vista previa de la interfaz del sistema de diseño
Filtra los términos, limita la vista a los registros seguidos, cambia la métrica e inspecciona los valores seleccionados sin perder de vista la escala.
Controles nativos de Intergalactic de @semcore/ui 17.6.0 con @semcore/theme 2.3.1; comparación original de barras de HTML. · Referencia de implementación
02
Semrush Intergalactic Referencia de diseño del sistema de diseño
Controles nativos de Intergalactic de @semcore/ui 17.6.0 con @semcore/theme 2.3.1; comparación original de barras de HTML.
Semrush Intergalactic Diseño del espacio de trabajo analítico del sistema de diseño
Define una pregunta concreta para la comparación
El ejemplo compara seis palabras clave ficticias mediante una métrica seleccionada. Encima de los resultados hay un filtro, una opción para mostrar solo los elementos seguidos y botones para elegir la métrica. Un inspector independiente muestra ambas métricas para el término seleccionado, lo que permite comparar una vista de clasificación con los valores subyacentes.
Distingue los datos de ejemplo de los datos medidos
Todos los números forman parte de un conjunto de datos fijo y se identifican como ilustrativos. La página no presenta el volumen de búsqueda ni la dificultad como mediciones actuales de Semrush. Las barras no se basan en consultas de red, una cuenta de analítica ni datos de clientes descargados.
Semrush Intergalactic Generación de temas y tokens del sistema de diseño
Usa deliberadamente el paquete de tema actual
El entorno de ejecución fija @semcore/ui 17.6.0 y @semcore/theme 2.3.1. Los componentes nativos necesitan la versión actual del paquete de temas, y la entrada importa su archivo light.css. La tabla conserva los valores OKLCH de esa hoja de estilos en lugar de sustituirlos por valores hexadecimales antiguos y no relacionados.
Mantén separados los roles de los componentes y los gráficos
Los controles nativos obtienen su aspecto de los estilos de Intergalactic, mientras que la comparación de barras original usa el rol de la primera serie de la paleta del gráfico. La selección se indica mediante un fondo de fila discreto y un estado presionado. No se debe reutilizar indiscriminadamente el color de una serie para todas las acciones o errores.
Sistema de diseño Semrush Intergalactic: tipografía para resultados densos
Mantén juntos las etiquetas, las unidades y los valores
Cada fila de barras incluye el término y un valor numérico escrito. La nota pequeña del eje especifica si la escala corresponde a búsquedas de muestra o a una puntuación sobre 100. El inspector repite ambas unidades para evitar que una longitud de barra visualmente similar dé a entender que las métricas son intercambiables.
Usa texto compacto sin ocultar el contexto
El campo de entrada nativo usa el tamaño grande para ofrecer un área cómoda de filtrado. Las etiquetas de los resultados son compactas, mientras que el título del espacio de trabajo y los encabezados de sección son más grandes. En una pantalla estrecha, la palabra clave pasa encima de la barra y el valor en lugar de truncarse hasta quedar ilegible.
Sistema de diseño Semrush Intergalactic: escala y ordenación de gráficos
Mantén una escala estable al filtrar
El gráfico de volumen siempre usa un máximo de 8,100 y el gráfico de dificultad, uno de 100. El filtrado no amplía la barra restante más larga hasta ocupar todo el ancho. Esta decisión de diseño conserva el sentido de la comparación cuando el usuario reduce el conjunto.
Ordena según la métrica activa
Sistema de diseño Semrush Intergalactic: campo de entrada y casilla nativos
Usa la estructura compuesta del campo de entrada
Input proporciona el componente contenedor e Input.Value, el control editable propiamente dicho. Su función de devolución de llamada onChange recibe primero el valor de tipo cadena, a diferencia de un evento de cambio DOM estándar. La etiqueta visible apunta al id de Value.
Mantén independientes los filtros booleanos y de texto
La función onChange de Checkbox, el componente nativo, recibe el valor booleano checked. El filtrado de texto y el estado de solo palabras clave seguidas se combinan al obtener las filas, por lo que cualquiera de los dos puede generar legítimamente un resultado vacío. Restablecer los filtros recupera el estado de ambos controles y conserva el contexto seleccionado en el inspector.
Sistema de diseño Semrush Intergalactic: detalle seleccionado y estado vacío
Mantén la selección vinculada a la identidad
El término seleccionado se almacena independientemente del orden del arreglo. Al hacer clic en una barra, se actualizan ese término y su estado presionado, mientras que el inspector busca el registro completo en los datos de ejemplo. Ordenar por otra métrica no puede hacer que el inspector apunte en silencio a una fila con un índice distinto.
Explica si la selección se conserva fuera del filtro
Si el término seleccionado deja de estar visible, el inspector sigue disponible y muestra una explicación por escrito. Esto resulta útil al comparar un elemento antes y después de filtrarlo. La región de resultados vacíos ofrece una acción explícita para restablecer los filtros en lugar de mostrar un panel de gráfico en blanco.
Sistema de diseño Semrush Intergalactic para la comparación accesible de datos
Haz que el gráfico se entienda sin depender del color
Las barras son elementos span decorativos dentro de botones reales. El término y el valor conforman el texto accesible, y aria-pressed identifica la selección. Los datos siguen siendo comprensibles sin ver la longitud de las barras ni el tono de la serie. El foco del teclado se distingue visualmente del estilo de la fila seleccionada.
Elige Difficulty e inspecciona las barras reordenadas y la unidad de puntuación.
Filtra con un término que no coincida y usa Restablecer filtros.
Selecciona un término, exclúyelo con el filtro y lee la explicación de que se conserva la selección.
Prueba cómo recuperar los filtros
El campo de entrada nativo y la casilla exponen sus controles reales. Los cambios de métrica usan botones con estado presionado, y la acción de restablecimiento original borra ambos filtros. El diseño mantiene visibles el título de los resultados y la nota de unidades para que los estados vacíos y los que contienen resultados conserven el mismo contexto.
Sistema de diseño Semrush Intergalactic: importaciones de componentes y configuración del tema
Importa los puntos de entrada de cada componente
La raíz de @semcore/ui lanza intencionalmente un error en lugar de exportar todos los componentes. Este código importa button, input y checkbox desde sus puntos de entrada específicos e importa @semcore/theme/light.css. La entrada completa incluye los datos de ejemplo y toda la lógica de derivación.
Importaciones específicas de @semcore/ui/button, input y checkbox.
@semcore/theme/light.css fijado a una versión concreta.
Lógica de los datos de ejemplo y de las barras con escala fija original incluida en el JSX completo.
No presentes las barras personalizadas como un gráfico D3 nativo
Semrush Intergalactic Ejemplos de componentes del sistema de diseño
main.jsx — ejemplo completo y funcional
Compara un conjunto ficticio de palabras clave. El código siguiente es la entrada React completa e incluye todo el estado y la validación.
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 />);
Crea una comparación analítica compacta con controles nativos de Intergalactic, importaciones específicas y los tokens actuales del tema. Mantén coherentes las unidades, las escalas fijas, la ordenación y la identidad seleccionada. Proporciona valores textuales y una opción de recuperación para el estado vacío. Identifica con precisión las métricas de ejemplo y el código de gráfico original; no afirmes que son datos medidos de Semrush.
05
Semrush Intergalactic Fuentes y alcance del sistema de diseño
OpenDesign Guía de aplicación. Los seis registros de palabras clave y todas las métricas son ficticios. Los controles nativos de Intergalactic rodean un gráfico HTML original; no es un informe de Semrush ni una implementación de gráficos D3 nativa.
