メニュー
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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？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: