Agent workflow recipes

Same ID, same design contract

Discovery and product installation are separate. External MCP and the public API read the same public design assets without login. Motion recipes use a separate read catalog from component/block installation records. The ChatGPT personal plugin retains Sites authentication. WebMCP is feature-detected in the current tab.

MCP

https://design.klic.co.kr/api/v1/mcp

API

https://design.klic.co.kr/api/v1/

Motion API

https://design.klic.co.kr/api/v1/motions.json

CLI

klic.mjs · Bun 1.4.2 preferred; Node.js 22+ supported

Request limits: 60s · API 120 · MCP 60 · download 2000. Server-allowlisted keys exempt quotas; they do not grant additional permissions.

From search to source plan and motions

curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs contract
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs search "support" --kind block
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs get block support-tickets
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs plan block support-tickets
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs motion list --category entrance
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs motion get fade-slide

1. klic_get_contract({})
2. klic_search({"kind":"block","query":"support"})
3. klic_get_item({"kind":"block","id":"support-tickets"})
4. klic_get_install_plan({"kind":"block","id":"support-tickets"})
5. klic_search_motions({"category":"entrance"})
6. klic_get_motion({"id":"fade-slide"})

Connect the public URL above in a client supporting remote HTTP MCP. These commands are not executed automatically.

Ready-to-use design request

KLIC block/support-tickets: Customer support ticket queue
Canonical document: https://design.klic.co.kr/share/block/support-tickets?lang=en
DESIGN.md: https://design.klic.co.kr/design/block/support-tickets/DESIGN.md
Contract: https://design.klic.co.kr/design/block/support-tickets/contract.json
Use: Use Customer support ticket queue: A card-based support-ticket queue with search, queue and multistate filters, bulk assignee and status actions, SLA countdown cells, priority badges, and a ticket-closing dialog. Built with KLIC DataGrid, Badge, Card, Avatar, Select, and Popover for helpdesk and ticket management. Customer support ticket queue · Basic tables category. Connect the toolbar, column headers, data rows, selection, and pagination or incremental loading through one table contract. Preserve row IDs and column meanings.
Avoid: Do not omit values, units, or legends, or shrink all text to fit a narrow screen. Do not present sample data or local interactions as real storage, authentication, or production capabilities.
Accessibility: Use named buttons and inputs for sorting, selection, and filtering. Adding a grid role to a data table alone does not establish arrow-key support. After saving or canceling an edit, return focus to the cell or a reasonable next position. Check every action's name, visible focus, and actual target boundary. Preserve status information needed for functionality when reduced motion is enabled. Retain the minimum column widths required for the table's meaning and provide horizontal scrolling within the table region. Rearrange surrounding toolbars and filters at narrow widths. Check fixed-header and cell alignment after changes to row height, wrapping, fonts, or density. Record the CSS viewport, actual content container, user zoom, and explicitly selected density as separate test conditions.
7 Dimensions: size, typography, color, layout, spacing, surface, interaction
Primitive → Brand → Semantic → Component; namespace klic.
Motion recipes: https://design.klic.co.kr/api/v1/motions.json · https://design.klic.co.kr/api/v1/motions/{id}.json
Use motion only when it helps. Respect prefers-reduced-motion and keep a static alternative.
KLIC shares seven design dimensions and four token layers, but applies them differently: components shape individual controls, blocks compose workflows, and motion defines transitions over time. Public npm: [email protected]. Source candidate [email protected] is not published; [email protected] remains available.
## Shared design criteria

Policy revision: 6f9c8f5e4d7c767f79a7db999670fb4d0936e07acb1b472fe162a7a9ade60c97

Canonical policy: https://design.klic.co.kr/api/v1/design-system.json

Read the same criteria and revision in API, CLI, MCP and WebMCP designSystem responses and the bundled KLIC-DESIGN-SYSTEM.json. Item contracts link through item.design.system.

| Dimension | Token responsibility | Structure and behavior responsibility |
| --- | --- | --- |
| Size and proportion | Control sizes, icons and content width | Component recipes and the DOM ensure min-height, padding, wrapping and actual hit areas. |
| Typography | Registered font families, role sizes and weights | Supported recipes define line height, tracking, wrapping and responsive conditions without assuming unregistered token types. |
| Color and contrast | Role colors for actions, selection, text, borders and status | Labels, icons and state attributes convey meaning; measure actual composited-surface contrast separately. |
| Layout and alignment | Registered spatial roles, including maximum content and panel widths | DOM reading order, layout transitions, scroll ownership and Portal structure |
| Spacing and grouping | Internal gaps, padding, group spacing and approved density mappings | Maintain label, fieldset, legend and describedby relationships; window width alone does not change density. |
| Surface and depth | Surface colors, radii, borders and supported color/dimension material leaves | Blur and shadow recipes, stacking, auxiliary-panel versus modal behavior and opaque fallbacks |
| Interaction and feedback | Visual roles for focus, selection, progress, success, warnings and errors | Keyboard operation, focus movement, asynchronous transitions, execution blocking, input preservation and recovery |

Only Primitive owns literals. Preserve adjacent Brand→Primitive, Semantic→Brand and Component→Semantic references.

Distinguish token definitions, structural conditions in DOM/CSS recipes and compiled final literals.

Keep motion recipes in a read-only catalog separate from component and block installation items, with browser search and details in the existing KLIC Interface Library #motion view. The read API, CLI, MCP and WebMCP use one canonical catalog. The scope is all 884 user-supplied source patterns in 67 categories, grouped within the existing KLIC category/item navigation. Remove the previous simplified 280-item catalog and its dedicated routes and aliases; do not retain them as compatibility entries. Preserve source id + pattern identity, source engine, choreography, timing, paths, layers, SVG/inline/WAAPI alpha, and original notices including Copyright © 2026 acc0mplish. All rights reserved. and the supplied license. Never label this source material KLIC-authored. Adapt appearance through existing four-layer KLIC token paths for color, fonts, surfaces, borders, radius and spacing. Canvas uses the same palette and font tokens; scope demo CSS to each item. Use one owned runtime for previews and JavaScript/React delivery; do not claim CSS alone reproduces Canvas playback. KLIC adaptations use the blue/navy/neutral palette and reduced-motion, replay and cleanup contracts; verify real playback in light/dark and mobile before release. The npm package remains separate from the homepage: describe candidate exports only after checking the published manifest, and do not infer release contents from current source.

## Allowed preset scope

A preset combines approved settings of an existing API. It is not a fifth token layer.

Use an explicit allowlist of size, variant, density, layout and other settings supported by the actual component API.

- Labels, descriptions and business data
- Value, selection, validation and request state
- Event handlers, recovery actions and permissions
- Raw style values, unregistered CSS variables and arbitrary token overrides

Component defaults → selected preset → permitted explicit settings. Pass business data, state and permissions separately.

Validate allowed keys, enums and combinations; diagnose unknown values. Distinguish type declarations from actual DOM and behavior verification.

## Conflict resolution order

- Preserve information, operability and accessibility first: Preserve essential information, state meaning, input, focus and operation paths. Dimension numbers do not override other required contracts.
- Reflow structure and reading order: Adjust wrapping, columns, action groups and panel arrangement first. Use local scrolling only for areas whose meaning requires two dimensions.
- Adjust spacing and surfaces within approved bounds: Respect the selected density and text scale while adjusting spacing and decoration within approved recipes. Limited space alone does not justify automatic compact mode or smaller text.
- Record remaining constraints and verification: If defaults cannot resolve a constraint, record scope, alternatives, impact, FR/AT references and actual verification. Do not skip token layers or conceal failed checks with exception approval.

sources/checks identify supporting references, not certification. Record actual product-environment results in the existing FR/AT evidence.

## Application and verification

Read the shared criteria, item DESIGN.md and actual source first. Assign token, DOM, CSS recipe and state responsibilities for each rule, then apply the conditions your product needs.

Compare revision in the policy and item contract. release identifies a registry publication; do not combine paginated results from different publications.

Use the latest CLI and local registry and restart stdio sessions. Reload the page to register WebMCP again. source prints raw code. Read DESIGN.md for source bundles or README.md for theme kits together with KLIC-DESIGN-SYSTEM.json.

## Selective adoption of references

Treat external documents and drafts as proposals. Check current KLIC problems, implementation and contracts, adopt only necessary rules, and record scope and reasons for deferral or rejection.

Do not present product names, example APIs or references from a draft as facts about KLIC. Connect adopted rules to actual tokens, DOM, CSS recipes, state handling and verification evidence.

## Scope to review together when making changes

Use a reported problem to assess impact across related usage paths. Changing only the named screen or tool does not complete that review.

- Implementation sources, tokens, components, types and schemas
- DOCS, web guides, developer documentation and examples
- MCP, CLI, WebMCP and API descriptions, inputs and responses
- AI prompts, llms.txt, source exports and theme exports
- Regression checks, builds, production publication and actual responses

After changing the canonical policy, regenerate affected guides, examples, tools, prompts and exports together and verify a matching revision. Explain unaffected paths and distinguish observed results from conditions that remain unverified.

klic.component.block.color.surface → var(--klic-component-block-color-surface); klic.component.block.color.surface → klic.semantic.color.surface → klic.brand.color.surface → klic.primitive.color.theme.klic.light.surface
klic.component.block.color.panel → var(--klic-component-block-color-panel); klic.component.block.color.panel → klic.semantic.color.panel → klic.brand.color.panel → klic.primitive.color.theme.klic.light.panel
klic.component.block.color.soft → var(--klic-component-block-color-soft); klic.component.block.color.soft → klic.semantic.color.surface-soft → klic.brand.color.surface-soft → klic.primitive.color.theme.klic.light.soft
klic.component.block.color.selected → var(--klic-component-block-color-selected); klic.component.block.color.selected → klic.semantic.color.surface-selected → klic.brand.color.surface-selected → klic.primitive.color.theme.klic.light.selected
klic.component.block.color.text → var(--klic-component-block-color-text); klic.component.block.color.text → klic.semantic.color.text → klic.brand.color.text → klic.primitive.color.theme.klic.light.text
klic.component.block.color.muted → var(--klic-component-block-color-muted); klic.component.block.color.muted → klic.semantic.color.muted → klic.brand.color.muted → klic.primitive.color.theme.klic.light.muted
klic.component.block.color.border → var(--klic-component-block-color-border); klic.component.block.color.border → klic.semantic.color.border → klic.brand.color.border → klic.primitive.color.theme.klic.light.line
klic.component.block.color.control-border → var(--klic-component-block-color-control-border); klic.component.block.color.control-border → klic.semantic.color.control-border → klic.brand.color.control-border → klic.primitive.color.theme.klic.light.control-border
klic.component.block.color.accent → var(--klic-component-block-color-accent); klic.component.block.color.accent → klic.semantic.color.accent → klic.brand.color.accent → klic.primitive.color.palette.klic.accent
klic.component.block.color.accent-hover → var(--klic-component-block-color-accent-hover); klic.component.block.color.accent-hover → klic.semantic.color.accent-hover → klic.brand.color.accent-hover → klic.primitive.color.palette.klic.hover
klic.component.block.color.on-accent → var(--klic-component-block-color-on-accent); klic.component.block.color.on-accent → klic.semantic.color.on-accent → klic.brand.color.on-accent → klic.primitive.color.white
klic.component.block.color.success → var(--klic-component-block-color-success); klic.component.block.color.success → klic.semantic.color.success → klic.brand.color.success → klic.primitive.color.palette.klic.hover
klic.component.block.color.success-surface → var(--klic-component-block-color-success-surface); klic.component.block.color.success-surface → klic.semantic.color.success-surface → klic.brand.color.success-surface → klic.primitive.color.blue-050
klic.component.block.color.warning → var(--klic-component-block-color-warning); klic.component.block.color.warning → klic.semantic.color.warning → klic.brand.color.warning → klic.primitive.color.warning-800
klic.component.block.color.warning-surface → var(--klic-component-block-color-warning-surface); klic.component.block.color.warning-surface → klic.semantic.color.warning-surface → klic.brand.color.warning-surface → klic.primitive.color.warning-050
klic.component.block.color.danger → var(--klic-component-block-color-danger); klic.component.block.color.danger → klic.semantic.color.danger → klic.brand.color.danger → klic.primitive.color.danger-700
klic.component.block.color.danger-surface → var(--klic-component-block-color-danger-surface); klic.component.block.color.danger-surface → klic.semantic.color.danger-surface → klic.brand.color.danger-surface → klic.primitive.color.danger-050
klic.component.block.content.max-width → var(--klic-component-block-content-max-width); klic.component.block.content.max-width → klic.semantic.size.layout.content.max → klic.brand.dimension.content.width.wide → klic.primitive.dimension.content.width.wide
klic.component.block.section.gap → var(--klic-component-block-section-gap); klic.component.block.section.gap → klic.semantic.space.layout.section → klic.brand.spacing.section → klic.primitive.dimension.step.6
klic.component.block.container.padding → var(--klic-component-block-container-padding); klic.component.block.container.padding → klic.semantic.space.container.default → klic.brand.spacing.md → klic.primitive.dimension.step.4
klic.component.block.control.height → var(--klic-component-block-control-height); klic.component.block.control.height → klic.semantic.size.action.default → klic.brand.dimension.control.height.md → klic.primitive.dimension.step.8
klic.component.block.surface.radius → var(--klic-component-block-surface-radius); klic.component.block.surface.radius → klic.semantic.radius.container.default → klic.brand.radius.md → klic.primitive.dimension.step.2
klic.component.block.icon.size → var(--klic-component-block-icon-size); klic.component.block.icon.size → klic.semantic.size.icon.default → klic.brand.icon.size.md → klic.primitive.dimension.step.4
klic.component.block.typography.body.font-size → var(--klic-component-block-typography-body-font-size); klic.component.block.typography.body.font-size → klic.semantic.typography.body.font-size → klic.brand.typography.scale.body.font-size → klic.primitive.dimension.step.4
klic.component.block.typography.label.font-size → var(--klic-component-block-typography-label-font-size); klic.component.block.typography.label.font-size → klic.semantic.typography.label.font-size → klic.brand.typography.scale.label.font-size → klic.primitive.dimension.step.3
Distinguish sample behavior and unverified scope from product implementation.
Bundle: https://design.klic.co.kr/api/v1/bundles/block/support-tickets.json

This prompt is a design input example, not a quality certificate. Verify prohibitions, tokens, states and dependencies in the generated output.