mcp-ink-design

Overview Schema Source Related Servers Discussions Admin

Scaffold Web Application Foundation

ink_create_base

Read-onlyIdempotent

Scaffold a complete web app foundation with semantic HTML, OKLCH color tokens, fluid typography, and bilingual RTL/LTR layout. Generates index.html, styles.css, and main.js ready to write to disk.

Instructions

PURPOSE: Scaffold a complete, production-grade semantic web application foundation featuring OKLCH color token architecture, fluid typography scales, modern CSS logical properties, and bilingual Arabic RTL/LTR layout balance.

BEHAVIOR: Generates complete in-memory application files (index.html, styles.css, main.js) within the structured result envelope. Operates purely in-memory with zero direct filesystem side effects; callers receive the code ready to be written to disk. Requires no external credentials or elevated permissions.

USAGE GUIDELINES:

When to use: Call at the start of a web project to establish root HTML semantics, CSS custom property foundations, viewport meta tags, and font configurations.
When NOT to use: Do NOT use to craft isolated UI widgets (use ink_craft_component instead) or to synthesize standalone color variables without project markup (use ink_generate_palette_tokens instead).
Alternatives: Use ink_craft_component for individual components; use ink_generate_palette_tokens for standalone CSS color tokens.

RETURNS: ResultEnvelope containing structured 'files' dictionary (index.html, styles.css, main.js), OKLCH tokensOverview, contrast verification analysis, and typography scales.

Input Schema

TableJSON Schema

Name	Required	Description	Default
`language`	No	Primary language mode: 'ar' optimizes Arabic optical hierarchy, 'en' optimizes Latin, 'bilingual' isolates bidi text with <bdi> chips	bilingual
`direction`	No	Document writing direction: 'rtl' sets dir='rtl' for Arabic, 'ltr' for English, 'auto' configures bidirectional CSS logical properties	auto
`arabicFont`	No	Curated Arabic font family loaded from Google Fonts; pairs with Latin typography with matching optical x-height	ibm-plex
`designStyle`	No	Aesthetic foundation archetype governing OKLCH color harmonies, typography ratios, and border radius	editorial
`projectName`	No	Name of the web application or project folder (used in document title and manifest metadata)	ink-craft-app
`includePwaMeta`	No	When true, injects mobile viewport constraints, theme-color meta tags, and color-scheme dark/light preferences
`includeThreeJs`	No	When true, mounts a responsive WebGL Three.js canvas in the hero section and includes CDN script tags

Output Schema

TableJSON Schema

Name	Required	Description
`data`	Yes	Domain-specific typed payload returned by the tool
`status`	Yes	Execution outcome status
`summary`	Yes	Concise, human-readable executive summary of the tool outcome
`evidence`	No	Audit trail, source references, and generated artifact locations
`warnings`	Yes	Operational cautions, craft advice, or non-blocking warnings
`nextActions`	No	Actionable sequential recommendations or subsequent tool suggestions

Schema Changelog

Changes observed during successful MCP inspections.

Changed8 schema fields changedv1.2.0Sep 23, 2026

changedInput schema / properties / arabicFont / description

Previous value: -"Curated Arabic typography stack"New value: +"Curated Arabic font family loaded from Google Fonts; pairs with Latin typography with matching optical x-height"

changedInput schema / properties / designStyle / description

Previous value: -"High-craft visual design style"New value: +"Aesthetic foundation archetype governing OKLCH color harmonies, typography ratios, and border radius"

changedInput schema / properties / direction / description

Previous value: -"Document writing direction (RTL for Arabic, LTR for English, auto for bidirectional)"New value: +"Document writing direction: 'rtl' sets dir='rtl' for Arabic, 'ltr' for English, 'auto' configures bidirectional CSS logical properties"

changedInput schema / properties / includePwaMeta / description

Previous value: -"Include mobile web app viewport and theme-color meta tags"New value: +"When true, injects mobile viewport constraints, theme-color meta tags, and color-scheme dark/light preferences"

changedInput schema / properties / includeThreeJs / description

Previous value: -"Include Three.js canvas setup in scaffold"New value: +"When true, mounts a responsive WebGL Three.js canvas in the hero section and includes CDN script tags"

changedInput schema / properties / language / description

Previous value: -"Language mode of the scaffolded application"New value: +"Primary language mode: 'ar' optimizes Arabic optical hierarchy, 'en' optimizes Latin, 'bilingual' isolates bidi text with <bdi> chips"

changedInput schema / properties / projectName / description

Previous value: -"Name of the web project or application"New value: +"Name of the web application or project folder (used in document title and manifest metadata)"

changedOutput schema / (root)

Previous value: -nullNew value: +{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "additionalProperties": false,
+  "properties": {
+    "data": {
+      "additionalProperties": true,
+      "description": "Domain-specific typed payload returned by the tool",
+      "properties": {
+        "arabicTypography": {
+          "anyOf": [
+            {
+              "additionalProperties": {},
+              "type": "object"
+            },
+            {
+              "type": "null"
+            }
+          ]
+        },
+        "designStyle": {
+          "type": "string"
+        },
+        "direction": {
+          "type": "string"
+        },
+        "files": {
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "In-memory project files mapping (e.g. index.html, styles.css, main.js, manifest.json)",
+          "type": "object"
+        },
+        "language": {
+          "type": "string"
+        },
+        "projectName": {
+          "type": "string"
+        },
+        "threeJsConfig": {
+          "anyOf": [
+            {
+              "additionalProperties": {},
+              "type": "object"
+            },
+            {
+              "type": "null"
+            }
+          ]
+        },
+        "tokens": {
+          "additionalProperties": {},
+          "type": "object"
+        }
+      },
+      "required": [
+        "projectName",
+        "designStyle",
+        "direction",
+        "language",
+        "files",
+        "tokens",
+        "arabicTypography",
+        "threeJsConfig"
+      ],
+      "type": "object"
+    },
+    "evidence": {
+      "additionalProperties": false,
+      "description": "Audit trail, source references, and generated artifact locations",
+      "properties": {
+        "artifacts": {
+          "items": {
+            "additionalProperties": false,
+            "properties": {
+              "label": {
+                "type": "string"
+              },
+              "sha256": {
+                "type": "string"
+              },
+              "uri": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "label"
+            ],
+            "type": "object"
+          },
+          "type": "array"
+        },
+        "inputsDigest": {
+          "type": "string"
+        },
+        "sources": {
+          "items": {
+            "additionalProperties": false,
+            "properties": {
+              "label": {
+                "type": "string"
+              },
+              "retrievedAt": {
+                "type": "string"
+              },
+              "uri": {
+                "type": "string"
+              }
+            },
+            "required": [
+              "label"
+            ],
+            "type": "object"
+          },
+          "type": "array"
+        }
+      },
+      "type": "object"
+    },
+    "nextActions": {
+      "description": "Actionable sequential recommendations or subsequent tool suggestions",
+      "items": {
+        "type": "string"
+      },
+      "type": "array"
+    },
+    "status": {
+      "description": "Execution outcome status",
+      "enum": [
+        "success",
+        "partial",
+        "blocked",
+        "failed"
+      ],
+      "type": "string"
+    },
+    "summary": {
+      "description": "Concise, human-readable executive summary of the tool outcome",
+      "type": "string"
+    },
+    "warnings": {
+      "description": "Operational cautions, craft advice, or non-blocking warnings",
+      "items": {
+        "type": "string"
+      },
+      "type": "array"
+    }
+  },
+  "required": [
+    "status",
+    "summary",
+    "data",
+    "warnings"
+  ],
+  "type": "object"
+}

First observedv1.1.0Sep 20, 2026

TDQS

A4.5/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint=true and idempotentHint=true, so the description adds meaningful context by stating 'operates purely in-memory with zero direct filesystem side effects' and 'requires no external credentials or elevated permissions.' This goes beyond the annotation flags and clarifies the exact nature of the operation, though it could have mentioned the return envelope format in slightly more detail. No contradiction with annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is organized into clear sections (PURPOSE, BEHAVIOR, USAGE GUIDELINES, RETURNS) with front-loaded purpose. Each sentence contributes meaning: it covers what, when, how, and what to expect in return. While lengthy, the structure makes it scannable and every sentence earns its place for a tool of this complexity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the 7 optional parameters, full schema coverage, an output schema, and sibling differentiation, the description is complete. It explains the in-memory behavior, the return envelope contents (files dictionary, OKLCH tokensOverview, contrast verification, typography scales), and provides usage guardrails. Nothing an agent needs to call it correctly is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% – every parameter has a detailed description in the schema, including enums and defaults. The tool description does not add parameter-level information, which is acceptable given the schema already carries the full burden. The baseline of 3 is appropriate because the schema fully documents parameters and the description does not need to repeat them.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description opens with a precise purpose statement ('Scaffold a complete, production-grade semantic web application foundation') and immediately distinguishes itself from sibling tools by naming specific alternatives and their use cases. The verb 'scaffold' plus the resource 'web application foundation' leaves no ambiguity about the tool's function.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Usage guidelines are explicit and actionable: they state when to call (at project start), when NOT to call (for isolated widgets or standalone color tokens), and name the two alternatives (ink_craft_component, ink_generate_palette_tokens) with the conditions that select them. This fully routes the agent to the correct tool.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server