Design-System Skill für ALLE OpenSIN-AI Webseiten und Webapps. Shopify-basiertes Dark-First Design mit Neon-Green Accent, ultra-light Display Type und cinematischem Layout. PFLICHT für opensin.ai, my.opensin.ai, blog.opensin.ai und alle weiteren Frontends.
Shopify-inspiriertes Design-System für ALLE OpenSIN-AI Frontends.
Dieser Skill erzwingt ein einheitliches, professionelles Design über alle OpenSIN-Webseiten und Webapps. Keine Ausnahmen. Kein Agent darf ein Frontend ohne dieses Design bauen.
JEDE OpenSIN-AI Webseite MUSS dieses Design-System verwenden:
opensin.ai — Hauptwebsitemy.opensin.ai — Dashboard & Marketplaceblog.opensin.ai — Engineering Blogopensin.ai/simone-mcp — Simone MCP Landing PageVERBOTEN:
Quelle: Delqhi/awesome-OpenSIN-design (GitHub)
~/.config/opencode/skills/awesome-opensin-design/DESIGN.md| Token | Hex | Verwendung |
|---|---|---|
--background | #0a0a0a | Seitenhintergrund, Canvas |
--surface-1 | #141414 | Cards, elevated surfaces |
--surface-2 | #1a1a1a | Secondary cards, modals |
--surface-3 | #222222 | Input backgrounds |
--accent | #008060 | Primary CTA, Links |
--accent-hover | #006e52 | Hover states |
--accent-glow | #00ff9e | Neon-Glow für Hero, Badges |
--text-primary | #f5f5f5 | Headlines, Body |
--text-secondary | #a0a0a0 | Labels, descriptions |
--text-muted | #666666 | Placeholder, disabled |
--border | #2a2a2a | Borders, Divider |
--error | #e04f5f | Error States |
--success | #00cc88 | Success States |
--warning | #ffcc00 | Warning States |
| Level | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| display-1 | 72px | 100 | 1.1 | Hero Headlines |
| display-2 | 56px | 100 | 1.15 | Section Hero |
| h1 | 48px | 500 | 1.2 | Page Titles |
| h2 | 36px | 500 | 1.25 | Section Titles |
| h3 | 28px | 500 | 1.3 | Subsections |
| h4 | 22px | 500 | 1.35 | Card Titles |
| body-lg | 18px | 400 | 1.6 | Lead Paragraphs |
| body | 16px | 400 | 1.6 | Body Text |
| body-sm | 14px | 400 | 1.5 | Captions |
| code | 14px | 400 | 1.5 | Code Blocks |
Fonts:
Inter, system-uiJetBrains Mono, Fira Code#008060 background, #ffffff text, 8px radius1px solid #2a2a2a border#e04f5f background#1414141px solid #2a2a2aborder-color: #008060, box-shadow: 0 0 20px rgba(0,128,96,0.1)backdrop-filter: blur(12px)rgba(10,10,10,0.8)#a0a0a0 → #f5f5f5| Breakpoint | Width | Changes |
|---|---|---|
| xl | 1440px+ | 12-col, 48px padding |
| lg | 1024px | 8-col, 32px padding |
| md | 768px | 4-col, 24px padding, mobile nav |
| sm | 640px | 1-col, touch targets 44px |
#00ff9e) NUR für kritische AktionenWenn ein AI Agent eine OpenSIN-Seite bauen soll:
"Baue eine Dark-First Landing Page im Shopify-Stil. Verwende #0a0a0a Hintergrund, #008060 Green Accent, ultra-light Inter 100 für Hero Text bei 72px. Cards mit #141414 Background, #2a2a2a Border, Green Glow on Hover. Navigation sticky mit backdrop-blur. Responsive mit Mobile Drawer."
Quick Color Reference:
Background: #0a0a0a
Surface: #141414
Accent: #008060
Neon: #00ff9e
Text: #f5f5f5
Muted: #666666
Border: #2a2a2a
| Datei | Zweck |
|---|---|
DESIGN.md | Vollständiges Design System (vom awesome-OpenSIN-design Repo) |
preview.html | Visuelle Vorschau aller Komponenten |
SKILL.md | Dieser Skill (Enforcement + Quick Reference) |
Delqhi/awesome-OpenSIN-design (GitHub)OpenSIN-AI/website-opensin.aiOpenSIN-AI/website-my.opensin.aiwebsite-opensin.aiDieser Skill MUSS in AGENTS.md jedes OpenSIN-Frontend-Repos referenziert werden:
## Design Enforcement
ALLE Frontend-Arbeit MUSS dem `awesome-opensin-design` Skill folgen.
Siehe: ~/.config/opencode/skills/awesome-opensin-design/SKILL.md
Wer ein OpenSIN-Frontend ohne dieses Design baut, verstößt gegen das Protokoll.