Awesome opensin design

Awesome OpenSIN Design

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.

---

🚨 ABSOLUTES MANDAT

JEDE OpenSIN-AI Webseite MUSS dieses Design-System verwenden:

• ✅ opensin.ai — Hauptwebsite
• ✅ my.opensin.ai — Dashboard & Marketplace
• ✅ blog.opensin.ai — Engineering Blog
• ✅ opensin.ai/simone-mcp — Simone MCP Landing Page
• ✅ ALLE zukünftigen Frontends

VERBOTEN:

• ❌ Eigenmächtige Design-Entscheidungen ohne Bezug zu diesem Skill
• ❌ Helle Themes (dunkel-first ist Pflicht)
• ❌ Andere Akzentfarben als das definierte Grün
• ❌ Schwere Font-Weights (>500) für Headings

---

🎨 Design System

Quelle: Delqhi/awesome-OpenSIN-design (GitHub) Lokal: ~/.config/opencode/skills/awesome-opensin-design/DESIGN.md

Color Palette

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

Typography

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:

• Display/Headings/Body: Inter, system-ui
• Code: JetBrains Mono, Fira Code

Komponenten

Buttons

• Primary: #008060 background, #ffffff text, 8px radius
• Secondary: transparent, 1px solid #2a2a2a border
• Ghost: transparent, no border
• Destructive: #e04f5f background

Cards

• Background: #141414
• Border: 1px solid #2a2a2a
• Hover: border-color: #008060, box-shadow: 0 0 20px rgba(0,128,96,0.1)
• Radius: 12px

Navigation

• Sticky, backdrop-filter: blur(12px)
• Background: rgba(10,10,10,0.8)
• Active: green left border + green text
• Hover: text #a0a0a0 → #f5f5f5

Layout

• Max content width: 1200px
• Grid: 12 columns (desktop), 4 (tablet), 1 (mobile)
• Section padding: 96px vertical (desktop), 64px (mobile)
• Card gap: 24px

Responsive Breakpoints

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

---

📐 Do's and Don'ts

Do

• ✅ Dark surfaces als primäres Canvas
• ✅ Neon-Grün (#00ff9e) NUR für kritische Aktionen
• ✅ Ultra-light display type (100-200) für Hero Headlines
• ✅ Full-bleed Imagery in Hero Sections
• ✅ Generous Whitespace (96px+ zwischen Sections)
• ✅ Subtle green border-glow on card hover

Don't

• ❌ Weiße Hintergründe für Primärseiten
• ❌ Multiple Akzentfarben in derselben Section
• ❌ Schwere Font-Weights (>500) für Headings
• ❌ Zu viele CTAs in Hero (max 2)
• ❌ Scharfe Ecken (min 8px border-radius)
• ❌ Light text auf light backgrounds

---

🔧 AI Agent Prompt Guide

Wenn 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

---

📁 Dateien

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)

---

🔗 Verknüpfte Repos

• Design System: Delqhi/awesome-OpenSIN-design (GitHub)
• opensin.ai: OpenSIN-AI/website-opensin.ai
• my.opensin.ai: OpenSIN-AI/website-my.opensin.ai
• blog.opensin.ai: Teil von website-opensin.ai

---

⚠️ Enforcement

Dieser 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.