visual-style

ساخت، استخراج و اعمال سیستم بصری یکپارچه برای ویدیو، اسلاید و ابزارهای طراحی

این اسکیل فایل قابل‌حمل visual-style.md را ایجاد یا از وب‌سایت، ویدیو و PDF استخراج می‌کند. رنگ‌ها، تایپوگرافی، چیدمان، حرکت و حال‌وهوای بصری در قالبی ساخت‌یافته ثبت می‌شوند تا هر ابزار هوش مصنوعی بتواند آن را مصرف کند.

می‌توانید سبک را روی HeyGen، اسلایدهای HTML، Figma و paper.design اعمال کنید یا از گالری سبک‌های آماده مانند Swiss و Saul Bass استفاده کنید. این کار هماهنگی برند و ثبات طراحی را در پروژه‌های مختلف افزایش می‌دهد.

چه چیزی می‌گیرید

• ساخت فایل کامل `visual-style.md` از صفر با رنگ‌ها، فونت‌ها، چیدمان و قواعد motion
• استخراج سبک بصری از URL، تصویر، ویدیو یا PDF راهنمای برند
• اعمال سیستم بصری روی HeyGen، HTML Slides، Figma و paper.design
• دسترسی به گالری سبک‌های آماده و قابل‌استفاده مجدد
• قالب‌ها، spec و connectorهای مرجع برای خروجی استاندارد و قابل‌انتقال

برای چه کاری خوب است

• طراحان و تیم‌های برند که به یک design system قابل‌استفاده در چند ابزار نیاز دارند
• تولیدکنندگان ویدیو، اسلاید یا محتوای AI که به هویت بصری یکپارچه نیاز دارند
• پروژه‌هایی که باید سبک یک وب‌سایت، ویدیو یا brand guide را مستندسازی و بازتولید کنند

برای چه کاری نیست

• پروژه‌هایی که فقط به یک طراحی تک‌صفحه‌ای بدون قواعد قابل‌تکرار نیاز دارند
• زمانی که هدف، ویرایش مستقیم پیکسل‌ها یا مدل‌سازی سه‌بعدی است
• مواردی که هیچ منبع بصری، ترجیح طراحی یا ابزار مقصدی برای تعیین سبک وجود ندارد

دربارهٔ این اسکیل

Visual Style

Create, extract, and apply portable visual design systems. A visual-style.md file defines colors, typography, layout, motion, and mood in one file that any AI tool can consume.

Quick Reference

Default Workflow

Create

1. Gather vibe — Ask about mood, era, references, inspiration
2. Define colors — Primary (2+), accent, neutrals with hex values and roles
3. Set typography — Display, body, caption families + weight/style rules
4. Layout & motion — Grid system, transitions, pacing
5. Generate — Output complete visual-style.md using references/templates/minimal.visual-style.md or references/templates/full.visual-style.md
6. Preview — Show a small HTML swatch or describe the visual result
7. Optionally apply — Ask if user wants to use it with a connector

Questions to batch:

1. What's the vibe? (mood keywords, era, references)
2. Any specific colors? (or derive from the vibe?)
3. Typography preference? (clean, editorial, technical, playful?)
4. What tool will you use this with? (HeyGen, slides, paper.design, Figma?)

Extract

1. Receive source — URL, image, video, or PDF
2. Load extractor — Read the appropriate extractor reference file
3. Analyze — Identify colors, typography, layout, motion, mood
4. Generate — Output complete visual-style.md with source_url set
5. Validate — Ensure all required fields are present

Apply

1. Read the style — Load the visual-style.md file
2. Ask which connector — Or detect from context
3. Load connector — Read the appropriate connector reference file
4. Transform — Map style fields to tool-specific format
5. Generate output — Produce tool-ready instructions or code

Gallery

1. List styles — Show available styles from references/gallery/
2. Preview — Describe the selected style's visual character
3. Load — Read the full visual-style.md
4. Apply — Use with a connector

Format Quick Reference

Required fields

name: "Style Name"
version: "1.0"
style_prompt_short: "1-2 sentence elevator pitch"
style_prompt_full: "Detailed generation prompt — THE most important field"
colors:
  primary:
    - name: "Color Name"
      hex: "#000000"
      role: "how this color is used"

style_prompt_full is king. If a tool can only read one field, it reads this one. Everything else is structured data for tools that want finer control.

Full spec: references/spec.md

Reference Files

Connectors (Apply mode)

Extractors (Extract mode)

Gallery (pre-built styles)

Templates & Spec

• references/templates/minimal.visual-style.md — Bare minimum template
• references/templates/full.visual-style.md — Complete template with all fields
• references/spec.md — Full format specification

Best Practices

1. style_prompt_full is king — Always usable as a standalone generation prompt
2. One style, one file — No multi-style bundling
3. Assets are URLs — Never embed binary data
4. Show, don't tell — Generate previews when creating styles
5. Opinionated defaults, flexible extensions — Core schema is fixed; x_* for tool-specific config

دانلود ZIP