Agent Skills
› classroomio/classroomio
› classroomio-design
classroomio-design
GitHubClassroomIO设计系统指南，涵盖UI、营销页及品牌资产的视觉规范。提供颜色、字体、组件库及品牌资产模板的使用说明，确保设计与开发的一致性。
Trigger Scenarios
需要遵循ClassroomIO设计规范进行UI或营销物料设计
查询品牌颜色、字体或组件使用规则
获取营销素材模板或品牌资产文件
Install
npx skills add classroomio/classroomio --skill classroomio-design -g -y
SKILL.md
Frontmatter
{
"name": "classroomio-design",
"description": "ClassroomIO's design system. Use for any ClassroomIO UI, marketing page, launch image, social post, deck or thumbnail, and before choosing a colour, type size, radius or component. Covers tokens, app and marketing components, voice, and brand-asset rules.",
"user-invocable": true
}
ClassroomIO design system
One blue (#0233BD) on warm paper and sand, Geist type, and the notch card as the signature shape. Read the docs below before inventing any colour, size or copy.
Marketing assets: read this first
For any launch image, social post, YouTube thumbnail, ad, OG image or deck slide, start from a frame in templates/launch-gallery/LaunchGallery.dc.html (9 canonical frames). Read docs/brand-assets.md first: it maps each frame to a story type, gives resize rules per format, and lists banned patterns. Don't design marketing layouts from scratch with app components.
Read first
| Need | File |
|---|---|
| What the system is, how code and marketing themes combine, file index | README.md |
| Voice, casing, copy rules | docs/content.md |
| Palette, type, radii, layout, backgrounds, motion | docs/visual.md |
| Icon style and the Icon set | docs/iconography.md |
| Launch images, social posts, thumbnails, decks (mandatory) | docs/brand-assets.md + templates/launch-gallery/ |
Where things live
tokens/andstyles.css: colours, type, spacing, schemes.tokens/app.cssholds the--ui-*app tokens mapped frompackages/ui.components/{forms,overlays,display}: app components mirroringpackages/ui/src/base.components/{core,surfaces,marketing,brand,loading}: marketing and brand components.components/brand/Machines.jsx: seven isometric line illustrations (hero and pillar art), one machine per section.- Each component has
.jsx,.d.tsand.prompt.md. Read the.prompt.mdbefore using one. guidelines/: specimen cards.Component Preview.html: everything on one page.templates/launch-gallery/LaunchGallery.dc.html: canonical marketing frames. Copy from here.Brand Assets.dc.html: colour schemes and the branded page kit (secondary reference).github.md: map from each component to itspackages/uisource, plus last sync date.
Choosing
- Product UI and small actions:
Button(36px). Site heroes and section CTAs:CTAButton. - Pick one of the six schemes in
tokens/schemes.cssper surface and do not mix them. - Production Svelte work: take geometry and tokens from here, implement in
packages/uiwith theui:prefix rules in the repo CLAUDE.md. - Throwaway mocks: copy assets out and build static HTML.
If invoked with no task, ask what to build and for whom.
Version History
- 6f392c4 Current 2026-10-19 22:38
