v0.14: 截图美化素材迁移 + 散落改动归集
主线：从 PPT skill port 9 张截图舞台底 WebP，补齐 v0.11 当时只迁规则未迁素材的缺口。 新增 - assets/screenshot-backgrounds/style-a/ · 5 张 Editorial 底 dune / forest-ink / indigo-porcelain / kraft-paper / monocle-classic - assets/screenshot-backgrounds/style-b/ · 4 张 Swiss 底 ikb-dot-gradient / lemon-green-dot-shadow / lemon-grid / safety-orange-halftone 模板 - template-editorial-card.html: 加 5 条 .frame-shot.bg-asset-* 规则 - template-swiss-card.html: 加 4 条 .frame-shot.bg-asset-* 规则 两侧都带 fallback 实色，素材未加载时背景不透 文档 - screenshot-treatment.md: 新增 Solid vs Asset 小节 + 两张对照表 + 4 条 rules of thumb + 两条新 cheat-sheet recipe，明确路径假设与 accent 绑定 - HANDOFF.md: 版本号 v0.14，目录树加 screenshot-backgrounds/， 写清"素材迁移不是规则迁移"的边界（未引入 PPT 原 7 参数语义系统） 顺带归集本轮工作期间累积的散落改动（PRODUCT/SKILL/category-cookbook/ components/content-planning/map-component/production-workflow/ qa-checklist/style-system/validate-social-deck）一并入库，避免长期挂在 dirty tree。
This commit is contained in:
郭浩 committed
1 parent
82d221bb90
commit
bd1bb1e16d
23 files changed
+215
-90
No files matched your search
@@ -11,6 +11,12 @@ When the user supplies an app / web / code / dashboard screenshot, **do not** dr
|
||||
|
||||
For **photographic** content (people, scenery, products) — keep using `.frame-img`. The treatments below assume a pixel-perfect UI source where contain-fit is non-negotiable.
|
||||
|
||||
## Subject Prep
|
||||
|
||||
Before framing, decide what the actual screenshot subject is. If the source capture contains a floating modal/card over an unrelated page, desktop chrome, cropped side text, cursor trails, notification fragments, or leftover background UI, crop to the foreground window/card first and then place that cleaned subject into the stage. Do not beautify the entire raw capture when it carries accidental text or partial UI behind the subject.
|
||||
|
||||
Screenshot beautification must not introduce perspective, skew, rotation, or 3D tilt unless the user explicitly asks for a mockup scene. A CleanShot-style treatment is orthographic: straight subject, equal scaling, quiet background, and clear safe padding.
|
||||
|
||||
## Anatomy
|
||||
|
||||
```
|
||||
@@ -71,6 +77,38 @@ Never go above 14 px — anything bigger reads as iOS marketing.
|
||||
|
||||
Backgrounds are **never** accent-coloured. If the screenshot needs an accent emphasis, add a `.t-cat` chip or `.kicker` next to it — don't tint the stage.
|
||||
|
||||
#### Solid `bg-*` vs asset `bg-asset-*`
|
||||
|
||||
The tokens above are **CSS-generated solids** — flat tones, fast, no asset dependency. They work, but for code / IDE / dashboard / dense-UI captures they can feel undersold. Ported from the PPT skill, both seed templates also ship 9 **real texture WebP** backgrounds under `assets/screenshot-backgrounds/`. Reach for these when the screenshot is the page's hero, when a solid stage feels too thin, or when you need the warmth/grain of a printed magazine.
|
||||
|
||||
Editorial assets (`assets/screenshot-backgrounds/style-a/`):
|
||||
|
||||
| Class | Tone | Best for |
|
||||
| --------------------------- | ------------------ | ------------------------------------------------- |
|
||||
| `bg-asset-dune` | Warm sand | Travel / outdoor app shots, lifestyle products |
|
||||
| `bg-asset-forest-ink` | Deep forest green | Dark-mode UI on Editorial — pairs with `ink-classic` |
|
||||
| `bg-asset-indigo-porcelain` | Cool porcelain | Reading / writing apps, design tools |
|
||||
| `bg-asset-kraft-paper` | Kraft brown | Notes / journaling / handwritten apps |
|
||||
| `bg-asset-monocle-classic` | Cream paper | Default warm hero — most magazine-like |
|
||||
|
||||
Swiss assets (`assets/screenshot-backgrounds/style-b/`):
|
||||
|
||||
| Class | Accent | Use only when current accent matches |
|
||||
| -------------------------- | ----------------- | ------------------------------------------------ |
|
||||
| `bg-asset-ikb-dot` | IKB Klein Blue | `data-accent="ikb"` decks only |
|
||||
| `bg-asset-lemon-green-dot` | Lemon-green | `data-accent="lemon-green"` decks only |
|
||||
| `bg-asset-lemon-grid` | Lemon-yellow | `data-accent="lemon"` decks only |
|
||||
| `bg-asset-safety-orange` | Safety orange | `data-accent="safety-orange"` decks only |
|
||||
|
||||
**Rules of thumb**
|
||||
|
||||
- Don't mix accents — a `data-accent="ikb"` deck must not pull a `bg-asset-safety-orange` stage.
|
||||
- Asset backgrounds already carry texture; don't stack `shadow-ed` on top (the `1px` outline will read as a SaaS frame). Use `shadow-soft` or `shadow-none`.
|
||||
- Decide once per deck whether asset stages are part of the visual identity — don't sprinkle one asset background into a deck of solid stages, it looks like a sample card.
|
||||
- These assets are crop-safe at 16:10 and 16:9. For tall `r-3x4` or square `r-1x1` slots, prefer solid `bg-*` — the texture pattern can read awkwardly when over-cropped.
|
||||
|
||||
**Path note**: the `.bg-asset-*` rules use `url("../assets/screenshot-backgrounds/...")` — this assumes your deck's `index.html` lives one directory below `assets/`. If you place the deck elsewhere, override these rules locally with the correct relative path.
|
||||
|
||||
### 5. `inset-*` (padding between shot and stage)
|
||||
|
||||
- `inset-none` — image fills the frame. Use when the screenshot itself already has window chrome.
|
||||
@@ -139,6 +177,16 @@ Two recipes that cover 80% of cases.
|
||||
.frame-shot.r-16x10.corners-sm.shadow-soft.bg-paper-2.inset-sub
|
||||
```
|
||||
|
||||
**Editorial hero with real texture** — magazine-grade stage:
|
||||
```
|
||||
.frame-shot.r-16x10.corners-sm.shadow-soft.bg-asset-monocle-classic.inset-bal
|
||||
```
|
||||
|
||||
**Swiss hero with brand-aligned stage** — only when accent matches asset:
|
||||
```
|
||||
.frame-shot.r-16x10.corners-sq.shadow-none.bg-asset-ikb-dot.inset-bal
|
||||
```
|
||||
|
||||
For comparison shots (before / after), use **the same parameters** on both — different treatment between cells reads as inconsistency, not contrast.
|
||||
|
||||
## Validator
|
||||
|
||||
Reference in new issue
Block a user