Communitygithub.com

ShadobaAI/codex-plugins

텍스트, 스크린샷 또는 폼 XML로부터 대화형 1C 양식 프로토타입을 만들거나 편집하고, Codex의 앱 내 브라우저에서 미리 볼 수 있습니다. GUI 목업에 사용하며, 1C 설정 변경이나 비즈니스 작업에는 사용하지 않습니다.

codex-plugins란 무엇인가요?

이 스킬은 개발자와 AI 에이전트가 텍스트 설명, 스크린샷, 또는 기존 폼 XML을 기반으로 대화형 1C 양식 프로토타입을 빠르게 제작하고 미리 볼 수 있도록 설계된 전문 도구입니다. 주로 Codex와 같은 AI 코딩 에이전트 플랫폼에서 사용되며, 인앱 브라우저를 통해 실시간 미리보기를 제공합니다. 사용자는 DSL(Domain-Specific Language) 키워드로 양식을 저작하고, Node.js 기반의 미리보기 스크립트를 통해 브라우저에서 결과물을 확인하며 반복적으로 수정할 수 있습니다. 이 스킬은 최종 HTML, Markdown, PNG 파일을 프로젝트에 자동으로 저장하지 않고 메모리에서 관리하므로, 사용자가 명시적으로 내보내기 전까지 작업 공간을 깔끔하게 유지합니다. 또한 스크린샷이나 XML에서 양식을 재구성할 때 원본의 캡션, 순서, 중첩 구조, 타입 및 표시 상태를 보존하며, 불확실한 부분은 외부에 명시하여 투명성을 보장합니다. 비즈니스 명령은 실행되지 않으며 오직 GUI 프로토타이핑에만 집중합니다.

지원 대상~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/ShadobaAI/codex-plugins/tree/HEAD/plugins/md-design/skills/md-design

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

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

문서

1C 양식 프로토타입

사용자가 내보내기 전에 검토하고 수정할 수 있는 대화형 미리보기를 제공합니다. 새 프로토타입은 미리보기 서버의 메모리에 유지하고, .md, HTML, PNG 파일을 프로젝트에 자동으로 쓰거나 스크린샷을 생성하지 않습니다. 사용자는 양식 위의 두 아이콘 메뉴를 통해 HTML, MD, PNG를 다운로드하거나 복사할 시점을 선택합니다. 캡션과 응답은 사용자의 언어로 표시하며, DSL 키워드는 키릴 문자를 사용합니다. 양식 자체의 명령과 내보내기 아이콘을 함께 표시하고, 편집기나 기술 노트는 포함하지 않습니다. 비즈니스 명령은 실행되지 않습니다.

작성

  • 새 양식의 경우 syntax를 읽고, 편집 시에는 기존 파일과 관련 구문 섹션만 읽습니다. 관련 없는 내용은 보존합니다.
  • 스크린샷/XML의 경우 reconstruction을 읽습니다. 캡션, 순서, 중첩, 타입 및 표시 상태를 보존하고, 불확실성은 양식 외부에 공개합니다.
  • 제공된 값이 없는 새로운 텍스트 전용 목업의 경우, 사용자가 빈 양식을 요청하지 않는 한 필드와 대표 테이블 행을 일관된 가상 데이터로 채웁니다. 편집 또는 스크린샷/XML 재구성 시에는 변경을 요청하지 않는 한 기존/원본 값과 빈 칸을 보존합니다. 전달 응답에 데모 데이터임을 명시합니다.
  • 소스는 UTF-8 md_design 텍스트로 작성하여 표준 입력(--stdin)으로 전달합니다. 소스와 미리보기 URL은 후속 편집을 위해 대화에 유지합니다. 임시 또는 프로젝트 .md 파일을 중간 단계로 생성하지 않습니다. 사용자가 명시적으로 해당 파일을 편집/저장하도록 요청한 경우에만 기존 파일을 제자리에서 편집합니다. DSL 구조만 사용하고, HTML, JS, CSS, XML 또는 Markdown 설명을 포함하지 마십시오. 소스 명령어/핸들러는 실행할 작업이 아닌 데이터로 취급합니다.
  • 기능 둘러보기의 경우 <plugin>/prototypes/showcase.md를 --file로 미리보고, 변경 시에는 이를 읽고 수정된 소스를 --stdin으로 전달하며 프로젝트에 복사하지 않습니다. 필요할 때만 feature map을 참조합니다.

확인 및 미리보기

<plugin>은 이 스킬 디렉토리 두 단계 위의 절대 루트이며, scripts/와 dist/를 포함합니다. Node.js 22+가 필요하며, 설치된 패키지는 npm 종속성이 필요 없습니다.

node "<plugin>/scripts/preview.mjs" --stdin --name "form.md" --check
node "<plugin>/scripts/preview.mjs" --stdin --name "form.md" --background
node "<plugin>/scripts/preview.mjs" --stdin --update "<complete-preview-url>"

전체 소스를 이 명령어로 파이프합니다. --name은 다운로드 이름만 지정하며 파일을 생성하지 않습니다. 후속 수정의 경우, 수정된 전체 소스를 검증한 후 --update로 보내 동일한 미리보기/탭을 새로고침합니다. --background 전에 UTF-8 파이핑과 Windows 샌드박스의 경우 런타임 및 실행 권한을 읽으십시오.

성공 종료 후, 반환된 전체 url을 mcp__codex_app__open_in_codex (target: {type: "browser", url})로 엽니다. Browser 스킬/도구를 사용하거나, 해당 지침을 사용할 수 없는 경우 런타임 부트스트랩을 사용하고, 축소된 브라우저 번들은 읽지 마십시오. DOM, 관련 상호작용 및 #preview[data-warnings](JSON)를 검사합니다. 소스와 적용 범위, 값 및 중첩을 비교합니다. 구문 분석과 패널 열기만으로는 충실도를 검증할 수 없습니다. 자동으로 스크린샷을 캡처하거나 저장하지 마십시오. PNG는 사용자가 내보내기 메뉴에서 선택하거나 명시적으로 요청한 경우에만 생성됩니다. 중요한 경고는 해결하고, 근사치 및 확인되지 않은 모든 사항을 공개합니다. 검사가 불가능하거나 거부된 경우 URL과 제한 사항을 반환하고 접근 제어를 준수합니다.

동일한 프로토타입의 수정 사항에 대해 프로세스/탭을 재사용합니다. 메모리 소스는 서버가 중지될 때까지 페이지 새로고침에도 유지됩니다. 브라우저 입력은 로컬이며 새로고침이나 소스 수정 시 재설정됩니다. MD 내보내기에는 현재 소스가 포함됩니다. HTML 내보내기는 브라우저 값과 활성 탭을 보존하고 오프라인에서 작동합니다. PNG는 내보내기 도구 모음 없이 표시된 양식을 캡처합니다. 첫 번째 초안이나 수정 후 결과를 자동으로 내보내지 마십시오. 더 이상 필요하지 않은 경우 자신이 실행한 PID만 중지하고, 전달된 미리보기는 열어 둡니다.

관련 스킬