jp-ui
专为日语排版优化的 React UI 组件库，基于 Base UI 构建。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：jp-ui。 它的用途是：专为日语排版优化的 React UI 组件库，基于 Base UI 构建。 完整的 Skill 内容见：https://321skill.com/skills/jp-ui/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在开发一个面向日本用户的内部管理后台，需要一个符合日语排版习惯的按钮组件和色彩方案。”，AI可以建议使用 jp-ui，因为它提供了预设的日语文本样式和协调的色彩令牌，能快速搭建出符合本地化要求的界面。或者，当开发者说：“我的项目需要从亮色主题切换到深色主题，但保持设计一致性”，AI可以指导其利用 jp-ui 的 `theme-dark` 类轻松实现全局主题切换。
介绍
jp-ui 是一个基于流行的 Base UI 库构建的 React UI 组件库，专门针对日语排版和日本市场用户的视觉习惯进行了深度优化。它旨在解决开发者在构建面向日语用户的 Web 应用时，遇到的字体、间距、色彩等本地化适配难题。
使用上，开发者只需通过 npm 安装，并引入样式文件，即可使用其提供的按钮、提示、弹窗等组件。库内置了符合日语排版规范的文本样式和一套精心设计的色彩设计令牌，开箱即用。此外，它还提供了灵活的主题定制功能，允许开发者通过指定主色、辅助色等快速生成协调的界面主题。
这个库非常适合需要构建高质量、符合日语用户审美和使用习惯的前端界面的开发者。无论是面向日本市场的商业应用、内部系统，还是个人项目，都能从中受益。
建议在开始新项目时引入，以获得最佳的一致性体验。注意，其核心依赖是 Base UI，因此熟悉 Base UI 的开发者能更快上手。对于需要深色模式的项目，只需在根元素添加 theme-dark 类即可轻松切换。
核心特点
与通用 UI 库不同，jp-ui 深度集成了日语组版规范，提供了专门针对日文字体、行高、字距的预设文本样式。其色彩设计令牌也经过特别调校，符合日语用户的视觉偏好，而非简单翻译英文设计系统。
注意事项
主要面向日语用户和日本市场，对于非日语环境或需要高度自定义设计系统的项目可能不是最优选择。
常见问题
jp-ui 和 Base UI 是什么关系？
jp-ui 是基于 Base UI 构建的封装库，在保留 Base UI 所有功能和体验的基础上，增加了日语排版优化和预设设计令牌。
如何启用深色模式？
在应用的根 HTML 元素上添加 `theme-dark` 类名即可全局启用深色主题令牌。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/jp-ui/raw/index.md 读取 jp-ui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/jp-ui/raw/index.md（查看排版版本）