Website coverage and examples
This is a partial extraction and independent adaptation, not a complete reproduction. On 2026-09-19 we visually revisited all six desktop sections of the official website, plus Information and the expanded menu at 390 × 844. The two public CSS hashes still matched the initial study. That does not establish that every resource or runtime behavior is unchanged.
See the initial study and follow-up evidence.
Coverage
| Area | Available | Remaining gap |
|---|---|---|
| Design rules | Hierarchy, signals, geometry, density, responsive and accessibility guidance; skill now includes source mappings and distinct navigation/display font roles | All official pages and states have not been extracted |
| Components | Bilingual links, news rows, directories; buttons, tabs and media primitives | 1.1 adds section navigation, modal menus and archive/media galleries; game-specific assets and business logic remain caller-owned |
| Motion | Entrance, count-up, photo arcs and depth; skill now documents defaults, setup, cleanup and source evidence | 1.1 adds independent navigation, loading and particles; proprietary shaders and complete official timelines remain unverified |
| Examples | Component demos, terminal showcase, the original bulletin composition below | The terminal showcase does not demonstrate official homepage parity |
The installed skill contains its own evidence summary, coverage table and copyable HTML/JavaScript examples. The entire repository is not required to read that guidance.
Added in 1.1.0
Open the six-section showcase · Public API and markup
Five /site controllers and Registry site adapters now provide native scrolling with history/focus, modal mobile menus, archive/media galleries, real task progress with retry/cancellation, and original WebGL/2D/static particle fields. The showcase uses Chinese labels and original SVG artwork. Reduced-motion CSS now disables legacy glow, outline and loading loops. These reusable implementations do not claim parity with the source site's private rendering pipeline.
Original product bulletin
This system example composes .ak-nav, .ak-news-list and .ak-button. It uses bilingual hierarchy, an asymmetric content grid, thin separators and a scoped cyan signal, with stacked content in narrow containers. It uses no game artwork.
DESIGN / DEVELOPMENT
让信息
清晰抵达。
组件、设计记录与交互规范，按内容层级组织每一次更新。
阅读研究更新记录 / RELEASE NOTES
SOURCE / HTML
<section class="site-briefing" aria-label="产品更新情报示例">
<div class="site-briefing__masthead">
<span>AK / UI</span>
<span>PRODUCT BULLETIN</span>
</div>
<nav class="ak-nav" aria-label="产品情报导航">
<a class="ak-nav__link" href="/guide/official-site-examples">
<span class="ak-nav__label">风格示例</span>
<span class="ak-nav__description" lang="en">Examples</span>
</a>
<a class="ak-nav__link" href="/components/">
<span class="ak-nav__label">组件目录</span>
<span class="ak-nav__description" lang="en">Components</span>
</a>
<a class="ak-nav__link" href="/guide/tokens">
<span class="ak-nav__label">设计规范</span>
<span class="ak-nav__description" lang="en">Design tokens</span>
</a>
</nav>
<div class="site-briefing__body">
<header class="site-briefing__lead">
<p class="site-briefing__eyebrow" lang="en">DESIGN / DEVELOPMENT</p>
<h3>让信息<br>清晰抵达。</h3>
<p class="site-briefing__description">组件、设计记录与交互规范，按内容层级组织每一次更新。</p>
<a class="ak-button site-briefing__more" href="/guide/official-site-study">阅读研究 <span aria-hidden="true">↗</span></a>
</header>
<div class="site-briefing__updates">
<p class="site-briefing__eyebrow">更新记录 / RELEASE NOTES</p>
<ul class="ak-news-list" role="list" aria-label="设计系统更新记录">
<li class="ak-news-list__item">
<a class="ak-news-list__link" href="/components/ak-nav">
<span class="ak-news-list__category">组件</span>
<span class="ak-news-list__title">双语导航与内容目录</span>
<time class="ak-news-list__time" datetime="2026-09-15">2026-09-15</time>
</a>
</li>
<li class="ak-news-list__item">
<a class="ak-news-list__link" href="/components/ak-news-list">
<span class="ak-news-list__category">规范</span>
<span class="ak-news-list__title">让长标题、日期与分类各就其位</span>
<time class="ak-news-list__time" datetime="2026-09-15">2026-09-15</time>
</a>
</li>
<li class="ak-news-list__item">
<a class="ak-news-list__link" href="/guide/official-site-study">
<span class="ak-news-list__category">研究</span>
<span class="ak-news-list__title">从官网观察到可复用的设计规则</span>
<time class="ak-news-list__time" datetime="2026-09-15">2026-09-15</time>
</a>
</li>
</ul>
</div>
</div>
<p class="site-briefing__footer">独立设计示例 <span lang="en">BUILT WITH AK-UI</span></p>
</section>
<style>
.site-briefing {
/* Source-inspired local accent; all global token defaults stay intact. */
--ak-signal-info: #19d1ff;
container: site-briefing / inline-size;
box-sizing: border-box;
width: 100%;
padding: var(--ak-space-5);
color: var(--ak-text-primary);
background: var(--ak-surface-canvas);
font-family: var(--ak-font-sans);
}
.site-briefing__masthead,
.site-briefing__footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--ak-space-2);
margin: 0;
padding-block: var(--ak-space-3);
border-bottom: var(--ak-line-hairline) solid var(--ak-text-secondary);
font: 700 0.875rem / 1.5 var(--ak-font-mono);
}
.site-briefing .ak-nav { padding-inline: 0; margin-block: var(--ak-space-3); }
.site-briefing__body { display: grid; gap: var(--ak-space-6); padding-block: var(--ak-space-5); }
.site-briefing__body > * { min-width: 0; }
.site-briefing__eyebrow {
margin: 0 0 var(--ak-space-4);
color: var(--ak-signal-info);
font: 700 0.875rem / 1.6 var(--ak-font-mono);
letter-spacing: var(--ak-type-wide);
}
.site-briefing__lead h3 {
margin: 0;
font: 900 clamp(2rem, 7cqi, 3.5rem) / 1.2 var(--ak-font-sans);
letter-spacing: var(--ak-type-tight);
}
.site-briefing__description { max-width: 32ch; margin-block: var(--ak-space-5); line-height: 1.8; }
.site-briefing .site-briefing__more {
gap: var(--ak-space-5);
width: auto;
min-height: max(44px, var(--ak-density-control-height));
padding-inline: var(--ak-space-4);
color: var(--ak-text-inverse);
background: var(--ak-signal-info);
box-shadow: none;
text-decoration: none;
transition: color var(--ak-motion-base), background-color var(--ak-motion-base);
}
.site-briefing .site-briefing__more:hover {
color: var(--ak-text-inverse);
background: var(--ak-text-primary);
transform: none;
filter: none;
}
.site-briefing .site-briefing__more:focus-visible {
outline: var(--ak-focus-width) solid var(--ak-focus-color);
outline-offset: var(--ak-focus-offset);
}
.site-briefing__footer { border-bottom: 0; border-top: var(--ak-line-hairline) solid var(--ak-text-secondary); color: var(--ak-text-secondary); }
@container site-briefing (min-width: 30rem) {
.site-briefing__body { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
@media (prefers-reduced-motion: reduce) {
.site-briefing .site-briefing__more { transition: none; }
}
</style>Expand the source to copy HTML and local CSS. Import @yunyoujun/ak-ui/style.css in the application entry. Replace documentation links with real product routes and set aria-current from the actual location. Filtering, sorting, routing, section tracking and mobile-menu behavior remain caller-owned.
Source motion versus adaptation
The dated shell CSS declares 300ms navigation feedback and 200ms mobile-menu opacity/transform transitions. Computed styles before and after opening the portrait menu show seven delays from 0 to 420ms in 70ms steps. The page CSS declares a 2s canvas scale, 1s title displacement and delayed 600ms decorative fades. These declarations do not establish the complete runtime timeline.
The following interactive example is an independent ak-ui extension. It demonstrates entrance and count-up replay, with final-state rendering for reduced motion. Its controls currently use Chinese labels.
createEntrance defaults to 650ms and createCountUp to 1000ms. They do not automatically read the 120/200/420ms CSS tokens. Explicitly call play() after creation and destroy() on disposal. The docs-only data-ak-enter adapter is not public auto-initialization behavior.
Related examples
- Bilingual navigation and directories (中文)
- News, long titles and empty state (中文)
- Independent photo arcs (中文)
- Entrance/count-up APIs (中文)
- Terminal depth and regional replay (中文): a game-interface-inspired extension, not the website layout.
Skill usage
Use $ak-ui in system mode to build a product updates page using bilingual
navigation, news rows and thin separators. Preserve our brand and real content.
Distinguish source observations from adaptation values, and verify narrow
layouts, keyboard focus and reduced motion.The skill now routes website tasks to references/official-site.md, animation tasks to references/motion.md, and implementation examples to references/examples.md. See Use the AI Skill.