antilsabh789-pixel/kabaddi-pro

디자인 스킬

디자인 스킬은 디자인 관련 HTML 아티팩트 작업을 위한 라우터입니다.

다음을 결정합니다.

• 작업이 디자인과 관련되었는지 여부
• 어떤 아티팩트 스킬이 주가 되어야 하는지
• 작업이 design-system-reference.md를 사용해야 하는지 여부
• 작업이 design-system-generation.md를 사용해야 하는지 여부
• 작업이 export.md를 사용해야 하는지 여부
• 작업 전에 얼마나 많은 명확화가 필요한지
• 라우팅 전에 요청을 빠르게 읽는 방법("생성 전" 참조)
• 내장된 디자인 품질 기본값을 적용하는 방법
• 생성된 HTML을 향후 편집을 위해 구조화된 상태로 유지하는 방법

디자인 스킬은 작게 유지되어야 합니다.

아티팩트별 구조 규칙은 아티팩트 스킬 파일에 속합니다. 시나리오에 대한 비즈니스 판단은 해당 시나리오 스킬 내에 있습니다. 횡단적 제작 규칙은 horizontal-craft/에 속합니다. 참조 선택은 design-system-reference.md에 속합니다. DESIGN.md 가져오기/추출/유지는 design-system-generation.md에 속합니다. 내보내기/패키징/전달은 export.md에 속합니다.

기본 1단계 결과물은 디자인 아티팩트이며, 일반적으로 HTML입니다. 단, 선택한 아티팩트 스킬이나 내보내기 대상이 고정 이미지, 데크, 패키지 또는 디자인 시스템 명세를 요구하는 경우는 예외입니다. 내보내기는 사용자가 현재 아티팩트를 패키징, 다운로드, 변환 또는 전달하도록 요청할 때 호출됩니다.

흐름 (한 번 읽으면 아래 모든 것을 지배합니다)

전체 스킬은 하나의 흐름입니다. 대부분은 내부적이며 즉시 수행됩니다. 요청이 진정으로 모호할 때만 멈춥니다. 어떤 단계도 작성해야 할 양식이나 먼저 읽어야 할 파일로 바꾸지 마십시오.

사용자 요청
   │
   ▼
1. 이해 (내부적, 명확한 요청은 묵시적) — 세 가지 축을 병렬로 해결:
     • 콘텐츠 — 주제, 정보, 목표
     • 시나리오 — 형식 + 의도 → 해당 시나리오 스킬 (라우팅 참조)
     • 스타일 — 어떤 종류의 스타일 큐(있는 경우) (스타일 라우팅 참조)
   세 축 모두 명확 → 진행. 오직 한 축만 진정으로 모호 → 하나의 집중된 질문.
   개방형/창의적 요청의 경우 이해에는 운영적 축뿐만 아니라 창의적 독해도 포함됩니다.
   — 창의적 맥락 + 디자인 독해 완료 (참조: §창의적 맥락 완성).
   │
   ▼
1.5 템플릿 확인 (요청받은 경우에만이 아니라 기본적으로 수행)
   `design-templates/INDEX.md`를 이동통신사 + 시나리오별로 스캔하여 요청과 일치하는 항목 찾기.
     • 명확한 일치 → 시작점으로 채택; 해당 템플릿의 SKILL.md 읽기. 일치하는 템플릿을
                      사용하면 일반적으로 품질이 향상됩니다. 처음부터 디자인하는 것보다 선호하십시오.
     • 적합한 템플릿 없음 → 시나리오 스킬로 직접 진행. 적합하지 않은 템플릿을 강요하지 마십시오.
   템플릿은 페이지를 복제하는 것이 아니라 시작 구조/뼈대입니다. 사용자의 실제 콘텐츠를 유지하고,
   시나리오 스킬 + 횡단적 제작을 적용하며, 참조의 정확한 레이아웃 지문을 복사하지 마십시오.
   │
   ▼
2. 우선순위별 스타일 채우기 (차원별: 색상 · 서체 · 레이아웃 · 아이콘 · 간격 토큰)
   각 차원에 대해 해당 차원을 다루는 가장 높은 우선순위 소스에서 가져옵니다.
     1) 사용자의 즉각적인 설명   ← 가장 높음; 설명이 다루는 차원은 고정됨
     2) 디자인 시스템 (DESIGN.md) ← 사용자가 언급하지 않은 차원을 채움
     3) 템플릿 / 시드             ← 남은 부분을 채움 (특히 레이아웃 스캐폴드)
     4) 병렬 제약 조건           ← 여전히 비어 있는 차원에 대한 대체
        (필요한 것만 로드: 서체 / 아이콘 / 색상 / 접근성 …)
   소스는 결합됩니다. (예: 디자인 시스템 토큰 + 템플릿의 레이아웃은 일반적입니다.)
   스타일 큐는 명명된 시스템이 아니라 모호한 분위기 단어입니다 ("清新/简约/高级/科技感/复古/温暖/极简/
   赛博" 등): 무작정 모양을 연상하지 말고 라이브러리에 매핑하십시오.
   `design-systems/style-skills` 색인(및 브랜드 `index.json`)을 읽고 해당 항목의 `mood` /
   `formality` / `scheme` 태그가 단어에 가장 잘 맞는 항목을 선택한 다음 기준으로 사용하십시오. 스타일 태그는
   사용자의 형용사와 구체적인 시스템 간의 다리입니다 (예: 清新简约 → 极简/克制 → `minimal`/`clean`;
   高级 → 奢华/克制 → `luxury`/`refined`; 科技感 → 技术感/未来 → `futuristic`/`hud`). 라이브러리에
   분위기에 맞는 항목이 없을 때만 처음부터 디자인하십시오.
   스타일 큐가 전혀 없고 + 장면이 절제되어 있거나 / 창의성 중심이 아닌 경우 (도구, 대시보드, 관리자,
   양식, 보고서, 공지, 일반 SaaS/기업 페이지): 처음부터 스타일을 디자인하지 **마십시오** —
   `design-systems/`에서 성숙한 기준을 적극적으로 선택하십시오 (성숙한 시스템 대체 참조) 그래야
   결과가 전문적이고 일관됩니다. (독특한 모양을 원하는 표현적 장면은 이 단계를 건너뛰고
   §창의적 맥락에 따라 대담하게 진행합니다.)
   충돌: 사용자의 설명이 특정 차원에서 디자인 시스템과 모순되는 경우,
   해당 차원에서는 사용자가 우선합니다. — 그리고 그 사실을 한 줄로 말하십시오.
   ("요청하신 대로 <X>로 만들었습니다. 이것은 첨부된 디자인 시스템과 다릅니다 —
    시스템 방향을 유지하고 싶다면 알려주십시오.")
   │
   ▼
3. 시나리오 스킬의 판단 + 채워진 스타일을 사용하여 구축.
   │
   ▼
4. 품질 관문 — 전달하기 전에 얇은 최종 체크리스트로 `quality-gate.md`를 실행하십시오.

우선순위 채우기가 중요한 이유: 차원이 실제로 비어 있을 때만 제약 조건을 로드합니다. — 아무것도 아이콘을 제공하지 않은 경우에만 아이콘 제약 조건을 읽고, 아무것도 색상을 제공하지 않은 경우에만 색상 제약 조건을 읽습니다. 이렇게 하면 모든 규칙을 매번 덤프하는 대신 스킬을 가볍게 유지할 수 있습니다.

성숙한 시스템 대체

인터페이스 / 절제된 장면 (제품 프로토타입, 대시보드, 관리자 패널, 웹 도구, 설정/양식/온보딩/체크아웃, 데이터 중심 인터페이스, 일반 기업/공지 페이지)의 경우, 자유로운 취향 대신 성숙한 시스템에 의존하십시오. 사용자가 분위기 단어를 제공했는지 여부와 관계없이. 장면(및 분위기 단어)을 design-systems/style-skills 항목의 mood 태그를 통해 해결하고 UI 기준으로 채택하십시오. 인터페이스 성숙도가 목표입니다. 실제 시스템은 구조, 구성 요소 규율, 간격 리듬, 상태 동작 및 상호 작용 관례를 제공합니다.

이것을 창의적 / 표현적 장면에는 적용하지 마십시오:

• social-card.md
• content-page.md
• 사설 / 문학 페이지
• portfolio.md
• landing-page.md 및 표현적 브랜드/스토리/라이프스타일 페이지

이러한 장면의 경우 아티팩트 스킬 자체의 시각적 판단 + 횡단적 제작 + 창의적 맥락에서 디자인하십시오. 시스템의 특성을 참조할 수는 있지만 (명명된 브랜드는 항상 brand-inspiration을 로드함), UI 키트로 밀어넣어서는 안 됩니다. 모든 아티팩트가 일반 UI 키트처럼 보이게 해서는 안 됩니다.

---

2단계(스타일 채우기)를 공급할 수 있는 컨텍스트 소스: 사용자 콘텐츠, 스크린샷, 선택한 템플릿/시드, 업로드된 DESIGN.md, 현재 아티팩트, 브랜드 자산, 기존 페이지, 디자인 시스템/UI 키트 또는 Figma/코드베이스 참조. 있는 것을 사용하십시오. 다른 어떤 것도 다루지 않는 차원에 대해서만 병렬 제약 조건 파일을 읽으십시오.

1. 먼저 이해하기

이 부분은 "무엇을 하기 전에 무엇을 명확히 할지"를 결정합니다. 대부분의 경우 내부화되어 즉시 완료됩니다. 진정으로 모호할 때만 한 문장을 묻습니다.

역할

이 에이전트는 디자인 지향적입니다.

일반적인 UI 생성기가 아닙니다. 모든 아티팩트에 디자인 판단을 가져와야 합니다.

디자인 지향 에이전트는 다음을 수행해야 합니다:

• 아티팩트가 무엇을 위한 것인지 이해
• 사용자가 무엇을 먼저 주목해야 하는지 결정
• 제자리를 차지하지 않는 요소 제거
• 일반적인 취향에 의존하기 전에 참조 사용
• 나중에 편집할 수 있도록 구조 유지
• 유용하고 편집 가능하며 의도적인 아티팩트 생성

목표는 더 많은 인터페이스를 생성하는 것이 아닙니다. 목표는 사용자가 유용한 것을 의사소통, 테스트, 게시, 발표 또는 전달하는 데 도움이 되는 디자인 아티팩트를 만드는 것입니다.

---

콘텐츠 언어

생성된 HTML 콘텐츠의 언어는 사용자가 명시적으로 달리 요청하지 않는 한 사용자의 대화 언어와 일치해야 합니다.

규칙:

• 사용자가 중국어로 작성하는 경우, 아티팩트의 모든 표시 텍스트(제목, 본문, 레이블, CTA, 마이크로카피, 내비게이션, 플레이스홀더, 대체 텍스트)는 중국어여야 합니다.
• 사용자가 영어로 작성하는 경우, 영어 콘텐츠를 생성하십시오.
• 사용자가 혼합 언어로 작성하는 경우, 기본 콘텐츠는 요청의 지배적인 언어를 따르고, 자연스러운 경우 혼합 패턴을 유지하십시오 (예: 제품명, 기술 용어).
• 이 규칙은 모든 시나리오에 적용됩니다: 랜딩 페이지, 포트폴리오, 데크, 콘텐츠 페이지, 프로토타입, 웹 도구 및 향후 모든 시나리오.
• <html lang>은 콘텐츠 언어와 일치해야 합니다 (zh-CN, en, ja 등).
• 미리 설정된 템플릿을 적용할 때 템플릿의 플레이스홀더 텍스트를 올바른 언어의 콘텐츠로 바꾸십시오. 콘텐츠 언어가 영어가 아닌 경우 템플릿의 원래 영어 플레이스홀더를 유지하지 마십시오.
• 중국어 / CJK 콘텐츠가 감지되면 (이 규칙 또는 사용자 요청에 의해) 공유 참조로 horizontal-craft/chinese-typography.md도 로드하십시오. 글꼴 철칙(해당 파일을 읽기 전에도 적용됨): font-family에 명명된 비시스템 글꼴은 실제로 로드되어야 하며 (<link> 또는 @font-face), 중국어를 포함하는 페이지는 font-family에 CJK 글꼴 이름을 가져야 합니다. — 라틴 글꼴이 system-ui로 바로 떨어지도록 하지 마십시오. 그렇지 않으면 중국어가 제어되지 않는 대체 글꼴로 렌더링됩니다. 글꼴 선택/로딩 세부 사항: horizontal-craft/fonts.md.

대화가 진정으로 모호하지 않은 한 (예: 사용자가 명확한 지배 언어 없이 이중 언어 브리프를 보내는 경우) 사용자에게 콘텐츠 언어를 확인하도록 요청하지 마십시오.

---

핵심 원칙

행동을 기본으로 하지만 맹목적으로 디자인하지 마십시오.

선별적으로 질문을 사용하십시오. 기본적으로 긴 질문지를 묻지 말고, 결과를 실질적으로 개선할 때 간결한 명확화 질문을 하십시오. 그렇지 않으면 다음에서 합리적인 가정을 추론하십시오:

• 사용자의 요청
• 기존 작업 공간 컨텍스트
• 제공된 콘텐츠
• 제공된 참조
• 선택한 미리 설정된 HTML 템플릿(있는 경우)
• 기존 아티팩트 상태
• 업로드된 DESIGN.md(있는 경우)
• 대상 시나리오의 일반적인 패턴

누락된 정보로 인해 결과가 다음과 같을 경우 명확화 질문을 하십시오:

• 사용할 수 없음
• 생성 불가능
• 법적 또는 브랜드 위험
• 사용자의 의도와 명백히 일치하지 않음

충분한 정보가 있는 경우, 합리적인 첫 번째 버전을 생성하고 사용자가 선택 영역 주석, 로컬 매개변수 편집, 후속 요청 또는 내보내기를 통해 이를 개선하도록 하십시오.

---

창의적 맥락 완성

개방형 생성을 위해, 구축하기 전에 짧은 창의적 맥락을 묵시적으로 완성하십시오 (각 한 문장; 사용자가 제공한 경우 사용하고, 그렇지 않으면 시나리오/대상/콘텐츠/참조에서 추론; 유용하지 않으면 표시하지 마십시오):

창의적 맥락
1. creative_positioning:  문자 그대로의 요청 너머 이것이 실제로 의미하는 바
2. first_impression:      뷰어가 처음 3초 동안 느껴야 할 것
3. anti_default:          피해야 할 일반적인 기본값

아티팩트는 이를 눈에 띄게 반영해야 합니다.

생성 전 한 줄의 디자인 독해 진술

그런 다음 요청을 어떻게 읽었는지 명시하는 한 줄에 명시적으로 작성하십시오:

형식: "이것을 다음과 같이 읽습니다: <청중>을 위한 <페이지 종류>, <성격/분위기>, <디자인 방향/시스템/참조> 쪽으로 기울임."

• "이것을 다음과 같이 읽습니다: 기술 구매자를 위한 SaaS 랜딩, 차분하고 정확하며, 절제된 Linear 유사 시스템 쪽으로 기울임."
• "이것을 다음과 같이 읽습니다: 젊은 소비자를 위한 국조 차 브랜드 캠페인, 대담하고 축제적이며, 과장된 서체 + 강한 색상 쪽으로 기울임, 표현적."
• "이것을 다음과 같이 읽습니다: 내부 관리자 대시보드, 절제되고 가독성 있으며, 성숙한 디자인 시스템 기준선 쪽으로 기울임."

사용자에게 표시될 수 있습니다. 한 축이 진정으로 모호한 경우, 여기서 추측 대신 하나의 집중된 질문을 하십시오.

디자인 독해는 스타일 소스 절로 끝나야 합니다. 필수, 하나 선택, 절대 비워두지 마십시오:

• 인터페이스 장면 (프로토타입, 정보-인터랙티브, 웹 도구, 대시보드/관리자): 시스템 이름 지정 — "<style-skill> 쪽으로 기울임 (mood 태그에서 일치)", 또는 브랜드가 명명된 경우 "brand-inspiration의 <brand> 쪽으로 기울임". 성숙한 시스템을 기본값으로 선택하십시오. 처음부터 UI를 발명하지 마십시오.
• 창의적 장면 (랜딩, 포트폴리오, 캠페인, 카드, 콘텐츠): "<system>의 <character> 참조, 원본 레이아웃" 또는 "원본 방향: <한 줄>". 둘 다 유효합니다. — "원본"은 합법적인 소스입니다. 요점은 라이브러리를 고려했다는 것입니다.
• 모든 장면 + 명명된 브랜드 → "brand-inspiration의 <brand> 쪽으로 기울임".

그런 다음 장면 분류; 표현적 장면의 경우 구체적인 시각적 계획 확정

• 표현적 (브랜드 사이트, 캠페인/프로모션, 포트폴리오, 제품 랜딩 히어로, 에디토리얼/문화 기능, 소셜 커버): 시각적 영향이 작업의 일부입니다. 올바르지만 안전한 중앙 정렬 페이지는 실패입니다.
• 절제된 (대시보드, 관리자, 내부 도구, 양식, 정부 공지, 보고서, 데이터 테이블, 명세): 명확성과 평온이 작업입니다. 모션을 최소화하고, 레이아웃을 규칙적으로 유지하며, 아래의 시각적 확정을 건너뜁니다.

표현적 장면의 경우, 코딩 전에 묵시적으로 확정하십시오. 각 항목은 특정 요소 + 동작입니다. 형용사는 금지됩니다 ("대담한/프리미엄/놀라운/역동적인"은 아무것도 제약하지 않으므로 사용할 수 없습니다).

시각적 확정 (표현적 장면만 해당)
1. hero_subject:   커지거나 지배적으로 만든 하나의 요소 (예: 제품명 '桂花酪酪'을 뷰포트의 1/3 크기로, 금색+진사색)
2. entrance:       어떤 요소가 어떻게 애니메이션되는지 (예: 제목 글자가 지연되어 나타나고 꽃잎이 위에서 떨어짐)
3. break_symmetry: 레이아웃이 중앙/그리드를 깨는 위치 (예: 가격표가 오른쪽 아래로 기울어짐; 도장이 가장자리에서 벗어남)
4. focal_contrast: 눈이 먼저 닿도록 하는 것 (크기 점프 / 색상 블록 / 영웅 주변의 공백)

완전히 중앙 정렬되고, 대칭이며, 정적이며 지배적인 요소가 없는 페이지는 기본-평범한 결과입니다. — 표현적 장면의 경우 확정이 존중되지 않았음을 의미합니다. 확정된 각 항목을 실행하십시오. 모션 세부 사항 → horizontal-craft/animation-discipline.md.

예시 (인라인)

"GLM-5.1 모델 소개 웹사이트 만들기" → positioning: 추론/실행 인프라, 일반 AI 페이지가 아님; first_impression: 차분하고, 정확하며, 기술적; anti_default: 일반 AI-SaaS 히어로 + 기능 카드 템플릿 피하기. 장면: 표현적 → hero_subject: "GLM-5.1"을 크게 하고 단일 악센트로; entrance: 제목 + 태그라인이 지연되어 페이드업; break_symmetry: 사양 번호를 한쪽으로 오프셋; focal_contrast: 큰 서체와 깊은 네거티브 공간.

1단계 제품 가정

대부분의 사용자가 고급 디자인 컨텍스트를 제공하지 않는다고 가정하십시오. — Figma 파일/MCP, 성숙한 디자인 시스템, 토큰, 컴포넌트 라이브러리, 브랜드 가이드라인이 아님

…

[번역을 위해 잘림]