Craft

/impeccable craft

Good fit

• 새 기능을 처음부터 시작합니다.
• 디스커버리, 구현, 시각적 정제를 한 번에 원합니다.
• 조금 느리더라도 더 의도적인 빌드 루프를 선호합니다.

01Shape디스커버리 인터뷰. 목적, 사용자, 제약, 방향.

02Load references공간, 타이포그래피, 모션, 색상, 인터랙션.

03Build구조, 계층, 타이포, 색상, 상태, 모션, 반응형.

04Iterate visually브라우저에서 확인하고, 브리프에 맞을 때까지 정제.

모든 단계는 건너뛸 수 없습니다. 디스커버리 단계가 바로 대부분의 AI 출력이 실패하는 지점입니다: 코드가 존재할 때쯤이면 사고는 이미 고정되어 있습니다.

사용 시기

/impeccable craft는 엔드투엔드 빌드 명령입니다. 기능 설명을 주면 전체 파이프라인을 실행합니다: 구조화된 디스커버리, 레퍼런스 로딩, 구현, 시각적 반복. 새 기능을 처음부터 시작하고 한 번의 호출로 전체 워크플로를 원할 때 사용하세요.

다음 경우에 사용하세요:

• 새 기능을 빌드하며 전체 흐름을 원할 때. 단계를 직접 관리하고 싶지 않습니다.
• 무엇을 만들지는 알지만 어떻게 보여야 할지 모를 때. 디스커버리 단계가 구현 전에 디자인 사고를 강제합니다.
• 시각적 반복을 기본으로 원할 때. craft는 첫 번째 작동 버전을 배포하는 대신, 브라우저에서 결과를 확인하고 마감도가 높아질 때까지 정제합니다.

코드 없이 사고만 원한다면 /impeccable shape를 단독으로 사용하세요. 이미 명확한 비전이 있고 빌드만 원한다면 /impeccable에 기능 설명을 직접 전달하세요. craft는 그 사이에 있습니다: 구조화되어 있고, 완전하며, 주관적입니다.

작동 방식

craft는 순서대로 4단계를 실행합니다:

1. 디자인 구상. 내부적으로 /impeccable shape를 실행합니다: 목적, 사용자, 콘텐츠, 제약, 목표에 대한 짧은 디스커버리 대화. 출력은 읽고 피드백할 수 있는 디자인 브리프입니다.
2. 레퍼런스 로딩. 브리프를 기반으로 알맞은 레퍼런스 파일(공간, 타이포그래피, 모션, 색상, 인터랙션, 반응형, UX 라이팅)을 가져와서 코딩 전에 관련 원칙을 모델에 로드합니다.
3. 빌드. 의도적인 순서로 기능을 구현합니다: 먼저 구조, 그다음 간격과 계층, 타이포와 색상, 상태, 모션, 반응형. 모든 결정은 브리프로 추적됩니다.
4. 시각적 반복. 브라우저에서 결과를 열어 브리프와 안티패턴 카탈로그에 대해 확인하고, 의도에 맞을 때까지 정제합니다. 이 단계가 중요합니다. 첫 번째 작동 버전이 출시 버전인 경우는 없습니다.

디스커버리 단계는 건너뛸 수 없으며, 그것이 핵심입니다. 대부분의 AI 생성 UI가 실패하는 이유는 모델이 JSX를 작성하기 전에 사용자가 무엇을 달성하려는지 아무도 묻지 않았기 때문입니다. craft는 그 순서를 뒤바꿉니다.

직접 해보기

/impeccable craft a pricing page for a developer tool

먼저 5~10개 질문의 디스커버리 인터뷰가 진행됩니다. 대상 사용자, 제품의 성격, 원하는 감정적 톤, 안티 레퍼런스, 제약에 대한 질문입니다. 이어서 디자인 브리프가 나오고, 그다음 각 단계에서 브라우저를 확인하며 구현이 이어집니다. 시각적 마감 단계에서 여러 차례 반복이 예상됩니다.

전체 실행은 사고, 빌드, 정제가 모두 포함되므로 일반적인 명령보다 깁니다. 그것이 트레이드오프입니다: 더 많은 선행 구조화, 이후 더 적은 정리.

주의 사항

• 작은 변경에 사용하기. craft는 새 기능용이지 터치업용이 아닙니다. 기존 코드에는 /impeccable polish, /impeccable critique, 또는 특정 정제 명령을 대신 사용하세요.
• 디스커버리 단계를 서둘러 넘기기. 인터뷰는 “그냥 코딩 시작”에 비해 느리게 느껴집니다. 그렇지 않습니다. 질문에 신중하게 답하면 더 날카로운 브리프가 나오고, 더 날카로운 빌드가 나오며, 재작성이 줄어듭니다.
• 시각적 반복 건너뛰기. 이 단계에는 이유가 있습니다. “기술적으로 작동함”과 “올바르게 느껴짐” 사이의 간극은 시각적 마감으로만 좁혀지며, 코드 리뷰로는 안 됩니다. 그대로 실행하세요.

Related commands

• Shape
• Polish
• Live