본문으로 건너뛰기
cccskills
무료GitHub에 공개

deck-open-slide-canvas

Create slides on a fixed 1920×1080 canvas, choosing each layout to suit the content. Consistent typography, one palette, and a single focal point per slide shape the presentation, with keyboard navigation and page numbers included.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

锁死 1920×1080 画布, React 组件级自由组合, 不绑模板

nexu-io/html-anything
설치 방법 보기

이럴 때 유용합니다

  • Building a portfolio presentation
  • Designing a talk with varied slide layouts
  • Preparing slides for an art or design class
  • Highlighting one quote, number, or image per slide

포함된 파일(3)

  • SKILL.md2.9 KB
  • example.html2.3 KB
  • example.md192 B

SKILL.md(원문)

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

【模板: 1920 画布自由 Deck】 【意图】不想被模板束缚的场景 (个人作品集、奇特演讲、艺术 / 设计课 deck)。给一个固定 1920×1080 画布 + 极强的类型 / 调色约束, 让 agent 像写 React 组件一样按内容自由排布每一页。Inspired by 1weiho/open-slide。

【硬性技术规格】

  • 画布: 每页严格 width: 1920px; height: 1080px; 用 transform: scale(...) 适配视窗 (默认 scale(0.7) 居中)。
  • 绝对禁止 overflow: 每页内容必须 fit in 1920×1080, 不许滚动条出现。
  • 字号 type scale (px): 2xs:18 · xs:22 · sm:28 · md:36 · lg:48 · xl:64 · 2xl:88 · 3xl:120 · 4xl:160 · 5xl:220。
  • 边距 padding: 96 / 128 / 160 三档之一。
  • 每页有 <section class="slide" data-slide-id="<n>">。

【调色板 — 每个 deck 选 1 套, 全程不改】

  • 🌫 Ash & Lime — bg #f1efea, ink #161616, accent #c5e803。
  • 🌌 Sea Indigo — bg #0a0e1a, ink #f5f5f7, accent #5ac8fa。
  • 🧉 Mate Mocha — bg #1a1411, ink #f5e9d6, accent #d97757。
  • 🌸 Pearl Rose — bg #fdf6f3, ink #1a1015, accent #ff5d8f。

【布局自由度 — 这是核心】

  • 不强制模板, 每页根据内容性质自选布局: cover / question / quote / image-text / 三列 / 五列 / 列表 / 数据卡 / 满版图。
  • 但每页必须遵守一条规则: 视觉重心 (visual hierarchy) 只有 1 个 — 一句金句、一个数字、一张图, 不要"什么都强调"。
  • 不许塞两段平等的文字; 真要并列就上 3 列等权重网格。

【字体】

  • 西文: Inter Tight (display) + Inter (body); 或 Source Serif Pro (editorial 风时)。
  • 中文: Noto Sans SC (sans 风) 或 Noto Serif SC (editorial 风); 不混 sans + serif。
  • mono: JetBrains Mono 给数据 / 时间戳。

【设计细节】

  • 严禁 emoji 装饰 (内容里的允许); 严禁多色彩虹; accent 只用一个色。
  • 严禁 SVG icon 套用 lucide / feather 等通用库 (自己写 inline SVG)。
  • 加键盘 ← / → 切换 + hash 同步; 角标固定: 右下 №N/M, 左下 deck title。
  • 必须用用户的真实内容; 严禁 lorem ipsum。
  • 单文件 HTML; Tailwind CDN; 不要外链图片。

리뷰

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

댓글

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

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

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

article-magazine

무료

Format long articles for blogs and newsletters with a magazine-style layout inspired by Substack and Medium. A centered text column, contrasting headings, styled quotations, and labeled code blocks give readers clear visual cues throughout the page.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Formatting a long blog article
  • Preparing an essay or newsletter for publication
  • Laying out articles with quotations and code examples
nexu-io/html-anything9.2천2026년 10월 13일 업데이트

article-sketchnote-editorial

무료

Turn a concept’s origins into a magazine-style visual story. Six distinct layouts combine diagrams, annotations, and typography to trace a concrete problem through failed attempts and a turning point, revealing the concept’s name at the end.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Illustrating how a concept emerged
  • Creating visual learning materials about failed attempts
  • Presenting a concept’s history as a magazine feature
nexu-io/html-anything9.2천2026년 10월 13일 업데이트

blog-post

무료

Create magazine-style pages for long blog posts, essays, and case studies. The layout combines readable single-column text with a prominent title, captioned figures, highlighted quotations, author details, and related article cards.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Designing a long-form blog page
  • Presenting an essay with magazine-style typography
  • Laying out a case study with figures and quotations
nexu-io/html-anything9.2천2026년 10월 13일 업데이트

card-twitter

무료

Create a landscape card for an X post, featuring a short quote, insight, or data point. The layout combines prominent text with attribution, a handle, a category label, and a brand watermark.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Sharing a quote with author attribution on X
  • Highlighting a data point in a social post
  • Creating branded cards for short insights
nexu-io/html-anything9.2천2026년 10월 13일 업데이트

card-xiaohongshu

무료

Create a series of Xiaohongshu-style knowledge cards with a cover, focused content cards, and a closing summary. Soft colors, large text, and spacious layouts make the cards suitable for mobile reading and screenshots for social posts.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Turn practical tips into a series of social media cards
  • Explain one key idea per card for mobile readers
  • Prepare card layouts for social post screenshots
nexu-io/html-anything9.2천2026년 10월 13일 업데이트

competitive-teardown

무료

Turn supplied competitor research into a product strategy report. Compare positioning, features, pricing, and user feedback, then identify opportunities and propose actions for the next 30, 90, and 180 days, while marking missing evidence.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Comparing competitors to guide product decisions
  • Reviewing pricing and plan differences
  • Turning research notes into a strategy report
nexu-io/html-anything9.2천2026년 10월 13일 업데이트

nexu-io의 스킬 모두 보기

이 스킬의 문제 신고