# AI UP LAB · Brand and interface guide

Version: 1.2.1
Updated: 2026-10-05

## 中文工作说明

你正在为 AI UP LAB 设计或实现界面。它是面向任务的 AI 实践资源站，沿用现有的白底、黑色文字与紫色强调视觉。读取同目录的 tokens.json 和 tokens.css，复用现有 Astro 组件；不要重新设计品牌。

1. 先展示内容，再提供操作。分类页保留标题、简介、数量与最新列表；搜索和筛选进入独立搜索页。
2. 首页采用一条主推，右侧放提示词与 AIGC 创意轨，再接最新更新和目录入口。精选应说明具体用途与适用人群。
3. 白底承载信息，紫色引导行动。每个局部只突出一个主操作，次操作用描边或文字链接。
4. 沿用六边形标志与 45% 中心三角形；等比缩放，深色背景用反白版本。
5. 优先使用资源的真实预览；生成插图应明确用于概念表达，不代替产品截图或操作证据。
6. 保留真实来源、原有详情链接和收藏键。收录日期不等于实际验证；失效资源进入复核。
7. 标题与说明中英成对；按钮写清动作。推荐理由说明用途，避免空泛形容词和无法证实的效果。
8. 手机上优先呈现内容。避免横向溢出；按钮可用键盘操作，收藏与卡片链接分开。

## English implementation brief

You are designing or implementing AI UP LAB, a task-oriented collection of practical AI resources. Keep its existing neutral surfaces, dark typography, and violet accent. Read tokens.json and tokens.css in this directory and reuse the existing Astro components.

1. Show content first. Category pages have a title, a short description, a count, and the newest entries. Search and filters live on the search page.
2. Use one editorial lead, a right-rail of prompt and AIGC creative picks, then recent entries and section links. Explain a concrete purpose and audience.
3. Use neutral surfaces for information and violet for action. Give each area one primary action; use outlines or text links for secondary actions.
4. Keep the hexagonal mark and its 45% central triangle. Scale proportionally and reverse the mark on dark surfaces.
5. Prefer real resource previews. Generated illustrations communicate concepts and do not replace product screenshots or evidence.
6. Keep real sources, existing detail links, and favorite keys. Listing dates do not imply hands-on validation; review stale resources.
7. Provide paired Chinese and English copy. Label actions clearly and describe purpose without unsupported claims.
8. Prioritize content on mobile. Prevent page overflow, support keyboards, and keep favorite controls separate from card links.

## Implementation contract

- Themes: light by default; preserve the visitor's saved dark/light preference.
- Fonts: Geist with a system CJK fallback; IBM Plex Mono for code and parameters.
- Layout: maximum 1344px; mobile gutter 14px; reflow at 700px and 1050px.
- Spacing: 4, 8, 12, 16, 20, 24, 32, 48, 64px. Controls: 7px radius; cards: 8px radius.
- Logo: use the supplied logo.svg, with no stretching, rotation, outline, or extra decoration. Minimum box size 16px; keep a quarter-box clear space.
- Logo lockup: mark + "AI UP LAB" in Geist 500, tracking -0.02em (-0.045em at display sizes); wordmark 18px with the 32px mark on desktop, 14px with the 24px mark on mobile. Gap = 0.5 × wordmark cap height (0.36em in Geist) between the visible glyph and the first letter; trim 0.2 × mark box on each side, so the glyph edge (not the SVG box) sits on the grid. Glyph centred on the cap height, not on the line box.
- Icons: reuse Phosphor regular icons through Icon.astro; keep the custom brand mark separate.
- States: default, hover, focus-visible, selected, disabled, empty, and loading must remain distinguishable when applicable. Use text as well as color for status.
- Accessibility: target 4.5:1 for normal text and 3:1 for large text; use visible focus and meaningful labels. Aim for 44px interactive targets on new mobile components. Respect reduced motion. These are requirements, not a claim of whole-site conformance.
- Source integrity: never fabricate sources, use-case results, benchmark rankings, or dates.
- Verify: build, mobile and desktop widths, both languages and themes, keyboard navigation, saved state, and no-JavaScript reading.

## Knowledge library

Read knowledge.json for stable rule IDs, dependencies, tokens, and source-code mappings. Read rules/<id>.md for each selected rule. These are static context files, not an MCP endpoint. Method reference: https://tmall-design.com/#blog/building-design-wiki-for-aigui . AI UP LAB owns its rules, parameters, and examples.

## Existing components

BrandMark.astro · Icon.astro · DirectoryCard.astro · EditorialPreview.astro · FavButton.astro · Loc.astro · BaseLayout.astro

## Before delivery

- [ ] Use the current tokens and shared components.
- [ ] Keep content immediately visible on category pages.
- [ ] Preserve URLs, sources, and favorite IDs.
- [ ] Provide Chinese and English copy.
- [ ] Check 320px, 390px, 768px, and 1440px widths.
- [ ] Check light/dark, focus, disabled and empty states.
- [ ] Use npm run build and exercise the affected interactions.