一键在 Manus 中运行任何 Skill

immersive-dialogue-ui

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

在 Manus 中运行

概览

安装命令

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

复制此命令并粘贴到 Claude Code 中以安装该技能

来源

willmusubi/character_card_generator

星标0

分支0

更新时间2026年1月29日 11:51

文件资源管理器

8 个文件

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

同仓库更多 Skills

同仓库

mufy-character-card-generator

willmusubi/character_card_generator

专业的 Mufy 平台角色卡生成器。当用户需要创建可直接粘贴到 Mufy 创建角色页面的完整高质量角色卡时使用此技能。支持情感陪伴、专家顾问、沉浸叙事、日常闲聊等多种角色类型，支持单角色和多角色卡。用户提供角色目标、期望氛围、剧情偏好、语言偏好等信息，生成包含角色信息、人设、逆境处理、情节设定、输出设定、样例对话、小剧场、开场设计8个完整模块的角色卡文本。

2026-02-150

mufy-character-card-generator

willmusubi/character_card_generator

Mufy 平台角色卡一站式生成器。根据用户需求生成完整角色卡，包含8大模块内容、美化CSS代码、以及带内联样式的输出模块。输出格式直接对应Mufy字段，可一键复制粘贴。

2026-01-290

mufy-style-generator

willmusubi/character_card_generator

MUFY 角色卡美化工具。用户用自然语言描述视觉需求（色系/顶部栏/气泡/按钮/折叠栏/简介卡/背景/特效），生成纯 CSS 代码粘贴到「小剧场」输入框生效。仅改视觉样式，不改功能交互。

2026-01-290

来源

willmusubi

willmusubi/character_card_generator

打开 GitHub 仓库查看创作者相关仓库

安装命令

下载

在 Manus 中运行

适用职业SOC

网页开发工程师计算机与数学类职业15-1254L4

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