Read the README.md file within this skill, and explore the other available files.
Key files:
README.md — full system overview, visual foundations, content fundamentals, iconographycolors_and_type.css — drop-in CSS variables for colors, typography, spacing, radii, shadows, motion (light + dark)assets/ — Open Brain logo, icon referenceui_kits/dashboard/ — reimagined Open Brain dashboard in Cloudscape style; JSX components + index.html demopreview/ — per-token and per-component preview cards
If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy colors_and_type.css and any needed assets out, and create static HTML files for the user to view. Link Open Sans from Google Fonts and Lucide icons from the unpkg CDN. If working on production code for packages/web, use the tokens here directly or migrate to @cloudscape-design/components for full fidelity.
If the user invokes this skill without any other guidance, ask them what they want to build or design (dashboard page? new feature? marketing one-pager?), ask a few questions about scope and fidelity, and act as an expert designer who outputs HTML artifacts or production code, depending on the need. Preserve Open Brain's vocabulary verbatim: capture, brain view, capture type, pipeline, skill, Board, brief, entity graph, MCP.
1---2name: open-brain-design3description: Use this skill to generate well-branded interfaces and assets for the Open Brain personal AI knowledge dashboard, either for production or throwaway prototypes/mocks/etc. Open Brain's design system is built on AWS Cloudscape (visual-refresh theme) — information-dense, enterprise-calm, cobalt-blue accent, Open Sans. 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.78Key files:9- `README.md` — full system overview, visual foundations, content fundamentals, iconography10- `colors_and_type.css` — drop-in CSS variables for colors, typography, spacing, radii, shadows, motion (light + dark)11- `assets/` — Open Brain logo, icon reference12- `ui_kits/dashboard/` — reimagined Open Brain dashboard in Cloudscape style; JSX components + `index.html` demo13- `preview/` — per-token and per-component preview cards1415If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy `colors_and_type.css` and any needed assets out, and create static HTML files for the user to view. Link Open Sans from Google Fonts and Lucide icons from the unpkg CDN. If working on production code for `packages/web`, use the tokens here directly or migrate to `@cloudscape-design/components` for full fidelity.1617If the user invokes this skill without any other guidance, ask them what they want to build or design (dashboard page? new feature? marketing one-pager?), ask a few questions about scope and fidelity, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need. Preserve Open Brain's vocabulary verbatim: capture, brain view, capture type, pipeline, skill, Board, brief, entity graph, MCP.
davistroy