무료GitHub에 공개한국어 소개

swiss-creative-mode-template

굵은 제목과 기하학적 카드를 활용해 스위스 스타일의 발표형 페이지를 단일 HTML 파일로 만듭니다. 슬라이드 이동, 테마와 강조색 전환, 주석 표시도 넣을 수 있습니다.

원문원문 설명 보기

Swiss-inspired creative-mode presentation template skill with bold editorial typography, high-contrast geometric cards, interactive slide navigation, theme switching, hotspot overlays, and palette choreography in a single-file HTML artifact. Use when users ask for a premium presentation-style landing, a Swiss/brutalist deck look, or a creative launch page with rich interactions.

nexu-io/open-design

AI 평가100점/ 100 설치 방법 보기

이럴 때 유용합니다

발표 형식의 소개 페이지 제작
스위스 스타일 HTML 슬라이드 제작
조작 가능한 제품 발표 페이지 제작
테마와 주석을 전환하는 자료 제작

한국어 소개

할 수 있는 일

스위스 스타일의 타이포그래피와 기하학적 카드를 활용해 발표 자료처럼 조작할 수 있는 HTML 페이지를 만듭니다. 템플릿에는 큰 제목의 도입 화면, 네 단계 과정을 보여 주는 카드 행, 구조도 화면이 포함됩니다. 이전·다음 이동과 점 버튼 탐색, 밝은 테마와 어두운 테마 전환, 강조색 변경, 주석 겹쳐 보기를 넣을 수 있습니다.

이럴 때 유용합니다

글자의 강약과 도형으로 인상을 전달하는 랜딩 페이지나 직접 조작하며 보여 주는 발표 자료에 적합합니다. 제품 공개 페이지처럼 설명을 장면별로 나누어 전달하고 싶을 때도 활용합니다.

사용 예시

“스위스 스타일의 타이포그래피로 제품 발표용 페이지를 만들어 주세요.”
“밝고 어두운 테마와 주석 표시를 전환할 수 있는 HTML 자료로 만들어 주세요.”

주의 사항

제작에는 파일 쓰기 기능이 필요합니다. 활성 DESIGN.md의 색상, 서체, 레이아웃을 CSS 변수에 반영하고 제공된 템플릿과 점검표를 사용합니다. 결과물은 CSS와 JavaScript를 포함하는 단일 index.html 파일이며 외부 실행 라이브러리에 의존하지 않습니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호발표형 랜딩 페이지와 제품 공개 페이지에 사용할 단일 대화형 HTML 제작을 명시합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호DESIGN.md 반영, 템플릿 복사, 조작 기능 유지, 점검표 검증과 출력 형식을 구체적으로 제시합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호파일 쓰기 기능이 필요하다고 명시하고 복사 대상을 index.html로 지정합니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호DESIGN.md와 파일 쓰기 요건, 제공 파일 위치, 외부 실행 의존성이 없음을 명시합니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(4)

SKILL.md2.3 KB
assets/template.html13.1 KB
example.html3.4 KB
references/checklist.md1.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Swiss Creative Mode Template

Produce a premium Swiss/editorial-style HTML template with strong visual rhythm and meaningful interactions, then emit it as a single-file artifact.

Resource map

swiss-creative-mode-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

Read active DESIGN.md and map palette/type/layout decisions into root CSS variables.
Copy assets/template.html to index.html.
Keep this structure intact:
- Hero scene with bold title and geometric frame.
- Four-step process card row.
- Stack/architecture diagram scene.
Keep these interactions working:
- Prev/next slide navigation + dot nav.
- Theme toggle (paper/dark).
- Palette cycle button (changes accent colors across the template).
- Hotspot toggle for annotations/details.
Keep output self-contained (<!doctype html>, inline CSS/JS, no external runtime dependency).
Validate against references/checklist.md before emitting.

Output contract

One short sentence before artifact, then:

<artifact identifier="swiss-creative-mode" type="text/html" title="Swiss Creative Mode Template">
<!doctype html>
<html>...</html>
</artifact>

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬