Codex TopicLab 页面样式适配：统一嵌入界面和手机布局
EnglishCodex 安装步骤
- 打开固定版本的 GitHub 原文，从该版本保留 `.codex/skills/page-style-adaptation/` 整个目录。将它放入目标项目的 `.agents/skills/page-style-adaptation/`。
- 在目标项目中打开 Codex，输入 `$page-style-adaptation` 并给出本页示例里的任务和所需输出。
中文摘要
从宿主页提取背景、字体、边框和间距等设计令牌，应用到现有页面或嵌入应用。关注窄屏溢出、控件换行和滚动表现。
SKILL.md 中文导读
可复现示例
在练习项目输入 `$page-style-adaptation`，要求一个嵌入面板沿用宿主卡片的背景和圆角，同时验证 390px 与 360px 视口。工作步骤
- 先找宿主页令牌和公共组件，将背景、边框、圆角及控件尺寸映射到目标页面。
- 在 390px 和 360px 预览时检查横向溢出，再核对嵌入内容与宿主页的滚动。
验收方法
目标面板复用宿主样式令牌。两种宽度下控件可见且可操作，嵌入内容按预期滚动。
GitHub 原文 · 更新日期
适用环境
Codex 与 TopicLab 工作副本或可编辑的宿主、目标应用。准备本地预览和两种窄屏宽度。
常见问题
哪些颜色适合保留？
承载状态、分类或严重程度的颜色应保留其含义，通用背景、边框和间距则可沿用宿主定义。