AI 클라이언트가 고정된 디자인 시스템 번들을 탐색하고, 컴포넌트, 프리셋, 슬롯을 조회하며, 화면 사양을 검증할 수 있게 합니다.
다른 이름 0design/ai-native-design-framework, @ai-native-design-framework/kit
- 스타
- 29
- Tools
- —
- 다운로드, 30일
- 177
- 최신 버전
- 0.2.1
- 마지막 커밋
- 2026년 11월 4일
- 라이선스
- MIT
AINDF MCP란?
AINDF은(는) MCP server입니다. AI 클라이언트가 고정된 디자인 시스템 번들을 탐색하고, 컴포넌트, 프리셋, 슬롯을 조회하며, 화면 사양을 검증할 수 있게 합니다.
프로젝트 README에서 생성된 요약
AINDF MCP server 정보
AINDF는 화면 제작자와 디자인 시스템 유지 관리자가 고정된 디자인 시스템 번들을 탐색하고 화면 사양을 검증할 수 있도록 지원합니다. 이 MCP server를 사용하면 AI 클라이언트가 list-by-facet, get-component, validate-screen과 같은 도구를 사용하여 특정하고 불변하는 디자인 시스템 리비전과 상호작용할 수 있습니다. stdio를 통해 작동하거나, 스테이징 초안 작성을 위해 author token이 필요한 호스팅 엔드포인트를 사용하여 edge runtime에서 실행할 수 있습니다.
개발자는 이 키트를 사용하여 디자인 시스템 준수 여부를 관리하고 screen JSON 파일로부터 Next.js App Router 페이지를 구축합니다. 서버는 컴포넌트, 프리셋, 슬롯 및 binding에 대한 액세스를 제공하는 동시에 화면 사양이 고정된 AINDF 0.2 컨트랙트를 준수하도록 보장합니다. 특히 bundleSha256을 통해 콘텐츠 주소 지정 리비전을 지원함으로써, AI 에이전트가 계속 변하는 대상이 아닌 정확하고 변경 불가능한 디자인 시스템 버전을 사용하도록 보장합니다.
활용 사례
- 1화면 사양 검증AI 에이전트가 고정된 디자인 시스템 컨트랙트를 기준으로 screen JSON 파일을 검증하여 오류를 찾아내도록 합니다.
프로젝트의 README를 바탕으로 작성되었습니다. 모든 활용 사례는 해당 내용의 인용문과 대조하여 확인합니다.
AINDF MCP 설치 방법
형식 확인: 2026년 11월 10일Cursor에 추가Goose에 추가Claude Code에 AINDF MCP 설치
$ claude mcp add aindf -- npx -y @ai-native-design-framework/kitCursor에 AINDF MCP 설치
~/.cursor/mcp.json
{
"mcpServers": {
"aindf": {
"command": "npx",
"args": [
"-y",
"@ai-native-design-framework/kit"
]
}
}
}VS Code에 AINDF MCP 설치
.vscode/mcp.json
{
"servers": {
"aindf": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@ai-native-design-framework/kit"
]
}
}
}VS Code CLI에 AINDF MCP 설치
$ code --add-mcp '{"name":"aindf","type":"stdio","command":"npx","args":["-y","@ai-native-design-framework/kit"]}'Claude Desktop에 AINDF MCP 설치
claude_desktop_config.json
{
"mcpServers": {
"aindf": {
"command": "npx",
"args": [
"-y",
"@ai-native-design-framework/kit"
]
}
}
}Codex에 AINDF MCP 설치
$ codex mcp add aindf -- npx -y @ai-native-design-framework/kitCodex config.toml에 AINDF MCP 설치
~/.codex/config.toml
[mcp_servers.aindf] command = "npx" args = ["-y", "@ai-native-design-framework/kit"]
Gemini CLI에 AINDF MCP 설치
$ gemini mcp add -s user aindf npx -- -y @ai-native-design-framework/kitGemini settings.json에 AINDF MCP 설치
~/.gemini/settings.json
{
"mcpServers": {
"aindf": {
"command": "npx",
"args": [
"-y",
"@ai-native-design-framework/kit"
]
}
}
}자동 검사
2026년 11월 13일에 실행됨전체 보고서 →자동 검사를 통과했습니다. 이는 보안 감사가 아닙니다. 코드를 직접 읽고 서버에 필요한 최소한의 권한만 부여하십시오. 검사 방식
- 소스 저장소 연결 및 접근 가능통과
- 오픈 소스 라이선스 (OSI)통과
- 최근 1년 내 커밋 또는 릴리스통과
- 패키지 이름이 인기 패키지와 유사하지 않음통과
- 원격 엔드포인트가 HTTPS 사용검사되지 않음
- 파괴적인 도구에 라벨 표시됨검사되지 않음
- 모델에 대한 숨겨진 지침 없음통과
- 패키지 및 해당 종속성에 중요한 보안 권고 없음통과
README
GitHub에서 보기@ai-native-design-framework/kit — the AINDF 0.2 kit
One dependency-free package for any design system that conforms to AINDF (conformsTo: "aindf@0.2"):
| Command | Role | What it does |
|---|---|---|
aindf check <aindf.config.json> |
DS maintainer | Conformance: sources validate against the pinned AINDF 0.1 schemas (schema/0.1, SHA256SUMS) and the v0.2 additions (schema/0.2), no dangling slot/modifier/preset edges, layer rule, downward-only tokens, closed props (no className/style/children/handlers), bindings resolve. |
aindf bundle <config> --out <file> |
DS maintainer | Immutable, content-addressed DS revision (bundleSha256). Screens pin it; the MCP serves it. |
aindf build <config> --screens <dir> --app <dir> [--check] |
trusted builder | Admits every *.screen.json, generates Next.js App Router pages (// @generated), --check fails on manual edits, stale specs, DS changes and orphans; writes built receipts only. |
aindf mcp <bundle.json> |
screen author | stdio MCP; createDsMcp + mcpFetchHandler run the same server on an edge runtime. |
v0.2 additions to the public AINDF 0.1 contract graph: components (closed prop/slot/state contracts, templates),
bindings (named data/action adapters implemented by the DS), screen (the only author artifact), receipt, config.
MCP surface: AINDF 0.1 list-by-facet, slot-accepts, applicable-modifiers, get-preset plus get-ds,
get-component, validate-screen, submit-screen and request-extension. The last two are offered only by an
endpoint with staging (e.g. a hosted DS-MCP), need an author token and only stage unaccepted drafts; a read-only
endpoint such as aindf mcp lists 7 tools, and an agent reports the need or the validated ScreenSpec to the user.
Every tool carries a title and MCP hints (readOnlyHint, destructiveHint, idempotentHint, openWorldHint).
The kit contains no design system; its tests run against a small fixture design system kept in the repository. Limits: a builder receipt is not a signature; verified/accepted/released are never written by the kit; isolation of the author principal comes from deployment rights, not from this package.
Clean install: the repository's packages/aindf-kit/scripts/clean-install.mjs (source)
packs this package, installs the tarball into an empty project and uses it only as a consumer would — the aindf bin
(check, bundle, build, --check), the package exports and the MCP over stdio — each step with a negative. CI runs it on
Node 20 and 22 and prints the tarball sha256 and kit version it checked.
Instance on Core (ds.core + ds.coreBundle + ds.coreBundleSha256, 0.2.0)
An Instance that extends a Core pins it in aindf.config.json three ways: ds.core (id@version), ds.coreBundle
(path to that Core's AINDF bundle) and ds.coreBundleSha256 (the bundle's content hash; a self-consistent bundle with the
same id@version but other contracts is refused). Generated screens import from one module only — the Instance's
implementation.module — so a Core role a screen needs (Input, DialogPanel …) is provided by the Instance under the same
contract name, implemented with the Instance's look. aindf check then holds that contract to the Core one: it must
accept every prop value the Core contract accepts —
- every Core prop stays, with its type, required exactly where Core requires it;
- every enum value, allowed binding, rich-text mark and inline component stays (the Instance may add more);
- limits are no tighter:
maxLength,minItems/maxItems,minimum/maximum; the link pattern is the Core one; - every Core slot prop stays; props the Core role does not have are optional;
- the role keeps its place in a screen: a Core template stays a template,
routeParamsis not added, the taxonomy layer is the Core one, every Core slot exists with a cardinality no tighter; slots the Core role does not have are optional (min 0); - every Core component exists in the Instance (contract and taxonomy), every Core binding by name; a
paramsordatabinding keeps its kind (a screen uses it as$.params/$.meta), anactionbinding may change kind (props name it).
What this guarantees: a screen written for Core — its components, props, where they stand, which slots they fill and how
many children, its bindings — admits against the Instance unchanged, with one exception on purpose: what a slot
accepts is judged by the Instance's own slotsets (their accepted components are Instance components), so a narrower
accepts can still reject a Core screen with SLOT_REJECTS. That is not checked here.
coreConformance(config, components, core, { taxonomy, slots, bindings }): props, slotProps, template, routeParams and
the Core component list are checked from components alone; the taxonomy layer and presence, slots and bindings only when
that source is passed. checkDs passes all of them.
Codes: CORE_PIN (AINDF-DS-29) when the bundle is not the pinned one; CORE_CONFORMANCE (AINDF-DS-30) per narrowed prop,
moved role, narrowed or new required slot, missing component or binding. Without ds.coreBundle nothing changes.
AINDF MCP 질문
AINDF MCP를 Claude Code에 추가하려면 어떻게 하나요?
터미널에서 claude mcp add aindf -- npx -y @ai-native-design-framework/kit를 실행합니다. 모든 프로젝트에서 사용할 수 있게 하려면 --scope user를 추가합니다.
AINDF MCP를 Cursor에 추가하려면 어떻게 하나요?
~/.cursor/mcp.json를 열고 mcpServers 아래에 서버를 추가합니다. 위 설치 섹션에 표시된 Cursor 구성을 사용합니다.
AINDF MCP server는 어떤 도구를 제공하나요?
읽기 전용 엔드포인트에서는 list-by-facet, slot-accepts, applicable-modifiers, get-preset, get-ds, get-component, validate-screen의 7가지 도구를 제공합니다. 스테이징 기능이 있는 엔드포인트에서는 submit-screen 및 request-extension도 사용할 수 있습니다.
AINDF MCP server를 어떻게 시작하나요?
번들 파일과 함께 aindf mcp 명령어를 실행하면 stdio를 통해 서비스됩니다. 동일한 서버를 createDsMcp 및 mcpFetchHandler를 사용하여 edge runtime에서 실행할 수도 있습니다.
MCP server가 제 화면을 수정하거나 제출할 수 있나요?
읽기 전용 엔드포인트에서는 불가능합니다. 나열된 7가지 도구는 읽기 전용이며, 에이전트는 화면을 제출하는 대신 검증된 ScreenSpec 또는 필요 사항을 사용자에게 보고합니다.
validate-screen은 무엇을 기준으로 확인하나요?
고정된 AINDF 번들을 기준으로 화면 사양을 확인합니다. 여기에는 닫힌 컴포넌트 props 및 슬롯 수용 여부가 포함되며, 슬롯은 디자인 시스템 자체의 slotsets에 따라 판단됩니다.
번들은 어떤 AINDF 버전을 준수하나요?
번들은 aindf@0.2 준수를 선언합니다. 이 버전은 0.1 컨트랙트 그래프에 component, binding, screen, receipt, config를 추가합니다.