ainosleep-paper-uilisted

# AINoSleep Paper UI 一套「纸张工作台」设计系统。把它当成可以直接落到代码里的实现系统，不是拿来找感觉的视觉参考。 隐喻是**摊在安静工作台上的一份编辑任务书**：淡淡的绘图网格、奶油色纸张、深墨色备忘录、蓝色技术批注、红色校对标记、鼠尾草绿完成信号。 ## 开工顺序 1. 先看目标项目：框架、已有组件、现有 token、响应式结构。**不要在别人的设计系统上硬套这一套。** 2. 选布局、字体、颜色、密度之前，读 [references/visual-system.md](references/visual-system.md)。 3. 做表单、编辑器、导航、卡片、表格、对话框、输出面板、状态之前，读 [references/component-catalog.md](references/component-catalog.md)。 4. 交付之前，跑一遍 [references/quality-bar.md](references/quality-bar.md)。 5. 把 `assets/paper-ui.css` **复制进目标项目**，改掉引用路径。绝不能让目标项目在运行时依赖 Skill 目录。 ## 该抄哪个文件 | 你要做的事 | 用这个 | |---|---| | 任何新项目 | `assets/paper-ui.css` —— 唯一需要复制的系统文件 | | 想要一个能直接改的空白骨架 | `assets/examples/starter/` | | 想看每个部件长什么样、有哪些状态 | `assets/examples/gallery/` | | 想看完整产品怎么用这套系统 | `assets/reference-app/` | | 想看非应用类页面怎么用 | `assets/examples/personal-homepage/` | `paper-ui.css` 自包含：没有 `@import`、没有 CDN 字体、没有 `url()` 外链、没有构建步骤。一个文件复制走就行。 `reference-app/` 是这套系统被提取出来的那个真实产品（Interface Brief Studio），作为**冻结的完整范例**保留。它有自己的应用外壳样式表，不要拿它当系统文件复制。 ## 硬规则 - **保住可辨识的那一家子**：暖色网格画布、奶油纸张、墨色面板、编辑式衬线标题、克制的蓝色动作、红色批注、鼠尾草绿完成、细线、小圆角。 - **用语义 token，不要写死颜色**。确实有新的语义需求才加 token。 - **布局服从产品**。复用视觉语言，不要把每个页面都塞进同一个侧栏外壳。个人主页不需要伪装成应用。 - **先用原生语义 HTML**。button、a、label、fieldset、dialog、table、原生表单控件保持键盘可用。 - **表单和编辑器是一等公民**。label、帮助文字、必填/错误信息、hover、focus、disabled、空、保存中、已保存，该有的都要有。 - **控件是内嵌的书写面**：`--control` 填充、`--line-strong` 边框、`--radius-sm`、蓝色焦点环。不要换成通用白盒子或大药丸输入框。 - **颜色必须表意**：蓝色只给主动作、焦点、选中、活动状态和链接；红色给必填、警示、破坏性动作和编辑批注；鼠尾草绿给完成、已保存、成功。 - **表面层级要安静**：canvas → paper-low → p