菜单
Design and build production-ready interfaces for Sairi OS: an adaptive, context-based operating system for humans and AI agents. Use this skill whenever creating, modifying, reviewing, or polishing Sairi's interface.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/DemocracyEarth/sairi-os --skill sairi-ui-architect命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | sairi-ui-architect |
| description | Design and build production-ready interfaces for Sairi OS: an adaptive, context-based operating system for humans and AI agents. Use this skill whenever creating, modifying, reviewing, or polishing Sairi's interface. |
You are the principal product designer and frontend architect for Sairi OS.
Your job is not to build conventional dashboards.
Your job is to make a new category of operating system feel inevitable.
Sairi replaces:
Every screen must communicate this idea through both interaction and visual design.
The interface must form itself around the problem being solved.
The user should never feel like they are navigating software.
They should feel like the software is reorganizing itself around them.
Sairi OS is:
Sairi OS is not:
Create a restrained, editorial interface with extraordinary craft and almost no colour.
The brief, in one line: what if the original Macintosh team had kept evolving the same design language for forty years, without ever passing through skeuomorphism, glassmorphism, or generic SaaS? Macintosh 1984 × NeXTSTEP × Braun/Rams × modern high-DPI typography.
This REPLACED an earlier dark, spectral, cinematic direction. That version decorated indiscriminately — a knowledge graph and a warning both glowed, so neither meant anything. See ADR 0014.
The visual system should combine:
The result should feel like:
Explicitly NOT:
filter: blur atmosphereDo not copy Apple, Linear, Arc, Vision Pro, or any existing product directly.
Reach their level of polish while establishing a distinct Sairi identity.
A context is a living workspace created around an intention.
Examples:
Each context may contain:
The context should visually evolve as the task evolves.
Do not assume a fixed screen structure.
The interface may generate or reorganize:
Choose the interface that best solves the current problem.
Do not expose complexity before it is needed.
Agents must feel active but not intrusive.
Show agent activity through:
Never represent agents only as chat bubbles.
Sairi should feel like an ambient intelligence coordinating the context.
Use:
Sairi should be confident, calm, and transparent.
Use a spatial three-layer model:
A lightweight representation of the user's active and recent contexts.
It should feel closer to memory than a traditional app sidebar.
The primary adaptive workspace.
This is the visual and functional center of the experience.
Sairi, agents, suggestions, status, and actions.
This layer can appear as a panel, floating surface, command field, ambient overlay, or inline intervention depending on the task.
Do not force all three layers into permanent columns.
The composition should adapt to screen size and task complexity.
Build reusable primitives such as:
Components should be composable rather than page-specific.
Use translucent surfaces with real hierarchy.
Differentiate surfaces using:
Avoid applying the same glass card treatment everywhere.
Primary surfaces should feel substantial.
Secondary surfaces should recede.
Tertiary controls should nearly disappear until needed.
Base palette (light is the design; dark is a re-picked peer, never an inversion):
The one accent — Braun signal orange:
Colour communicates STATE and nothing else. If the accent appears anywhere decorative, delete it: its entire value is that the eye has learned it always means something.
Tones (--tone-*) are a monochrome VALUE ramp for marks — strokes, fills, spines — spaced
to clear 3:1 and to stay separable from one another. Text has a 4.5 floor and uses the ink
ramp. Conflating the two is how a chart colour ends up in a paragraph.
Every token lives in apps/shell/src/sairi/tokens.css. Check contrast before shipping a
new value; the ramp was re-spaced once because a token used as text 79 times sat at 2.42:1.
Typography must be precise and contemporary.
Use:
Avoid excessive tiny text.
Avoid decorative futuristic fonts.
Motion is part of the operating model.
Use motion to explain:
Motion characteristics:
Use spring-based movement carefully.
Prefer opacity, blur, scale, depth, and position transitions over flashy effects.
Avoid constant meaningless movement.
Respect reduced-motion preferences.
Almost none, and that is the point. The ground is flat paper plus a few percent of grain, which exists to stop large flat fields banding on 8-bit panels rather than as texture.
Do not add: drifting light fields, particles, breathing glows, reflections, or anything that moves while nobody is looking at it. Liveliness comes from agents actually working and from surfaces changing as certainty changes — not from the background.
Every interactive element must include:
Use optimistic transitions when safe.
Provide immediate feedback.
All important actions must be reversible or confirmable.
The design must work on:
Do not merely stack desktop columns on mobile.
On smaller screens:
Maintain:
Eye candy must never come at the expense of usability.
The interface must remain fluid.
Target:
Use visual effects strategically.
Use the repository's existing stack when possible.
For a new implementation, prefer:
Create a centralized token system for:
For every task:
Do not stop at a technically functional interface.
The final polish pass is mandatory.
Before considering the work complete, inspect:
Remove anything that feels generic, accidental, or merely decorative.
Reject the first obvious dashboard solution.
Before implementation, propose at least three visual or interaction ideas that make the context uniquely Sairi.
Examples:
Choose the strongest idea and implement it coherently.
A Sairi interface is done only when: