Tasarım Sistemleri

Design DNA

Bir referans tasarımını yapılandırılmış JSON’a çıkarın, sonra ondan üretin.

Nedir

Tasarım kimliğini ölçülebilir token’lar, niteliksel stil ve görsel efektler boyunca yakalayan üç aşamalı bir iş akışı. Eksiksiz bir Design DNA JSON’u üretir, sonra o JSON’u yeni içeriğe uygular.

>-
Kaynak SKILL.md’den

Tasarım için neden önemli

  • Bir ekran görüntüsünü ya da URL’yi adlandırılmış renk, yazı ve boşluk değerlerine çevirir.
  • Yalnızca ölçülebilir token’ları değil, ruh halini, kompozisyonu ve marka sesini de kaydeder.
  • Düz CSS’in ifade edemediği Canvas, WebGL, shader ve scroll efektlerini yakalar.

Neleri kapsıyor

  • Design system tokens
  • Design style
  • Visual effects
  • Analyzing references
  • Generating from JSON
  • Phase combinations

Nasıl kurulur

Design DNA

  1. Depoyu klonlayın.

    git clone https://github.com/zanwei/design-dna
  2. Codex’i skill dosyasına yönlendirin.

    SKILL.md
  3. Sonra istediğiniz arayüzü anlatın. Codex skill’e uyar.

Codex ile nasıl çalıştırılır

  1. Herhangi bir şeyi analiz etmeden önce üç boyutu da görmek için şemayı isteyin.

  2. Codex’e referans görselleri ya da URL’ler verin ve doldurulmuş bir DNA JSON’u isteyin.

  3. Kendi kendine yeten bir HTML sayfası üretmek için JSON’u ve içeriğinizi geçirin.

Buradaki her eklenti ücretsiz, açık kaynak ve gerçek üst kaynağına bağlantı veriyor.

codex-design listesinde dahası ↗

Sonraki adım

Kurulum derdi olmadan Open Design ile tasarlayın

Bu eklentiyi kendiniz kurun ya da Open Design ile Codex’in etrafına baştan sona küratörlü bir tasarım katmanı geçirin. Kendi anahtarınızı getirin, çıktınızın sahibi olun.