/impeccable live
Live
브라우저에서 UI를 반복합니다. 요소를 선택하고, 코멘트를 남기고, 세 가지 변형을 받으세요. 하나를 수락하면 소스에 기록됩니다.
Letters, occasionally.
A postcard from the editor, about once a month. No tracking pixels, no “just checking in.”
Live Mode 사이클 중간: 픽커가 선택한 요소를 윤곽선으로 표시하고, 컨텍스트 바에 현재 변형이 표시되며, 글로벌 바가 하단에 고정됩니다. 이 변형에서 수락하면 Variant 2가 소스에 기록됩니다.
사용 시기
디자인 도구에서 하듯 시각적으로 무언가를 반복하되, 프로덕션 코드를 출력으로 유지하고 싶을 때 /impeccable live를 사용하세요. 구현 단계로의 왕복 없이 Figma의 캔버스 같은 흐름.
다음에 사용하세요:
- 실제 요소에서 방향 탐색. 히어로 섹션, 뉴스레터 카드, 가격 티어. 실제 페이지, 실제 컨텍스트에서 나란히 진짜 다른 세 가지 시도.
- 거의 맞는 UI 조각 마감. 어딘가 어색하지만 정확히 말할 수 없을 때. 요소를 선택하고, “더 장난기 있게”라고 쓰거나 거슬리는 부분에 선을 긋고, Go를 누르세요.
- 팀이 논쟁 중인 두 방향의 빠른 A/B. 변형을 생성하고, 아무것도 수락하지 않고, 떠나세요. 요점은 비교였습니다.
새 그린필드 기능(/impeccable craft 사용)이나 전체 페이지 재설계(/impeccable 또는 전문 정제 명령 사용)에는 해당하지 않습니다.
작동 방식
하나의 명령이 실행 중인 dev server 위에 픽커 오버레이를 띄웁니다. 아무 요소나 선택하세요. 작은 컨텍스트 바가 옆에 나타납니다. 자유 형식 설명을 입력하거나 액션 칩 중 하나를 선택하세요(bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). 선택적으로 먼저 요소에 코멘트 핀을 놓거나 선을 그으면 스킬이 그것을 의도로 읽습니다.
Go를 누르세요. 세 가지 프로덕션 품질 변형이 생성되며, 각각은 진짜 다른 디자인 아키타입에 고정되고(색상에 대한 세 가지 변주가 아닌) 프레임워크의 HMR을 통해 페이지에 핫스왑됩니다. 화살표 키로 순환하세요. 하나를 수락하면 변형이 소스에 기록됩니다. 세 개 모두 버리면 원본이 유지됩니다.
Vite, Next.js(모노레포 포함), SvelteKit, Astro, Nuxt, 일반 정적 HTML을 지원합니다. dev server에 엄격한 Content Security Policy가 있다면 첫 실행 설정이 감지하고 픽커가 로드될 수 있도록 일회성, 개발 전용 패치를 제공합니다. 시각적 결정에서는 DESIGN.md가 우선하고, 목소리에서는 PRODUCT.md가 우선합니다: 둘 다 있으면 지시 없이도 변형이 온브랜드를 유지합니다.
직접 해보기
/impeccable livedev server URL을 열고, 뉴스레터 가입 카드를 선택하고, delight 칩을 클릭하고, Go를 누르세요. 같은 처리에 대한 세 가지 변주가 아닌 성격 차원에 걸쳐 다른 세 가지 변형(우표와 엽서 느낌, 타이포그래피 서프라이즈 버전, 일러스트 액센트 버전)을 받게 됩니다.
또는 히어로를 선택하고 “에디토리얼 느낌, SaaS 말고”라고 입력하고 Go를 누르세요. 세 가지 변형은 같은 아이디어의 세 가지 음영이 아니라 다른 에디토리얼 아키타입(브로드시트 마스트헤드, 카탈로그 스타일 스펙 행, 초대형 글리프 포스터)에 고정됩니다.
완료되면 라이브 모드를 중지하세요: “stop live mode”라고 말하거나, 탭을 닫거나, 픽커 바의 종료 버튼을 누르세요.
주의 사항
- 반쯤 작성된 페이지에서 실행하기. 라이브 변형 생성에는 컨텍스트가 필요합니다. 요소에 플레이스홀더 카피, 일반적 Lorem ipsum, 또는 스타일시트 이전의 기본 포맷이 있다면 변형이 그것을 반영합니다. 먼저 콘텐츠를 채우세요.
- 거시적 결정을 내릴 것으로 기대하기. 라이브 모드는 선택한 단일 요소를 반복합니다. “가격 책정 페이지 전체를 다시 만들어줘”에는
/impeccable이나/impeccable craft를 대신 사용하세요. - 대체 메시지 무시하기. 요소가 생성된 파일(컴파일된 템플릿, 빌드 출력)에 있다면 픽커가 명시적으로 말하고 진짜 소스로 수락을 라우팅할 것을 제안합니다. 생성된 파일에 강제로 수락하지 마세요: 다음 빌드가 지웁니다.
- 브랜드 적합이 중요할 때 PRODUCT.md나 DESIGN.md 없이 실행하기. 라이브는 여전히 생성하지만 변형이 일반적 기본값에 기울 것입니다. 결과가 제품답게 들려야 한다면 먼저
/impeccable teach와/impeccable document를 실행하세요.