Run any Skill in Manus with one click

immersive-dialogue-ui

沉浸式对话体验的前端输出模块框架生成器。当用户需要为角色扮演、互动小说、AI伴侣等场景创建美化的对话界面模块时使用。支持：(1) 生成单个或组合模块（时间地点、人物状态、记忆、群聊、公众讨论、旁白、好感度、选项分支等）；(2) 根据用户需求定制模块；(3) 应用主题美化（赛博朋克、古风、现代等）；(4) 与frontend-design skill协作实现高级美化。输出为可渲染的React JSX或HTML组件。

Run Skill in Manus

Overview

Install command

npx skills add https://github.com/willmusubi/character_card_generator --skill immersive-dialogue-ui

Copy and paste this command into Claude Code to install the skill

Source

willmusubi/character_card_generator

Stars0

Forks0

UpdatedJanuary 29, 2026 at 11:51

File Explorer

8 files

SKILL.md

readonly

name

immersive-dialogue-ui

description

沉浸式对话UI模块生成器

生成用于角色扮演/互动叙事场景的美化前端输出模块。

工作流程

需求分析 - 确认用户需要哪些模块、主题风格
模块选择 - 从模块目录选择或自定义
主题应用 - 选择预设主题或自定义
代码生成 - 输出可渲染的React/HTML
美化增强 - 如需高级美化，参考frontend-design skill

模块目录

固定核心模块

模块ID	名称	用途
`scene-header`	时间地点模块	显示当前场景的时间、地点、天气
`character-status`	人物状态模块	角色衣着、动作、表情、内心OS
`memory-log`	记忆模块	有序记忆条目，支持压缩

对话类模块

模块ID	名称	用途
`chat-bubble`	单人对话气泡	基础对话显示
`group-chat`	群聊模块	微信风格多人群聊
`private-message`	私信模块	手机短信风格

叙事类模块

模块ID	名称	用途
`narrator`	旁白模块	第三人称场景叙述
`inner-monologue`	内心独白	角色深层意识流
`public-reaction`	公众讨论模块	NPC们对事件的反应
`atmosphere`	气氛渲染模块	环境、天气、BGM提示

游戏化模块

模块ID	名称	用途
`affection-bar`	好感度模块	关系进度条/等级
`choice-branch`	选项分支模块	可点击剧情选项
`item-popup`	物品获取模块	物品/成就弹窗
`quest-tracker`	任务追踪模块	当前任务/目标

信息类模块

模块ID	名称	用途
`character-card`	角色档案卡	悬浮角色详情
`lore-tooltip`	世界观词条	可展开的设定百科
`notification`	通知推送模块	系统通知、角色提醒
`social-feed`	朋友圈模块	角色动态/朋友圈

主题系统

预设主题

cyberpunk - 霓虹紫蓝、故障艺术、科技感
ancient-chinese - 水墨、米白底、毛笔字体风格
modern-minimal - 黑白灰、大留白、无衬线字体
cozy-warm - 暖色调、圆角、温馨感
dark-gothic - 深色、哥特字体、神秘感
pastel-cute - 粉彩、可爱、圆润

自定义主题变量

:root {
  /* 颜色 */
  --primary: #xxx;
  --secondary: #xxx;
  --background: #xxx;
  --text: #xxx;
  --accent: #xxx;
  
  /* 字体 */
  --font-display: 'xxx';
  --font-body: 'xxx';
  
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  
  /* 动画 */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
}

生成规范

React JSX 输出

使用函数式组件 + Hooks
使用Tailwind CSS核心类
CSS变量控制主题
支持Motion库动画（如可用）
单文件输出（样式内联或CSS-in-JS）

HTML 输出

纯HTML/CSS/JS单文件
CSS动画优先
响应式设计
无外部依赖

与 frontend-design 协作

当用户需要高级美化时：

先用本skill生成模块骨架和基础样式
读取 /mnt/skills/public/frontend-design/SKILL.md
应用frontend-design的美学原则进行增强
重点关注：字体选择、色彩对比、动效、空间构图

使用示例

用户请求: "帮我生成一个人物状态模块，赛博朋克风格"

执行步骤:

选择 character-status 模块
应用 cyberpunk 主题
生成React组件，包含：
- 角色头像框（霓虹边框动画）
- 状态条目（衣着、动作、心情）
- 内心OS区域（打字机效果）
输出可渲染的JSX代码

详细规格

模块详细结构和数据格式：见 references/module-catalog.md
主题系统完整说明：见 references/theme-system.md
高级集成指南：见 references/integration-guide.md

沉浸式对话UI模块生成器

生成用于角色扮演/互动叙事场景的美化前端输出模块。

工作流程

需求分析 - 确认用户需要哪些模块、主题风格
模块选择 - 从模块目录选择或自定义
主题应用 - 选择预设主题或自定义
代码生成 - 输出可渲染的React/HTML
美化增强 - 如需高级美化，参考frontend-design skill

模块目录

固定核心模块

模块ID	名称	用途
`scene-header`	时间地点模块	显示当前场景的时间、地点、天气
`character-status`	人物状态模块	角色衣着、动作、表情、内心OS
`memory-log`	记忆模块	有序记忆条目，支持压缩

对话类模块

模块ID	名称	用途
`chat-bubble`	单人对话气泡	基础对话显示
`group-chat`	群聊模块	微信风格多人群聊
`private-message`	私信模块	手机短信风格

叙事类模块

模块ID	名称	用途
`narrator`	旁白模块	第三人称场景叙述
`inner-monologue`	内心独白	角色深层意识流
`public-reaction`	公众讨论模块	NPC们对事件的反应
`atmosphere`	气氛渲染模块	环境、天气、BGM提示

游戏化模块

模块ID	名称	用途
`affection-bar`	好感度模块	关系进度条/等级
`choice-branch`	选项分支模块	可点击剧情选项
`item-popup`	物品获取模块	物品/成就弹窗
`quest-tracker`	任务追踪模块	当前任务/目标

信息类模块

模块ID	名称	用途
`character-card`	角色档案卡	悬浮角色详情
`lore-tooltip`	世界观词条	可展开的设定百科
`notification`	通知推送模块	系统通知、角色提醒
`social-feed`	朋友圈模块	角色动态/朋友圈

主题系统

预设主题

cyberpunk - 霓虹紫蓝、故障艺术、科技感
ancient-chinese - 水墨、米白底、毛笔字体风格
modern-minimal - 黑白灰、大留白、无衬线字体
cozy-warm - 暖色调、圆角、温馨感
dark-gothic - 深色、哥特字体、神秘感
pastel-cute - 粉彩、可爱、圆润

自定义主题变量

:root {
  /* 颜色 */
  --primary: #xxx;
  --secondary: #xxx;
  --background: #xxx;
  --text: #xxx;
  --accent: #xxx;
  
  /* 字体 */
  --font-display: 'xxx';
  --font-body: 'xxx';
  
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  
  /* 动画 */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
}

生成规范

React JSX 输出

使用函数式组件 + Hooks
使用Tailwind CSS核心类
CSS变量控制主题
支持Motion库动画（如可用）
单文件输出（样式内联或CSS-in-JS）

HTML 输出

纯HTML/CSS/JS单文件
CSS动画优先
响应式设计
无外部依赖

与 frontend-design 协作

当用户需要高级美化时：

先用本skill生成模块骨架和基础样式
读取 /mnt/skills/public/frontend-design/SKILL.md
应用frontend-design的美学原则进行增强
重点关注：字体选择、色彩对比、动效、空间构图

使用示例

用户请求: "帮我生成一个人物状态模块，赛博朋克风格"

执行步骤:

选择 character-status 模块
应用 cyberpunk 主题
生成React组件，包含：
- 角色头像框（霓虹边框动画）
- 状态条目（衣着、动作、心情）
- 内心OS区域（打字机效果）
输出可渲染的JSX代码

详细规格

模块详细结构和数据格式：见 references/module-catalog.md
主题系统完整说明：见 references/theme-system.md
高级集成指南：见 references/integration-guide.md

immersive-dialogue-ui

沉浸式对话UI模块生成器

工作流程

模块目录

固定核心模块

对话类模块

叙事类模块

游戏化模块

信息类模块

主题系统

预设主题

自定义主题变量

生成规范

React JSX 输出

HTML 输出

与 frontend-design 协作

使用示例

详细规格

More from this repository

More from this repository

沉浸式对话UI模块生成器

工作流程

模块目录

固定核心模块

对话类模块

叙事类模块

游戏化模块

信息类模块

主题系统

预设主题

自定义主题变量

生成规范

React JSX 输出

HTML 输出

与 frontend-design 协作

使用示例

详细规格