Communitygithub.com

aurora-ember-bio-lab/splatstudio

打造雙頁數位電子指南預覽——封面(展示標題、作者、「內含亮點」統計、目錄預覽)與內頁跨頁(課程正文搭配側引文與步驟清單)。適合生活風格/創作者品牌調性。當需求提及「電子指南」、「數位指南」、「型錄」、「磁鐵式導引」、「創作者手冊」、「劇本」、「PDF 指南」或「电子指南」時使用。

splatstudio 是什麼?

此技能專用於生成雙頁數位電子指南預覽(以 HTML 呈現),模擬雜誌擺放在桌面上的視覺效果。第一頁為封面,包含醒目字型標題、作者行、統計資料列、「內容一覽」表格(含章節與頁碼)及頁尾;第二頁為內頁跨頁,包含章節標題、兩欄佈局(正文與編號步驟清單)、側引文(支援拉丁語系、阿拉伯語、波斯語、烏爾都語與希伯來語的排版差異),以及「練習」區塊。本技能會根據提供的 DESIGN.md 自動選用襯線字型、標題字型與等寬字型,並維持編輯式層級結構與留白節奏。產出為單一 HTML 檔案,內含行內 CSS,並使用 data-od-id 屬性標記關鍵區塊,方便進行 QA 驗證。這項技能特別適合創作者品牌、線上課程提供者、電子書作者或行銷人員,他們需要快速產出可供展示的數位指南預覽。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aurora-ember-bio-lab/splatstudio/tree/HEAD/design-templates/digital-eguide

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

數位電子指南技能

產生雙頁數位指南預覽,並排顯示。封面位於行首,內頁跨頁位於行尾。生活風格創作者調性,大量留白,襯線顯示標題,仔細的欄位節奏。

工作流程

  1. 讀取現有的 DESIGN.md(注入於上方)。為標題選擇一個襯線顯示字型(鼓勵使用斜體連字),為長文選擇一個襯線字型,為統計數字/標籤選擇一個等寬字型。
  2. 從需求中選定主題與作者。產生真實的標題(例如「創作者風格與格式指南」)、副標題,以及一行作者署名。
  3. 版型 — 將兩頁置中於有色背景上:
    • 第 1 頁 — 封面:
      • 眉毛標題(「創作者風格與格式指南」)。
      • 顯示標題,使用混合字重與一個斜體強調詞(「創作者風格與格式指南」—— & 與「指南」為斜體)。
      • 3 格統計列(「16 種風格原則」、「38 個注意事項」、「1 個區塊,零模板」),使用等寬字型,以 · 分隔。
      • 「內容一覽」標題,搭配 2 欄目錄(章節 + 等寬字型頁碼,虛線引導點)。
      • 頁尾:「尋找你的聲音」+ 頁碼 01 等寬字型。
      • 角落放置微妙的裝飾點或貼紙(CSS)。
    • 第 2 頁 — 內頁:
      • 眉毛標題,包含章節編號與名稱(「第二章 · 語氣」)。
      • 顯示副標題(「像說話一樣寫作——只是更鋒利。」)。
      • 2 欄正文:開場段落 + 編號 4 步驟清單(「01 選定規則」、「02 刪除廢話」……)。
      • 側引文固定於行尾:對於拉丁語系使用大型斜體顯示與強調色;對於阿拉伯語、波斯語與烏爾都語使用常規或輕強調(無斜體);對於希伯來語使用常規或輕強調(無斜體)。(具文字系統感知能力)。
      • 底部條帶:「練習」呼籲行動(等寬標籤 + 1 句提示斜體)。
      • 頁尾:章節名稱 + 頁碼 18 等寬字型。
  4. 撰寫 單一 HTML 文件:
    • <!doctype html> 到 </html>,CSS 行內。
    • 頁面為 600×860 紙張色調卡片,帶 6px 陰影,彼此略微相反旋轉(±0.6deg),以營造雜誌放在桌上的感覺。
    • 在封面、內頁、目錄、側引文、練習區塊上使用 data-od-id。
  5. 自我檢查:
    • 字型層級結構符合編輯風格——標題主導第 1 頁,副標題主導第 2 頁。
    • 斜體強調每頁出現一次。
    • 等寬字型僅用於標籤、統計數字與目錄編號。

輸出合約

在 <artifact> 標籤之間輸出:

<artifact identifier="eguide-slug" type="text/html" title="電子指南 — 標題">
<!doctype html>
<html>...</html>
</artifact>

在 artifact 前後各輸出一句話。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

aurora-ember-bio-lab/splatstudio

Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.

aurora-ember-bio-lab/splatstudio

A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".

aurora-ember-bio-lab/splatstudio

Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".

aurora-ember-bio-lab/splatstudio

Self-contained floating chat widget with welcome screen, social links, meeting button, and message input. Single HTML file, zero dependencies.

aurora-ember-bio-lab/splatstudio

Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 维度评审", "design audit", or "what's wrong with my design".

aurora-ember-bio-lab/splatstudio

Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.

aurora-ember-bio-lab/splatstudio

A consumer-feeling dating / matchmaking dashboard — left rail navigation, ticker bar of community signals, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block. Editorial typography, restrained accent. Use when the brief asks for a "dating site", "matchmaking", "community dashboard", "social network dashboard", or any consumer product where the data is the story.

aurora-ember-bio-lab/splatstudio

Discounted cash flow valuation and intrinsic value analysis for public companies. Use when the brief asks for DCF, fair value, intrinsic value, price target, undervalued or overvalued analysis, or "what is this company worth?"

aurora-ember-bio-lab/splatstudio

A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions "docs", "documentation", "guide", "API reference", or "tutorial".

aurora-ember-bio-lab/splatstudio

A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use when the brief asks for an "email", "newsletter blast", "MJML", "product launch email", or "email template".

aurora-ember-bio-lab/splatstudio

An engineering runbook — service overview, alerts table, dashboards links, common procedures with copy-pasteable commands, on-call rotation, and an incident-response checklist. Use when the brief mentions "runbook", "ops doc", "on-call guide", "SRE doc", or "运维手册".

aurora-ember-bio-lab/splatstudio

Quarterly / monthly financial report — masthead with KPIs, revenue and burn charts, P&L summary table, top-line highlights, and an outlook paragraph. Use when the brief mentions "financial report", "Q3 report", "MRR review", "P&L", or "财报".

aurora-ember-bio-lab/splatstudio

Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a top-contributors panel, all in a single self-contained HTML file with light/dark theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a team / workspace admin dashboard, an interactive admin dashboard with charts, or names FlowAI.

aurora-ember-bio-lab/splatstudio

A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level ribbon, bottom tab bar. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style life app", "level-up app", "daily quests", "XP / streak app", or "ELI5-style explainer app".

aurora-ember-bio-lab/splatstudio

GitHub repository analytics dashboard — stars, forks, contributors, issues, pull requests, recent activity, and top contributors. Use when the brief asks for a GitHub repo dashboard, open-source growth report, repository health page, or GitHub analytics view.

aurora-ember-bio-lab/splatstudio

For marketing and gtm work: bind launches, campaigns, events, and brand plans to growth and pipeline outcomes. Built around the core query "annual-marketing-plan", with GTM strategy lead judgment, buyer-ready proof, and this outcome: approve launch plan, campaign budget, or GTM motion.

aurora-ember-bio-lab/splatstudio

A new-hire onboarding plan as a single page — first week schedule, buddy + manager intro, learning track, equipment checklist, and "you're set when…" outcomes. Use when the brief mentions "onboarding", "new hire", "first week plan", or "入职".

aurora-ember-bio-lab/splatstudio

A first-30-days onboarding module for new hospitality hires — the behaviors, the practice, the checks, and the manager follow-up. Built as a decision-grade professional training deck for new hires, managers.

aurora-ember-bio-lab/splatstudio

Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.

aurora-ember-bio-lab/splatstudio

Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing".

相關技能