AINoSleep/ainosleep-paper-ui

Latest recorded source activity: August 5, 2026 at 10:03

SkillsMP catalog refreshed: October 29, 2026 at 18:30

skills collected: 1

GitHub stars: 0
GitHub forks: 0

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/AINoSleep/ainosleep-paper-ui.

Repository README

Repository README source: README.md

Read the source README

Expand full README

# AINoSleep Paper UI 一套给 AI Agent 用的界面设计 Skill。装上之后，让 Codex 或 Claude Code 帮你做界面时，它会照着同一套"纸张工作台"的规矩来 —— 暖色网格画布、奶油纸张、深墨色备忘录、编辑式排版 —— 而不是每次都给你一个蓝紫渐变的通用 SaaS 模板。浅色和夜间两套主题，一个 CSS 文件，不联网。 ![组件画廊 · 浅色](docs/gallery-light.jpg) ![组件画廊 · 夜间工作台](docs/gallery-dark.jpg) ## 它解决什么让 Agent 写界面，最常见的结果是：能跑，但看着像谁都做得出来的东西。换个字体换个布局，没有任何区别。这个 Skill 把一套已经做完、验过的视觉系统交给 Agent，让它每次都在同一个视觉家族里干活。 - 统一的颜色、字体、间距、圆角、边框、响应式规则 - 顶栏、流程侧栏、移动端底部导航、卡片、表格、对话框、Toast - 完整表单与编辑器：输入框、文本域、选择器、分段控件、勾选磁贴、开关、输出面板 - 表单的**全部状态**都实现了：默认、悬停、焦点、错误、禁用、只读、保存中、已保存 - 编辑排版件：首字下沉、大引言、页边红批注、带标签分隔线、水印页码、印章 - 质感：绘图网格、SVG 噪点纸纹、纸张内压痕、稿纸横线文本域、纸角胶带 - 数据件：表格、指标、量表、迷你折线图、标签、状态点、骨架屏 - 夜间工作台深色模式，跟随系统或手动切换 - 打印样式 —— 一套"纸张"系统，打印出来也得像样 ## 装 ### Codex ```text 使用 $skill-installer 安装： https://github.com/AINoSleep/ainosleep-paper-ui/tree/main/ainosleep-paper-ui ``` 或者手动把 `ainosleep-paper-ui` 这个文件夹复制到： ```text Windows: %USERPROFILE%\.codex\skills\ainosleep-paper-ui macOS / Linux: ~/.codex/skills/ainosleep-paper-ui ``` ### Claude Code 把 `ainosleep-paper-ui` 文件夹复制到： ```text Windows: %USERPROFILE%\.claude\skills\ainosleep-paper-ui macOS / Linux: ~/.claude/skills/ainosleep-paper-ui ``` 只想在某个项目里用，就放到那个项目的 `.claude/skills/` 下。两边都要**重开一轮对话**才生效。 ## 用明确调用： ```text 使用 $ainosleep-paper-ui 做一个带编辑器的内容管理工作台。 ``` ```text 使用 $ainosleep-paper-ui 把这个页面改成纸张工作台风格，保留原功能和数据结构。 ``` ```text 使用 $ainosleep-paper-ui 做一个个人主页，用我的真实项目，不要编经历和数据。 ``` 也可以只要其中一部分： ```text 用 $ainosleep-paper-ui 的编辑框、状态和输出面板重做当前表单。 ``` ## 先打开看看不装也能看。克隆下来直接双击： | 想看什么 | 打开 | |---|---| | 每个组件的真实渲染 + 全部状态 + 主题切换 | `ainosleep-paper-ui/assets/examples/gallery/index.html` | | 可以直接改的空白骨架 | `ainosleep-paper-ui/assets/examples/starter/index.html` | | 完整产品长什么样 | `ainosleep-paper-ui/assets/reference-app/index.html` | | 非应用类页面怎么用 | `ainosleep-paper-ui/assets/examples/personal-homepage/index.html` | 浏览器限制本地文件时，在仓库目录起个静态服务器： ```bash python -m http.server 4173 ``` ## 编辑框长什么样这套系统里，编辑框是"纸张中的内嵌书写区"： - 暖白 `--control` 底色，不是纯白输入框 - `--line-strong` 细边框 + 4px 小圆角 - 标签用 UI 字体，必填标记用校对红 - 帮助文字用弱化墨色 - 悬停加深边框，聚焦用技术蓝焦点环 - 错误、禁用、只读、保存中、已保存各有独立表现，而且**错误一定带文字，不只是把边框变红** - 多字段编辑器用奶油纸张面板，旁边配深墨色流程摘要完整规则见 [`component-catalog.md`](ainosleep-paper-ui/references/component-catalog.md)。 ## 包含什么 ```text ainosleep-paper-ui/ ├─ SKILL.md ├─ agents/openai.yaml ├─ references/ │ ├─ visual-system.md token、排版、质感、深色模式、对比度底线 │ ├─ component-catalog.md 每个组件和它的全部状态 │ └─ quality-bar.md 交付前的检查表，带可粘贴的审计脚本 └─ assets/ ├─ paper-ui.css ← 唯一需要复制进项目的文件 ├─ reference-app/ 冻结的完整产品范例 └─ examples/ ├─ gallery/ 组件画廊 ├─ starter/ 空白骨架 └─ personal-homepage/ 非应用类页面范例 ``` `paper-ui.css` 自包含：没有 `@import`、没有 CDN 字体、没有 `url()` 外链、没有构建步骤。 ## 设计原则 - 蓝色只表达主动作、焦点、选中和活动状态 - 红色只用于必填、警示、破坏性动作和编辑批注 - 鼠尾草绿只用于完成、保存和成功 - 层级靠画布、纸张和墨色面板，不靠夸张阴影 - 不用蓝紫渐变、玻璃拟态、大药丸输入框、通用 SaaS 模板感 - 不编造个人经历、客户、数据或产品成果 ## 无障碍浅色和深色两套主题下，组件画廊里全部文字元素都通过了 WCAG AA：正文 4.5:1、大字 3:1、控件边界 3:1。审计脚本在 [`quality-bar.md`](ainosleep-paper-ui/references/quality-bar.md) 里，可以直接粘到控制台跑自己的页面。 ## 关于我是 AINoSleep，一个普通人的 AI 自动化实验记录。这个 Skill 是我自己做产品界面时用的东西，整理出来放着。 - GitHub：[github.com/AINoSleep](https://github.com/AINoSleep) - 入口页：[ainosleep.github.io/ainosleep](https://ainosleep.github.io/ainosleep) 用出问题、觉得哪块不好用、或者想加什么组件，开 Issue 说具体场景，比说"能不能优化一下"有用得多。 ## 许可 [MIT](LICENSE)。第三方归属见 [NOTICE.md](NOTICE.md)。

Loading the repository README…

Skills in this repository

Web Developers

1 occupation category · 100% classified

skill

occupation

description

updated

ainosleep-paper-ui

Web Developers

Build or restyle websites, product interfaces, dashboards, editors, admin panels, portfolios, landing pages, and local HTML prototypes with the AINoSleep Paper UI design system — a warm paper-and-ink editorial workbench with a light and a dark theme. Use when…

Source text: Chinese

2026-08-05

Showing 1 of 1 collected skill.