メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | awesome-opensin-design |
| description | 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. |
| metadata | {"audience":"frontend-agents","workflow":"design-enforcement"} |
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)
Lokal: ~/.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.
The God Agent — single entry point that autonomously routes, dispatches, and synthesizes work across the entire 126-agent OpenSIN fleet. Zero human intervention. Maximum parallelism.
4 business growth agent skills and plugins for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. Customer success (health scoring, churn), sales engineer (RFP), revenue operations (pipeline, GTM), contract & proposal writer. Python tools (stdlib-only).
10 C-level advisory agent skills and plugins for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. CEO, CTO, COO, CPO, CMO, CFO, CRO, CISO, CHRO, Executive Mentor. Multi-role board meetings, strategy routing, structured recommendations. For founders needing executive-level decision support.
25 advanced engineering agent skills and plugins for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. Agent design, RAG, MCP servers, CI/CD, database design, observability, security auditing, release management, platform ops.
Curate Claude Code's auto-memory into durable project knowledge. Analyze MEMORY.md for patterns, promote proven learnings to CLAUDE.md and .claude/rules/, extract recurring solutions into reusable skills. Use when: (1) reviewing what Claude has learned about your project, (2) graduating a pattern from notes to enforced rules, (3) turning a debugging solution into a skill, (4) checking memory health and capacity.
23 engineering agent skills and plugins for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw, and 6 more tools. Architecture, frontend, backend, QA, DevOps, security, AI/ML, data engineering, Playwright, Stripe, AWS, MS365. 30+ Python tools (stdlib-only).