standby-design-mcp 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -3
- package/dist/http.js +25 -14
- package/dist/index.js +25 -14
- package/package.json +53 -53
package/README.md
CHANGED
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
#
|
|
1
|
+
# standby-design-mcp
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/standby-design-mcp)
|
|
4
|
+
[](https://registry.modelcontextprotocol.io/?search=standby)
|
|
5
|
+
[](./LICENSE)
|
|
2
6
|
|
|
3
7
|
MCP server for [standby.design](https://standby.design) — generate and export
|
|
4
|
-
production-ready design systems directly from Claude (or any MCP client)
|
|
5
|
-
|
|
8
|
+
production-ready **design systems** directly from Claude (or any MCP client):
|
|
9
|
+
**OKLCH color palettes**, **fluid type scales**, **spacing & layout**,
|
|
10
|
+
**shape tokens** (radii, shadows, glass, neobrutalism) and **icon tokens**,
|
|
11
|
+
exportable as **CSS custom properties**, **Tailwind v4 themes**, or
|
|
12
|
+
**W3C design tokens (DTCG)** — shadcn/ui compatible.
|
|
6
13
|
|
|
7
14
|
All computation is shared with the standby.design web apps (`packages/core` +
|
|
8
15
|
`system-react/src/lib`), so results are identical to what the UI produces.
|
package/dist/http.js
CHANGED
|
@@ -1583,7 +1583,7 @@ function registerGenerateTools(server) {
|
|
|
1583
1583
|
"generate_color_palette",
|
|
1584
1584
|
{
|
|
1585
1585
|
title: "Generate color palette",
|
|
1586
|
-
description: "Generate a perceptually uniform OKLCH color palette from a brand color: 18-step scales for brand/surface/error/accents, semantic tokens (shadcn/ui compatible), light+dark modes. Returns a shareable standby.design/system URL and a compact summary. Use export_design_system for full CSS/Tailwind output.",
|
|
1586
|
+
description: "Generate a perceptually uniform OKLCH color palette from a brand color: 18-step scales for brand/surface/error/accents, semantic tokens (shadcn/ui compatible), light+dark modes. Returns a shareable standby.design/system URL and a compact summary. Always give that URL to the user \u2014 the link is the deliverable; it opens the live system in the browser. Use export_design_system for full CSS/Tailwind output.",
|
|
1587
1587
|
inputSchema: {
|
|
1588
1588
|
url: URL_PARAM,
|
|
1589
1589
|
brandHex: z.string().optional().describe('Brand color as 6-digit hex, e.g. "#335A7F". The palette midpoint is derived from this.'),
|
|
@@ -1673,7 +1673,7 @@ ${colorSummary(state, palette)}`);
|
|
|
1673
1673
|
"generate_type_scale",
|
|
1674
1674
|
{
|
|
1675
1675
|
title: "Generate type scale",
|
|
1676
|
-
description: "Generate a fluid typographic scale (CSS clamp() between 375px and 1920px viewports) with 11 levels (Display, H1\u2013H6, Body L/M/S, Caption), Fontshare fonts, line heights and letter spacing. Returns a shareable standby.design/system URL and a summary table. Use list_fonts to discover font slugs.",
|
|
1676
|
+
description: "Generate a fluid typographic scale (CSS clamp() between 375px and 1920px viewports) with 11 levels (Display, H1\u2013H6, Body L/M/S, Caption), Fontshare fonts, line heights and letter spacing. Returns a shareable standby.design/system URL and a summary table. Always give that URL to the user \u2014 the link is the deliverable. Use list_fonts to discover font slugs.",
|
|
1677
1677
|
inputSchema: {
|
|
1678
1678
|
url: URL_PARAM,
|
|
1679
1679
|
scaleMode: z.enum(["custom", "traditional"]).optional().describe('"custom": compound ratio scale (default). "traditional": classical Renaissance point sizes per level.'),
|
|
@@ -1745,7 +1745,7 @@ ${typeSummary(state, scale)}`);
|
|
|
1745
1745
|
"generate_shape_tokens",
|
|
1746
1746
|
{
|
|
1747
1747
|
title: "Generate shape tokens",
|
|
1748
|
-
description: 'Generate shape tokens \u2014 radii, shadows, borders, focus rings \u2014 in one of four visual styles: "paper" (classic surfaces with layered shadows), "glass" (liquid glass), "neomorph" (soft neumorphism), "neobrutalism" (hard offset shadows). Returns a shareable standby.design/system URL and a summary.',
|
|
1748
|
+
description: 'Generate shape tokens \u2014 radii, shadows, borders, focus rings \u2014 in one of four visual styles: "paper" (classic surfaces with layered shadows), "glass" (liquid glass), "neomorph" (soft neumorphism), "neobrutalism" (hard offset shadows). Returns a shareable standby.design/system URL and a summary. Always give that URL to the user \u2014 the link is the deliverable.',
|
|
1749
1749
|
inputSchema: {
|
|
1750
1750
|
url: URL_PARAM,
|
|
1751
1751
|
style: z.enum(["paper", "glass", "neomorph", "neobrutalism"]).optional().describe('Top-level visual style (default "paper").'),
|
|
@@ -1820,7 +1820,7 @@ ${shapeSummary(state)}`);
|
|
|
1820
1820
|
"generate_icon_tokens",
|
|
1821
1821
|
{
|
|
1822
1822
|
title: "Generate icon tokens",
|
|
1823
|
-
description: `Pick an icon set and generate icon sizing tokens (xs\u20132xl + stroke width). Either select a specific set or state style preferences and get a recommendation. Available sets: ${SET_IDS.join(", ")}. Returns a shareable standby.design/system URL and a summary.`,
|
|
1823
|
+
description: `Pick an icon set and generate icon sizing tokens (xs\u20132xl + stroke width). Either select a specific set or state style preferences and get a recommendation. Available sets: ${SET_IDS.join(", ")}. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user \u2014 the link is the deliverable.`,
|
|
1824
1824
|
inputSchema: {
|
|
1825
1825
|
url: URL_PARAM,
|
|
1826
1826
|
set: z.string().optional().describe(`Icon set variant id to select explicitly, e.g. "lucide-outlined". One of: ${SET_IDS.join(", ")}. Pass "auto" to clear the selection and use the recommendation instead.`),
|
|
@@ -1861,7 +1861,7 @@ ${symbolSummary(state)}`);
|
|
|
1861
1861
|
"generate_space_tokens",
|
|
1862
1862
|
{
|
|
1863
1863
|
title: "Generate spacing & layout tokens",
|
|
1864
|
-
description: "Generate spacing tokens (3xs\u20133xl), breakpoints, container widths, prose measure, and aspect ratios. Returns a shareable standby.design/system URL and a summary.",
|
|
1864
|
+
description: "Generate spacing tokens (3xs\u20133xl), breakpoints, container widths, prose measure, and aspect ratios. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user \u2014 the link is the deliverable.",
|
|
1865
1865
|
inputSchema: {
|
|
1866
1866
|
url: URL_PARAM,
|
|
1867
1867
|
mode: z.enum(["harmonic", "geometric"]).optional().describe('"harmonic": multiples of the base (default). "geometric": compound ratio steps.'),
|
|
@@ -2135,7 +2135,7 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2135
2135
|
primaryDark,
|
|
2136
2136
|
primaryFgDark,
|
|
2137
2137
|
...brandContrastWarnDark,
|
|
2138
|
-
["primary-subtle", "brand",
|
|
2138
|
+
["primary-subtle", "brand", 850],
|
|
2139
2139
|
["primary-subtle-foreground", "brand", 50],
|
|
2140
2140
|
[null, null, "Secondary \u2014 softened brand"],
|
|
2141
2141
|
["secondary", "brand", 800],
|
|
@@ -2149,7 +2149,7 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2149
2149
|
[null, null, "Destructive"],
|
|
2150
2150
|
destDark,
|
|
2151
2151
|
destFgDark,
|
|
2152
|
-
["destructive-subtle", "error",
|
|
2152
|
+
["destructive-subtle", "error", 850],
|
|
2153
2153
|
["destructive-subtle-foreground", "error", 50],
|
|
2154
2154
|
["destructive-border", "error-surface", 700],
|
|
2155
2155
|
[null, null, "Border / Input / Ring"],
|
|
@@ -2229,7 +2229,7 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2229
2229
|
[`${n}-muted-foreground`, `${n}-surface`, 300],
|
|
2230
2230
|
[`${n}-accent`, n, 800],
|
|
2231
2231
|
[`${n}-accent-foreground`, n, 50],
|
|
2232
|
-
[`${n}-subtle`, n,
|
|
2232
|
+
[`${n}-subtle`, n, 850],
|
|
2233
2233
|
[`${n}-subtle-foreground`, n, 50],
|
|
2234
2234
|
[null, null, "Border / Input / Ring"],
|
|
2235
2235
|
[`${n}-border`, `${n}-surface`, 700],
|
|
@@ -2287,12 +2287,12 @@ ${pinnedNote}${pinnedContrastWarning}
|
|
|
2287
2287
|
| \`--card\` | surface-25 | surface-825 | Card backgrounds |
|
|
2288
2288
|
| \`--popover\` | surface-25 | surface-800 | Popover/dropdown |
|
|
2289
2289
|
| \`--primary\` | brand-600 | brand-400 | Primary buttons, links |
|
|
2290
|
-
| \`--primary-subtle\` | brand-100 | brand-
|
|
2290
|
+
| \`--primary-subtle\` | brand-100 | brand-850 | Tinted brand fills: callouts, selected items |
|
|
2291
2291
|
| \`--secondary\` | brand-200 | brand-800 | Secondary buttons |
|
|
2292
2292
|
| \`--muted\` | surface-75 | surface-850 | Muted backgrounds |
|
|
2293
2293
|
| \`--accent\` | brand-100 | brand-800 | Interaction highlights (hover, selected) |
|
|
2294
2294
|
| \`--destructive\` | error-600 | error-400 | Error/delete actions |
|
|
2295
|
-
| \`--destructive-subtle\` | error-100 | error-
|
|
2295
|
+
| \`--destructive-subtle\` | error-100 | error-850 | Inline errors, alert backgrounds |
|
|
2296
2296
|
| \`--destructive-border\` | error-surface-300 | error-surface-700 | Error borders |
|
|
2297
2297
|
| \`--border\` | surface-300 | surface-600 | Default borders |
|
|
2298
2298
|
| \`--border-muted\` | surface-200 | surface-700 | Subtle separators |
|
|
@@ -3182,6 +3182,17 @@ Prose reading column: ${proseMaxCh}ch.
|
|
|
3182
3182
|
return md;
|
|
3183
3183
|
}
|
|
3184
3184
|
|
|
3185
|
+
// ../core/src/share-link.ts
|
|
3186
|
+
function llmShareHeader(url) {
|
|
3187
|
+
return [
|
|
3188
|
+
`> **Live design system:** ${url}`,
|
|
3189
|
+
`> The complete configuration is encoded in this URL \u2014 open it to view the`,
|
|
3190
|
+
`> system in the browser, fine-tune any value, or re-export. When you build`,
|
|
3191
|
+
`> on, document, or hand off this design system, always pass this link along:`,
|
|
3192
|
+
`> the link is the canonical reference, not a regenerated approximation.`
|
|
3193
|
+
].join("\n") + "\n\n";
|
|
3194
|
+
}
|
|
3195
|
+
|
|
3185
3196
|
// src/tools-system.ts
|
|
3186
3197
|
var ALL_SECTIONS = ["color", "type", "space", "shape", "symbol"];
|
|
3187
3198
|
function getScaleLabel(typeState) {
|
|
@@ -3242,7 +3253,7 @@ function registerSystemTools(server) {
|
|
|
3242
3253
|
"get_design_system",
|
|
3243
3254
|
{
|
|
3244
3255
|
title: "Inspect design system",
|
|
3245
|
-
description: "Decode a standby.design URL (or raw hash) and return an overview of the full design system: color palette, type scale, spacing & layout, shape tokens, and icons \u2014 plus per-tool edit links.",
|
|
3256
|
+
description: "Decode a standby.design URL (or raw hash) and return an overview of the full design system: color palette, type scale, spacing & layout, shape tokens, and icons \u2014 plus per-tool edit links. Always give the standby.design/system URL to the user \u2014 the link is the deliverable.",
|
|
3246
3257
|
inputSchema: {
|
|
3247
3258
|
url: z2.string().describe("A standby.design URL or raw unified hash (e.g. from a previous generate_* call or copied from the browser).")
|
|
3248
3259
|
},
|
|
@@ -3285,7 +3296,7 @@ function registerSystemTools(server) {
|
|
|
3285
3296
|
"export_design_system",
|
|
3286
3297
|
{
|
|
3287
3298
|
title: "Export design system code",
|
|
3288
|
-
description: 'Generate the full token code for a design system URL in one format: "css" (CSS custom properties incl. semantic shadcn/ui-compatible tokens), "tailwind" (Tailwind v4 @theme), "design-tokens" (W3C DTCG JSON \u2014 typography & spacing), "llm-briefing" (Markdown brief for AI code generation), or "font-embed" (Fontshare <link> snippet). Optionally restrict to specific sections.',
|
|
3299
|
+
description: 'Generate the full token code for a design system URL in one format: "css" (CSS custom properties incl. semantic shadcn/ui-compatible tokens), "tailwind" (Tailwind v4 @theme), "design-tokens" (W3C DTCG JSON \u2014 typography & spacing), "llm-briefing" (Markdown brief for AI code generation), or "font-embed" (Fontshare <link> snippet). Optionally restrict to specific sections. Always give the returned standby.design/system URL to the user alongside the code \u2014 the link is the deliverable.',
|
|
3289
3300
|
inputSchema: {
|
|
3290
3301
|
url: z2.string().describe("A standby.design URL or raw unified hash."),
|
|
3291
3302
|
format: z2.enum(["css", "tailwind", "design-tokens", "llm-briefing", "font-embed"]).describe("Output format."),
|
|
@@ -3407,7 +3418,7 @@ function registerSystemTools(server) {
|
|
|
3407
3418
|
if (has("space")) parts.push(generateSpaceLlmBriefing(spaceOpts));
|
|
3408
3419
|
if (has("shape")) parts.push(generateLlmBriefing3(optsFromState(shapeState, palette.effectiveBgHex)));
|
|
3409
3420
|
if (has("symbol") && symbolState) parts.push(generateSymbolLlmBriefing(symbolState));
|
|
3410
|
-
output = parts.join("\n---\n\n")
|
|
3421
|
+
output = parts.length ? llmShareHeader(systemUrl(segs)) + parts.join("\n---\n\n") : "<!-- No sections selected -->";
|
|
3411
3422
|
break;
|
|
3412
3423
|
}
|
|
3413
3424
|
case "font-embed":
|
|
@@ -3443,7 +3454,7 @@ ${output}`);
|
|
|
3443
3454
|
}
|
|
3444
3455
|
|
|
3445
3456
|
// src/server.ts
|
|
3446
|
-
var SERVER_VERSION = "0.1.
|
|
3457
|
+
var SERVER_VERSION = "0.1.3";
|
|
3447
3458
|
function createServer() {
|
|
3448
3459
|
const server = new McpServer(
|
|
3449
3460
|
{ name: "standby-design", version: SERVER_VERSION },
|
package/dist/index.js
CHANGED
|
@@ -1582,7 +1582,7 @@ function registerGenerateTools(server2) {
|
|
|
1582
1582
|
"generate_color_palette",
|
|
1583
1583
|
{
|
|
1584
1584
|
title: "Generate color palette",
|
|
1585
|
-
description: "Generate a perceptually uniform OKLCH color palette from a brand color: 18-step scales for brand/surface/error/accents, semantic tokens (shadcn/ui compatible), light+dark modes. Returns a shareable standby.design/system URL and a compact summary. Use export_design_system for full CSS/Tailwind output.",
|
|
1585
|
+
description: "Generate a perceptually uniform OKLCH color palette from a brand color: 18-step scales for brand/surface/error/accents, semantic tokens (shadcn/ui compatible), light+dark modes. Returns a shareable standby.design/system URL and a compact summary. Always give that URL to the user \u2014 the link is the deliverable; it opens the live system in the browser. Use export_design_system for full CSS/Tailwind output.",
|
|
1586
1586
|
inputSchema: {
|
|
1587
1587
|
url: URL_PARAM,
|
|
1588
1588
|
brandHex: z.string().optional().describe('Brand color as 6-digit hex, e.g. "#335A7F". The palette midpoint is derived from this.'),
|
|
@@ -1672,7 +1672,7 @@ ${colorSummary(state, palette)}`);
|
|
|
1672
1672
|
"generate_type_scale",
|
|
1673
1673
|
{
|
|
1674
1674
|
title: "Generate type scale",
|
|
1675
|
-
description: "Generate a fluid typographic scale (CSS clamp() between 375px and 1920px viewports) with 11 levels (Display, H1\u2013H6, Body L/M/S, Caption), Fontshare fonts, line heights and letter spacing. Returns a shareable standby.design/system URL and a summary table. Use list_fonts to discover font slugs.",
|
|
1675
|
+
description: "Generate a fluid typographic scale (CSS clamp() between 375px and 1920px viewports) with 11 levels (Display, H1\u2013H6, Body L/M/S, Caption), Fontshare fonts, line heights and letter spacing. Returns a shareable standby.design/system URL and a summary table. Always give that URL to the user \u2014 the link is the deliverable. Use list_fonts to discover font slugs.",
|
|
1676
1676
|
inputSchema: {
|
|
1677
1677
|
url: URL_PARAM,
|
|
1678
1678
|
scaleMode: z.enum(["custom", "traditional"]).optional().describe('"custom": compound ratio scale (default). "traditional": classical Renaissance point sizes per level.'),
|
|
@@ -1744,7 +1744,7 @@ ${typeSummary(state, scale)}`);
|
|
|
1744
1744
|
"generate_shape_tokens",
|
|
1745
1745
|
{
|
|
1746
1746
|
title: "Generate shape tokens",
|
|
1747
|
-
description: 'Generate shape tokens \u2014 radii, shadows, borders, focus rings \u2014 in one of four visual styles: "paper" (classic surfaces with layered shadows), "glass" (liquid glass), "neomorph" (soft neumorphism), "neobrutalism" (hard offset shadows). Returns a shareable standby.design/system URL and a summary.',
|
|
1747
|
+
description: 'Generate shape tokens \u2014 radii, shadows, borders, focus rings \u2014 in one of four visual styles: "paper" (classic surfaces with layered shadows), "glass" (liquid glass), "neomorph" (soft neumorphism), "neobrutalism" (hard offset shadows). Returns a shareable standby.design/system URL and a summary. Always give that URL to the user \u2014 the link is the deliverable.',
|
|
1748
1748
|
inputSchema: {
|
|
1749
1749
|
url: URL_PARAM,
|
|
1750
1750
|
style: z.enum(["paper", "glass", "neomorph", "neobrutalism"]).optional().describe('Top-level visual style (default "paper").'),
|
|
@@ -1819,7 +1819,7 @@ ${shapeSummary(state)}`);
|
|
|
1819
1819
|
"generate_icon_tokens",
|
|
1820
1820
|
{
|
|
1821
1821
|
title: "Generate icon tokens",
|
|
1822
|
-
description: `Pick an icon set and generate icon sizing tokens (xs\u20132xl + stroke width). Either select a specific set or state style preferences and get a recommendation. Available sets: ${SET_IDS.join(", ")}. Returns a shareable standby.design/system URL and a summary.`,
|
|
1822
|
+
description: `Pick an icon set and generate icon sizing tokens (xs\u20132xl + stroke width). Either select a specific set or state style preferences and get a recommendation. Available sets: ${SET_IDS.join(", ")}. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user \u2014 the link is the deliverable.`,
|
|
1823
1823
|
inputSchema: {
|
|
1824
1824
|
url: URL_PARAM,
|
|
1825
1825
|
set: z.string().optional().describe(`Icon set variant id to select explicitly, e.g. "lucide-outlined". One of: ${SET_IDS.join(", ")}. Pass "auto" to clear the selection and use the recommendation instead.`),
|
|
@@ -1860,7 +1860,7 @@ ${symbolSummary(state)}`);
|
|
|
1860
1860
|
"generate_space_tokens",
|
|
1861
1861
|
{
|
|
1862
1862
|
title: "Generate spacing & layout tokens",
|
|
1863
|
-
description: "Generate spacing tokens (3xs\u20133xl), breakpoints, container widths, prose measure, and aspect ratios. Returns a shareable standby.design/system URL and a summary.",
|
|
1863
|
+
description: "Generate spacing tokens (3xs\u20133xl), breakpoints, container widths, prose measure, and aspect ratios. Returns a shareable standby.design/system URL and a summary. Always give that URL to the user \u2014 the link is the deliverable.",
|
|
1864
1864
|
inputSchema: {
|
|
1865
1865
|
url: URL_PARAM,
|
|
1866
1866
|
mode: z.enum(["harmonic", "geometric"]).optional().describe('"harmonic": multiples of the base (default). "geometric": compound ratio steps.'),
|
|
@@ -2134,7 +2134,7 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2134
2134
|
primaryDark,
|
|
2135
2135
|
primaryFgDark,
|
|
2136
2136
|
...brandContrastWarnDark,
|
|
2137
|
-
["primary-subtle", "brand",
|
|
2137
|
+
["primary-subtle", "brand", 850],
|
|
2138
2138
|
["primary-subtle-foreground", "brand", 50],
|
|
2139
2139
|
[null, null, "Secondary \u2014 softened brand"],
|
|
2140
2140
|
["secondary", "brand", 800],
|
|
@@ -2148,7 +2148,7 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2148
2148
|
[null, null, "Destructive"],
|
|
2149
2149
|
destDark,
|
|
2150
2150
|
destFgDark,
|
|
2151
|
-
["destructive-subtle", "error",
|
|
2151
|
+
["destructive-subtle", "error", 850],
|
|
2152
2152
|
["destructive-subtle-foreground", "error", 50],
|
|
2153
2153
|
["destructive-border", "error-surface", 700],
|
|
2154
2154
|
[null, null, "Border / Input / Ring"],
|
|
@@ -2228,7 +2228,7 @@ function generateSemantic(accentPalettes, brandPal, errPal, errSurfPal, surfaceP
|
|
|
2228
2228
|
[`${n}-muted-foreground`, `${n}-surface`, 300],
|
|
2229
2229
|
[`${n}-accent`, n, 800],
|
|
2230
2230
|
[`${n}-accent-foreground`, n, 50],
|
|
2231
|
-
[`${n}-subtle`, n,
|
|
2231
|
+
[`${n}-subtle`, n, 850],
|
|
2232
2232
|
[`${n}-subtle-foreground`, n, 50],
|
|
2233
2233
|
[null, null, "Border / Input / Ring"],
|
|
2234
2234
|
[`${n}-border`, `${n}-surface`, 700],
|
|
@@ -2286,12 +2286,12 @@ ${pinnedNote}${pinnedContrastWarning}
|
|
|
2286
2286
|
| \`--card\` | surface-25 | surface-825 | Card backgrounds |
|
|
2287
2287
|
| \`--popover\` | surface-25 | surface-800 | Popover/dropdown |
|
|
2288
2288
|
| \`--primary\` | brand-600 | brand-400 | Primary buttons, links |
|
|
2289
|
-
| \`--primary-subtle\` | brand-100 | brand-
|
|
2289
|
+
| \`--primary-subtle\` | brand-100 | brand-850 | Tinted brand fills: callouts, selected items |
|
|
2290
2290
|
| \`--secondary\` | brand-200 | brand-800 | Secondary buttons |
|
|
2291
2291
|
| \`--muted\` | surface-75 | surface-850 | Muted backgrounds |
|
|
2292
2292
|
| \`--accent\` | brand-100 | brand-800 | Interaction highlights (hover, selected) |
|
|
2293
2293
|
| \`--destructive\` | error-600 | error-400 | Error/delete actions |
|
|
2294
|
-
| \`--destructive-subtle\` | error-100 | error-
|
|
2294
|
+
| \`--destructive-subtle\` | error-100 | error-850 | Inline errors, alert backgrounds |
|
|
2295
2295
|
| \`--destructive-border\` | error-surface-300 | error-surface-700 | Error borders |
|
|
2296
2296
|
| \`--border\` | surface-300 | surface-600 | Default borders |
|
|
2297
2297
|
| \`--border-muted\` | surface-200 | surface-700 | Subtle separators |
|
|
@@ -3181,6 +3181,17 @@ Prose reading column: ${proseMaxCh}ch.
|
|
|
3181
3181
|
return md;
|
|
3182
3182
|
}
|
|
3183
3183
|
|
|
3184
|
+
// ../core/src/share-link.ts
|
|
3185
|
+
function llmShareHeader(url) {
|
|
3186
|
+
return [
|
|
3187
|
+
`> **Live design system:** ${url}`,
|
|
3188
|
+
`> The complete configuration is encoded in this URL \u2014 open it to view the`,
|
|
3189
|
+
`> system in the browser, fine-tune any value, or re-export. When you build`,
|
|
3190
|
+
`> on, document, or hand off this design system, always pass this link along:`,
|
|
3191
|
+
`> the link is the canonical reference, not a regenerated approximation.`
|
|
3192
|
+
].join("\n") + "\n\n";
|
|
3193
|
+
}
|
|
3194
|
+
|
|
3184
3195
|
// src/tools-system.ts
|
|
3185
3196
|
var ALL_SECTIONS = ["color", "type", "space", "shape", "symbol"];
|
|
3186
3197
|
function getScaleLabel(typeState) {
|
|
@@ -3241,7 +3252,7 @@ function registerSystemTools(server2) {
|
|
|
3241
3252
|
"get_design_system",
|
|
3242
3253
|
{
|
|
3243
3254
|
title: "Inspect design system",
|
|
3244
|
-
description: "Decode a standby.design URL (or raw hash) and return an overview of the full design system: color palette, type scale, spacing & layout, shape tokens, and icons \u2014 plus per-tool edit links.",
|
|
3255
|
+
description: "Decode a standby.design URL (or raw hash) and return an overview of the full design system: color palette, type scale, spacing & layout, shape tokens, and icons \u2014 plus per-tool edit links. Always give the standby.design/system URL to the user \u2014 the link is the deliverable.",
|
|
3245
3256
|
inputSchema: {
|
|
3246
3257
|
url: z2.string().describe("A standby.design URL or raw unified hash (e.g. from a previous generate_* call or copied from the browser).")
|
|
3247
3258
|
},
|
|
@@ -3284,7 +3295,7 @@ function registerSystemTools(server2) {
|
|
|
3284
3295
|
"export_design_system",
|
|
3285
3296
|
{
|
|
3286
3297
|
title: "Export design system code",
|
|
3287
|
-
description: 'Generate the full token code for a design system URL in one format: "css" (CSS custom properties incl. semantic shadcn/ui-compatible tokens), "tailwind" (Tailwind v4 @theme), "design-tokens" (W3C DTCG JSON \u2014 typography & spacing), "llm-briefing" (Markdown brief for AI code generation), or "font-embed" (Fontshare <link> snippet). Optionally restrict to specific sections.',
|
|
3298
|
+
description: 'Generate the full token code for a design system URL in one format: "css" (CSS custom properties incl. semantic shadcn/ui-compatible tokens), "tailwind" (Tailwind v4 @theme), "design-tokens" (W3C DTCG JSON \u2014 typography & spacing), "llm-briefing" (Markdown brief for AI code generation), or "font-embed" (Fontshare <link> snippet). Optionally restrict to specific sections. Always give the returned standby.design/system URL to the user alongside the code \u2014 the link is the deliverable.',
|
|
3288
3299
|
inputSchema: {
|
|
3289
3300
|
url: z2.string().describe("A standby.design URL or raw unified hash."),
|
|
3290
3301
|
format: z2.enum(["css", "tailwind", "design-tokens", "llm-briefing", "font-embed"]).describe("Output format."),
|
|
@@ -3406,7 +3417,7 @@ function registerSystemTools(server2) {
|
|
|
3406
3417
|
if (has("space")) parts.push(generateSpaceLlmBriefing(spaceOpts));
|
|
3407
3418
|
if (has("shape")) parts.push(generateLlmBriefing3(optsFromState(shapeState, palette.effectiveBgHex)));
|
|
3408
3419
|
if (has("symbol") && symbolState) parts.push(generateSymbolLlmBriefing(symbolState));
|
|
3409
|
-
output = parts.join("\n---\n\n")
|
|
3420
|
+
output = parts.length ? llmShareHeader(systemUrl(segs)) + parts.join("\n---\n\n") : "<!-- No sections selected -->";
|
|
3410
3421
|
break;
|
|
3411
3422
|
}
|
|
3412
3423
|
case "font-embed":
|
|
@@ -3442,7 +3453,7 @@ ${output}`);
|
|
|
3442
3453
|
}
|
|
3443
3454
|
|
|
3444
3455
|
// src/server.ts
|
|
3445
|
-
var SERVER_VERSION = "0.1.
|
|
3456
|
+
var SERVER_VERSION = "0.1.3";
|
|
3446
3457
|
function createServer() {
|
|
3447
3458
|
const server2 = new McpServer(
|
|
3448
3459
|
{ name: "standby-design", version: SERVER_VERSION },
|
package/package.json
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "standby-design-mcp",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"mcpName": "io.github.KarstenKreh/standby-design-mcp",
|
|
5
|
-
"description": "MCP server for standby.design — generate production-ready design systems (OKLCH color palettes, fluid type scales, spacing & layout, shape and icon tokens) and export them as CSS, Tailwind v4, or W3C design tokens. Every result links back to the standby.design web UI for visual fine-tuning.",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"type": "module",
|
|
8
|
-
"homepage": "https://standby.design",
|
|
9
|
-
"repository": {
|
|
10
|
-
"type": "git",
|
|
11
|
-
"url": "git+https://github.com/KarstenKreh/Standby.Design.git",
|
|
12
|
-
"directory": "packages/mcp-server"
|
|
13
|
-
},
|
|
14
|
-
"bugs": {
|
|
15
|
-
"url": "https://github.com/KarstenKreh/Standby.Design/issues"
|
|
16
|
-
},
|
|
17
|
-
"bin": {
|
|
18
|
-
"standby-design-mcp": "./dist/index.js"
|
|
19
|
-
},
|
|
20
|
-
"files": [
|
|
21
|
-
"dist"
|
|
22
|
-
],
|
|
23
|
-
"engines": {
|
|
24
|
-
"node": ">=18"
|
|
25
|
-
},
|
|
26
|
-
"scripts": {
|
|
27
|
-
"build": "node build.mjs",
|
|
28
|
-
"prepublishOnly": "node build.mjs && node smoke.mjs",
|
|
29
|
-
"typecheck": "tsc --noEmit",
|
|
30
|
-
"smoke": "node smoke.mjs",
|
|
31
|
-
"start": "node dist/index.js"
|
|
32
|
-
},
|
|
33
|
-
"keywords": [
|
|
34
|
-
"mcp",
|
|
35
|
-
"model-context-protocol",
|
|
36
|
-
"design-system",
|
|
37
|
-
"design-tokens",
|
|
38
|
-
"color-palette",
|
|
39
|
-
"oklch",
|
|
40
|
-
"typography",
|
|
41
|
-
"tailwind",
|
|
42
|
-
"shadcn"
|
|
43
|
-
],
|
|
44
|
-
"dependencies": {
|
|
45
|
-
"@modelcontextprotocol/sdk": "^1.12.0",
|
|
46
|
-
"zod": "^3.24.0"
|
|
47
|
-
},
|
|
48
|
-
"devDependencies": {
|
|
49
|
-
"@types/node": "^22.19.21",
|
|
50
|
-
"esbuild": "^0.25.0",
|
|
51
|
-
"typescript": "^5.6.0"
|
|
52
|
-
}
|
|
53
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "standby-design-mcp",
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"mcpName": "io.github.KarstenKreh/standby-design-mcp",
|
|
5
|
+
"description": "MCP server for standby.design — generate production-ready design systems (OKLCH color palettes, fluid type scales, spacing & layout, shape and icon tokens) and export them as CSS, Tailwind v4, or W3C design tokens. Every result links back to the standby.design web UI for visual fine-tuning.",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"homepage": "https://standby.design",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/KarstenKreh/Standby.Design.git",
|
|
12
|
+
"directory": "packages/mcp-server"
|
|
13
|
+
},
|
|
14
|
+
"bugs": {
|
|
15
|
+
"url": "https://github.com/KarstenKreh/Standby.Design/issues"
|
|
16
|
+
},
|
|
17
|
+
"bin": {
|
|
18
|
+
"standby-design-mcp": "./dist/index.js"
|
|
19
|
+
},
|
|
20
|
+
"files": [
|
|
21
|
+
"dist"
|
|
22
|
+
],
|
|
23
|
+
"engines": {
|
|
24
|
+
"node": ">=18"
|
|
25
|
+
},
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "node build.mjs",
|
|
28
|
+
"prepublishOnly": "node build.mjs && node smoke.mjs",
|
|
29
|
+
"typecheck": "tsc --noEmit",
|
|
30
|
+
"smoke": "node smoke.mjs",
|
|
31
|
+
"start": "node dist/index.js"
|
|
32
|
+
},
|
|
33
|
+
"keywords": [
|
|
34
|
+
"mcp",
|
|
35
|
+
"model-context-protocol",
|
|
36
|
+
"design-system",
|
|
37
|
+
"design-tokens",
|
|
38
|
+
"color-palette",
|
|
39
|
+
"oklch",
|
|
40
|
+
"typography",
|
|
41
|
+
"tailwind",
|
|
42
|
+
"shadcn"
|
|
43
|
+
],
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"@modelcontextprotocol/sdk": "^1.12.0",
|
|
46
|
+
"zod": "^3.24.0"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@types/node": "^22.19.21",
|
|
50
|
+
"esbuild": "^0.25.0",
|
|
51
|
+
"typescript": "^5.6.0"
|
|
52
|
+
}
|
|
53
|
+
}
|