byteland-design

ByteLand's design-language Skill suite. Five Skills define the brand's visual, web, icon, motion, and video direction; an eval workspace exercises them; a small test suite locks the invariants in place.

The Skills are plain Markdown (SKILL.md) with structured frontmatter, designed to be consumed by Skill-aware agents. They carry no runtime dependencies — only the test suite needs Node, and only to verify the design invariants hold.

Getting started

git clone https://github.com/ByteLandTechnology/byteland-design.git
cd byteland-design
npm test

There is nothing to install — the tests use Node's built-in runner. Point a Skill-aware agent at skills/ to use the design language, or read the SKILL.md files directly as a brand spec.

Skills

byteland-visual-style is the shared foundation. The other four extend it and reference it via $byteland-visual-style in their prompts.

byteland-visual-style   (foundation: tokens, color logic, surface, anti-patterns)
├── byteland-web-style    (layout, components, responsive, quality checks)
├── byteland-icon-style   (brand mark, app/function/status icons, exports)
├── byteland-motion-style (timing, patterns, reduced-motion)
└── byteland-video-style  (Remotion defaults, segment structure, also pairs
                            with byteland-motion-style)

Each Skill lives in skills/<id>/ with a SKILL.md (frontmatter + rules) and an agents/openai.yaml (display metadata and default prompt).

Eval workspace

• evals/evals.json — five prompts that cover the Skills in combination.
• byteland-skill-suite-workspace/iteration-1/ — one directory per eval with eval_metadata.json, draft output-summary.json, draft grading-summary.json, and an outputs/ note. Kept in draft state until a real run produces actual model outputs; review.html is generated only after that.

Tests

npm test

Runs three suites with Node's built-in test runner:

• tests/style-rules.test.js — token-level invariants in each SKILL.md (color hex values, viewBox, prefers-reduced-motion, frame-based Remotion defaults, framework neutrality, etc.).
• tests/contrast.test.js — WCAG AA contrast check (>= 4.5:1 on white) for the text-safe brand colors, plus the inverse: base brand colors must fail AA on white, otherwise the text-safe distinction is no longer load-bearing.
• tests/eval-suite.test.js — keeps evals/evals.json and the iteration workspace aligned, and enforces the draft-only contract.

Requires Node 18+ (uses node --test).

Contributing

See CONTRIBUTING.md. In short: keep the Skills internally consistent, run npm test, and add a test for any new invariant.

License

MIT © ByteLand Technology