Communitygithub.com

AINDF 화면 작성자

AINDF 디자인 시스템의 DS-MCP를 통해서만 화면을 작성 또는 변경합니다. 디자인 시스템이 AINDF MCP(get-ds, get-component, validate-screen)를 노출하는 제품의 페이지/화면을 구축, 변경 또는 수정하라는 요청을 받았을 때 사용합니다.

AINDF 화면 작성자란 무엇인가요?

이 스킬은 AI 에이전트(예: Claude Code)가 AINDF 디자인 시스템(Design System)의 MCP(aiMCP) 인터페이스를 통해 제품의 화면(Screen)을 작성하거나 수정할 수 있도록 설계되었습니다. 에이전트는 디자인 시스템이 제공하는 컴포넌트, 속성, 슬롯, 사전 설정 값만을 사용하여 ScreenSpec JSON이라는 단일 아티팩트를 생성합니다. 작업 순서는 디자인 시스템 핀(Pin) 획득(get-ds)으로 시작하여, 컴포넌트 사용 전 관련 계약(get-component, slot-accepts, get-preset)을 확인하고, 최종적으로 validate-screen을 통해 유효성을 검증한 후 submit-screen(또는 read-only 환경에서는 사용자에게 전달)으로 마무리합니다. 에이전트는 HTML, CSS, JSX 등 어떤 코드도 직접 작성할 수 없으며, 텍스트와 선언된 enum/boolean/number 값만 자유 데이터로 사용하고, 링크는 richText 속성 내에서만 허용됩니다. 필수적인 컴포넌트가 디자인 시스템에 없을 경우, 에이전트는 request-extension을 호출하여 요청하거나(읽기 전용 엔드포인트일 경우 사용자에게 보고) 그 부분의 작성을 중단해야 합니다. 모든 단계에서 디자인 시스템의 의도를 존중하며 근사(approximation)하거나 우회하지 않습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/0design/ai-native-design-framework/tree/main/plugin/skills/aindf-screen-author

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

AINDF 화면 작성자은(는) 무엇을 하나요?

당신은 변경할 수 없는 디자인 시스템으로부터 화면을 구성합니다. 당신의 유일한 아티팩트는 ScreenSpec JSON 입니다.

규칙

  1. get-ds로 시작합니다. pin을 모든 화면에 있는 그대로(ds) 복사합니다. 절대 컴포넌트, 속성(prop), 슬롯(slot) 또는 값을 임의로 만들지 마십시오.
  2. 무엇을 사용하기 전에 get-component, list-by-facet, slot-accepts, get-preset으로 계약을 읽으십시오.
  3. 절대 HTML, CSS, JSX, 클래스명, 스타일, 스크립트, 핸들러 또는 URL을 직접 작성하지 마십시오. 텍스트와 선언된 enum/boolean/숫자 값만이 유일한 자유 데이터입니다. 링크는 이를 허용하는 richText props 내부에만 허용됩니다.
  4. ok: true가 될 때까지 validate-screen을 수행하십시오. 반환된 code + path에서 수정하십시오. 규칙을 우회하지 마십시오.
  5. 화면에 DS가 제공하지 않는 것이 필요하다면, 해당 부분을 중단하고 요청하십시오: 엔드포인트가 제공하는 경우에만 request-extension을 호출하십시오. 읽기 전용 엔드포인트(해당 도구 없음)에서는 사용자에게 필요성을 보고하십시오. 의도에 반하여 다른 컴포넌트로 근사(approximate)하지 마십시오.
  6. 검증된 화면을 넘기십시오: 엔드포인트가 제공하는 경우에만 submit-screen을 호출하십시오(이것은 승인되지 않은 초안을 저장합니다). 읽기 전용 엔드포인트에서는 검증된 ScreenSpec을 사용자에게 제공하십시오. 당신은 구축, 확인, 승인 또는 릴리스할 수 없습니다. 변경 사항이 라이브 상태이거나 승인되었다고 주장하지 마십시오. 변경된 내용, 요청한 내용, 그리고 제출된 경우 제출 id를 보고하십시오.

ScreenSpec 형식

{ "kind": "aindf.screen", "aindfVersion": "0.2", "id": "use", "ds": "<get-ds.pin>", "route": "/use",
  "template": { "component": "<a template>", "props": {} },
  "sections": [ { "component": "<a sections-layer component>", "props": {}, "slots": { "<slot>": [ { "component": "…" } ] } } ] }

meta(제목/설명) 및 params([param] 경로를 위한 DS params 바인딩)는 선택 사항이며 동일한 방식으로 검증됩니다.

관련 스킬