IFQ 디자인 스킬

프롬프트 하나로 -> 배포 가능한 HTML을 생성하고, 필요 시 MP4 / GIF / PPTX / PDF / SVG로 내보낼 수 있습니다. 이 루트 파일은 OpenClaw, ClawHub, skills.sh, Hermes, Codex, Claude Code, Cursor, OpenCode 등 AgentSkills 호환 호스트를 위한 짧은 라우터입니다. 작업에 필요한 경우에만 더 깊은 파일을 로드하세요.

30초 로드 경로

요청이 HTML로 구축된 시각적 산출물인지 확인합니다. 그렇지 않으면 이 스킬을 종료합니다.
references/modes.md에서 모드를 선택하고, assets/templates/INDEX.json을 읽습니다.
나열된 템플릿을 사용자 작업 공간에 포크합니다. 빈 HTML 파일로 시작하지 마십시오.
assets/ifq-brand/ifq-tokens.css를 인라인하고 references/ifq-brand-spec.md에서 최소 3개의 IFQ 앰비언트 마크를 적용합니다.
npm run verify:lite -- <file.html>로 검증한 후, npm run preview -- <file.html>로 미리 봅니다.

인간 + 에이전트 약속

인간은 완성된 아티팩트 경로를 얻습니다: HTML 우선, 요청 시에만 선택적 내보내기, 숨겨진 설정 없음.
에이전트는 짧은 경로를 얻습니다: 모드, 템플릿, 필수 참조, 티어 정책, 검증 명령어.
유지보수 담당자는 회귀 압력을 얻습니다: 12개 모드 평가, 스캐너-클린 스크립트, 마켓플레이스 메타데이터 검사.
마켓플레이스는 읽기 가능한 패키지를 얻습니다: 한 줄 설치, 필수 env 변수 없음, 명시적 권한, 무음 설치 없음.

첫 실행 성공 경로

설치 후, 첫 번째 상호작용이 한 번의 턴으로 가시적인 아티팩트를 생성하도록 합니다:

자연어 시각 요청을 설정 작업으로 전환하지 않고 수락합니다.
하나의 모드와 하나의 템플릿으로 라우팅하고, 최종 증거에서 둘 다 명명합니다.
HTML 파일을 사용자 작업 공간에 쓰고, 해결되지 않은 사실에 대한 레이블이 지정된 가정을 포함합니다.
셸을 사용할 수 있으면 npm run verify:lite -- <file.html>을 실행하고, 호스트 브라우저 도구를 사용할 수 있으면 미리보기 또는 스크린샷을 실행합니다.
파일 경로, 라우트, 템플릿, 검증 결과 및 사용에 영향을 미치는 주의 사항만 보고합니다.

첫 실행 경로 중에는 계정 로그인, 전역 설치, 내보내기 종속성 또는 광범위한 환경 변경을 요청하지 마십시오.

출력 경계

핵심 출력은 검증된 로컬 HTML이며, 작업에 필요한 경우 SVG/정적 동반 파일 또는 내보내기 준비 소스 구조를 포함합니다.
MP4/GIF/PDF/PPTX 도우미는 전체 저장소 선택적 자동화입니다. 먼저 HTML 소스를 준비하고, 명시적인 사용자 의도가 있을 때만 내보내기 도구를 설치하거나 실행합니다.
관련 명령어나 라이브 검사가 실제로 통과할 때까지 내보내기 파일, 스크린샷, 마켓플레이스 상태 또는 보안 결과가 존재한다고 주장하지 마십시오.

사용 시기

인터랙티브 프로토타입, 고해상도 목업, 클릭 가능한 앱 흐름, 대시보드, 랜딩 페이지, 백서, 보고서, 인포그래픽, 슬라이드 데크, 체인지로그, 카드, 초대장, 소셜 커버 또는 브랜드 시스템.
모션 데모 또는 출시 애니메이션, 특히 사용자가 MP4/GIF 출력을 원할 때.
디자인 비평, 브랜드 진단 또는 구현 전 3가지 차별화된 스타일 방향.
사용자가 HTML 우선 소스에서 PDF/PPTX/SVG 내보내기를 요청할 때.

사용하지 말아야 할 때

실제 작업이 프로덕션 프론트엔드 엔지니어링, 백엔드 작업, SEO 크리티컬 사이트 구현 또는 기존 앱 내 CSS 버그 수정인 경우.
사용자가 시각적 산출물 없이 복사 편집만 원하는 경우.
산출물이 Word, Google Docs 또는 잠긴 회사 템플릿을 통해 왕복해야 하는 경우.

티어 정책

티어	기본값?	요구 사항	사용 용도
티어 0	예	Node >= 18.17	HTML, 미리보기, 라이트 검증, 스모크 테스트
티어 1	선택 사항	Python + Playwright + Chromium	헤드리스 스크린샷, 콘솔 캡처, 다중 뷰포트 검사
티어 2	선택 사항	`npm run install:export`; MP4/GIF는 `ffmpeg`도 필요	MP4, GIF, PDF, 편집 가능한 PPTX 내보내기

사용자가 스크린샷 또는 내보내기 형식을 명시적으로 필요로 하지 않는 한 선택적 종속성을 설치하지 마십시오.

라우팅 결정 트리

사용자 요청 도착
  │
  ├─ 시각 디자인 산출물인가? ─── 아니오 → 스킬 종료, 기본 에이전트로 반환
  │
  ├─ 모드 트리거와 일치하는가? ─── 예 (신뢰도 >70%) → 템플릿 포크 → 전달 → 검증
  │                                      (한 턴: 가정 명명, 질문 없음)
  │
  ├─ 모드 트리거와 일치하는가? ─── 예 (신뢰도 ≤70%) → design-direction-advisor.md 경량
  │                                      (텍스트 전용 방향 3개, 데모 없음, 사용자 선택 대기)
  │
  ├─ 구체적인 제품/기술/이벤트를 언급하는가? ─── 예 → fact-and-asset-protocol.md + 웹 사실 확인
  │
  ├─ 모바일 앱 프로토타입인가? ─── 예 → app-prototype-rules.md + ios_frame.jsx / android_frame.jsx
  │
  └─ 모션/비디오인가? ─── 예 → animation-pitfalls.md + animations.md + video-export.md

전체 모드 프로토콜은 references/modes.md를 참조하세요. 위의 빠른 참조 표는 속도 계층입니다.

빠른 참조 (에이전트 속도 표)

모드	트리거 키워드	템플릿	주요 참조
M-01	런치 필름, 发布会, 제품 비디오	`T-launch-film`	animations.md, video-export.md
M-02	포트폴리오, 个人站, 자기소개	`T-hero-landing`	design-direction-advisor.md
M-03	백서, 白皮书, 연례 보고서	`T-infographic-vertical`	fact-and-asset-protocol.md
M-04	대시보드, 看板, KPI, 관제 센터	`T-dashboard`	app-prototype-rules.md
M-05	A vs B, 横评, 벤치마크	`T-compare-vs`	fact-and-asset-protocol.md
M-06	온보딩, 新手引导, 흐름 데모	`T-onboarding-flow`	app-prototype-rules.md
M-07	체인지로그, 릴리스 노트, 发布日记	`T-changelog`	content-guidelines.md
M-08	키노트, PPT, 演讲, 슬라이드 데크	`T-slide-title`	slide-decks.md, editable-pptx.md
M-09	社媒物料, 소셜 커버, 小红书	`T-social-x`	content-guidelines.md
M-10	名片, 명함, 邀请函	`T-business-card`	ifq-brand-spec.md
M-11	品牌诊断, 브랜드 감사, 品牌体检	`T-brand-diagnosis`	critique-guide.md
M-12	브랜드 처음부터, 从零建立品牌	`T-brand-system`	design-direction-advisor.md

모든 템플릿: npm run verify:lite -- <file> + npm run preview -- <file> (티어 0, 설치 불필요).

IFQ 앰비언트 레이어

사용자의 브랜드가 주제입니다. IFQ는 작성된 레이어입니다: 레이아웃 리듬, 따뜻한 종이, 녹 시계, 모노 필드 노트, 시그널 스파크, 조용한 URL, 편집 대비.
모든 산출물은 최소 3개의 IFQ 마크를 사용합니다. 작업이 IFQ 소유이거나 프로모션 스탬프가 필요한 애니메이션 내보내기가 아닌 한, 눈에 띄는 일반 로고나 워터마크를 붙이지 마십시오.
내장 템플릿은 중국 안전 렌더링을 위해 로컬 우선 글꼴을 사용합니다. Google Fonts 또는 CDN 런타임은 선택 사항입니다. references/font-loading.md를 참조하세요.
사용자 대상 디자인에서 Signal Spark 또는 Rust Ledger와 같은 내부 분류 레이블을 표시하지 마십시오. 대신 실제 콘텐츠를 작성하세요.

대화 패턴

패턴 A — 구체적인 요청 (가장 일반적, 한 턴): 사용자: "A vs B 비교 평가를 만들어주세요. 대상은 Stripe입니다" → 에이전트: 두 제품 사실 확인 → M-05로 라우팅 → T-compare-vs 포크 → 확인된 데이터로 채움 → 전달 → 검증.

패턴 B — 확실한 기본값 (한 턴): 사용자: "랜딩 페이지를 만들어주세요" → 에이전트: 신뢰도 >70%로 M-02 매칭 → T-hero-landing 포크 → Editorial Serif 스타일 선택 → 기본값으로 채움 → 전달 → 검증 → 주의 사항에 가정 명명.

패턴 C — 경량 어드바이저 (두 턴): 사용자: "예쁜 것을 만들어주세요" → 에이전트: 70% 초과 모드 매칭 없음 → design-direction-advisor.md 읽음 → 텍스트 전용 방향 3개 제안 → 사용자 선택 → 라우팅 → 전달.

패턴 D — 반복 개선: 사용자: "아까 그 데크의 색상을 좀 더 따뜻하게 바꿔주세요" → 에이전트: 이전 아티팩트 찾음 → 제자리 편집 → verify:lite 재실행 → 변경 사항 보고.

규칙: 턴당 1개 이상의 질문을 하지 마십시오. 나머지는 기본값을 사용하세요. 사용자가 스타일을 지정하지 않은 경우 하나를 선택하고 산출물에 명명하세요. 사용자는 반복할 수 있습니다.

오류 복구

실패	복구
요청과 일치하는 템플릿 없음	T-hero-landing을 일반 스캐폴드로 사용하고, 산출물에 차이점을 기록
`verify:lite`가 플레이스홀더를 보고함	플레이스홀더 수정, 재검증, 수정 사항 보고
`verify:lite`가 IFQ 레이블 누출을 보고함	사용자 대상 텍스트에서 내부 분류 레이블(Signal Spark, Rust Ledger 등) 제거
내보내기 명령 실패	정확한 오류 보고, 종속성 누락 시 `npm run install:export` 제안, 내보내기 존재한다고 주장하지 않음
사용자가 "AI가 만든 것 같아요"라고 말함	anti-ai-slop.md 읽기, 7단계 사전 점검 목록 적용, 리듬 변화를 더해 다시 작성
에이전트가 사실 확인 불가 (웹 액세스 없음)	확인되지 않은 주장을 산출물에서 "미확인"으로 명명, 사양을 조작하지 않음
템플릿 렌더링 실패 또는 깨져 보임	더 간단한 템플릿(T-hero-landing)으로 대체, 저하 이유 보고
요청이 스킬 범위를 벗어남	경계를 정직하게 명시, 대안 제안 (예: "이 작업은 React 프레임워크에 더 적합합니다")

안전 계약

루트 명령어는 HTML 시각적 전달 범위로 유지됩니다. 관련 없는 비밀, 호스트 구성, 영구 에이전트 또는 백그라운드 서비스를 요청하지 마십시오.
스크립트는 로컬 우선입니다: 동적 eval, 런타임 네트워크 호출, 숨겨진 설치 또는 사용자 작업 공간 외부 쓰기 없음.
필수 환경 변수는 의도적으로 비어 있습니다. 선택적 내보내기 도구는 문서화되어 있으며 사용자 의도 후에만 호출됩니다.
OpenClaw/ClawHub 메타데이터는 단일 라인 JSON metadata 필드에 있으므로 파서가 metadata.openclaw.requires.bins 및 metadata.openclaw.requires.env에서 게이트할 수 있습니다.

전달 전 검증

npm run verify:lite -- <file.html>을 실행하여 플레이스홀더 및 IFQ 레이블 누출을 확인합니다.
npm run preview -- <file.html>을 실행하고 브라우저 출력을 검사합니다.
앱 프로토타입의 경우 기본 경로, 하나의 탭/화면 전환, 하나의 세부 정보/주석 작업을 클릭합니다.
데크의 경우 PDF/PPTX 내보내기 전에 슬라이드 수와 형식 요구 사항을 확인합니다.
애니메이션 내보내기의 경우 타이밍, 오디오 정책 및 최종 파일 존재를 확인합니다.
저장소 편집 후 npm run validate 및 npm run verify:publish를 실행합니다.

참조 맵

필요	로드
첫 번째 퀵스타트, 3가지 한 줄 예제	references/quickstart.md
UI 발견 칩 및 기본 호출	agents/openai.yaml
전체 역할, 범위, IFQ 런타임 자세	references/ifq-ambient-runtime.md
사실 확인, 브랜드 자산, 제품/UI 이미지	references/fact-and-asset-protocol.md
주니어 디자이너 케이던스, 변형, 플레이스홀더, 안티-슬롭	references/designer-operating-principles.md, references/anti-ai-slop.md
모호한 프롬프트 -> 3가지 디자인 방향	references/design-direction-advisor.md, references/design-styles.md, references/ifq-native-recipes.md
종단 간 작업 워크플로, 예외, 내보내기	references/delivery-workflow.md, references/workflow.md, references/verification.md
에이전트 상호 작용 프로토콜, 결정 트리, 상태 머신	references/agent-interaction-protocol.md
스킬 개선, 평가 범위, 기여 규칙	references/killer-skill-playbook.md, evals/evals.json, CONTRIBUTING.md, SECURITY.md
OpenClaw / ClawHub / skills.sh 게시 자세	references/marketplace-quality.md, references/skill-leaderboard-lessons.md, references/smoke-test.md
런타임 설치 및 도구 매핑	references/agent-compatibility.md
React/Babel 단일 파일 규칙	references/react-setup.md
슬라이드 및 편집 가능한 PPTX	references/slide-decks.md, references/editable-pptx.md
모션/비디오/오디오	references/animation-pitfalls.md, references/animation-best-practices.md, references/audio-design-rules.md, references/sfx-library.md
IFQ 아이덴티티 자산	references/ifq-brand-spec.md, assets/ifq-brand/BRAND-DNA.md

완료 규칙

요청을 충족하는 가장 작은 검증된 아티팩트를 전달하십시오. 출력 파일, 실행된 검증 명령어 및 모든 주의 사항을 보고하십시오. 관련 검사가 실제로 통과하지 않는 한 내보내기, 스크린샷 또는 마켓플레이스 안전을 주장하지 마십시오.

peixl/ifq-design-skills

ifq-design-skills란 무엇인가요?

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

문서