Design System

Scaffolds a design system specification with foundational principles, a component catalog structure, usage guidelines, and optional token sync configuration. Provides the structural backbone for maintaining a consistent visual language across products and teams.

Name	`design-system`
Version	`0.1.0`
Category	design
License	Apache-2.0
Persona	design
Tags	design-system, components, tokens, figma, design
Source	`templates/design-system`

Render it

Three front doors, one catalog. Pick whichever suits the caller.

# CLI
npx @nanohype/sdk render design-system --out ./my-app

# SDK
import { LocalSource, renderTemplate } from "@nanohype/sdk";
const result = await renderTemplate(source, "design-system", variables);

# MCP — from an agent
get_template({ name: "design-system" })

Variables

Required

ProjectName string: Kebab-case project name, used as directory and reference identifier Must be lowercase kebab-case starting with a letter.

Optional

DesignToolkit string — defaults to figma: Primary design tool used for source-of-truth assets
IncludeTokenSync bool — defaults to true: Include token sync configuration for automated design-to-code token export
ColorScheme enum — defaults to both: Color scheme support mode One of: lightdarkboth.

What it produces

4 files. Placeholder names such as __APP_NAME__ are what the renderer substitutes into.

components/catalog.yaml
docs/principles.md
docs/usage-guidelines.md
sync/token-sync-config.yaml

Composes with

Pairs with design-tokens
Pairs with component-inventory
Pairs with next-app
Nests inside monorepo

Composites that use it

Product Launch — Full product launch kit spanning engineering, design, QA, product, marketing, and operations.