디자인 스킬은(는) 무엇을 하나요?
디자인 스킬은 디자인 관련 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에 속합니다.
기본 첫 번째 단계 산출물은 디자인 아티팩트이며, 일반적으로 선택한 아티팩트 스킬 또는 내보내기 대상이 고정 이미지, 데크, 패키지 또는 디자인 시스템 사양을 요구하지 않는 한 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(있는 경우) - 대상 시나리오의 일반적인 패턴
다음과 같은 경우 누락된 정보로 인해 결과가 손상될 수 있을 때 명확성 질문을 하십시오:
- 사용할 수 없음
- 생성 불가능
- 법적 또는 브랜드 위험
- 사용자의 의도와 명백히 일치하지 않음
충분한 정보가 있는 경우 합리적인 첫 번째 버전을 생성하고 사용자가 선택한 영역 댓글, 로컬 매개변수 편집, 후속 요청 또는 내보내기를 통해 개선할 수 있도록 하십시오.
창의적 맥락 완성
개방형 생성을 위해 빌드하기 전에 다음의 짧은 창의적 맥락(각각 한 문장; 사용자가 제공한 경우 사용하고, 그렇지 않으면 시나리오/대상/콘텐츠/참조에서 추론하며, 유용하지 않으면 표시하지 않음)을 조용히 완성하십시오:
창의적 맥락
1. creative_positioning: 문자 그대로의 요청 너머 이 내용이 실제로 의미하는 것
2. first_impression: 뷰어가 처음 3초 동안 느껴야 할 것
3. anti_default: 피해야 할 일반적인 기본값
아티팩트는 이를 명확히 반영해야 합니다.
생성 전에 한 줄의 디자인 읽기 진술
그런 다음 요청을 어떻게 읽었는지 명명하는 명시적인 한 줄을 확정하십시오:
형식: "다음과 같이 읽습니다: <페이지 종류> for <대상>, <특성/분위기>, <디자인 방향 / 시스템 / 참조>를 지향합니다."
- "다음과 같이 읽습니다: 기술 구매자를 위한 SaaS 랜딩 페이지, 차분하고 정확함, 절제된 Linear와 유사한 시스템을 지향합니다."
- "다음과 같이 읽습니다: 젊은 소비자를 위한 国潮 차 브랜드 캠페인, 대담하고 축제적임, 큰 타이포그래피 + 강한 색상, 표현적임을 지향합니다."
- "다음과 같이 읽습니다: 내부 관리자 대시보드, 절제되고 읽기 쉬움, 성숙한 디자인 시스템 기준선을 지향합니다."
사용자에게 표시될 수 있습니다. 하나의 축이 진정으로 모호한 경우 추측 대신 여기에서 집중된 질문을 하십시오.
디자인 읽기는 스타일 소스 절로 끝나야 합니다. 필수이며, 하나를 선택하고 절대 비워 두지 마십시오:
- 인터페이스 장면 (프로토타입, 정보-대화형, 웹 도구, 대시보드/관리자): 시스템 이름 지정 —
"<스타일-스킬>을 지향합니다(mood 태그에서 일치)", 또는 브랜드가 명명된 경우"<brand-inspiration>에서 <브랜드>를 지향합니다". 기본적으로 성숙한 시스템을 사용하고 처음부터 UI를 발명하지 마십시오. - 창의적 장면 (랜딩, 포트폴리오, 캠페인, 카드, 콘텐츠):
"<시스템>의 <특성> 참조, 원본 레이아웃"또는"원본 방향: <한 줄>"중 하나. 둘 다 유효합니다. "원본"은 합법적인 소스입니다. 포인트는 라이브러리를 고려했다는 것입니다. - 모든 장면 + 명명된 브랜드 →
"<brand-inspiration>에서 <브랜드>를 지향합니다".
그런 다음 장면을 분류하고 표현적 장면의 경우 구체적인 시각적 계획을 확정합니다.
- 표현적 (브랜드 사이트, 캠페인/프로모션, 포트폴리오, 제품 랜딩 히어로, 사설/문화 기능, 소셜 커버): 시각적 영향력이 작업의 일부입니다. 정확하지만 안전한 중앙 정렬 페이지는 실패입니다.
- 절제된 (대시보드, 관리자, 내부 도구, 양식, 정부 공지, 보고서, 데이터 테이블, 사양): 명확성과 차분함이 작업입니다. 모션을 최소화하고 레이아웃을 규칙적으로 유지하며 아래의 시각적 확정을 건너뜁니다.
표현적 장면의 경우 코딩 전에 조용히 확정하십시오. 각 항목은 구체적인 요소 + 동작이며 형용사("대담한/프리미엄/놀라운/역동적인"은 금지되며 아무것도 제약하지 않음)가 아닙니다:
시각적 확정 (표현적 장면 전용)
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: 깊은 네거티브 공간에 대한 큰 타이포그래피.
첫 번째 단계 제품 가정
대부분의 사용자가 고급 디자인 컨텍스트를 제공하지 않는다고 가정합니다. 아니요 Figma 파일/MCP, 성숙한 디자인 시스템, 토큰, 컴포넌트 라이브러리, 브랜드 가이드라인
…
[번역을 위해 잘림]