Skip to content

Commit c031dc1

Browse files
open-design-crew[bot]徐燕来
open-design-crew[bot]
and
徐燕来
authored
feat(landing): localize event recap pages (#7119)
* feat(landing): localize event recap pages * fix(landing): preserve canonical event tutorial links --------- Co-authored-by: 徐燕来 <xuyanlai@refly.ai>
1 parent 1bf50f4 commit c031dc1

45 files changed

Lines changed: 5440 additions & 515 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/landing-page/app/_partials/open-design-hong-kong-workshop-i18n.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import en from './open-design-hong-kong-workshop-main.html?raw';
2+
import zh from './open-design-hong-kong-workshop-main.zh.html?raw';
3+
import ja from './open-design-hong-kong-workshop-main.ja.html?raw';
4+
import ko from './open-design-hong-kong-workshop-main.ko.html?raw';
5+
import de from './open-design-hong-kong-workshop-main.de.html?raw';
6+
import fr from './open-design-hong-kong-workshop-main.fr.html?raw';
7+
import ru from './open-design-hong-kong-workshop-main.ru.html?raw';
8+
import es from './open-design-hong-kong-workshop-main.es.html?raw';
9+
import ptbr from './open-design-hong-kong-workshop-main.pt-br.html?raw';
10+
import it from './open-design-hong-kong-workshop-main.it.html?raw';
11+
import tr from './open-design-hong-kong-workshop-main.tr.html?raw';
12+
13+
export const EVENT_BODY: Record<string, string> = { en, zh, ja, ko, de, fr, ru, es, 'pt-br': ptbr, it, tr };
14+
15+
export interface EventMeta { title: string; description: string }
16+
export const EVENT_META: Record<string, EventMeta> = {
17+
en: { title: 'OpenDesign Hong Kong Workshop Recap', description: 'A hands-on OpenDesign workshop in Hong Kong where participants connected design systems, live data, models, and skills to build interactive, shareable artifacts.' },
18+
zh: { title: 'OpenDesign 香港工作坊回顾', description: '一场在香港举办的 OpenDesign 动手工作坊：参与者连接设计系统、实时数据、模型与技能，制作可交互、可分享的作品。' },
19+
ja: { title: 'OpenDesign 香港ワークショップ レポート', description: '香港で行われた OpenDesign の実践型ワークショップ。参加者はデザインシステム、ライブデータ、モデル、スキルを組み合わせ、インタラクティブで共有できる成果物を制作しました。' },
20+
ko: { title: 'OpenDesign 홍콩 워크숍 후기', description: '홍콩에서 열린 OpenDesign 실습 워크숍에서 참가자들은 디자인 시스템, 실시간 데이터, 모델과 스킬을 연결해 인터랙티브하고 공유 가능한 결과물을 만들었습니다.' },
21+
de: { title: 'Rückblick auf den OpenDesign-Workshop in Hongkong', description: 'Ein praxisnaher OpenDesign-Workshop in Hongkong, bei dem die Teilnehmenden Designsysteme, Live-Daten, Modelle und Skills zu interaktiven, teilbaren Ergebnissen verbanden.' },
22+
fr: { title: 'Retour sur l’atelier OpenDesign à Hong Kong', description: 'Un atelier pratique OpenDesign à Hong Kong où les participants ont relié design systems, données en direct, modèles et skills pour créer des réalisations interactives et partageables.' },
23+
ru: { title: 'Итоги воркшопа OpenDesign в Гонконге', description: 'Практический воркшоп OpenDesign в Гонконге, где участники объединили дизайн-системы, данные в реальном времени, модели и навыки в интерактивные материалы, которыми можно делиться.' },
24+
es: { title: 'Resumen del taller OpenDesign de Hong Kong', description: 'Un taller práctico de OpenDesign en Hong Kong donde los participantes conectaron sistemas de diseño, datos en vivo, modelos y habilidades para crear piezas interactivas y compartibles.' },
25+
'pt-br': { title: 'Retrospectiva do workshop OpenDesign em Hong Kong', description: 'Um workshop prático do OpenDesign em Hong Kong, no qual participantes conectaram sistemas de design, dados ao vivo, modelos e skills para criar materiais interativos e compartilháveis.' },
26+
it: { title: 'Riepilogo del workshop OpenDesign di Hong Kong', description: 'Un workshop pratico di OpenDesign a Hong Kong, dove i partecipanti hanno unito design system, dati live, modelli e skill per creare risultati interattivi e condivisibili.' },
27+
tr: { title: 'OpenDesign Hong Kong Atölyesi Özeti', description: "Hong Kong'daki uygulamalı OpenDesign atölyesinde katılımcılar tasarım sistemlerini, canlı verileri, modelleri ve becerileri birleştirerek etkileşimli ve paylaşılabilir çalışmalar üretti." },
28+
};

‎apps/landing-page/app/_partials/open-design-hong-kong-workshop-main.de.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<main class="v4 meetup-v4">
2+
<section class="v4band v4hero meetup-hero">
3+
<div class="v4in">
4+
<div class="v4herotop">
5+
<div>
6+
<p class="v4eye">Community-Geschichte · Hongkong</p>
7+
<h1 class="v4h1">Hongkong hat OpenDesign nicht nur ausprobiert, sondern im Praxistest auf die Probe gestellt.</h1>
8+
<p class="v4sub">Am 16. August verwandelte ein Raum voller Entwickler Markensysteme, Live-Daten, Modelle und Fähigkeiten in funktionierende Artefakte – und zeigte uns genau, wo ein Agentenarbeitsbereich Mehrwert schafft.</p>
9+
<div class="v4cta-row">
10+
<a class="v4btn-p" href="https://github.com/nexu-io/open-design">Entdecken Sie OpenDesign ↗</a>
11+
<a class="v4btn-g" href="/community/ambassadors/">Hosten Sie eine lokale Sitzung ↗</a>
12+
</div>
13+
</div>
14+
<div class="v4snap meetup-snap">
15+
<div class="v4snap-head">
16+
<img class="v4snap-logo" src="/stories/open-design-hong-kong-workshop-cover.webp" alt="OpenDesign Hong Kong Workshop-Gruppe" />
17+
<div>
18+
<div class="v4snap-name">Hong Kong Workshop</div>
19+
<p class="v4snap-desc">Eine praktische Live-Sitzung zum Erstellen, Teilen und Produkt-Feedback.</p>
20+
</div>
21+
</div>
22+
<div class="v4snap-chips">
23+
<span class="v4chip">Systeme entwerfen</span>
24+
<span class="v4chip">Live-Daten</span>
25+
<span class="v4chip">Interaktive Decks</span>
26+
<span class="v4chip">Web-Erlebnisse</span>
27+
<span class="v4chip">Team-Workflows</span>
28+
</div>
29+
<div class="v4snap-uses"><span>Was den Arbeitsbereich betreten hat</span>Markenwerte, Projektkontext, Modelle, APIs, Eingabeaufforderungen und Ideen, die es wert sind, anderen Menschen gezeigt zu werden.</div>
30+
</div>
31+
</div>
32+
<div class="v4statline"></div>
33+
<div class="v4statstrip">
34+
<div><div class="n">16. August</div><div class="l">Ein Sonntagnachmittag zum Bauen und Teilen.</div></div>
35+
<div><div class="n">Hongkong</div><div class="l">Ein enger Gemeinschaftsraum, in dem jeder Laptop geöffnet ist.</div></div>
36+
<div><div class="n">Idee → Artefakt</div><div class="l">Von der ersten Aufforderung bis zu etwas Interaktivem und Präsentierbarem.</div></div>
37+
</div>
38+
</div>
39+
</section>
40+
41+
<section class="v4band alt v4promoband">
42+
<div class="v4in v4promo-c">
43+
<p class="v4promo-eye">Der Raum</p>
44+
<figure class="v4promo meetup-wide-photo">
45+
<img src="/stories/open-design-hong-kong-workshop-room.webp" alt="Teilnehmer versammelten sich während des OpenDesign Hong Kong-Workshops um ihre Laptops." loading="eager" />
46+
<figcaption>Die Sitzung ging schnell von einer gemeinsamen Komplettlösung zum Live-Aufbau, zur Fehlerbehebung und zum Zeigen und Erzählen über.</figcaption>
47+
</figure>
48+
</div>
49+
</section>
50+
51+
<section class="v4band">
52+
<div class="v4in narrow">
53+
<p class="v4eye">Was ist passiert?</p>
54+
<h2 class="v4h2">Der Workshop wurde zu einem Live-Produktlabor.</h2>
55+
<p>Die Teilnehmer arbeiteten an Präsentationen, Dashboards, Websites und Produktprototypen. Einige begannen mit einem bestehenden Marken- oder Designsystem; andere verknüpften externe Daten und APIs und formten das Ergebnis dann in etwas Visuelles und Interaktives.</p>
56+
<p>Der Umfang der Arbeit war wichtig. Es wurde getestet, ob OpenDesign den Kontext über sehr unterschiedliche Aufgaben hinweg speichern kann – nicht als einmaliger Generator, sondern als Arbeitsbereich, in dem Menschen erstellen, prüfen, verfeinern und präsentieren können.</p>
57+
<p>Jeder Erfolg und jeder Moment der Reibung wurde zu nützlichem Feedback: wie schnell ein neuer Benutzer ein Modell verbinden kann, wie vorhersehbar sich die Bearbeitung anfühlt und ob ein fertiges Artefakt leicht an jemand anderen weitergegeben werden kann.</p>
58+
</div>
59+
</section>
60+
61+
<section class="v4band ink v4quoteband">
62+
<div class="v4in narrow">
63+
<blockquote class="v4bigq">Der stärkste Moment war keine perfekte Demo. <span class="grn">Es war zu beobachten, wie echte Arbeit den Kontakt mit dem Raum überlebte.</span></blockquote>
64+
<div class="v4by">OpenDesign Hong Kong Workshop · 16. August</div>
65+
</div>
66+
</section>
67+
68+
<section class="v4band alt">
69+
<div class="v4in">
70+
<div class="v4feat">
71+
<div class="v4feat-txt">
72+
<p class="v4eye">Das Fundament</p>
73+
<h2 class="v4h2">Ein Designsystem sorgte dafür, dass sich jedes neue Artefakt verbunden anfühlte.</h2>
74+
<p class="v4lede">Der deutlichste Produktwert im Raum war Konsistenz. Die Teilnehmer könnten eine Markenwebsite oder ein Repository einbinden, gemeinsame Typografie, Abstände und Assets festlegen und dieses System dann für Decks, soziale Inhalte, Prototypen und Webseiten wiederverwenden.</p>
75+
<p class="v4lede">Das verändert die Rolle der KI. Anstatt isolierte visuelle Elemente zu generieren, gibt der Arbeitsbereich Modellen und Agenten eine Reihe von Grenzen vor, sodass Teams schnell vorankommen können, ohne die visuelle Sprache jedes Mal von vorne beginnen zu müssen.</p>
76+
<div class="meetup-flow">
77+
<span>Markenkontext</span>
78+
<span>Designsystem</span>
79+
<span>Modelle und Fähigkeiten</span>
80+
<span>Arbeitsartefakt</span>
81+
<span>Verfeinerung</span>
82+
<span>Teilen</span>
83+
</div>
84+
</div>
85+
<figure class="v4feat-img">
86+
<img src="/stories/open-design-hong-kong-workshop-session.webp" alt="Ein Teilnehmer präsentiert einen Designsystem-Workflow in OpenDesign." loading="lazy" />
87+
<figcaption>Markenentscheidungen wurden zu wiederverwendbarem Kontext und nicht zu Anweisungen, die bei jeder Eingabeaufforderung wiederholt werden mussten.</figcaption>
88+
</figure>
89+
</div>
90+
</div>
91+
</section>
92+
93+
<section class="v4band">
94+
<div class="v4in">
95+
<div class="v4in narrow meetup-case-intro">
96+
<p class="v4eye">Live-Builds · 01</p>
97+
<h2 class="v4h2">Komplexe Ideen wurden erforschbar und nicht nur erklärbar.</h2>
98+
<p class="v4lede">Ein Teilnehmer erstellte zwei Versionen einer Systemdenken-Präsentation und fügte animierte und interaktive Elemente hinzu, um das Verfolgen eines abstrakten Modells zu erleichtern.</p>
99+
<p class="v4lede">Eine weitere verbundene offene Daten- und Karten-API für Hongkong, um ein Live-Wetter-Dashboard zu erstellen – ohne vorher die API-Dokumentation durchzuarbeiten. Die Absicht in natürlicher Sprache wurde zu einer Brücke zwischen Daten und einer nutzbaren Schnittstelle.</p>
100+
</div>
101+
<div class="meetup-pair">
102+
<figure>
103+
<img src="/stories/open-design-hong-kong-workshop-systems-thinking.webp" alt="Eine interaktive Präsentation zum Systemdenken, die während des Workshops in Hongkong erstellt wurde." loading="lazy" />
104+
<figcaption>Ein systemisches Denkmodell gewann an Bewegung und Interaktion, wodurch die Beziehungen leichter erforscht werden konnten.</figcaption>
105+
</figure>
106+
<figure>
107+
<img src="/stories/open-design-hong-kong-workshop-weather-dashboard.webp" alt="Ein Live-Wetter-Dashboard für Hongkong, erstellt mit OpenDesign und öffentlichen Daten-APIs." loading="lazy" />
108+
<figcaption>Die offenen Daten und Karten von Hongkong wurden durch einen Workflow in natürlicher Sprache zu einem Live-Dashboard.</figcaption>
109+
</figure>
110+
</div>
111+
</div>
112+
</section>
113+
114+
<section class="v4band alt">
115+
<div class="v4in">
116+
<div class="v4feat">
117+
<div class="v4feat-txt">
118+
<p class="v4eye">Live-Builds · 02</p>
119+
<h2 class="v4h2">Das Show-and-Tell reichte von der Analyse bis zur Atmosphäre.</h2>
120+
<p class="v4lede">Der Raum konvergierte nicht auf eine Art von Ausgabe. Neben strukturierten Dashboards und Präsentationen wurden ausdrucksstarke Web-Erlebnisse entwickelt, um eine Stimmung zu erzeugen, die Aufmerksamkeit zu fesseln und zum Erkunden einzuladen.</p>
121+
<p class="v4lede">Diese Vielfalt ist der Sinn eines Agentenarbeitsbereichs: Das gleiche zugrunde liegende System kann einen strengen internen Prototyp, einen interaktiven Erklärer oder ein visuelles Konzept unterstützen, das zur Präsentation bereit ist.</p>
122+
</div>
123+
<figure class="v4feat-img meetup-showcase-photo">
124+
<img src="/stories/open-design-hong-kong-workshop-showcase.webp" alt="Ein Teilnehmer präsentiert ein immersives Web-Erlebnis während des OpenDesign Hong Kong-Workshops." loading="lazy" />
125+
<figcaption>Die Abschlussvitrine bot sowohl Platz für praktische Werkzeuge als auch für ausdrucksstarke visuelle Experimente.</figcaption>
126+
</figure>
127+
</div>
128+
</div>
129+
</section>
130+
131+
<section class="v4band ink v4feedbackband">
132+
<div class="v4in narrow">
133+
<p class="v4eye">Was uns der Raum erzählt hat</p>
134+
<h2 class="v4h2">Ein leistungsstarker Workflow muss sich auch an den Rändern mühelos anfühlen.</h2>
135+
<div class="v4feats3 meetup-feedback">
136+
<div><h3>Starten Sie vor der Eingabeaufforderung.</h3><p>Verbindung, Autorisierung und Modelleinrichtung müssen so klar sein, dass ein Erstbenutzer beginnen kann, ohne CLI-Tools oder API-Schlüssel zu verstehen.</p></div>
137+
<div><h3>AI-first benötigt immer noch direkte Kontrolle.</h3><p>Menschen wünschen sich eine vorhersehbare Bildgenerierung und einfache Aktionen wie Ziehen, Größenänderung, Ausrichten und Rückgängigmachen sowie agentengesteuerte Bearbeitungen.</p></div>
138+
<div><h3>Die Lieferung schließt den Workflow ab.</h3><p>Ein fertiges Artefakt sollte problemlos in einen Freigabelink, ein PDF, ein Word-Dokument, ein Feishu oder Google Drive verschoben werden – ohne dass der Empfänger dazu aufgefordert werden muss, technisch zu werden.</p></div>
139+
</div>
140+
</div>
141+
</section>
142+
143+
<section class="v4band v4verdictband">
144+
<div class="v4in narrow">
145+
<p class="v4eye">Was wir gelernt haben</p>
146+
<blockquote class="v4bigverdict">OpenDesign ist am nützlichsten, wenn Designsysteme, Agenten, Daten und bearbeitbare Ausgaben an einem Ort zusammentreffen.</blockquote>
147+
<div class="v4feats3 meetup-lessons">
148+
<div><h3>Konsistenz ist der Multiplikator.</h3><p>Ein wiederverwendbares Designsystem lässt jedes neue Artefakt mit dem richtigen visuellen Kontext beginnen.</p></div>
149+
<div><h3>Live-Verbindungen sorgen für den Wow-Moment.</h3><p>Modelle und Fähigkeiten werden greifbar, wenn sie reale Daten in etwas verwandeln, das Menschen nutzen und zeigen können.</p></div>
150+
<div><h3>Die letzte Meile ist Teil der Schöpfung.</h3><p>Bearbeitbarkeit, Export und Teilen entscheiden darüber, ob ein beeindruckendes Ergebnis Teil einer echten Arbeit wird.</p></div>
151+
</div>
152+
</div>
153+
</section>
154+
155+
<section class="v4band ink v4final meetup-final">
156+
<div class="v4in">
157+
<p class="v4eye">Nächster Schritt</p>
158+
<h2 class="v4final-h">Bringen Sie einen echten Workflow zur nächsten OpenDesign-Sitzung mit.</h2>
159+
<p class="v4final-p">Die besten Community-Workshops beginnen mit Arbeiten, die den Menschen bereits am Herzen liegen, und schaffen dann genügend Raum, um sie gemeinsam aufzubauen, zu hinterfragen, zu verfeinern und zu teilen.</p>
160+
<div class="v4cta-row">
161+
<a class="v4btn-coral" href="/community/ambassadors/">Bewerben Sie sich als Botschafter ↗</a>
162+
<a class="v4btn-gd" href="https://github.com/nexu-io/open-design">Beginnen Sie mit der Erstellung mit OpenDesign ↗</a>
163+
</div>
164+
</div>
165+
</section>
166+
</main>

0 commit comments

Comments
 (0)