spec-to-ui

요구사항 명세서를 화면 구조와 실제로 볼 수 있는 UI 초안으로 발전시키는 Codex 플러그인입니다. 디자인이나 CSS를 몰라도 예시와 미리보기를 보며 방향을 고를 수 있도록 돕습니다.

주요 기능

• 요구사항을 페이지, 정보 우선순위, 핵심 행동과 필요한 상태로 옮깁니다.
• 실제 참고 자료와 대표 화면으로 디자인을 비교하고 선택한 방향을 확장합니다.
• 명세서의 중요한 누락은 SpecFrame으로 보충하고, 승인된 범위에서 UI 작업으로 돌아옵니다.
• 정렬, 단어 단위 줄바꿈, 입력 요소와 열린 달력, 반응형, 초점, 모션을 함께 검토합니다.
• 채택한 디자인 규칙은 프로젝트의 DESIGN.md에 기록합니다.

포함된 스킬

| 구성 | 사용하는 시점 | |---|---| | spec-to-ui | 전체 UI 설계를 진행하고 필요한 보조 역할을 연결합니다. | | SpecFrame | 기능·권한·업무 규칙의 누락이나 충돌이 화면 설계를 막을 때 사용합니다. | | design-taste-frontend | 시각 방향, 이미지, 타이포그래피, 구성과 모션을 보강합니다. | | ui-ux-pro-max | 폼, 반응형, 접근성, 탐색과 상호작용의 구체적인 문제를 검토합니다. |

spec-to-ui가 필요한 보조 스킬의 지침을 같은 묶음에서 읽도록 구성했습니다. 매번 네 스킬을 모두 실행하지는 않습니다. DESIGN.md는 프로젝트 문서이며, Refero Styles 등은 실제 참고 자료를 찾는 외부 서비스입니다. 별도 스킬이나 서비스 이용권이 포함된 것은 아닙니다.

필수 프로그램

• 플러그인을 지원하는 Codex와 codex 명령
• Node.js 22 이상과 npm
• 보조 검색 도구를 사용하는 경우 Python 3

브라우저, 이미지 제작, 외부 디자인 자료의 열람은 사용 중인 환경의 도구와 권한에 따릅니다. 필요한 도구를 사용할 수 없으면 가능한 대안과 미검증 범위를 안내하도록 되어 있습니다.

설치

다음 명령은 GitHub의 마켓플레이스를 등록한 뒤 npm의 0.2.0 패키지를 Codex 플러그인으로 설치합니다.

npx --yes [email protected] install

실행할 설치 명령만 확인하려면 다음을 사용합니다.

npx --yes [email protected] install --dry-run

npm 설치 도우미 없이 Codex에서 직접 설치할 수도 있습니다.

codex plugin marketplace add suminkim8203/spec-to-ui
codex plugin add spec-to-ui@spec-to-ui

설치 후 새 Codex 세션에서 호출합니다. 앱을 계속 열어 두었다면 새 채팅에서도 목록이 갱신되었는지 확인해 주십시오.

$spec-to-ui:spec-to-ui

플러그인 이름과 표시명은 모두 spec-to-ui입니다.

사용법

명세서로 시작하기

$spec-to-ui:spec-to-ui
요구사항은 ./REQUIREMENTS.md에 있습니다.
신규 사이트를 설계해 주세요. 참고 방향을 미리보기로 추천하고,
대표 화면을 확인한 뒤 전체 화면으로 확장하겠습니다.

이미 승인한 명세서는 재사용합니다. UI 구조에 영향을 주는 누락이 있으면 보충할 항목을 짚고 SpecFrame으로 연결합니다. 요구사항 보충에는 전체 명세서 확인과 사용자 승인이 필요합니다.

기존 설계를 이어가기

$spec-to-ui:spec-to-ui
현재 프로젝트의 REQUIREMENTS.md와 DESIGN.md를 읽고 이어서 진행해 주세요.
목록 구성은 유지하고 상세 화면과 신청 흐름을 확장해 주세요.

기존 결정과 승인 범위를 유지하며 필요한 부분부터 작업합니다. 목적·기능·권한·주요 흐름을 바꾸는 선택과 별도 설치·유료 연결·배포는 승인 범위를 확인합니다.

작동 구조

명세서와 기존 결정을 읽고 화면 구조를 정리합니다. 실제 참고 자료와 표현 방법을 제안한 뒤, 핵심 작업을 보여 주는 대표 화면을 만듭니다. 사용자 선택이나 위임 범위에 따라 확장하고 실제 브라우저에서 해당 흐름을 검증합니다.

디자인 제안에는 쉬운 설명과 볼 수 있는 예시를 함께 제시하도록 했습니다. 모션이 선택의 핵심이라면 재생하거나 조작할 수 있는 미리보기를 사용합니다. 참고 화면을 열어 보지 못했거나 실제 조작을 하지 못한 경우에는 확인했다고 보고하지 않습니다.

결정과 작업 기록

프로젝트의 DESIGN.md에 채택한 배치, 글꼴, 색, 간격, 컴포넌트와 상태 규칙을 기록합니다. AI 제안, 사용자 선택, 위임에 따른 결정, 미정 사항을 구분합니다. 요구사항은 기존 명세서에서 관리하며 두 개의 최신 명세서를 만들지 않습니다.

검증 결과에는 실제 확인한 화면·상태·조작과 미검증 사항을 남깁니다. 개발 설명이나 예시 데이터 안내를 제품 화면의 문구로 자동 삽입하지 않습니다.

0.1.0에서 바뀐 점

0.1.0은 단일 스킬을 복사하는 설치 도구입니다. 0.2.0은 네 스킬을 묶은 플러그인으로, 호출명은 $spec-to-ui:spec-to-ui입니다. 이전 설치용 --target, --project, --replace 옵션은 지원하지 않습니다.

설치 도우미는 기존 단일 스킬과 개발용 플러그인을 자동으로 삭제하거나 교체하지 않습니다. 이전 단일 스킬의 $spec-to-ui 호출도 별도로 남을 수 있습니다. 개발용 플러그인과 공개 플러그인은 이름이 같으므로, 공개본으로 전환할 때는 Codex의 플러그인 관리 화면에서 사용할 쪽을 활성화해 주십시오.

고급 사용과 문제 해결

다른 위치에 있는 Codex 실행 파일을 사용하려면 경로를 지정합니다.

npx --yes [email protected] install --codex /absolute/path/to/codex

설치 상태와 패키지 파일 검사는 각각 다음과 같습니다.

npx --yes [email protected] status
npx --yes [email protected] check

codex를 찾지 못하면 Codex CLI의 설치와 경로를 확인해 주십시오. 플러그인 명령 자체가 없으면 사용 중인 Codex가 플러그인을 지원하는지 확인해야 합니다. 이 도구는 Codex나 Node.js를 자동으로 설치·업데이트하지 않습니다.

명령어 지원과 마켓플레이스 구조는 공식 플러그인 문서를 참고해 주십시오.

개발 및 검증

배포 구성과 확인 범위는 RELEASE.md에 기록했습니다. 설치·검색 검증과 예제 UI 검증은 서로 구분합니다. 특정 사례의 성공이 모든 프로젝트의 디자인 품질이나 실제 서비스 연동을 보장하지는 않습니다.

라이선스와 출처

직접 작성한 spec-to-ui 지침과 설치 도구에는 MIT 라이선스가 적용됩니다. 동봉한 외부 구성 요소의 조건과 수정 범위는 THIRD-PARTY.md, 고정 원본은 sources.json에 기록했습니다. 각 폴더의 LICENSE도 확인해 주십시오.

SpecFrame은 제작자의 재배포 허가에 따라 포함했으며 MIT로 재허가하지 않았습니다.