first-commit

2026-05-04 14:58:14 -04:00
commit a46764fb1b
1210 changed files with 233231 additions and 0 deletions
@@ -0,0 +1,91 @@
+---
+name: digital-eguide
+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 "电子指南".
+triggers:
+  - "e-guide"
+  - "digital guide"
+  - "lead magnet"
+  - "lookbook"
+  - "creator guide"
+  - "playbook"
+  - "pdf guide"
+  - "ebook"
+  - "电子指南"
+  - "电子书"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: marketing
+  featured: 6
+  preview:
+    type: html
+    entry: index.html
+  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."
+---
+
+# Digital E-Guide Skill
+
+Produce a two-page digital guide preview side-by-side. Cover on the left,
+inside spread on the right. 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 right-side: large italic display, accent color, with
+       attribution.
+     - 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.
@@ -0,0 +1,204 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>The Creator's Style &amp; Format Guide — Auny</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,700;1,500;1,700&family=DM+Serif+Text:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --backdrop: #d8c8c0;
+      --paper: #faf3ea;
+      --paper-2: #f4ecdf;
+      --ink: #1f1c14;
+      --muted: #837964;
+      --rule: #d3c9b3;
+      --accent: #c44a47;
+      --accent-2: #e07d52;
+      --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
+      --serif-body: 'DM Serif Text', Georgia, serif;
+      --sans: -apple-system, system-ui, 'Inter', sans-serif;
+      --mono: 'IBM Plex Mono', ui-monospace, monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      color: var(--ink);
+      background:
+        radial-gradient(ellipse 80% 60% at 50% 20%, #e8d4cc, transparent 70%),
+        radial-gradient(ellipse 60% 60% at 80% 90%, #c79a8e, transparent 70%),
+        var(--backdrop);
+      font: 14px/1.55 var(--serif-body);
+      padding: 60px 40px;
+      display: flex; gap: 36px; justify-content: center; align-items: flex-start;
+      flex-wrap: wrap;
+    }
+
+    .page {
+      width: 540px; min-height: 740px;
+      background: var(--paper);
+      border-radius: 4px;
+      padding: 44px 44px 36px;
+      box-shadow: 0 30px 60px rgba(31,28,20,0.18), 0 4px 8px rgba(31,28,20,0.06);
+      position: relative;
+    }
+    .page.left { transform: rotate(-0.6deg); }
+    .page.right { transform: rotate(0.6deg); background: var(--paper-2); }
+
+    .eyebrow {
+      font: 10.5px/1 var(--mono);
+      letter-spacing: 0.22em;
+      color: var(--muted);
+      text-transform: uppercase;
+      display: flex; justify-content: space-between; align-items: center;
+      padding-bottom: 22px;
+      border-bottom: 1px solid var(--rule);
+    }
+    .eyebrow .left, .eyebrow .right { display: flex; align-items: center; gap: 10px; }
+    .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+
+    /* Cover */
+    .cover h1.title {
+      font-family: var(--serif);
+      font-weight: 700;
+      font-size: clamp(60px, 7.5vw, 92px);
+      line-height: 0.96;
+      letter-spacing: -0.01em;
+      margin: 32px 0 8px;
+      color: var(--ink);
+    }
+    .cover h1.title .creator { color: var(--accent); font-style: italic; }
+    .cover h1.title .amp { color: var(--accent-2); font-style: italic; font-weight: 500; padding: 0 6px; }
+    .cover h1.title .guide { font-style: italic; font-weight: 500; }
+    .cover h1.title .format { font-style: italic; font-weight: 500; padding-right: 4px; }
+
+    .cover .author { font: 12px/1 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin: 16px 0 18px; display: flex; align-items: center; gap: 10px; }
+    .cover .author b { color: var(--ink); font-weight: 500; }
+
+    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 22px 0 28px; }
+    .stat .num { font: 700 36px/1 var(--serif); letter-spacing: -0.005em; }
+    .stat .lbl { font: 10px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 6px; max-width: 16ch; }
+
+    .cover h2.inside { font: italic 700 36px/1 var(--serif); margin: 14px 0 14px; letter-spacing: -0.005em; }
+    .cover h2.inside em { font-style: italic; color: var(--accent); }
+
+    .toc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; }
+    .toc .item { display: flex; align-items: baseline; gap: 6px; font: 14.5px/1.4 var(--serif-body); }
+    .toc .item .name { font-style: italic; color: var(--ink); }
+    .toc .item .leader { flex: 1; border-bottom: 1px dotted var(--muted); transform: translateY(-2px); margin: 0 4px; }
+    .toc .item .pn { font: 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.06em; }
+
+    .cover-footer { position: absolute; left: 44px; right: 44px; bottom: 28px; display: flex; justify-content: space-between; align-items: center; font: 10.5px/1 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; padding-top: 14px; border-top: 1px solid var(--rule); }
+    .sticker { position: absolute; top: 280px; right: 44px; width: 92px; height: 92px; border-radius: 50%; background: var(--accent-2); transform: rotate(8deg); display: grid; place-items: center; color: #fff; font: italic 700 14px/1.1 var(--serif); text-align: center; padding: 10px; }
+    .sticker::after { content: ''; position: absolute; inset: 6px; border: 1px dashed rgba(255,255,255,0.5); border-radius: 50%; }
+
+    /* Spread */
+    .spread h2.head { font: italic 700 44px/1 var(--serif); letter-spacing: -0.005em; margin: 32px 0 6px; max-width: 18ch; }
+    .spread h2.head .accent { color: var(--accent); }
+    .spread .deck { font: italic 16px/1.5 var(--serif-body); color: var(--muted); margin: 0 0 22px; max-width: 50ch; }
+
+    .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 14px; border-top: 1px solid var(--rule); }
+    .columns p { margin: 0 0 14px; font: 14.5px/1.6 var(--serif-body); color: var(--ink); }
+    .columns p:first-letter { font-family: var(--serif); font-size: 38px; line-height: 0.85; padding: 4px 6px 0 0; float: left; font-weight: 700; color: var(--accent); font-style: italic; }
+    .steps { display: flex; flex-direction: column; gap: 10px; }
+    .steps .row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--rule); }
+    .steps .row .n { font: 700 12px/1 var(--mono); color: var(--accent); letter-spacing: 0.08em; }
+    .steps .row .body { font: 14px/1.45 var(--serif-body); }
+    .steps .row .body b { color: var(--ink); font-weight: 700; font-style: italic; }
+
+    .pullquote {
+      position: absolute; right: -16px; top: 280px;
+      width: 250px;
+      padding: 18px 22px;
+      background: var(--paper);
+      border: 1px solid var(--rule);
+      border-radius: 4px;
+      box-shadow: 0 8px 18px rgba(31,28,20,0.10);
+      font: italic 700 22px/1.2 var(--serif);
+      color: var(--ink);
+      transform: rotate(2.4deg);
+    }
+    .pullquote .open { font-size: 56px; line-height: 0.4; color: var(--accent); display: block; height: 24px; }
+    .pullquote .by { font: 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; font-style: normal; margin-top: 14px; display: block; }
+
+    .exercise { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: 4px; background: rgba(196,74,71,0.05); display: flex; gap: 14px; align-items: center; }
+    .exercise .label { font: 10.5px/1 var(--mono); color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 8px; border: 1px solid var(--accent); }
+    .exercise .text { font: italic 14px/1.4 var(--serif-body); color: var(--ink); }
+
+    .spread-footer { position: absolute; left: 44px; right: 44px; bottom: 28px; display: flex; justify-content: space-between; align-items: center; font: 10.5px/1 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; padding-top: 14px; border-top: 1px solid var(--rule); }
+
+    @media (max-width: 1180px) {
+      .pullquote { right: 16px; }
+      .page { width: 92vw; max-width: 540px; }
+    }
+  </style>
+</head>
+<body>
+  <article class="page left cover" data-od-id="cover">
+    <div class="eyebrow">
+      <div class="left"><span class="dot"></span>STYLE &amp; FORMAT GUIDE FOR CREATORS</div>
+      <div class="right">2026 EDITION</div>
+    </div>
+
+    <h1 class="title">The <span class="creator">Creator's</span> Style <span class="amp">&amp;</span> <span class="format">Format</span> <span class="guide">guide</span></h1>
+
+    <div class="author">— BY <b>AUNY</b> · CREATOR EDUCATOR · 18 / 04 / 2026</div>
+
+    <div class="stats">
+      <div class="stat"><div class="num">16</div><div class="lbl">Principles of style</div></div>
+      <div class="stat"><div class="num">38</div><div class="lbl">Do's &amp; Don'ts</div></div>
+      <div class="stat"><div class="num">1</div><div class="lbl">Block, zero templates</div></div>
+    </div>
+
+    <h2 class="inside">What's <em>inside.</em></h2>
+
+    <div class="toc" data-od-id="toc">
+      <div class="item"><span class="name">Find your voice</span><span class="leader"></span><span class="pn">04</span></div>
+      <div class="item"><span class="name">Pick a format</span><span class="leader"></span><span class="pn">12</span></div>
+      <div class="item"><span class="name">Tone &amp; tension</span><span class="leader"></span><span class="pn">18</span></div>
+      <div class="item"><span class="name">Visual rhythm</span><span class="leader"></span><span class="pn">24</span></div>
+      <div class="item"><span class="name">Headlines that hold</span><span class="leader"></span><span class="pn">32</span></div>
+      <div class="item"><span class="name">Editing the cut</span><span class="leader"></span><span class="pn">40</span></div>
+    </div>
+
+    <div class="sticker">FOR THE FIRST DRAFT</div>
+    <div class="cover-footer"><span>FIND YOUR VOICE</span><span>01 / 64</span></div>
+  </article>
+
+  <article class="page right spread" data-od-id="spread">
+    <div class="eyebrow">
+      <div class="left"><span class="dot"></span>CHAPTER 02 · TONE</div>
+      <div class="right">3 — RULES, 1 — EXERCISE</div>
+    </div>
+
+    <h2 class="head">Write like you talk —<br/><span class="accent">only sharper.</span></h2>
+    <p class="deck">Your voice already exists. The work is to remove the parts that aren't you, then put what's left in the order people remember. Three small rules and one Sunday-morning exercise.</p>
+
+    <div class="columns">
+      <p>Strong writing has the cadence of speech and the precision of editing. Most beginners pick one and stop. Read your draft aloud. The sentences that catch in your throat are the ones to cut.</p>
+      <div class="steps">
+        <div class="row"><span class="n">01</span><span class="body"><b>Pick the rule.</b> One idea per paragraph. If two appear, split the paragraph.</span></div>
+        <div class="row"><span class="n">02</span><span class="body"><b>Drop the filler.</b> "I think", "kind of", "in my opinion" — they soften, then they erase.</span></div>
+        <div class="row"><span class="n">03</span><span class="body"><b>End with a verb.</b> The last beat lands harder when it asks for an action, not an adjective.</span></div>
+        <div class="row"><span class="n">04</span><span class="body"><b>Read aloud once.</b> Always. The microphone is the editor.</span></div>
+      </div>
+    </div>
+
+    <div class="pullquote" data-od-id="pullquote">
+      <span class="open">"</span>
+      Specificity is the unlock — write what only you saw.
+      <span class="by">— AUNY · CHAPTER 02</span>
+    </div>
+
+    <div class="exercise" data-od-id="exercise">
+      <span class="label">EXERCISE</span>
+      <span class="text">Rewrite your last three captions without the words <em>just</em>, <em>really</em>, or <em>very</em>. Keep what survives.</span>
+    </div>
+
+    <div class="spread-footer"><span>TONE &amp; TENSION</span><span>18 / 64</span></div>
+  </article>
+</body>
+</html>