Jonas Ulrich julrich

DESIGN.md

Overview

A modern, professional design system for a content-rich corporate website built with kickstartDS. The visual language balances clean professionalism with a distinct teal-green brand identity. The design favors generous whitespace, clear typographic hierarchy, and subtle depth through shadows and border radiuses. Accessibility and responsive scaling are first-class concerns — typography, spacing, and layout all scale fluidly across breakpoints using a factor-based token system.

The overall feel is confident and structured, with a 3-tier token architecture (branding → semantic → component) that ensures consistency at every level while remaining fully themeable.

Colors

Neue Seite von Grund auf erstellen

Wann verwenden

Der Editor möchte eine neue Seite in Storyblok erstellen und beschreibt den gewünschten Inhalt in natürlicher Sprache – z.B. „Erstelle eine Landing Page für unser neues Produkt mit Hero, Features und FAQ".

Voraussetzungen

Der Editor hat eine grobe Vorstellung vom Seiteninhalt (Thema, Zweck, Zielgruppe)
Optional: Texte, Bilder oder URLs als Ausgangsmaterial

Content Operations – n8n Workflows mit dem Storyblok MCP Server

This document describes automation workflows that editors can build using n8n connected to the Storyblok MCP Server via an MCP client node. Each workflow combines MCP tools with external n8n nodes to automate content production, quality assurance, and housekeeping.

	export default defineStackbitConfig({
	stackbitVersion: "~0.6.0",
	ssgName: "custom",
	devCommand: [
	"npm run _assemble:build:tokens",
	"npx @11ty/eleventy --serve --port={PORT} --incremental --config=scripts/stackbit.eleventy.js",
	].join(" && "),
	experimental: {
	ssg: {
	name: "eleventy",

	{
	"definitions": {},
	"$schema": "http://json-schema.org/draft-06/schema#",
	"$id": "https://ruhmesmeile.com/rm-dist.json",
	"type": "object",
	"title": "ruhmesmeile Basiswebsite / rm-dist configuration",
	"required": [
	"project",
	"configuration",
	"remote",

	{
	"$schema": "http://json-schema.org/draft-07/schema#",
	"$id": "http://schema.redacted.de/hero.schema.json",
	"title": "Hero",
	"description": "Prominente Bild- oder Videodarstellung mit Option für Text und Cta",
	"type": "object",
	"properties": {
	"textPosition": {
	"type": "string",
	"title": "Textposition",

	function isStoryblokAsset(object: unknown): object is AssetStoryblok {
	return (object as AssetStoryblok)?.filename !== undefined;
	}

	const Picture = forwardRef<
	HTMLImageElement,
	PictureProps & ImgHTMLAttributes<HTMLImageElement>
	>(({ src, lazy, ...props }, ref) => {
	const internalRef = useRef<HTMLImageElement>(null);

	const fs = require("node:fs");
	const PromiseThrottle = require("promise-throttle");
	const FormData = require("form-data");
	const { traverse } = require("object-traversal");
	const sizeOf = require("image-size");
	const StoryblokClient = require("storyblok-js-client");
	const { v4: uuidv4 } = require("uuid");
	const jsonpointer = require("jsonpointer");
	const designSystemPresets = require("@kickstartds/ds-agency-premium/presets.json");
	const generatedComponents = require("../cms/components.123456.json");