Read the README.md file within this skill, and explore the other available files.
If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.
Key facts:
- OpenCompany is opencompany.sh's local-first AI workflow OS — a visual node canvas where users wire AI agents to email, WhatsApp, Android phones, browsers, and 50+ services.
- Link
styles.css for all tokens; add class="dark" on <html> for the signature neutral-slate-dark + Dracula-neon look (the default for product UI).
- Color is semantic: action intents (run=green, stop=pink, save=cyan, config=orange, secret=yellow, tools=purple) and node roles (agent=purple, model=cyan, tool=green, trigger=pink, workflow=orange) — always as soft tints (8–15% fill, 30–60% border, full-strength text), never solid neon fills.
- Type: Geist (Google Fonts), 14px base, sentence case, terse copy; JetBrains Mono for counts/state/timestamps.
- Icons: Lucide only (stroke 2, currentColor); product node icons are colorful emoji-style glyphs.
- Reusable React components live in
components/ (with .prompt.md usage notes per component); a full interactive recreation of the app is in ui_kits/opencompany/.
1---2name: opencompany-design3description: Use this skill to generate well-branded interfaces and assets for OpenCompany (opencompany.sh), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.4---56Read the README.md file within this skill, and explore the other available files.7If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.8If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.910Key facts:11- OpenCompany is opencompany.sh's local-first AI workflow OS — a visual node canvas where users wire AI agents to email, WhatsApp, Android phones, browsers, and 50+ services.12- Link `styles.css` for all tokens; add `class="dark"` on `<html>` for the signature neutral-slate-dark + Dracula-neon look (the default for product UI).13- Color is semantic: action intents (run=green, stop=pink, save=cyan, config=orange, secret=yellow, tools=purple) and node roles (agent=purple, model=cyan, tool=green, trigger=pink, workflow=orange) — always as soft tints (8–15% fill, 30–60% border, full-strength text), never solid neon fills.14- Type: Geist (Google Fonts), 14px base, sentence case, terse copy; JetBrains Mono for counts/state/timestamps.15- Icons: Lucide only (stroke 2, currentColor); product node icons are colorful emoji-style glyphs.16- Reusable React components live in `components/` (with `.prompt.md` usage notes per component); a full interactive recreation of the app is in `ui_kits/opencompany/`.
zeenie-ai