복고풍 픽셀 스타일의 세 장면 영상을 Hyperframes용 HTML로 만듭니다. 제목과 색상을 바꾸고 장면 전환과 움직임을 갖춘 구성으로 완성합니다.
- 픽셀 스타일의 소개 영상을 만들 때
- 세 장면 영상의 내용을 교체할 때
- HTML에서 장면 전환을 확인할 때
nexu-io/open-design10.3만2026년 10월 21일 업데이트
무료GitHub에 공개한국어 소개
article-magazine
Markdown이나 메모를 잡지 스타일의 긴 HTML 기사로 정리합니다. 큰 제목과 단일 열 본문에 인용문 및 코드 전용 스타일을 적용합니다.
원문원문 설명 보기
Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
이럴 때 유용합니다
- Markdown을 잡지 스타일 기사로 만듭니다
- 메모를 에세이로 정리합니다
- 긴 뉴스레터를 디자인합니다
- 인용문과 코드가 있는 기사 서식을 정리합니다
한국어 소개
할 수 있는 일
article-magazine은 Markdown이나 메모를 잡지 스타일의 긴 HTML 기사로 정리합니다. 맨 위에 큰 제목을 두고 필요에 따라 부제, 작성자, 예상 읽기 시간과 날짜를 덧붙입니다. 본문은 최대 너비 약 700px로 중앙에 배치하며, 소제목에는 세리프 서체를 사용해 본문과 구분합니다. Huashu / huashu-md-html에서 영감을 받은 기사 레이아웃입니다.
이럴 때 유용합니다
블로그, 에세이, 뉴스레터처럼 분량이 있는 글을 읽기 좋은 형태로 공개할 때 적합합니다. 인용문에는 색상이 있는 굵은 왼쪽 테두리와 기울임꼴을 적용합니다. 코드 블록은 어두운 배경에 언어 이름을 표시하므로 인용문이나 코드가 포함된 기사에서도 내용의 종류를 구분할 수 있습니다.
사용 예시
- “이 Markdown을 큰 제목과 읽기 편한 본문 너비를 갖춘 잡지 스타일 HTML 기사로 만들어 주세요.”
- “이 메모를 기사로 정리하고 인용문과 코드 블록의 모양도 통일해 주세요.”
절 사이에는 장식용 구분선을 배치하고 글 끝에는 공유를 권하는 간단한 카드를 붙입니다. 실제 내용과 데이터를 사용하는 것이 전제입니다.
주의 사항
특별한 주의 사항은 없습니다.
이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.
객관 평가
AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.
- 지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가
- A양호Markdown이나 메모를 긴 HTML 기사로 변환하는 용도와 레이아웃이 명시되어 있습니다.
- 절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가
- A양호본문 너비 약 700px와 제목, 인용문, 코드, 구분선, 문말 카드의 규격이 있습니다.
- 안전성전송·삭제·명령 실행 등을 명시하고 있는가
- A양호HTML 표시 규격을 다루며 외부 전송, 삭제, 인증 정보 읽기 지시는 없습니다.
- 도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가
- A양호디자인 시스템이 필요 없다고 명시하며 추가 도구나 API 키는 지정하지 않습니다.
총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.
평가가 다르다고 생각되면 재검토를 요청하기
포함된 파일(3)
- SKILL.md2.5 KB
- example.html7.0 KB
- example.md2.0 KB
SKILL.md(원문)
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
【模板: 杂志文章】
- 顶部 hero: 大标题 (text-5xl/6xl) + 可选副标题 + 作者 / 阅读时间 / 日期元数据。
- 正文: 单栏, 最大宽度约 700px, 居中。段落
text-lg leading-relaxed text-neutral-700 dark:text-neutral-300。 - H2 / H3 标题用 serif 字体, 让正文与标题有视觉对比。
- 引用块使用左侧粗 accent 色边线 + 斜体。
- 代码块: 圆角 + 深色背景 + 浅色文字, 显示语言标签。
- 列表项使用自定义 bullet（小方块 / accent 圆点）。
- 章节之间用
<hr>分隔, 但样式做成中央居中的小 ornament。 - 文末加一个简单的 "如果觉得有用，欢迎转发" 行动卡片。
리뷰
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
댓글
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
같은 저장소의 스킬
소셜 미디어 광고와 검색 광고의 제목, 설명, 본문을 작성하고 표현을 반복해서 수정합니다. 광고 문구 후보를 준비하고 개선안을 검토할 때 활용합니다.
- 소셜 미디어 광고 제목을 작성합니다
- 검색 광고 설명을 준비합니다
- 광고 본문 표현을 검토합니다
nexu-io/open-design10.3만2026년 10월 21일 업데이트
어두운 배경과 세리프 글꼴로 패션 잡지 같은 세 페이지 동적 연출을 만듭니다. 글자 단계 표시와 장면 전환을 포함한 단일 HTML 파일로 출력합니다.
- 패션 잡지 분위기의 움직이는 소개 제작
- 짧은 이야기를 세 페이지로 표현
- 기존 브랜드 표현을 어두운 지면에 적용
nexu-io/open-design10.3만2026년 10월 21일 업데이트
브라우저에서 페이지를 살펴보고 클릭, 입력, 화면 캡처, 정보 추출을 수행합니다. OpenDesign의 로컬 미리보기를 중심으로 웹 앱의 동작과 품질을 확인합니다.
- OpenDesign 미리보기를 확인합니다
- 웹 앱의 클릭과 입력을 테스트합니다
- 페이지나 요소의 화면을 캡처합니다
nexu-io/open-design10.3만2026년 10월 21일 업데이트
AI 음악 앨범의 콘셉트 구상부터 가사 초안, 곡 순서 검토, 내보내기까지 다룹니다. 독립 제작 실험과 브랜드 음악 기획에 활용합니다.
- 독립 제작 앨범 기획
- 앨범 주제에 맞는 가사 초안 작성
- 수록곡 순서 검토
nexu-io/open-design10.3만2026년 10월 21일 업데이트
p5.js에서 계산 규칙과 난수로 생성 예술을 만듭니다. 난수의 초깃값을 고정해 같은 그림을 재현하며, 포스터와 동적인 느낌의 정지 이미지, 구도 시안 제작에 활용합니다.
- 규칙을 바탕으로 포스터를 제작합니다
- 움직임이 느껴지는 정지 이미지를 만듭니다
- 예술 작품의 구도를 시험합니다
nexu-io/open-design10.3만2026년 10월 21일 업데이트