opencompany-design

Design OpenCompany-branded interfaces, mockups, and UI assets with consistent visual fidelity.

356|66|Updated Oct 13, 2025
One-click install
npx skills add https://github.com/zeenie-ai/OpenCompany --skill opencompany-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: opencompany-design
Source: https://github.com/zeenie-ai/OpenCompany/tree/main/docs-internal/design-system
Command: npx skills add https://github.com/zeenie-ai/OpenCompany --skill opencompany-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps you create interfaces, mockups, and production-ready UI patterns that match OpenCompany’s visual language, so your work feels consistent with the product instead of generic or off-brand.

Core Features & Use Cases

  • Brand System Guidance: Apply the correct colors, typography, spacing, motion, and component rules for OpenCompany screens.
  • UI Prototyping Support: Build throwaway HTML mocks, slide visuals, or interface concepts that mirror the product’s canvas, panels, and controls.
  • Production Implementation Reference: Use the included design tokens and component references to implement branded UI in a real codebase with confidence.
  • Use Case: If you need a workflow dashboard, settings panel, or canvas node editor, this Skill gives you the exact visual rules and reusable patterns to build it in the OpenCompany style.

Quick Start

Create an OpenCompany-style interface for my app using the design tokens, readable typography, and component patterns in this skill.

Frequently Asked Questions about opencompany-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design UI components that match OpenCompany's brand system?

Use this Skill to build OpenCompany-branded interfaces like workflow dashboards, canvas builders, and settings panels. It provides exact visual rules, component patterns, and layout structures to maintain brand fidelity.

How do I build a workflow dashboard mockup using OpenCompany design tokens?

Build workflow dashboard mockups using the Skill's included design tokens and component references for semantic color and readable typography. This generates production-ready UI patterns matching the OpenCompany system.

Can I use this Skill for UI prototyping in React with OpenCompany component patterns?

Yes, you can prototype React interfaces using the Skill's component patterns and layout rules. It supports building HTML mocks, slide visuals, and prototype screens that mirror OpenCompany's canvas and controls.

What design tokens do I need for OpenCompany settings panels and canvas builders?

You need OpenCompany's semantic color tokens, readable typography rules, and branded motion guidelines. The Skill includes these references to implement settings panels and canvas node editors with correct visual fidelity.

Does this Skill work for production implementation or just UI prototyping?

This Skill works for both production implementation and UI prototyping. Use the included design tokens and component references to implement branded UI in a real codebase or build throwaway HTML mocks with confidence.