Sebasm2kuy/trazabilidad

Design Skill

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

다음 내용을 결정합니다.

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

Design Skill은 작게 유지되어야 합니다.

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

기본 첫 번째 단계 결과물은 디자인 아티팩트이며, 일반적으로 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`를 실행합니다.

우선순위 채우기가 중요한 이유: 차원이 실제로 비어 있을 때만 제약 조건을 로드합니다. — 아이콘을 제공한 것이 없으면 아이콘 제약 조건을 읽고, 색상을 제공한 것이 없으면 색상 제약 조건을 읽습니다. 이렇게 하면 스킬이 가벼워지고 매번 모든 규칙을 덤프하지 않습니다.

성숙한 시스템 폴백

인터페이스 / 절제 장면(제품 프로토타입, 대시보드, 관리자 패널, 웹 도구, 설정/양식/온보딩/체크아웃, 데이터 중심 인터페이스, 일반 기업/공지 페이지)의 경우 자유로운 취향 대신 성숙한 시스템에 의존합니다. 사용자가 분위기 단어를 제공했는지 여부는 중요하지 않습니다. 장면(및 분위기 단어)을 mood 태그를 통해 design-systems/style-skills 항목으로 해결하고 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를 발명하지 마십시오.
• 창의적 장면(랜딩, 포트폴리오, 캠페인, 카드, 콘텐츠): "<시스템>의 <특성> 참조, 원본 레이아웃" 또는 "원본 방향: <한 줄>". 둘 다 유효합니다. "원본"은 합법적인 소스입니다. 요점은 라이브러리를 고려했다는 것입니다.
• 모든 장면 + 명명된 브랜드 → "brand-inspiration의 <brand> 지향".

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

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

표현적 장면의 경우, 코딩 전에 자동으로 확정합니다. 각 항목은 구체적인 요소 + 동작이며, 형용사는 금지됩니다("대담한/고급스러운/놀라운/역동적인"은 아무것도 제약하지 않으므로 사용 금지):

시각적 확정 (표현적 장면에만 해당)
1. hero_subject: 크게/지배적으로 만들어진 단일 요소 (예: 제품명 '桂花酪酪'을 뷰포트의 1/3 크기로, 금색+주홍색)
2. entrance: 어떤 요소가 어떻게 애니메이션으로 나타날지 (예: 제목 문자가 스태거 인 + 꽃잎이 위에서 떨어짐)
3. break_symmetry: 레이아웃이 중앙/그리드를 깨는 곳 (예: 가격표가 오른쪽 아래로 비스듬히, 인장이 가장자리에서 넘쳐나감)
4. focal_contrast: 시선이 가장 먼저 닿게 하는 요소 (크기 변화 / 색상 블록 / 히어로 주변 여백)

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

예시 (인라인)

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

첫 번째 단계 제품 가정

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

…

[번역을 위해 잘림]