Menu
自动应用浅蓝色主题样式规范到HTML文档。读取7组-样式markdown.md文件中的CSS样式定义，将浅蓝色主题配色(#4A90E2,
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| name | apply-blue-theme |
| description | 自动应用浅蓝色主题样式规范到HTML文档。读取7组-样式markdown.md文件中的CSS样式定义，将浅蓝色主题配色(#4A90E2, |
本技能用于自动应用 7组-样式markdown.md 中定义的浅蓝色主题样式规范到HTML文档，确保所有生成的文档具有一致的视觉风格。
样式定义位于：/Users/tt/project/ira-workshop/group-g/07/day1/7组-样式markdown.md
:root {
--primary-blue: #4A90E2;
--primary-light: #7EC8E3;
--primary-lighter: #B8D4E8;
--primary-dark: #2C5F8D;
--accent-cyan: #00D4FF;
--bg-light: #F5F7FA;
--text-primary: #333333;
--text-secondary: #666666;
--text-muted: #999999;
}
<div style="height: 3px; background: linear-gradient(90deg, #4A90E2, #7EC8E3, #B8D4E8, #7EC8E3, #4A90E2); border-radius: 2px; margin: 20px 0;"></div>
读取 /Users/tt/project/ira-workshop/group-g/07/day1/7组-样式markdown.md 文件，提取其中的CSS样式定义和HTML结构模板。
使用以下标准HTML模板结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[文档标题]</title>
<style>
/* 在此处插入完整的CSS样式 */
</style>
</head>
<body>
<div class="container">
<!-- 文档内容 -->
</div>
</body>
</html>
根据内容类型应用相应样式：
| 内容类型 | 应用样式 |
|---|---|
| 文档标题 | header类，渐变背景，居中显示 |
| 一级标题 | h1样式，蓝色底边框 |
| 二级标题 | h2样式，蓝色左边框 |
| 三级标题 | h3样式，蓝色文字 |
| 表格 | 渐变表头，交替行背景 |
| 代码块 | 浅蓝渐变背景，边框 |
| 引用/摘要 | 左边框，渐变背景 |
| 指标卡片 | metric-card类，左边框渐变 |
| 分隔线 | 蓝到浅蓝渐变 |
<div class="header">
<h1>📊 [文档标题]</h1>
<p class="subtitle">[副标题]</p>
<div class="header-badges">
<span class="badge">🌊 [标签1]</span>
<span class="badge">🔷 [标签2]</span>
<span class="badge">💎 [标签3]</span>
</div>
</div>
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-label">🎯 [指标名]</div>
<div class="metric-value">[数值]</div>
</div>
<!-- 更多卡片... -->
</div>
<blockquote>
<strong>💡 [标题]</strong><br><br>
[引用内容]
</blockquote>
<div class="architecture-box">
<pre>
[ASCII图表内容]
</pre>
</div>
<div class="divider"></div>
<div class="footer">
<div class="footer-decoration"></div>
<p><strong>—— 报告结束 ——</strong></p>
<p style="color: var(--text-muted);">
<em>[页脚信息]</em>
</p>
</div>
/* 主视觉样式 - 浅蓝色主题 */
:root {
--primary-blue: #4A90E2;
--primary-light: #7EC8E3;
--primary-lighter: #B8D4E8;
--primary-dark: #2C5F8D;
--accent-cyan: #00D4FF;
--bg-light: #F5F7FA;
--text-primary: #333333;
--text-secondary: #666666;
--text-muted: #999999;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
line-height: 1.8;
color: var(--text-primary);
background: linear-gradient(135deg, #F0F8FF 0%, #FFFFFF 100%);
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(74, 144, 226, 0.1);
padding: 40px;
}
/* 头部样式 */
.header {
text-align: center;
padding: 40px 0;
background: linear-gradient(135deg, var(--primary-blue), var(--primary-light), var(--primary-lighter));
border-radius: 12px;
margin-bottom: 40px;
color: white;
}
.header h1 {
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.header .subtitle {
font-size: 1.2em;
opacity: 0.9;
margin-bottom: 20px;
}
.header-badges {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
}
.badge {
background: rgba(255,255,255,0.2);
padding: 10px 20px;
border-radius: 20px;
font-size: 0.9em;
}
/* 分隔线 */
.divider {
height: 3px;
background: linear-gradient(90deg, var(--primary-blue), var(--primary-light), var(--primary-lighter), var(--primary-light), var(--primary-blue));
border-radius: 2px;
margin: 30px 0;
}
/* 标题样式 */
h1 {
color: var(--primary-blue);
border-bottom: 3px solid var(--primary-light);
padding-bottom: 10px;
margin: 30px 0 20px 0;
}
h2 {
color: var(--primary-dark);
border-left: 4px solid var(--primary-blue);
padding-left: 12px;
margin: 25px 0 15px 0;
}
h3 {
color: var(--primary-blue);
margin: 20px 0 10px 0;
}
/* 指标卡片 */
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin: 20px 0;
}
.metric-card {
background: linear-gradient(135deg, #E8F4FC, #F0F8FF);
border-left: 4px solid var(--primary-blue);
padding: 15px;
border-radius: 0 8px 8px 0;
transition: transform 0.2s, box-shadow 0.2s;
}
.metric-card:nth-child(2) { border-left-color: #5BA0F2; }
.metric-card:nth-child(3) { border-left-color: var(--primary-light); }
.metric-card:nth-child(4) { border-left-color: var(--primary-lighter); }
.metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
}
.metric-label {
font-weight: bold;
color: var(--text-secondary);
font-size: 0.9em;
}
.metric-value {
font-size: 28px;
color: var(--primary-blue);
font-weight: bold;
margin-top: 5px;
}
/* 引用块 */
blockquote {
border-left: 4px solid var(--primary-light);
background: linear-gradient(90deg, #F0F8FF, #FFFFFF);
padding: 15px 20px;
margin: 15px 0;
border-radius: 0 8px 8px 0;
font-style: italic;
}
blockquote strong {
color: var(--primary-blue);
}
/* 架构图容器 */
.architecture-box {
background: linear-gradient(135deg, #F0F8FF, #E8F4FC);
border: 2px solid var(--primary-lighter);
border-radius: 12px;
padding: 25px;
margin: 20px 0;
overflow-x: auto;
}
.architecture-box pre {
background: transparent;
border: none;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
line-height: 1.6;
color: var(--text-primary);
}
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
border-radius: 8px;
overflow: hidden;
}
th {
background: linear-gradient(135deg, var(--primary-blue), var(--primary-light));
color: white;
padding: 12px;
text-align: left;
font-weight: 600;
}
td {
padding: 12px;
border-bottom: 1px solid var(--primary-lighter);
}
tr:nth-child(even) {
background: #F8FBFF;
}
tr:hover {
background: #E8F4FC;
}
/* 安全检查卡片 */
.security-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
margin: 15px 0;
}
.security-card {
background: linear-gradient(135deg, #F0F8FF, #FFFFFF);
border: 1px solid var(--primary-lighter);
border-left: 4px solid var(--primary-blue);
padding: 12px;
border-radius: 0 8px 8px 0;
}
/* 代码块 */
code {
background: linear-gradient(135deg, #E8F4FC, #F0F8FF);
border: 1px solid var(--primary-lighter);
padding: 2px 6px;
border-radius: 4px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.9em;
color: var(--primary-dark);
}
pre {
background: linear-gradient(135deg, #E8F4FC, #F0F8FF);
border: 1px solid var(--primary-lighter);
padding: 15px;
border-radius: 8px;
overflow-x: auto;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
line-height: 1.6;
}
/* 页脚 */
.footer {
text-align: center;
margin-top: 50px;
padding-top: 30px;
border-top: 2px solid var(--primary-lighter);
}
.footer-decoration {
height: 4px;
background: linear-gradient(90deg, transparent, var(--primary-blue), var(--primary-light), var(--primary-lighter), var(--primary-light), var(--primary-blue), transparent);
border-radius: 2px;
margin-bottom: 20px;
}
/* 响应式 */
@media (max-width: 768px) {
.container {
padding: 20px;
}
.header h1 {
font-size: 1.8em;
}
.header-badges {
flex-direction: column;
gap: 10px;
}
.metrics-grid {
grid-template-columns: 1fr;
}
}
当用户要求生成项目分析报告时：
当用户有Markdown内容需要转换为HTML时：
# 标题 → <h1> 带蓝色底边框## 标题 → <h2> 带蓝色左边框/Users/tt/project/ira-workshop/group-g/07/day1/7组-样式markdown.md/Users/tt/project/ira-workshop/group-g/07/day1/7组-样式markdown.md/Users/tt/project/ira-workshop/group-g/07/day1/Kronos_Report.html生成南方基金风格的技术方案报告，输出为独立 HTML 文件和对应 Markdown 文件。使用蓝色主题、封面页、版本/审批/分发表、目录、分页符等企业报告元素。当用户要求生成技术方案报告、项目报告、南方基金风格报告时触发此技能。触发词：技术方案报告、南方基金风格、企业报告、方案报告。
生成专业技术方案报告HTML文件，采用金融级视觉规范（品牌蓝#004098 + 行动红#E72521双主色体系）。当用户需要生成技术报告、技术方案文档、项目方案书时使用此Skill。
Generate professional HTML scan reports for codebase analysis. Use when creating technical documentation, code scanning reports, or when the user requests a formatted report following team standards.
扫描项目代码模块并生成符合金融科技风格的技术文档报告。基于《四组-技术文档规范.md》的设计规范，生成包含系统架构、核心模块、API参考、安全系统等章节的HTML报告。Use when用户需要分析代码模块并生成技术文档报告，或提到"扫描"、"生成报告"、"技术文档"等关键词。