AGENT SKILL

digital-eguide

A two-spread digital e-guide preview — page 1 is a cover (display title, author, "What's inside" stats, table of contents teaser); page 2 is a spread (lesson body with pull-quote and a step list). Lifestyle / creator brand tone. Use when the brief asks for an "e-guide", "digital guide", "lookbook", "lead magnet", "creator guide", "playbook", "PDF guide", or "电子指南".

License 许可
MIT
最近更新
2026-11-14
Stars
★ 1.1k
Forks
104

01 前言 Front Matter

od
{ "mode": "prototype", "craft": { "requires": [ "typography", "typography-hierarchy", "typography-hierarchy-editorial", "rtl-and-bidi" ] }, "preview": { "type": "html", "entry": "index.html" }, "platform": "desktop", "scenario": "marketing", "design_system": { "requires": true, "sections": [ "color", "typography", "layout", "components" ] }, "example_prompt": "Design 'The Creator's Style & Format Guide' — cover page and one inside spread, lifestyle creator brand." }
name
digital-eguide
triggers
[ "e-guide", "digital guide", "lead magnet", "lookbook", "creator guide", "playbook", "pdf guide", "ebook", "电子指南", "电子书" ]
description
A two-spread digital e-guide preview — page 1 is a cover (display title, author, "What's inside" stats, table of contents teaser); page 2 is a spread (lesson body with pull-quote and a step list). Lifestyle / creator brand tone. Use when the brief asks for an "e-guide", "digital guide", "lookbook", "lead magnet", "creator guide", "playbook", "PDF guide", or "电子指南".

03 SKILL.md 正文

Digital E-Guide Skill

Produce a two-page digital guide preview side-by-side. Cover on the inline-start, inside spread on the inline-end. Lifestyle creator tone, lots of negative space, serif display headings, careful column rhythm.

Workflow

  1. Read the active DESIGN.md (injected above). Pick a serif display token for the title (italic ligatures encouraged), a body serif for long-form, and a mono token for stats / labels.
  2. Pick the topic + author from the brief. Generate a real title (e.g. "The Creator's Style & Format Guide"), a real subtitle, and a one-line author byline.
  3. Layout — center two pages on a tinted backdrop:
    • Page 1 — cover:
      • Eyebrow ("STYLE & FORMAT GUIDE FOR CREATORS").
      • Display title with mixed weights and one italic flourish word ("The Creator's Style & Format guide" — & and guide italic).
      • 3-cell stat row ("16 PRINCIPLES OF STYLE", "38 DOS & DON'TS", "1 BLOCK, ZERO TEMPLATES") in mono, separated by ·.
      • "What's inside" header with a 2-column TOC (chapters + page numbers in mono, leader dots).
      • Footer: "FIND YOUR VOICE" + page 01 mono.
      • Subtle decorative dot or sticker (CSS) in a corner.
    • Page 2 — spread:
      • Eyebrow with chapter number + name ("CHAPTER 02 · TONE").
      • Display sub-title ("Write like you talk — only sharper.").
      • 2-column body: opening paragraph + a numbered 4-step list ("01 Pick the rule", "02 Drop the filler"…).
      • Pull-quote pinned to inline-end: for Latin scripts use large italic display and accent color; for Arabic, Persian, and Urdu use regular or light emphasis (no italics); for Hebrew use regular or light emphasis (no italics). Include attribution. (script-aware)
      • Bottom strip with "EXERCISE" callout (mono label + 1 sentence prompt in italic).
      • Footer: chapter title + page 18 mono.
  4. Write a single HTML document:
    • <!doctype html> through </html>, CSS inline.
    • Pages are 600×860 paper-tone cards with 6px shadow, slight rotation opposing each other (±0.6deg) for a magazine-on-desk feel.
    • data-od-id on cover, spread, toc, pull-quote, exercise.
  5. Self-check:
    • Type hierarchy is editorial — title owns page 1, sub-title owns page 2.
    • Italic accent appears once per page.
    • Mono used only for labels, stats, and TOC numbers.

Output contract

Emit between <artifact> tags:

<artifact identifier="eguide-slug" type="text/html" title="E-Guide — Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

04 同仓库更多 Skills

feimacode
feimacode/open-design-agent-kit

youtube-clipper

YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

writing-guidelines

Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook".

★ 1.1k
feimacode
feimacode/open-design-agent-kit

wpds

WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

weread-year-in-review-video-template

WeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stories. Use when users want a 9:16 HTML-to-MP4 reading report with warm paper texture, editorial Chinese typography, book-page metaphors, data highlights, and deterministic motion.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

web-design-guidelines

Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.

★ 1.1k
feimacode
feimacode/open-design-agent-kit

web-clone

网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支,并强制核对任何 AI 二手分析里的可执行代码。

★ 1.1k