<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSD - Get Shit Done AI Workflow Poster</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
:root {
--bg-color: #0f172a;
--card-bg: rgba(30, 41, 59, 0.7);
--card-border: rgba(56, 189, 248, 0.2);
--accent-primary: #38bdf8; /* Sky 400 */
--accent-secondary: #a78bfa; /* Violet 400 */
--accent-success: #34d399; /* Emerald 400 */
--accent-danger: #f87171; /* Red 400 */
--text-main: #f8fafc;
--text-muted: #94a3b8;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', sans-serif;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.poster-container {
width: 720px;
min-height: 1280px;
background-color: var(--bg-color);
background-image:
radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.15) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(167, 139, 250, 0.15) 0%, transparent 40%);
position: relative;
overflow: hidden;
color: var(--text-main);
padding: 40px;
display: flex;
flex-direction: column;
gap: 24px;
}
/* Background Pattern */
.bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://sfile.chatglm.cn/image/dd/dd24ad94.jpg');
background-size: cover;
background-position: center;
opacity: 0.05;
z-index: 0;
mix-blend-mode: overlay;
}
.content-layer {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 24px;
height: 100%;
}
/* Header */
.header {
text-align: center;
margin-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 20px;
}
.title-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.main-title {
font-size: 48px;
font-weight: 800;
letter-spacing: -1px;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.1;
}
.subtitle {
font-size: 20px;
color: var(--text-muted);
font-weight: 400;
}
.tags {
display: flex;
gap: 10px;
margin-top: 12px;
justify-content: center;
}
.tag {
background: rgba(56, 189, 248, 0.1);
color: var(--accent-primary);
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
border: 1px solid rgba(56, 189, 248, 0.3);
font-family: 'JetBrains Mono', monospace;
}
/* Cards */
.card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 20px;
backdrop-filter: blur(12px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.section-title {
font-size: 18px;
font-weight: 700;
color: var(--text-main);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.section-title i {
color: var(--accent-primary);
}
/* Context Rot Section */
.problem-solution {
display: flex;
gap: 16px;
}
.ps-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.ps-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.7;
}
.ps-text {
font-size: 14px;
line-height: 1.5;
}
.highlight-box {
background: rgba(167, 139, 250, 0.1);
border-left: 3px solid var(--accent-secondary);
padding: 10px;
border-radius: 0 8px 8px 0;
font-size: 13px;
}
/* Architecture Stats */
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.stat-item {
background: rgba(255, 255, 255, 0.03);
padding: 12px;
border-radius: 8px;
text-align: center;
}
.stat-num {
font-size: 28px;
font-weight: 800;
color: var(--accent-primary);
font-family: 'JetBrains Mono', monospace;
}
.stat-desc {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
/* Workflow Process */
.workflow-steps {
display: flex;
flex-direction: column;
gap: 12px;
}
.step {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.03);
padding: 12px 16px;
border-radius: 8px;
position: relative;
transition: transform 0.2s;
}
.step:hover {
transform: translateX(5px);
background: rgba(255, 255, 255, 0.05);
}
.step-num {
font-size: 24px;
font-weight: 800;
color: rgba(255, 255, 255, 0.1);
margin-right: 16px;
font-family: 'JetBrains Mono', monospace;
}
.step-content {
flex: 1;
}
.step-title {
font-weight: 600;
font-size: 15px;
color: var(--accent-primary);
margin-bottom: 2px;
}
.step-desc {
font-size: 12px;
color: var(--text-muted);
}
.step-cmd {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
background: rgba(0,0,0,0.3);
padding: 2px 6px;
border-radius: 4px;
color: var(--accent-secondary);
}
/* Commands Grid */
.commands-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.cmd-item {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
padding: 8px;
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
color: var(--accent-secondary);
display: flex;
align-items: center;
gap: 6px;
}
.cmd-item i {
font-size: 14px;
color: var(--text-muted);
}
/* Pros & Cons */
.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.pc-col {
display: flex;
flex-direction: column;
gap: 10px;
}
.pc-title {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.pros-title { color: var(--accent-success); }
.cons-title { color: var(--accent-danger); }
.pc-item {
font-size: 13px;
color: #ddd;
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.4;
}
.pc-item i {
font-size: 16px;
margin-top: 1px;
}
/* Footer */
.footer {
margin-top: auto;
text-align: center;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 20px;
}
.quote {
font-size: 16px;
font-style: italic;
color: var(--accent-primary);
margin-bottom: 12px;
font-weight: 500;
}
.links {
display: flex;
justify-content: center;
gap: 20px;
font-size: 12px;
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted);
}
.link-item {
display: flex;
align-items: center;
gap: 4px;
}
/* Decorative Elements */
.corner-deco {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: 50%;
z-index: 0;
}
.c-tl { top: -50px; left: -50px; }
.c-br { bottom: -50px; right: -50px; border-color: rgba(167, 139, 250, 0.2); }
</style>
</head>
<body>
<div class="poster-container">
<div class="bg-pattern"></div>
<div class="corner-deco c-tl"></div>
<div class="corner-deco c-br"></div>
<div class="content-layer">
<!-- Header -->
<header class="header">
<div class="title-group">
<h1 class="main-title">GSD</h1>
<div class="subtitle">Get Shit Done · AI 编程工作流</div>
</div>
<div class="tags">
<span class="tag"># 规范驱动开发</span>
<span class="tag"># GitHub 23K+ Stars</span>
</div>
</header>
<!-- Core Problem -->
<div class="card">
<div class="section-title">
<i class="material-icons">warning</i>
核心痛点：Context Rot
</div>
<div class="problem-solution">
<div class="ps-col">
<div class="ps-label">传统问题</div>
<div class="ps-text" style="color: var(--accent-danger);">随着对话进行，上下文窗口填满，AI 输出质量断崖式下降。</div>
</div>
<div class="ps-col">
<div class="ps-label">GSD 方案</div>
<div class="highlight-box">
每个任务独立上下文<br>
<strong>全新 200K Token 环境</strong><br>
确保质量始终如一
</div>
</div>
</div>
</div>
<!-- Architecture -->
<div class="card">
<div class="section-title">
<i class="material-icons">architecture</i>
架构组成
</div>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-num">28+</div>
<div class="stat-desc">Slash 命令</div>
</div>
<div class="stat-item">
<div class="stat-num">12</div>
<div class="stat-desc">专用 Agent</div>
</div>
</div>
<div style="margin-top: 12px; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px;">
<i class="material-icons" style="font-size: 16px;">code</i>
纯 Markdown 文件 + Node.js CLI，无专有运行时
</div>
</div>
<!-- Workflow -->
<div class="card">
<div class="section-title">
<i class="material-icons">timeline</i>
核心流程 (五阶段)
</div>
<div class="workflow-steps">
<div class="step">
<div class="step-num">01</div>
<div class="step-content">
<div class="step-title">初始化 · Initialization</div>
<div class="step-desc">深度提问 → 领域研究 → 需求提取 → 生成路线图</div>
</div>
<div class="step-cmd">/gsd:new-project</div>
</div>
<div class="step">
<div class="step-num">02</div>
<div class="step-content">
<div class="step-title">讨论 · Discussion</div>
<div class="step-desc">明确实现偏好、视觉风格、API 设计等细节</div>
</div>
<div class="step-cmd">/gsd:discuss-phase</div>
</div>
<div class="step">
<div class="step-num">03</div>
<div class="step-content">
<div class="step-title">规划 · Planning</div>
<div class="step-desc">研究实现方案，生成 2-3 个原子任务计划</div>
</div>
<div class="step-cmd">/gsd:plan-phase</div>
</div>
<div class="step">
<div class="step-num">04</div>
<div class="step-content">
<div class="step-title">执行 · Execution</div>
<div class="step-desc">并行执行计划，每个任务独立上下文，原子提交</div>
</div>
<div class="step-cmd">/gsd:execute-phase</div>
</div>
<div class="step">
<div class="step-num">05</div>
<div class="step-content">
<div class="step-title">验证 · Verification</div>
<div class="step-desc">确认目标达成，而非仅任务完成</div>
</div>
<div class="step-cmd">/gsd:verify-work</div>
</div>
</div>
</div>
<!-- Common Commands -->
<div class="card">
<div class="section-title">
<i class="material-icons">terminal</i>
常用命令 & 文档
</div>
<div class="commands-list">
<div class="cmd-item"><i class="material-icons">play_arrow</i>/gsd:map-codebase</div>
<div class="cmd-item"><i class="material-icons">play_arrow</i>/gsd:quick [--discuss]</div>
<div class="cmd-item"><i class="material-icons">play_arrow</i>/gsd:complete-milestone</div>
<div class="cmd-item"><i class="material-icons">description</i>PROJECT.md / ROADMAP.md</div>
</div>
</div>
<!-- Pros & Cons -->
<div class="card">
<div class="pros-cons">
<div class="pc-col">
<div class="pc-title pros-title"><i class="material-icons">check_circle</i> 优点</div>
<div class="pc-item"><i class="material-icons">add</i>解决上下文腐烂</div>
<div class="pc-item"><i class="material-icons">add</i>原子提交，Git历史清晰</div>
<div class="pc-item"><i class="material-icons">add</i>无 Vendor 锁定</div>
</div>
<div class="pc-col">
<div class="pc-title cons-title"><i class="material-icons">cancel</i> 缺点</div>
<div class="pc-item"><i class="material-icons">remove</i>非全自动，需人工触发</div>
<div class="pc-item"><i class="material-icons">remove</i>学习曲线较陡</div>
<div class="pc-item"><i class="material-icons">remove</i>不适合探索性编码</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="quote">"把聊天变成工程，换取可预测、可验证的体验"</div>
<div class="links">
<div class="link-item">
<i class="material-icons" style="font-size: 14px;">link</i>
github.com/gsd-build/get-shit-done
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
