القائمة
ModelSweep-specific design system, color tokens, component patterns, and data integration rules. Use alongside the frontend-design skill for all ModelSweep UI work.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | modelsweep-design |
| description | ModelSweep-specific design system, color tokens, component patterns, and data integration rules. Use alongside the frontend-design skill for all ModelSweep UI work. |
This skill defines the specific visual identity and technical patterns for ModelSweep, an open-source evaluation workbench for local LLMs. Use this alongside the frontend-design skill. The frontend-design skill handles general aesthetic quality. This skill handles ModelSweep-specific identity, data patterns, and constraints.
ModelSweep's aesthetic is "observatory control room meets editorial data journalism." Think Bloomberg Terminal elegance, not startup landing page energy. Think The Pudding's data essays, not a SaaS dashboard. The UI should feel like a place where serious decisions are made about which AI models to trust, presented with the visual confidence of a well-designed research publication.
Key feeling: calm authority. Not flashy, not boring. Confident, precise, beautiful.
ModelSweep supports two themes. Both must be implemented for every component.
Use CSS custom properties on <html> for all color values.
The dark theme uses deep obsidian backgrounds with frosted glass surfaces and colored ambient glows behind model-related elements.
--bg-base: #09090b Page background (zinc-950)
--bg-surface: rgba(255,255,255,0.04) Glass panels
--bg-surface-hover: rgba(255,255,255,0.07) Hover state
--border-subtle: rgba(255,255,255,0.06) Panel edges
--text-heading: #f4f4f5 Headings (zinc-100)
--text-body: #a1a1aa Body copy (zinc-400)
--text-muted: #52525b Timestamps (zinc-600)
--shadow-panel: 0 8px 32px rgba(0,0,0,0.4)
Surface pattern for dark:
.panel {
background: var(--bg-surface);
backdrop-filter: blur(12px);
border: 1px solid var(--border-subtle);
border-radius: 1rem;
box-shadow: var(--shadow-panel);
}
The light theme uses warm paper-like backgrounds with solid white surfaces and soft layered shadows. NOT pure white. Warm stone tones.
--bg-base: #fafaf9 Warm off-white (stone-50)
--bg-surface: #ffffff Solid white panels
--bg-surface-hover: #f5f5f4 Hover (stone-100)
--border-subtle: rgba(0,0,0,0.07) Soft borders
--text-heading: #1c1917 Headings (stone-900)
--text-body: #57534e Body copy (stone-600)
--text-muted: #a8a29e Timestamps (stone-400)
--shadow-panel: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.03)
Surface pattern for light:
.panel {
background: var(--bg-surface);
backdrop-filter: none;
border: 1px solid var(--border-subtle);
border-radius: 1rem;
box-shadow: var(--shadow-panel);
}
| Type | Dark BG | Dark Text | Light BG | Light Text |
|---|---|---|---|---|
| Primary | zinc-100 (#f4f4f5) | zinc-900 | zinc-900 (#18181b) | white |
| Secondary | transparent | zinc-300 | transparent | stone-700 |
| Danger | red-500/15 | red-400 | red-50 | red-600 |
| Positive | emerald-500/15 | emerald-400 | green-50 | green-600 |
Every LLM model family has a fixed accent color. This color is used for chart lines, progress rings, sidebar indicators, ambient glows (dark), and left-border accents (light). These NEVER change between themes. Only their application method changes (glow vs border-accent).
llama / meta: amber #f59e0b
qwen / alibaba: blue #3b82f6
mistral: violet #8b5cf6
deepseek: emerald #10b981
gemma / google: rose #f43f5e
phi / microsoft: cyan #06b6d4
openai: green #22c55e
anthropic: orange #f97316
unknown / other: zinc #71717a
In dark theme, apply as ambient glow:
<div class="absolute inset-0 -z-10 opacity-[0.08] blur-3xl rounded-full"
style="background: var(--model-color)" />
In light theme, apply as left border + tinted background:
<div class="border-l-4 bg-[var(--model-color)]/5"
style="border-color: var(--model-color)" />
Use exactly two font families loaded via Google Fonts or next/font:
Body text uses DM Sans at weight 400.
Heading scale:
Every component that displays data must follow these patterns:
GET /api/tags list installed models
GET /api/ps currently loaded models
POST /api/show model metadata (family, params, quantization, license)
POST /api/chat inference with streaming
POST /api/generate preload (keep_alive:-1) and unload (keep_alive:0)
OpenAI: POST https://api.openai.com/v1/chat/completions
Anthropic: POST https://api.anthropic.com/v1/messages
Google: POST https://generativelanguage.googleapis.com/v1/models/{model}:generateContent
Custom: POST {user_base_url}/v1/chat/completions
Every component that fetches data MUST implement these four states:
Loading: Skeleton placeholder using bg-[var(--bg-surface)] animate-pulse. Match the shape of the expected content. Never use a spinner.
Error: Inline message below the component header. Include a retry button. Never use a modal or browser alert. Text: text-red-400 (dark) / text-red-600 (light).
Empty: Helpful message with an action. Example: "No test results yet. Run your first test suite to see scores here." Include a primary action button.
Disconnected: If the component depends on Ollama and Ollama is not running, show a subtle banner: "Ollama not detected at localhost:11434. Start Ollama to see your models." Do NOT block the entire page. Other data (history from SQLite) should still display.
Use Framer Motion for React. CSS transitions for simple hover/focus states.
src/
app/ Next.js App Router pages
layout.tsx Root layout with theme provider, font loading
page.tsx Dashboard
suite/
results/
models/
playground/
community/
settings/
components/
ui/ Primitives (Panel, Button, Badge, ProgressRing, etc.)
charts/ Radar, Bar, SpeedComparison, TrendLine
models/ ModelCard, ModelBadge, ModelColorDot
scoring/ ScoreDisplay, VoteButtons, ScoreBreakdown
layout/ Sidebar, TopBar, CommandPalette
lib/
ollama.ts Ollama API client
providers/ Cloud provider adapters (openai.ts, anthropic.ts, etc.)
scoring.ts Auto-scoring engine
db.ts SQLite connection and queries
store.ts Zustand stores
colors.ts Model family color mapping
share.ts Share image generation
types/
index.ts All TypeScript interfaces