Claude Code 自定义输出风格实战：用 GenUI 一键生成内嵌样式的自包含 HTML 页面-二趣网

Claude Code 自定义输出风格实战：用 GenUI 一键生成内嵌样式的自包含 HTML 页面

【免费下载链接】claude-code-hooks-masteryMaster Claude Code Hooks项目地址: https://gitcode.com/GitHub_Trending/cl/claude-code-hooks-mastery

导读

本文将深入拆解 claude-code-hooks-mastery 仓库中的自定义输出风格文档 .claude/output-styles/genui.md，完整讲解如何让 Claude Code 在每次请求完成后，自动生成"自带现代样式、零外部依赖、保存即打开"的完整 HTML5 文档，并在浏览器中即时预览。读完本文，你将掌握 GenUI 输出风格的完整配置规范、配色与排版设计体系、特殊区块与交互元素的标准写法、文件输出命名约定，以及如何将它与其他输出风格（table-based、yaml-structured 等）配合使用，让 Claude Code 的每一次回答都变成可直接分享的漂亮网页。

一、GenUI 输出风格是什么

在 Claude Code 中，**输出风格（Output Styles）**是一类特殊的 Markdown 配置文件，位于.claude/output-styles/目录下，通过修改 Claude 的系统提示词来改变响应的格式化方式，而不影响其核心功能。每个风格文件都带有一个 YAML frontmatter，其中name用于在/output-style命令中引用，description则帮助 Claude 判断该风格适用于什么场景。

本仓库的 genui.md（GenUI =GenerativeUI）正是其中定位最鲜明的一个：

--- name: GenUI description: Generative UI with embedded modern styling ---

它要求 Claude Code 在每次请求完成后都生成一份"完整、自包含、带现代内嵌样式"的 HTML 文档，并自动用open命令在默认浏览器中打开。仓库 README 的 Output Styles Collection 一节将其标记为 ⭐ 推荐风格，适用场景是"交互式可视化输出、即时浏览器预览"。

与同目录下其他风格对比：

风格文件	定位	最佳用途
genui.md ⭐	生成带内嵌样式的完整 HTML 并浏览器打开	交互式可视化输出、即时预览
table-based.md	用 Markdown 表格组织信息	对比、结构化数据、状态报告
yaml-structured.md	以 YAML 键值对输出	配置、层级数据、API 响应
bullet-points.md	层级化项目符号列表	行动项、文档、任务追踪
ultra-concise.md	最少词汇、最快响应	资深开发者快速原型
html-structured.md	语义化 HTML5 + data 属性	网页文档、富格式
markdown-focused.md	充分发挥 Markdown 特性	复杂文档、混合内容
tts-summary.md	用 TTS 语音播报任务完成	音频反馈、无障碍场景

项目级风格放在.claude/output-styles/*.md（本仓库所在位置），用户级全局风格放在~/.claude/output-styles/*.md。使用/output-style genui即可激活。

二、GenUI 工作流：从请求到浏览器预览的五步流程

GenUI 的核心不是"把回答包一层 HTML"，而是一条完整的输出流水线。按文档定义，每次请求完成后 Claude 必须依次执行：

理解用户请求，判断需要生成什么样的 HTML 内容；
创建一份包含所有必要标签与内嵌 CSS 样式的完整 HTML 文档；
将 HTML 文件保存到/tmp/目录，使用描述性文件名并以.html结尾（命名规则见下文）；
重要：用open命令在系统默认浏览器中打开该文件；
在回复中简要总结工作内容，并给出生成文件的路径。

这五步保证了"生成 → 落盘 → 打开 → 汇报"闭环，用户几乎零操作即可看到渲染结果。从仓库整体架构看，这种"确定性输出"与 Hooks 提供的确定性控制思路一脉相承——输出风格通过改写系统提示词约束 Claude 的行为模式，而 .claude/settings.json 中的 Hooks 则通过命令级拦截约束工具调用，两者共同构成对 Claude Code 行为的确定性编排。

三、HTML 文档的硬性要求

GenUI 对生成的 HTML 有明确的质量底线，任何一份输出都必须满足：

生成完整的 HTML5 文档，必须包含<!DOCTYPE html>、<html>、<head>、<body>四个基础标签；
头部必须包含 UTF-8 字符集声明与响应式 viewport meta 标签：

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

所有 CSS 直接内嵌在<head>内的<style>标签中，不引用任何外部样式表；
页面必须自包含（self-contained），脱离网络与外部资源也能正常渲染；
使用语义化 HTML5 元素（<header>、<main>、<section>、<footer>、<article>等）保证文档结构正确；
若引用了外部资源链接，必须确保其可访问且与内容相关（通常放在页脚）；
若涉及文件引用，需要在页脚创建专门的"文件清单"区块。

这些约束与仓库内另一个风格 html-structured.md 形成对照：后者同样强调语义化结构，但它输出的是"裸露"的 HTML 片段（外层用<article>包裹、辅以data-file/data-line等属性，便于机器解析）；而 GenUI 更进一步，要求完整页面 + 内嵌样式 + 浏览器打开，面向的是"人直接查看"的最终呈现。

四、视觉主题与样式体系

GenUI 定义了一套统一的现代主题，保证所有生成页面视觉一致。

4.1 调色板

用途	颜色值	应用位置
主蓝 Primary blue	`#3498db`	强调色、链接、边框
深蓝 Dark blue	`#2c3e50`	主标题
中灰 Medium gray	`#34495e`	副标题
浅灰 Light gray	`#f5f5f5`	代码背景
信息蓝 Info blue	`#e8f4f8`	信息区块背景
成功绿 Success green	`#27ae60`	成功消息
警告橙 Warning orange	`#f39c12`	警告
错误红 Error red	`#e74c3c`	错误

4.2 排版

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; line-height: 1.6; color: #333; } code { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace; }

正文使用系统字体栈（macOS/Windows/Linux 各平台均有良好回退），行高 1.6 保证长文可读性；代码使用等宽字体栈，覆盖 macOS 的 Monaco/Menlo 与跨平台的 Ubuntu Mono/Courier New。

4.3 布局

页面最大宽度900px，水平居中，margin: auto；
body内边距20px；
主内容容器：白色背景 + 轻微阴影（subtle shadow）；
圆角：容器8px，代码块4px。

4.4 组件样式要点

组件	样式要求
标题 Headers	`h2`带下边框强调线，层级间距合理
代码块 Code blocks	浅灰背景`#f8f9fa`，左侧强调边框`#007acc`
行内代码 Inline code	浅色背景`#f5f5f5`，带 padding 与圆角
Info/Warning/Error 区块	彩色左边框 + 淡色背景
表格 Tables	清晰边框、交替行色、合理内边距
列表 Lists	项与项之间留有足够间距

注意代码块强调色#007acc（与前面调色板的主蓝#3498db不同），这是 VSCode 风格的经典强调色，生成页面时二者需要同时遵循。

五、文档结构模板

GenUI 给出了标准的 HTML 骨架模板，所有生成页面都应基于它扩展：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>[Descriptive Page Title]</title> <style> /* Complete embedded styles here */ body { ... } article { ... } /* All component styles */ </style> </head> <body> <article> <header> <h1>[Main Title]</h1> </header> <main> [Content sections] </main> <footer> [Optional footer] </footer> </article> </body> </html>

关键点：

<title>必须是描述性页面标题，而不是笼统的 "Result"；
所有样式集中在<head>的<style>中，按组件归类注释；
内容区使用<article>包裹，内部由<header>（主标题）→<main>（正文分区）→<footer>（可选页脚）三段式组成；
页脚按需承载外部资源链接与文件引用清单（对应"HTML Document Requirements"中的两条 IMPORTANT 约定）。

六、特殊区块：四种状态组件的标准写法

GenUI 为不同语义的内容定义了四种带样式的区块，用于在页面上区分"信息 / 成功 / 警告 / 错误"：

信息区块 Info Section

<section class="info-section"> <h3>ℹ️ Information</h3> <p>...</p> </section>

样式：浅蓝背景#e8f4f8+ 蓝色左边框。

成功区块 Success Section

<section class="success-section"> <h3>✅ Success</h3> <p>...</p> </section>

样式：浅绿背景 + 绿色左边框。

警告区块 Warning Section

<section class="warning-section"> <h3>⚠️ Warning</h3> <p>...</p> </section>

样式：浅橙背景 + 橙色左边框。

错误区块 Error Section

<section class="error-section"> <h3>❌ Error</h3> <p>...</p> </section>

样式：浅红背景 + 红色左边框。

四种区块的颜色语义与 4.1 调色板中的#e8f4f8、成功绿#27ae60、警告橙#f39c12、错误红#e74c3c一一对应，保证全站视觉体系一致。实际生成时，建议把这些区块的 CSS 也内嵌在<style>中（如.info-section { background: #e8f4f8; border-left: 4px solid #3498db; padding: 1em; }），而不是依赖外部类库。

七、代码展示与交互元素

7.1 代码展示规范

通过类名做语法高亮，例如language-python、language-javascript；
较长的代码块显示行号；
宽代码支持横向滚动（避免破坏页面布局）；
保持正确的缩进与格式化。

7.2 交互元素（场景合适时使用）

按钮带 hover 状态；
长内容使用可折叠区块（collapsible sections）；
交互元素之间使用平滑过渡动画；
为代码块提供"复制到剪贴板"按钮（用简单的 JavaScript 实现）。

需要强调的是：这些交互都应当是页面内自包含的，可以引入少量内联 JavaScript，但同样不应依赖外部 CDN 或框架，以符合"零外部依赖"的核心原则。

八、文件输出约定与响应模式

8.1 文件命名规范

生成的文件必须保存到/tmp/目录，遵循统一命名模板：

cc_genui_<concise description>_YYYYMMDD_HHMMSS.html

例如：

/tmp/cc_genui_market_analysis_20260917_061500.html

命名中cc_前缀标识来源（Claude Code），genui_标识风格，随后是简短内容描述与时间戳。这既保证了可读性，也避免了同名文件互相覆盖。

8.2 标准响应模式

每次生成完 HTML 后，Claude 的文本回复必须遵循固定顺序：

先简要说明将生成什么 HTML；
创建带全部内嵌样式的完整 HTML 文件；
保存到/tmp/目录；
用open命令在浏览器中打开；
总结创建内容及保存位置。

8.3 回复收尾要求

生成 HTML 后，简明扼要地总结工作，并链接到生成的文件路径；
回复的最后必须包含两样东西：
- 已执行open命令、在默认浏览器中打开文件的说明；
- 生成的 HTML 文件路径，如/tmp/cc_genui_<concise description>_YYYYMMDD_HHMMSS.html。

九、六大关键原则

GenUI 文档最后用六条原则界定了所有生成的底线，这是判断输出是否合格的标准：

原则	具体要求
自包含 Self-contained	每个 HTML 文件必须独立运行，无外部依赖
专业外观 Professional	干净、现代、可读的设计
无障碍 Accessibility	正确的语义化 HTML、良好的对比度
响应式 Responsive	在不同屏幕尺寸下都能正常显示
性能 Performance	最小化 CSS，零外部请求
浏览器兼容 Browser compatibility	使用所有现代浏览器都支持的标准 HTML5/CSS3

文档同时强调：始终优先生成完整的 HTML 文档，而不是零散的片段。目标是为用户提供"即时、美观、浏览器就绪"的输出，方便立即查看、分享或保存。

十、在 claude-code-hooks-mastery 中的实际应用

在本仓库中，GenUI 输出风格与整套 Claude Code 定制体系配合使用，可以形成完整的"生成 → 渲染 → 汇报"工作流：

激活风格：在 Claude Code 会话中输入/output-style genui，即可让后续每次回复按 GenUI 规范产出 HTML 页面；
配合 Hooks 日志：本仓库的 .claude/hooks/ 会把每次交互事件（如 post_tool_use.py 生成logs/chat.json对话记录）写入logs/目录，你可以让 Claude 读取这些 JSON 日志，再用 GenUI 生成可视化的任务报告页；
结合子代理输出：仓库的 .claude/agents/ 定义了多个专用子代理（如 research、crypto 分析等），子代理完成任务后，主代理同样可以套用 GenUI 风格把结构化结果渲染成美观的 HTML 报告；
风格切换：当不需要可视化 HTML 时，用/output-style table-based或/output-style markdown-focused切换回文本优先的呈现方式，互不冲突。

注意：输出风格属于"查看与配置"层面的能力，激活命令/output-style与文件保存路径/tmp/均在 Claude Code 会话中生效，无需修改仓库任何源码。

结语

GenUI 输出风格的精髓在于把"格式化回答"升级为"生产交付物"：一份完整的、自带设计系统的 HTML5 文档，保存即打开、打开即可看、看完即可分享。配合 claude-code-hooks-mastery 仓库中 README.md 介绍的其他七种输出风格，你可以针对不同任务类型选择最合适的呈现方式——需要可视化看板时用 GenUI，需要结构化比对时用 table-based，需要机器可解析时用 yaml-structured。掌握这份 genui.md 的完整规范，你就能让 Claude Code 的每一次回答都自带"前端工程师级"的最终呈现。

【免费下载链接】claude-code-hooks-masteryMaster Claude Code Hooks项目地址: https://gitcode.com/GitHub_Trending/cl/claude-code-hooks-mastery

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析