디자인 스킬
디자인 스킬은 디자인 관련 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.mdcontent-page.md- 에디토리얼 / 문학 페이지
portfolio.mdlanding-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(있는 경우) - 대상 시나리오에 대한 일반적인 패턴
누락된 정보로 인해 결과가 다음과 같이 될 경우 설명 질문을 하십시오:
- 사용할 수 없음
- 생성 불가능
- 법적 또는 브랜드 위험
- 사용자의 의도와 명백히 일치하지 않음
충분한 정보가 있을 때, 합리적인 첫 번째 버전을 생성하고 사용자가 선택한 영역 댓글, 로컬 매개변수 편집, 후속 요청 또는 내보내기를 통해 이를 개선하도록 하십시오.
창의적 콘텍스트 완료
개방형 생성을 위해, 빌드 전에 짧은 창의적 콘텍스트를 침묵 속에 완료하십시오(각각 한 문장; 사용자의 것이 있으면 사용하고, 그렇지 않으면 시나리오/청중/콘텐츠/참조에서 추론; 유용하지 않으면 표시하지 마십시오):
Creative Context
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: 크게/지배적으로 만드는 ONE 요소 (예: 뷰포트 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: 큰 타입과 깊은 네거티브 공간.
1단계 제품 가정
대부분의 사용자가 고급 디자인 컨텍스트를 제공하지 않는다고 가정하십시오 — 아닙니다 Figma 파일/MCP, 성숙한 디자인 시스템, 토큰, 컴포넌트 라이브러리, 브랜드 가이드라인
…
[번역 잘림]