xworkspace-core-skills/skills/it-infra-continuous-png/references/style-spec.md
2026-05-18 12:27:36 +08:00

4.1 KiB

Continuous PNG Style Spec

This style is extracted from the 7 reference images provided for the IT infrastructure video asset workflow.

Resolution

  • Primary: 1024x1536
  • Aspect ratio: 2:3
  • Use this size for Xiaohongshu-style long infographics and as source material for the 16:9 video scanner.

Visual Identity

  • Background: white to very light blue gradient.
  • Border: large rounded outer poster boundary, usually 28-40px visual radius.
  • Primary color: deep navy #061A55 / #07194F.
  • Accent blue: #155BFF, #2F7DFF.
  • Glow colors: cyan #49D9FF, teal #18BFA6.
  • Secondary accents:
    • green/teal for security/pass/AI
    • purple for orchestration/RAG/agent
    • orange for warning, AIOps, CI/CD, acceleration
    • gold only for key/star highlights

Typography

  • Use bold Chinese sans-serif style: HarmonyOS Sans, MiSans, Alibaba PuHuiTi, PingFang SC, or similar.
  • Title: very large, deep navy, tight line-height, no negative letter spacing.
  • Subtitle: medium-weight dark blue, 2-3 lines max.
  • Card body: concise bullet lines; avoid dense paragraphs.
  • English terms are allowed as technical labels: IAM, OIDC, RBAC, Kubernetes, AI Native, GitOps.

Required Layout Motifs

Each image should use at least two of these motifs:

  • Road/path evolution: curved road, timeline route, stage markers.
  • Centerpiece object: shield, monitor, server, storage cylinder, globe, AI chip, robot, operator.
  • Stage cards: numbered cards with era, date range, 2-4 bullets, tool names.
  • Node graph: circular icons connected by light lines.
  • Bottom summary strip: deep blue bar with a short trend summary.
  • Core trend panel: white glass card with icon list.
  • Capability flow row: horizontal row of small icons and arrows.

Composition Rules

  • Keep a stable family look: top-left series pill, large title, main illustration, structured cards, bottom summary.
  • Leave enough white space around the title and main visual.
  • Keep card borders thin and light blue.
  • Keep shadows soft, not heavy.
  • Use rounded cards, but avoid nested card-in-card clutter.
  • Icons should be clean line/isometric style, mostly blue.
  • Main objects should be inspectable and subject-relevant, not vague atmosphere.

Content Rules

  • One image equals one topic.
  • Use Chinese headings with compact technical labels.
  • Prefer 5-8 major nodes for evolution paths.
  • Prefer 4-7 checklist/capability items.
  • Keep every text block readable at mobile preview size.
  • Use consistent labels across a series, for example:
    • 本地存储时代
    • 云原生时代
    • AI Native 时代
    • 核心趋势
    • 趋势总结

Avoid

  • Dark cyberpunk dashboard.
  • Heavy purple or orange palettes.
  • Stock-photo realism.
  • Random decorative gradients without architecture meaning.
  • Too much text in tiny sizes.
  • Inconsistent title placement across a series.
  • CTA badges such as likes/favorites unless explicitly requested.

Reference Extraction

The v1 style was derived from these local reference files:

  • /Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-IT基础设置演进之路.png
  • /Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-从手工运维到现代平台工程.png
  • /Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-监控的前生今世.png
  • /Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-网络与协议.png
  • /Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-存储演进之路.png
  • /Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-账户与安全体系.png
  • /Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-与AI共同进化.png