A
Style A · Zinc + Indigo · minimal
Geist type, Flickering Grid page headers, Magic Card roles, shadcn Tabs navigation.
Design course, first case
How this site was designed by an agent
From a rejected first look to one site in three switchable styles: the rounds, the rules, and the UI Hub component behind every module.
2,376UI Hub items searched
61modules mapped to a Hub component
102screenshots per check run
10languages
Before and after
Drag the handle. Left: the round-3 home page that was rejected. Right: the shipped home page in style A.
Round 3 · rejectedRound 5 · shippedThree styles, one site
All three directions were kept: A is the default, B and C are switchable themes. Each keeps its own fonts and signature modules, not just its colours.
B
Style B · Black + Emerald · dark tech
Floating Dock navigation, Background Beams headers, React Bits Spotlight cards, mono labels.
C
Style C · Stone + Rose · editorial
Instrument Serif headlines with a highlight sweep, Hero Highlight dots, 3D role cards.
Five rounds
What changed each time, and why.
Round 1 · campus bento
UI Hub styles were clustered and editorial × motion was picked. It shipped, but the look came first and the components second.
Rounds 2–3 · more decoration
More effects were added to make it feel richer. The user called it ugly: too many accents, decoration without a job.
Round 4 · three directions
New rules: neutral plus one accent, and every module ported from a UI Hub component’s source code. Three home pages were built side by side.
Round 5 · one site, three styles
The user kept all three. A became the default; B and C became themes. Every page was rebuilt in 10 languages and the daily update kept running.
Checks · screenshots and Lighthouse
Each change is checked at 1440 and 390 px, light and dark, in every style; then Lighthouse runs on the home page and a detail page. Fix, repeat.
Notes from the build
需求
Agent Academy 是一所给 agent 读的学校：真实的 skill、prompt、MCP 服务器和机器人模板，按职业整理，每一条都附原始链接和许可证。首页只有一件事要做：展示里面有什么，并交出一段可复制的 prompt。约束：10 种语言、浅色和深色、长链接永不溢出、所有卡片内边距一致。
一直坚持的规则
- 中性色加一个强调色。 每种风格只用一套中性色和一个强调色，文字对比度保持在 4.5:1 以上。
- 每个模块都来自 UI Hub。 每个区块写明它移植自哪个 Hub 条目：ID、预览图和原始代码。移植有偏差时写下原因。
- 由截图决定。 桌面和移动端、两种主题的截图检查完溢出、截断和内边距不齐之前，什么都不上线。
每一轮改了什么
前几轮先定外观，再去找组件。结果是没有用途的装饰，被否定了。从第 4 轮起顺序反过来：先为每个模块选定 Hub 组件，从源码移植，再用 token 上主题。这也是三种风格能共用同一套页面结构的原因：变的只有 token、字体和标志性模块。
风格切换的原理
一段小脚本在首次绘制前设置 <html data-skin>，依次取 ?skin=、已保存的选择，否则用 A。浅色和深色是单独的开关。每种风格的 CSS 只作用于自己的皮肤，所以切换时不加载新文件，也不会闪烁。
需求
Agent Academy 是一所給 agent 讀的學校：真實的 skill、prompt、MCP 伺服器和機器人範本，依職業整理，每一條都附原始連結和授權。首頁只有一件事要做：展示裡面有什麼，並交出一段可複製的 prompt。限制：10 種語言、淺色和深色、長連結永不溢出、所有卡片內距一致。
一直堅持的規則
- 中性色加一個強調色。 每種風格只用一套中性色和一個強調色，文字對比度保持在 4.5:1 以上。
- 每個模組都來自 UI Hub。 每個區塊寫明它移植自哪個 Hub 項目：ID、預覽圖和原始程式碼。移植有偏差時寫下原因。
- 由截圖決定。 桌面和行動裝置、兩種主題的截圖檢查完溢出、截斷和內距不齊之前，什麼都不上線。
每一輪改了什麼
前幾輪先定外觀，再去找元件。結果是沒有用途的裝飾，被否決了。從第 4 輪起順序反過來：先為每個模組選定 Hub 元件，從原始碼移植，再用 token 套主題。這也是三種風格能共用同一套頁面結構的原因：變的只有 token、字型和招牌模組。
風格切換的原理
一段小腳本在首次繪製前設定 <html data-skin>，依序取 ?skin=、已儲存的選擇，否則用 A。淺色和深色是獨立的開關。每種風格的 CSS 只作用於自己的外觀，所以切換時不載入新檔案，也不會閃爍。
The brief
Agent Academy is a school that agents read: real skills, prompts, MCP servers and bot templates, sorted by profession, each with its source link and licence. The home page has one job: show what is inside and hand over one prompt to copy. Constraints: 10 languages, light and dark, long links never overflow, one card padding everywhere.
Rules that held
- Neutral plus one accent. Every style uses one neutral scale and a single accent, and text contrast stays at 4.5:1 or better.
- Every module comes from UI Hub. Each block names the Hub item it was ported from: id, preview and original code. Where the port deviates, the reason is written down.
- Screenshots decide. Nothing ships before desktop and mobile shots in both themes are checked for overflow, clipping and uneven padding.
What changed between rounds
The first rounds picked a look first and found components later. The result was decoration without a job, and it was rejected. From round four the order flipped: choose the Hub component for each module, port it from its source, then theme it with tokens. That is also why three styles can share one page structure: only tokens, fonts and the signature modules change.
How switching works
A small script sets <html data-skin> before the first paint, from ?skin=, then the saved choice, then A. Light and dark are a separate toggle. Each style's CSS is scoped to its skin, so switching loads nothing new and never flashes.
ブリーフ
Agent Academy は、エージェントが読む学校です。実在のスキル、プロンプト、MCP サーバー、ボットテンプレートを職種別に整理し、すべてに出典リンクとライセンスを付けています。トップページの役割は 1 つ。中身を見せて、コピーできるプロンプトを 1 つ渡すこと。制約：10 言語、ライト／ダーク、長いリンクを絶対にはみ出させない、カードの余白はどこでも同じ。
守り続けたルール
- ニュートラル＋アクセント 1 色。 どのスタイルもニュートラルのスケール 1 つとアクセント 1 色だけを使い、文字のコントラストは 4.5:1 以上。
- すべてのモジュールは UI Hub から。 各ブロックに移植元の Hub 項目（ID、プレビュー、元のコード）を明記。移植で変えた点があれば理由も書く。
- スクリーンショットで決める。 デスクトップとモバイル、両テーマのスクリーンショットで、はみ出し・切れ・余白の不揃いを確認するまで公開しない。
ラウンドごとに変わったこと
最初のラウンドは見た目を先に決め、コンポーネントを後から探しました。結果は役割のない装飾で、却下されました。ラウンド 4 から順序を逆にしました。モジュールごとに Hub コンポーネントを選び、ソースから移植し、最後にトークンでテーマを付ける。だから 3 つのスタイルが同じページ構造を共有できます。変わるのはトークン、フォント、特徴的なモジュールだけです。
切り替えの仕組み
小さなスクリプトが最初の描画より前に <html data-skin> を設定します。優先順は ?skin=、保存された選択、そして A。ライト／ダークは別のトグルです。各スタイルの CSS はそのスキンにだけ効くので、切り替えても新しく読み込むものはなく、ちらつきもありません。
브리프
Agent Academy는 에이전트가 읽는 학교입니다. 실제 스킬, 프롬프트, MCP 서버, 봇 템플릿을 직업별로 정리했고, 모두 출처 링크와 라이선스가 붙어 있습니다. 홈페이지의 일은 하나입니다. 안에 무엇이 있는지 보여 주고, 복사할 프롬프트 하나를 건네는 것. 제약: 10개 언어, 라이트와 다크, 긴 링크는 절대 넘치지 않음, 카드 여백은 어디서나 같음.
끝까지 지킨 규칙
- 중립색에 강조색 하나. 모든 스타일은 중립 스케일 하나와 강조색 하나만 쓰고, 글자 대비는 4.5:1 이상을 유지합니다.
- 모든 모듈은 UI Hub에서. 각 블록에 이식한 Hub 항목(ID, 미리보기, 원본 코드)을 적습니다. 이식하면서 달라진 점이 있으면 이유도 적습니다.
- 스크린샷이 결정합니다. 데스크톱과 모바일, 두 테마의 스크린샷에서 넘침, 잘림, 고르지 않은 여백을 확인하기 전에는 공개하지 않습니다.
라운드 사이에 바뀐 것
처음 라운드들은 모양을 먼저 정하고 컴포넌트를 나중에 찾았습니다. 결과는 역할 없는 장식이었고 거절당했습니다. 4라운드부터 순서를 뒤집었습니다. 모듈마다 Hub 컴포넌트를 고르고, 소스에서 이식한 뒤, 토큰으로 테마를 입힙니다. 그래서 세 스타일이 같은 페이지 구조를 나눠 쓸 수 있습니다. 바뀌는 것은 토큰, 글꼴, 대표 모듈뿐입니다.
전환이 작동하는 방식
작은 스크립트가 첫 렌더링 전에 <html data-skin>을 정합니다. 순서는 ?skin=, 저장된 선택, 그다음 A입니다. 라이트와 다크는 별도의 토글입니다. 각 스타일의 CSS는 해당 스킨에만 적용되므로, 전환해도 새로 불러오는 것이 없고 깜빡이지 않습니다.
Taklimat
Agent Academy ialah sekolah yang dibaca oleh ejen: skill, prompt, pelayan MCP dan templat bot sebenar, disusun mengikut profesion, setiap satu dengan pautan sumber dan lesennya. Laman utama ada satu tugas: tunjukkan isi kandungan dan serahkan satu prompt untuk disalin. Kekangan: 10 bahasa, cerah dan gelap, pautan panjang tidak pernah melimpah, padding kad yang sama di mana-mana.
Peraturan yang kekal
- Neutral dan satu aksen. Setiap gaya menggunakan satu skala neutral dan satu aksen sahaja; kontras teks kekal pada 4.5:1 atau lebih.
- Setiap modul datang daripada UI Hub. Setiap blok menamakan item Hub asalnya: id, pratonton dan kod asal. Jika pemindahan menyimpang, sebabnya dicatat.
- Tangkapan skrin menentukan. Tiada apa diterbitkan sebelum tangkapan desktop dan mudah alih dalam kedua-dua tema disemak untuk limpahan, keratan dan padding yang tidak sekata.
Apa yang berubah antara pusingan
Pusingan awal memilih rupa dahulu dan mencari komponen kemudian. Hasilnya hiasan tanpa fungsi, dan ia ditolak. Mulai pusingan empat, susunannya diterbalikkan: pilih komponen Hub untuk setiap modul, pindahkan daripada sumbernya, kemudian gayakan dengan token. Itu juga sebabnya tiga gaya boleh berkongsi satu struktur halaman: hanya token, fon dan modul khas yang berubah.
Cara pertukaran gaya berfungsi
Skrip kecil menetapkan <html data-skin> sebelum lukisan pertama, daripada ?skin=, kemudian pilihan yang disimpan, dan jika tiada, A. Cerah dan gelap ialah suis berasingan. CSS setiap gaya terhad kepada skinnya, jadi pertukaran tidak memuatkan apa-apa yang baharu dan tidak pernah berkelip.
Yêu cầu
Agent Academy là một trường học dành cho các agent đọc: skill, prompt, máy chủ MCP và mẫu bot có thật, sắp xếp theo nghề, mỗi mục đều có liên kết nguồn và giấy phép. Trang chủ chỉ có một việc: cho thấy bên trong có gì và trao một prompt để sao chép. Ràng buộc: 10 ngôn ngữ, sáng và tối, liên kết dài không bao giờ tràn, khoảng đệm thẻ như nhau ở mọi nơi.
Những quy tắc được giữ
- Trung tính cộng một màu nhấn. Mỗi phong cách dùng một thang trung tính và đúng một màu nhấn; độ tương phản chữ luôn từ 4.5:1 trở lên.
- Mọi mô-đun đều đến từ UI Hub. Mỗi khối ghi rõ mục Hub mà nó được chuyển từ đó: id, bản xem trước và mã gốc. Khi bản chuyển khác đi, lý do được ghi lại.
- Ảnh chụp quyết định. Không phát hành gì trước khi ảnh chụp máy tính và di động ở cả hai giao diện được kiểm tra tràn, cắt chữ và khoảng đệm không đều.
Điều gì thay đổi giữa các vòng
Những vòng đầu chọn giao diện trước rồi mới tìm thành phần. Kết quả là trang trí không có chức năng, và bị từ chối. Từ vòng bốn, thứ tự được đảo lại: chọn thành phần Hub cho từng mô-đun, chuyển từ mã nguồn, rồi tạo giao diện bằng token. Vì vậy ba phong cách có thể dùng chung một cấu trúc trang: chỉ token, phông chữ và các mô-đun đặc trưng thay đổi.
Cách chuyển phong cách hoạt động
Một đoạn script nhỏ đặt <html data-skin> trước lần vẽ đầu tiên, lấy từ ?skin=, sau đó từ lựa chọn đã lưu, nếu không thì A. Sáng và tối là một công tắc riêng. CSS của mỗi phong cách chỉ áp dụng cho skin của nó, nên chuyển đổi không tải thêm gì và không bao giờ nhấp nháy.
Le brief
Agent Academy est une école que lisent les agents : de vrais skills, prompts, serveurs MCP et modèles de bots, classés par métier, chacun avec son lien source et sa licence. L’accueil a une seule mission : montrer ce qu’il y a dedans et remettre un prompt à copier. Contraintes : 10 langues, clair et sombre, les liens longs ne débordent jamais, le même padding de carte partout.
Les règles qui ont tenu
- Du neutre plus un accent. Chaque style utilise une gamme neutre et un seul accent ; le contraste du texte reste à 4,5:1 ou plus.
- Chaque module vient d’UI Hub. Chaque bloc nomme l’élément Hub dont il est porté : id, aperçu et code d’origine. Quand le portage s’en écarte, la raison est notée.
- Les captures tranchent. Rien n’est livré avant que les captures ordinateur et mobile, dans les deux thèmes, soient vérifiées : débordements, coupures, padding inégal.
Ce qui a changé d’un tour à l’autre
Les premiers tours choisissaient d’abord un look, puis cherchaient des composants. Résultat : du décor sans fonction, refusé. À partir du tour quatre, l’ordre s’est inversé : choisir le composant Hub de chaque module, le porter depuis sa source, puis le thématiser avec des tokens. C’est aussi pourquoi trois styles peuvent partager une même structure de page : seuls les tokens, les polices et les modules signature changent.
Comment fonctionne le changement de style
Un petit script fixe <html data-skin> avant le premier rendu, à partir de ?skin=, puis du choix enregistré, sinon A. Clair et sombre sont un interrupteur à part. Le CSS de chaque style est limité à son skin : changer de style ne charge rien de nouveau et ne clignote jamais.
El encargo
Agent Academy es una escuela que leen los agentes: skills, prompts, servidores MCP y plantillas de bots reales, ordenados por profesión, cada uno con su enlace de origen y su licencia. La portada tiene un solo trabajo: mostrar qué hay dentro y entregar un prompt para copiar. Restricciones: 10 idiomas, claro y oscuro, los enlaces largos nunca se desbordan, el mismo relleno de tarjeta en todas partes.
Reglas que se mantuvieron
- Neutro más un acento. Cada estilo usa una escala neutra y un único acento; el contraste del texto se queda en 4,5:1 o más.
- Cada módulo viene de UI Hub. Cada bloque nombra el elemento de Hub del que se portó: id, vista previa y código original. Cuando el port se desvía, se anota el motivo.
- Deciden las capturas. Nada se publica antes de revisar capturas de escritorio y móvil en ambos temas en busca de desbordes, recortes y rellenos desiguales.
Qué cambió entre rondas
Las primeras rondas eligieron primero un aspecto y buscaron componentes después. El resultado fue decoración sin función, y se rechazó. Desde la ronda cuatro se invirtió el orden: elegir el componente de Hub para cada módulo, portarlo desde su código y luego tematizarlo con tokens. Por eso tres estilos pueden compartir la misma estructura de página: solo cambian los tokens, las fuentes y los módulos característicos.
Cómo funciona el cambio de estilo
Un script pequeño fija <html data-skin> antes del primer pintado, a partir de ?skin=, luego de la elección guardada y, si no, A. Claro y oscuro son un interruptor aparte. El CSS de cada estilo está acotado a su skin, así que cambiar no carga nada nuevo y nunca parpadea.
Das Briefing
Agent Academy ist eine Schule, die Agenten lesen: echte Skills, Prompts, MCP-Server und Bot-Vorlagen, nach Berufen sortiert, jeweils mit Quelllink und Lizenz. Die Startseite hat eine Aufgabe: zeigen, was drin ist, und einen Prompt zum Kopieren übergeben. Rahmen: 10 Sprachen, hell und dunkel, lange Links laufen nie über, überall derselbe Karten-Innenabstand.
Regeln, die gehalten haben
- Neutral plus ein Akzent. Jeder Stil nutzt eine neutrale Skala und genau einen Akzent; der Textkontrast liegt bei mindestens 4,5:1.
- Jedes Modul stammt aus UI Hub. Jeder Block nennt den Hub-Eintrag, aus dem er portiert wurde: ID, Vorschau und Originalcode. Weicht die Portierung ab, steht der Grund dabei.
- Screenshots entscheiden. Nichts geht live, bevor Desktop- und Mobil-Screenshots in beiden Themes auf Überlauf, Abschneiden und ungleiche Abstände geprüft sind.
Was sich zwischen den Runden geändert hat
Die ersten Runden wählten zuerst einen Look und suchten danach Komponenten. Heraus kam Dekoration ohne Aufgabe, und sie wurde abgelehnt. Ab Runde vier drehte sich die Reihenfolge: für jedes Modul die Hub-Komponente wählen, aus ihrer Quelle portieren, dann mit Tokens gestalten. Deshalb können sich drei Stile eine Seitenstruktur teilen: Nur Tokens, Schriften und Signatur-Module ändern sich.
Wie das Umschalten funktioniert
Ein kleines Skript setzt <html data-skin> vor dem ersten Zeichnen, aus ?skin=, dann aus der gespeicherten Wahl, sonst A. Hell und dunkel sind ein eigener Schalter. Das CSS jedes Stils ist auf seinen Skin begrenzt, daher lädt das Umschalten nichts nach und flackert nie.
Module → Hub component (excerpt)
Every module on every page names the UI Hub item it was ported from. Shared rows are re-skinned by tokens.
| Module | A | B | C |
|---|---|---|---|
Header navigationnav | Tabs (pill list as segmented nav)shadcn/ui | Floating DockAceternity UI | Direction Aware TabsCult UI |
Resource cardcards | Cardshadcn/ui | Spotlight CardReact Bits | Minimal CardCult UI |
Role cardsroles | Magic CardMagic UI | Spotlight CardReact Bits | 3D Card EffectAceternity UI |
Five-step / per-day / rounds timelinetimeline | Timeline (align left, bullets with child)MantineShared by all three styles | ||
Show N more (per step) / show the full original textmore | Collapsible · Settings Panelshadcn/uiShared by all three styles | ||
Breadcrumbcrumbs | BreadcrumbShoelaceShared by all three styles | ||
A/B/C style switcherskin-switch | Tabs · TabsList as segmented controlshadcn/uiShared by all three styles | ||
Footerfooter | Footer · Social media icons (sitemap columns)FlowbiteShared by all three styles | ||
Long-form text (case notes; full original SKILL.md / README / raw file where the license allows)prose | Typography (normalize + font/size props)Open PropsShared by all three styles | ||
Before / afterbefore-after | CompareAceternity UIShared by all three styles | ||