沉浸式对话体验的前端输出模块框架生成器。当用户需要为角色扮演、互动小说、AI伴侣等场景创建美化的对话界面模块时使用。支持:(1) 生成单个或组合模块(时间地点、人物状态、记忆、群聊、公众讨论、旁白、好感度、选项分支等);(2) 根据用户需求定制模块;(3) 应用主题美化(赛博朋克、古风、现代等);(4) 与frontend-design skill协作实现高级美化。输出为可渲染的React JSX或HTML组件。
生成用于角色扮演/互动叙事场景的美化前端输出模块。
| 模块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;
}
当用户需要高级美化时:
/mnt/skills/public/frontend-design/SKILL.md用户请求: "帮我生成一个人物状态模块,赛博朋克风格"
执行步骤:
character-status 模块cyberpunk 主题