yuanflow-cli 0.1.42 → 0.1.44

package/skills/yuanflow-skill//350/247/206/350/247/211/345/215/241/347/211/207/347/224/237/346/210/220/references/style-atlas.md

@@ -0,0 +1,728 @@
+# Style Atlas
+
+This skill uses 5 parent style systems. Each parent style has its own template skeleton in `assets/templates/`. Each substyle has an identity test, anti-patterns, layout recipe, and HTML skeleton.
+
+Use parent styles for production consistency. Use substyles for variation.
+
+## Parent Style 1: Editorial Publishing
+
+Use for article illustrations, essays, cultural notes, research summaries, long-form covers, and refined social images.
+
+Template: `assets/templates/editorial-publishing.html`
+
+Fixed identity:
+
+- Serif or Songti-led typography.
+- Strong editorial hierarchy: headline, deck, image/caption, marginalia or issue metadata.
+- Paper, ink, gallery, newspaper, or publishing material.
+- Text should feel typeset, not pasted into cards.
+
+### Substyle 1.1 Magazine Paper
+
+Identity test:
+
+- Uses serif/Songti display type.
+- Includes paper texture, fine rule, issue row, or caption system.
+- Has at least one magazine device: pull quote, photo well, marginal note, or ledger row.
+
+Anti-patterns:
+
+- Flat beige page with only a title.
+- Heavy 900-weight Chinese headline.
+- Generic rounded cards.
+
+Recipe:
+
+- Best for: 小红书文化/旅行/阅读封面, 文章头图, 长文配图.
+- Layout: issue row -> large title -> image well or pull quote -> 3-point strip.
+- Ratio: 3:4, 16:9, 21:9.
+
+HTML skeleton:
+
+```html
+<section class="poster editorial-publishing magazine-paper" data-ratio="xhs">
+  <div class="paper-grain"></div>
+  <main class="ep-pad">
+    <p class="ep-issue">VOL. 04 / FIELD NOTE / 2026</p>
+    <h1 class="ep-title">在信息里<br>找到一条路</h1>
+    <figure class="ep-photo"><img src="assets/hero.jpg" alt=""></figure>
+    <div class="ep-strip"><span>观察</span><span>方法</span><span>结论</span></div>
+  </main>
+</section>
+```
+
+### Substyle 1.2 Chinese Literary
+
+Identity test:
+
+- Uses Songti-like title, seal-red or ink accent, and book/page composition.
+- Can use vertical title, but only when it improves rhythm.
+- Contains restrained image, poem-like deck, or annotated margin.
+
+Anti-patterns:
+
+- Decorative Chinese clichés unrelated to content.
+- Red/gold overload.
+- Tiny vertical text that cannot be read.
+
+Recipe:
+
+- Best for: 国风文章插图, 本地旅行, 食物故事, 读书笔记, 历史文化.
+- Layout: vertical or horizontal title -> small image plate -> prose deck -> seal/meta.
+- Ratio: 3:4, 1:1, article 4:3.
+
+HTML skeleton:
+
+```html
+<section class="poster editorial-publishing chinese-literary" data-ratio="xhs">
+  <main class="ep-pad book-page">
+    <h1 class="ep-title vertical">春山<br>慢记</h1>
+    <p class="ep-deck">把一段路写成一页安静的注脚。</p>
+    <figure class="ep-photo small"><img src="assets/detail.jpg" alt=""></figure>
+    <p class="seal">YF</p>
+  </main>
+</section>
+```
+
+### Substyle 1.3 Data Newspaper
+
+Identity test:
+
+- Uses newspaper column rhythm and compact but legible tables/charts.
+- Headline is editorial, data blocks are structured.
+- At least one chart, table, or fact strip supports the claim.
+
+Anti-patterns:
+
+- Spreadsheet screenshot as the whole design.
+- Fake percentages or fake rankings.
+- Columns too dense for mobile.
+
+Recipe:
+
+- Best for: 行业报告, 趋势分析, 政策解读, 研究摘要.
+- Layout: masthead -> headline -> 2-3 columns -> chart/fact strip -> source note.
+- Ratio: 16:9, 3:4, 21:9.
+
+HTML skeleton:
+
+```html
+<section class="poster editorial-publishing data-newspaper" data-ratio="article">
+  <main class="ep-pad newspaper">
+    <p class="masthead">YUANFLOW DAILY</p>
+    <h1 class="ep-title">三组数据解释<br>本轮变化</h1>
+    <div class="news-grid">
+      <article>核心观察一</article>
+      <article>核心观察二</article>
+      <div class="mini-chart"><span style="--h:72%"></span><span style="--h:44%"></span></div>
+    </div>
+  </main>
+</section>
+```
+
+### Substyle 1.4 Museum Label
+
+Identity test:
+
+- One object/image dominates.
+- Caption plaque and metadata feel like gallery labels.
+- Negative space is intentional and precise.
+
+Anti-patterns:
+
+- Filling the gallery wall with paragraphs.
+- Fake luxury styling without object focus.
+- Object too small to inspect.
+
+Recipe:
+
+- Best for: 产品/设计对象分析, 作品集插图, 艺术/历史物件.
+- Layout: large object -> label plaque -> annotation pins -> catalogue footer.
+- Ratio: 16:9, 1:1, 3:4.
+
+HTML skeleton:
+
+```html
+<section class="poster editorial-publishing museum-label" data-ratio="article">
+  <main class="ep-pad gallery">
+    <figure class="object-frame"><img src="assets/object.png" alt=""></figure>
+    <aside class="plaque">
+      <h2>Object Study 01</h2>
+      <p>材料、年代、功能与设计判断。</p>
+    </aside>
+  </main>
+</section>
+```
+
+## Parent Style 2: Social Campaign
+
+Use for Xiaohongshu covers, hot takes, launch images, event posters, campaign visuals, and high-impact social graphics.
+
+Template: `assets/templates/social-campaign.html`
+
+Fixed identity:
+
+- Immediate hook.
+- High contrast.
+- Strong scale jump.
+- Designed for thumbnail speed.
+
+### Substyle 2.1 Pop Magazine
+
+Identity test:
+
+- Uses strong color blocking and oversized hook title.
+- Includes controlled sticker/label devices, not emoji clutter.
+- Has one obvious social focal point.
+
+Anti-patterns:
+
+- Many colors with no hierarchy.
+- Cute labels everywhere.
+- Body copy too small for phone view.
+
+Recipe:
+
+- Best for: 小红书推荐/清单/趋势/教程封面.
+- Layout: headline block -> cutout/image -> 2-3 badges -> save-worthy footer.
+- Ratio: 3:4, 1:1.
+
+HTML skeleton:
+
+```html
+<section class="poster social-campaign pop-magazine" data-ratio="xhs">
+  <main class="sc-pad">
+    <p class="burst">SAVE THIS</p>
+    <h1 class="sc-title">这 6 个<br>真的好用</h1>
+    <div class="cutout-stage"><img src="assets/item.png" alt=""></div>
+    <div class="badge-row"><span>实测</span><span>清单</span><span>避坑</span></div>
+  </main>
+</section>
+```
+
+### Substyle 2.2 Neo-Brutalist
+
+Identity test:
+
+- Raw black/white structure with one aggressive accent.
+- Thick rules or hard blocks create tension.
+- Copy sounds decisive and direct.
+
+Anti-patterns:
+
+- Random distressed texture.
+- Tilted text that hurts reading.
+- Loud style used for gentle topics.
+
+Recipe:
+
+- Best for: 避坑、观点、反模式、警示、强立场封面.
+- Layout: warning strip -> giant title -> 3 hard rows -> footer.
+- Ratio: 3:4, poster.
+
+HTML skeleton:
+
+```html
+<section class="poster social-campaign neo-brutalist" data-ratio="xhs">
+  <main class="sc-pad brutal">
+    <p class="warning">DO NOT</p>
+    <h1 class="sc-title">别再这样<br>做封面</h1>
+    <div class="hard-rows"><p>01 字太小</p><p>02 图太散</p><p>03 没焦点</p></div>
+  </main>
+</section>
+```
+
+### Substyle 2.3 Maximal Poster
+
+Identity test:
+
+- Dense but ordered type/image layering.
+- At least one dramatic scale contrast.
+- One dominant hierarchy survives despite visual density.
+
+Anti-patterns:
+
+- Clutter without focal point.
+- Every element is loud.
+- Uncontrolled color clash.
+
+Recipe:
+
+- Best for: 活动视觉、爆款封面、campaign KV、强营销海报.
+- Layout: huge repeated word -> central title -> image/cutout -> event/meta strip.
+- Ratio: poster, 3:4, 21:9.
+
+HTML skeleton:
+
+```html
+<section class="poster social-campaign maximal-poster" data-ratio="poster">
+  <main class="sc-pad maximal">
+    <div class="repeat-word">FLOW FLOW FLOW</div>
+    <h1 class="sc-title">年度<br>灵感大会</h1>
+    <p class="event-meta">06.18 / SHANGHAI / LIVE</p>
+  </main>
+</section>
+```
+
+### Substyle 2.4 Event Key Visual
+
+Identity test:
+
+- Event title, date, location, and CTA have separate hierarchy.
+- One key visual dominates.
+- Logistics do not compete with the title.
+
+Anti-patterns:
+
+- Full event description crammed into poster.
+- Date and location hidden.
+- No memorable visual mark.
+
+Recipe:
+
+- Best for: 课程、沙龙、发布会、直播、训练营.
+- Layout: event title -> key visual -> date/location panel -> CTA.
+- Ratio: poster, 3:4, 21:9.
+
+HTML skeleton:
+
+```html
+<section class="poster social-campaign event-key-visual" data-ratio="poster">
+  <main class="sc-pad event">
+    <h1 class="sc-title">AI 内容<br>工作坊</h1>
+    <div class="key-shape"></div>
+    <footer class="ticket">2026.06.18 / ONLINE / FREE ENTRY</footer>
+  </main>
+</section>
+```
+
+## Parent Style 3: Technical Diagram
+
+Use for product explainers, software architecture, AI workflows, screenshots, data graphics, and article diagrams.
+
+Template: `assets/templates/technical-diagram.html`
+
+Fixed identity:
+
+- Structure comes before decoration.
+- Diagrams and data must be truthful.
+- Grid, labels, nodes, screenshots, and charts are primary visual material.
+
+### Substyle 3.1 Swiss Data
+
+Identity test:
+
+- Large type is light; small labels are stronger.
+- One accent only.
+- Uses grid, hairlines, matrix, data, or ledger.
+
+Anti-patterns:
+
+- Gradients and shadows.
+- Rounded cards everywhere.
+- Heavy 800-weight huge title.
+
+Recipe:
+
+- Best for: 工具说明、产品更新、数据对比、工作流.
+- Layout: chrome row -> title -> matrix/chart/ledger -> metadata.
+- Ratio: 3:4, 16:9, 21:9.
+
+HTML skeleton:
+
+```html
+<section class="poster technical-diagram swiss-data" data-ratio="xhs">
+  <main class="td-pad">
+    <p class="td-meta">SYSTEM / 01</p>
+    <h1 class="td-title">一个流程<br>四个节点</h1>
+    <div class="td-matrix"><div>输入</div><div>处理</div><div>验证</div><div>输出</div></div>
+  </main>
+</section>
+```
+
+### Substyle 3.2 Blueprint Technical
+
+Identity test:
+
+- Blueprint/whiteprint grid is visible.
+- Uses measured annotations, route lines, or node maps.
+- Looks engineered, not decorative.
+
+Anti-patterns:
+
+- Blueprint style applied to non-structural lifestyle content.
+- Too many tiny labels.
+- Fake technical labels.
+
+Recipe:
+
+- Best for: 架构图、流程图、系统解释、工程方案.
+- Layout: title block -> node map -> measurement labels -> legend.
+- Ratio: 16:9, 3:4.
+
+HTML skeleton:
+
+```html
+<section class="poster technical-diagram blueprint-technical" data-ratio="article">
+  <main class="td-pad blueprint">
+    <h1 class="td-title">Runtime<br>Control Map</h1>
+    <div class="node-map"><span>Agent</span><span>Tool</span><span>Memory</span></div>
+    <p class="legend">Measured flow / trusted boundary</p>
+  </main>
+</section>
+```
+
+### Substyle 3.3 Cyber Interface
+
+Identity test:
+
+- Dark interface surface with meaningful panels.
+- Neon accent is used for state, focus, or signal.
+- Screenshot/HUD/terminal elements are functional.
+
+Anti-patterns:
+
+- Fake matrix rain.
+- Neon text with poor contrast.
+- Random sci-fi boxes.
+
+Recipe:
+
+- Best for: AI、自动化、安全、游戏、控制台、dashboard.
+- Layout: terminal header -> hero stat -> interface panels -> signal footer.
+- Ratio: 16:9, 3:4, 21:9.
+
+HTML skeleton:
+
+```html
+<section class="poster technical-diagram cyber-interface" data-ratio="article">
+  <main class="td-pad cyber">
+    <p class="terminal">~/yuanflow/run --visual</p>
+    <h1 class="td-title">自动化<br>进入可控状态</h1>
+    <div class="hud-grid"><div>Agent</div><div>Guard</div><div>Output</div></div>
+  </main>
+</section>
+```
+
+### Substyle 3.4 Calm Diagram
+
+Identity test:
+
+- Quiet flow, clear labels, moderate contrast.
+- 3-5 nodes only.
+- Diagram explains one concept.
+
+Anti-patterns:
+
+- Mind map with tiny text.
+- Too many arrows.
+- Decorative abstract shapes with no semantic role.
+
+Recipe:
+
+- Best for: 文章插图、方法论、框架、课程讲义.
+- Layout: concept title -> 3-5 node flow -> short takeaway.
+- Ratio: 16:9, 4:3, 3:4.
+
+HTML skeleton:
+
+```html
+<section class="poster technical-diagram calm-diagram" data-ratio="article">
+  <main class="td-pad calm">
+    <h1 class="td-title">从想法<br>到图像</h1>
+    <div class="flow"><span>提炼</span><span>转译</span><span>排版</span><span>验证</span></div>
+  </main>
+</section>
+```
+
+## Parent Style 4: Lifestyle Collage
+
+Use for lifestyle notes, reading lists, travel, home, food, wellness, creator workflow, and photo-rich social content.
+
+Template: `assets/templates/lifestyle-collage.html`
+
+Fixed identity:
+
+- Tactile material and photo rhythm.
+- Human, warm, or personal tone.
+- Photos and objects carry meaning, not filler.
+
+### Substyle 4.1 Soft Studio
+
+Identity test:
+
+- Calm palette, tactile photo/object, soft depth.
+- Text is gentle but readable.
+- Layout feels like a studio tabletop or editorial spread.
+
+Anti-patterns:
+
+- Pale text with low contrast.
+- Generic wellness gradient.
+- Empty decorative panels.
+
+Recipe:
+
+- Best for: 生活方式、家居、成长、温柔教程.
+- Layout: soft title -> object/photo -> 3 quiet notes -> footer.
+- Ratio: 3:4, 1:1, 16:9.
+
+HTML skeleton:
+
+```html
+<section class="poster lifestyle-collage soft-studio" data-ratio="xhs">
+  <main class="lc-pad soft">
+    <h1 class="lc-title">周末整理<br>工作台</h1>
+    <figure class="soft-photo"><img src="assets/table.jpg" alt=""></figure>
+    <div class="note-list"><p>光线</p><p>收纳</p><p>节奏</p></div>
+  </main>
+</section>
+```
+
+### Substyle 4.2 Collage Desk
+
+Identity test:
+
+- Layered paper/photo/tape/stamp devices.
+- Every overlap has a purpose.
+- Captions are short and legible.
+
+Anti-patterns:
+
+- Messy scrapbook look.
+- Too many stickers.
+- Photo labels covering important content.
+
+Recipe:
+
+- Best for: 读书清单、旅行计划、学习笔记、创作者流程.
+- Layout: base paper -> 2-4 layered items -> stamp title -> caption strip.
+- Ratio: 3:4, 1:1.
+
+HTML skeleton:
+
+```html
+<section class="poster lifestyle-collage collage-desk" data-ratio="xhs">
+  <main class="lc-pad collage">
+    <h1 class="lc-title">本周<br>灵感桌面</h1>
+    <div class="paper-stack"><figure></figure><figure></figure><figure></figure></div>
+    <p class="stamp">ARCHIVE 06</p>
+  </main>
+</section>
+```
+
+### Substyle 4.3 Botanical Organic
+
+Identity test:
+
+- Uses botanical/natural forms or macro photo as semantic material.
+- Palette is natural but contrast remains readable.
+- Labels feel like specimen notes.
+
+Anti-patterns:
+
+- Generic green blobs.
+- Decorative leaves unrelated to content.
+- Over-soft low contrast.
+
+Recipe:
+
+- Best for: 食材、健康、自然、手作、可持续主题.
+- Layout: specimen image -> title -> botanical label rows -> source note.
+- Ratio: 3:4, 16:9.
+
+HTML skeleton:
+
+```html
+<section class="poster lifestyle-collage botanical-organic" data-ratio="xhs">
+  <main class="lc-pad botanical">
+    <figure class="specimen"><img src="assets/leaf.png" alt=""></figure>
+    <h1 class="lc-title">春天的<br>食材清单</h1>
+    <div class="specimen-tags"><span>Fresh</span><span>Local</span><span>Seasonal</span></div>
+  </main>
+</section>
+```
+
+### Substyle 4.4 Film Contact Sheet
+
+Identity test:
+
+- Contact-sheet frames, timecode, caption rhythm.
+- Photos are large enough to read as story beats.
+- Film tone supports memory or travel.
+
+Anti-patterns:
+
+- Ten tiny photos on one mobile image.
+- Fake camera UI clutter.
+- Captions longer than the photo story.
+
+Recipe:
+
+- Best for: 旅行、探店、复盘、照片故事、vlog 图文.
+- Layout: headline -> 3-6 frames -> timecode/caption -> closing note.
+- Ratio: 3:4, 16:9.
+
+HTML skeleton:
+
+```html
+<section class="poster lifestyle-collage film-contact-sheet" data-ratio="xhs">
+  <main class="lc-pad film">
+    <h1 class="lc-title">一天里的<br>六个画面</h1>
+    <div class="frames"><figure></figure><figure></figure><figure></figure><figure></figure></div>
+    <p class="timecode">ROLL 02 / 18:42</p>
+  </main>
+</section>
+```
+
+## Parent Style 5: Product Brand
+
+Use for product features, object studies, product recommendations, brand covers, portfolios, and commercial design graphics.
+
+Template: `assets/templates/product-brand.html`
+
+Fixed identity:
+
+- Product/object must be inspectable.
+- Benefit hierarchy must be truthful.
+- The result should feel sellable but not fake.
+
+### Substyle 5.1 Product Cutout
+
+Identity test:
+
+- Object or screenshot is the hero.
+- Uses 2-4 callouts tied to real benefits.
+- Clean backdrop grounds the product.
+
+Anti-patterns:
+
+- Floating object with no shadow or context.
+- Too many callouts.
+- Fake specs or fake UI.
+
+Recipe:
+
+- Best for: 产品推荐、App 功能、硬件介绍、电商社交图.
+- Layout: benefit title -> product cutout -> callouts -> proof strip.
+- Ratio: 3:4, 1:1, 16:9.
+
+HTML skeleton:
+
+```html
+<section class="poster product-brand product-cutout" data-ratio="xhs">
+  <main class="pb-pad">
+    <h1 class="pb-title">一个工具<br>解决三件事</h1>
+    <figure class="product-hero"><img src="assets/product.png" alt=""></figure>
+    <div class="callouts"><span>快</span><span>稳</span><span>可控</span></div>
+  </main>
+</section>
+```
+
+### Substyle 5.2 Luxury Minimal
+
+Identity test:
+
+- Large negative space, refined type, precise object placement.
+- Premium tone comes from restraint, not gold overload.
+- Metadata is small but readable.
+
+Anti-patterns:
+
+- Gold gradients everywhere.
+- Tiny unreadable captions.
+- No clear object or brand signal.
+
+Recipe:
+
+- Best for: 高端封面、作品集、品牌视觉、设计案例.
+- Layout: hero object -> short title -> small label -> quiet footer.
+- Ratio: 1:1, 16:9, 21:9.
+
+HTML skeleton:
+
+```html
+<section class="poster product-brand luxury-minimal" data-ratio="article">
+  <main class="pb-pad luxury">
+    <figure class="product-hero isolated"><img src="assets/object.png" alt=""></figure>
+    <h1 class="pb-title">Quiet<br>Precision</h1>
+    <p class="small-label">Object study / 2026</p>
+  </main>
+</section>
+```
+
+### Substyle 5.3 Brand System Card
+
+Identity test:
+
+- Shows logo/color/type/component relationship.
+- Feels like a brand system sample, not a moodboard.
+- Uses repeated tokens consistently.
+
+Anti-patterns:
+
+- Random brand colors.
+- Too many unrelated mockups.
+- No hierarchy between master brand and sample elements.
+
+Recipe:
+
+- Best for: 品牌提案、设计稿、视觉规范快照.
+- Layout: brand title -> palette/type samples -> component row -> usage note.
+- Ratio: 16:9, 3:4.
+
+HTML skeleton:
+
+```html
+<section class="poster product-brand brand-system" data-ratio="article">
+  <main class="pb-pad brand">
+    <h1 class="pb-title">YuanFlow<br>Visual System</h1>
+    <div class="palette"><span></span><span></span><span></span></div>
+    <div class="component-row"><button>Primary</button><button>Secondary</button></div>
+  </main>
+</section>
+```
+
+### Substyle 5.4 App Feature Card
+
+Identity test:
+
+- Screenshot or UI mock is readable.
+- Callouts point to actual UI areas.
+- Benefit headline is tied to the feature.
+
+Anti-patterns:
+
+- Cropping important UI text.
+- Fake interface labels.
+- Screenshot too small under decorative chrome.
+
+Recipe:
+
+- Best for: App 功能发布、SaaS 配图、教程封面、产品说明.
+- Layout: benefit title -> large screenshot frame -> 3 feature callouts -> release meta.
+- Ratio: 3:4, 16:9, 21:9.
+
+HTML skeleton:
+
+```html
+<section class="poster product-brand app-feature" data-ratio="article">
+  <main class="pb-pad app">
+    <h1 class="pb-title">新版工作台<br>少点三次</h1>
+    <figure class="screen-frame"><img src="assets/screenshot.png" alt=""></figure>
+    <div class="feature-tags"><span>自动整理</span><span>批量处理</span><span>状态可见</span></div>
+  </main>
+</section>
+```
+
+## Variant Rule
+
+A meaningful variant changes at least three items:
+
+1. Parent style or substyle.
+2. Layout recipe.
+3. Image treatment.
+4. Material system.
+5. Copy rhythm.
+
+Changing only colors is not a variant.