郑育江
1188 lines
31 KiB
HTML
1188 lines
31 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>AI 编程提效分享 - Apple Style Slides</title>
|
||
<style>
|
||
:root {
|
||
--ink: #0b0f17;
|
||
--muted: #5b6675;
|
||
--soft: #f5f5f7;
|
||
--panel: rgba(255, 255, 255, 0.78);
|
||
--line: rgba(17, 24, 39, 0.1);
|
||
--blue: #0071e3;
|
||
--green: #2d8f6f;
|
||
--orange: #c96a1b;
|
||
--shadow: 0 24px 80px rgba(15, 23, 42, 0.12);
|
||
--radius: 28px;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--soft);
|
||
color: var(--ink);
|
||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
|
||
overflow: hidden;
|
||
}
|
||
|
||
button {
|
||
font: inherit;
|
||
}
|
||
|
||
.deck {
|
||
height: 100vh;
|
||
width: 100vw;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
scroll-snap-type: y mandatory;
|
||
}
|
||
|
||
.slide {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
scroll-snap-align: start;
|
||
display: grid;
|
||
align-items: center;
|
||
padding: 7.5vh clamp(22px, 5vw, 72px);
|
||
overflow: hidden;
|
||
background:
|
||
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,245,247,0.98)),
|
||
var(--soft);
|
||
}
|
||
|
||
.slide.dark {
|
||
background: linear-gradient(180deg, #090b10 0%, #161a22 100%);
|
||
color: #fff;
|
||
}
|
||
|
||
.slide.dark .eyebrow,
|
||
.slide.dark .muted,
|
||
.slide.dark .caption {
|
||
color: rgba(255,255,255,0.66);
|
||
}
|
||
|
||
.slide.dark .glass,
|
||
.slide.dark .mini-card,
|
||
.slide.dark .side-note {
|
||
background: rgba(255,255,255,0.08);
|
||
border-color: rgba(255,255,255,0.16);
|
||
color: #fff;
|
||
}
|
||
|
||
.content {
|
||
width: min(1180px, 100%);
|
||
margin: 0 auto;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.image-content {
|
||
width: min(1420px, 100%);
|
||
}
|
||
|
||
.center {
|
||
text-align: center;
|
||
}
|
||
|
||
.eyebrow {
|
||
margin: 0 0 18px;
|
||
color: var(--blue);
|
||
font-size: clamp(14px, 1.4vw, 17px);
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
h1,
|
||
h2 {
|
||
margin: 0;
|
||
font-weight: 760;
|
||
letter-spacing: 0;
|
||
line-height: 1.04;
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(48px, 8.6vw, 108px);
|
||
}
|
||
|
||
h2 {
|
||
font-size: clamp(38px, 6.2vw, 78px);
|
||
}
|
||
|
||
.lead {
|
||
max-width: 860px;
|
||
margin: 26px auto 0;
|
||
color: var(--muted);
|
||
font-size: clamp(19px, 2.15vw, 30px);
|
||
line-height: 1.34;
|
||
font-weight: 520;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.muted {
|
||
color: var(--muted);
|
||
}
|
||
|
||
.hero-actions,
|
||
.pill-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
margin-top: 34px;
|
||
}
|
||
|
||
.pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 42px;
|
||
padding: 0 18px;
|
||
border: 1px solid rgba(15, 23, 42, 0.1);
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.72);
|
||
color: var(--ink);
|
||
font-size: 15px;
|
||
font-weight: 650;
|
||
backdrop-filter: blur(18px);
|
||
}
|
||
|
||
.slide.dark .pill {
|
||
background: rgba(255,255,255,0.1);
|
||
border-color: rgba(255,255,255,0.18);
|
||
color: #fff;
|
||
}
|
||
|
||
.grid-3 {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 18px;
|
||
margin-top: 46px;
|
||
}
|
||
|
||
.grid-2 {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 28px;
|
||
align-items: center;
|
||
}
|
||
|
||
.mini-card,
|
||
.glass,
|
||
.side-note {
|
||
border: 1px solid var(--line);
|
||
background: var(--panel);
|
||
backdrop-filter: blur(22px);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.mini-card {
|
||
min-height: 210px;
|
||
border-radius: 24px;
|
||
padding: clamp(22px, 2.8vw, 34px);
|
||
}
|
||
|
||
.mini-card .num {
|
||
display: block;
|
||
margin-bottom: 18px;
|
||
color: var(--blue);
|
||
font-size: 15px;
|
||
font-weight: 780;
|
||
}
|
||
|
||
.mini-card h3 {
|
||
margin: 0 0 12px;
|
||
font-size: clamp(24px, 2.8vw, 36px);
|
||
letter-spacing: 0;
|
||
line-height: 1.08;
|
||
}
|
||
|
||
.mini-card p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: clamp(16px, 1.55vw, 20px);
|
||
line-height: 1.48;
|
||
}
|
||
|
||
.big-line {
|
||
margin-top: 42px;
|
||
font-size: clamp(28px, 4.2vw, 56px);
|
||
line-height: 1.08;
|
||
font-weight: 760;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.image-stage {
|
||
position: relative;
|
||
display: grid;
|
||
place-items: center;
|
||
min-height: 62vh;
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--line);
|
||
background:
|
||
linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72)),
|
||
#fff;
|
||
box-shadow: var(--shadow);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.image-stage img {
|
||
width: min(98%, 1240px);
|
||
max-height: 84vh;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
|
||
.image-slide .image-stage {
|
||
min-height: 82vh;
|
||
}
|
||
|
||
.image-slide .image-stage img {
|
||
width: 100%;
|
||
height: 100%;
|
||
max-height: none;
|
||
padding: clamp(8px, 1.2vw, 18px);
|
||
}
|
||
|
||
.compact-image-slide .image-stage {
|
||
min-height: 72vh;
|
||
}
|
||
|
||
.compact-image-slide .image-stage img {
|
||
width: 92%;
|
||
height: 92%;
|
||
padding: clamp(14px, 2vw, 28px);
|
||
}
|
||
|
||
.image-stage.full {
|
||
min-height: 70vh;
|
||
}
|
||
|
||
.image-stage.full img {
|
||
width: 100%;
|
||
height: 100%;
|
||
max-height: none;
|
||
object-fit: contain;
|
||
padding: clamp(10px, 2vw, 24px);
|
||
}
|
||
|
||
.side-note {
|
||
border-radius: 24px;
|
||
padding: 26px;
|
||
}
|
||
|
||
.side-note h3 {
|
||
margin: 0 0 12px;
|
||
font-size: clamp(24px, 3vw, 36px);
|
||
line-height: 1.08;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.side-note p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: clamp(16px, 1.5vw, 20px);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.stack {
|
||
display: grid;
|
||
gap: 16px;
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.step {
|
||
display: grid;
|
||
grid-template-columns: 64px 1fr;
|
||
gap: 18px;
|
||
align-items: center;
|
||
padding: 22px 24px;
|
||
border-radius: 22px;
|
||
background: rgba(255,255,255,0.72);
|
||
border: 1px solid var(--line);
|
||
}
|
||
|
||
.step strong {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
background: var(--ink);
|
||
font-size: 18px;
|
||
}
|
||
|
||
.step span {
|
||
font-size: clamp(18px, 2vw, 25px);
|
||
font-weight: 720;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.step small {
|
||
display: block;
|
||
margin-top: 5px;
|
||
color: var(--muted);
|
||
font-size: clamp(14px, 1.35vw, 17px);
|
||
line-height: 1.38;
|
||
}
|
||
|
||
.compare {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 24px;
|
||
margin-top: 46px;
|
||
}
|
||
|
||
.compare .mini-card {
|
||
min-height: 320px;
|
||
}
|
||
|
||
.list {
|
||
display: grid;
|
||
gap: 12px;
|
||
margin-top: 22px;
|
||
}
|
||
|
||
.list span {
|
||
display: block;
|
||
padding: 14px 16px;
|
||
border-radius: 16px;
|
||
background: rgba(255,255,255,0.72);
|
||
border: 1px solid var(--line);
|
||
color: var(--ink);
|
||
font-size: clamp(16px, 1.5vw, 19px);
|
||
font-weight: 650;
|
||
}
|
||
|
||
.slide.dark .list span {
|
||
color: #fff;
|
||
background: rgba(255,255,255,0.08);
|
||
border-color: rgba(255,255,255,0.16);
|
||
}
|
||
|
||
.nav {
|
||
position: fixed;
|
||
left: 50%;
|
||
bottom: 22px;
|
||
z-index: 20;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 9px;
|
||
padding: 9px 12px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.72);
|
||
border: 1px solid rgba(15,23,42,0.1);
|
||
box-shadow: 0 12px 38px rgba(15, 23, 42, 0.14);
|
||
backdrop-filter: blur(22px);
|
||
}
|
||
|
||
.dot {
|
||
width: 9px;
|
||
height: 9px;
|
||
border: 0;
|
||
border-radius: 50%;
|
||
background: #b8c0cc;
|
||
cursor: pointer;
|
||
transition: width 180ms ease-out, background-color 180ms ease-out;
|
||
}
|
||
|
||
.dot[aria-current="true"] {
|
||
width: 28px;
|
||
border-radius: 999px;
|
||
background: var(--ink);
|
||
}
|
||
|
||
.controls {
|
||
position: fixed;
|
||
right: 22px;
|
||
bottom: 22px;
|
||
z-index: 21;
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.control {
|
||
width: 42px;
|
||
height: 42px;
|
||
border: 1px solid rgba(15,23,42,0.1);
|
||
border-radius: 50%;
|
||
color: var(--ink);
|
||
background: rgba(255,255,255,0.74);
|
||
box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
|
||
cursor: pointer;
|
||
backdrop-filter: blur(18px);
|
||
transition: transform 180ms ease-out, background-color 180ms ease-out;
|
||
}
|
||
|
||
.control:hover,
|
||
.dot:hover {
|
||
background: #fff;
|
||
}
|
||
|
||
.control:focus-visible,
|
||
.dot:focus-visible {
|
||
outline: 3px solid rgba(0,113,227,0.32);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
.progress {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 30;
|
||
height: 3px;
|
||
width: 100%;
|
||
background: rgba(15,23,42,0.08);
|
||
}
|
||
|
||
.progress span {
|
||
display: block;
|
||
height: 100%;
|
||
width: 10%;
|
||
background: var(--blue);
|
||
transition: width 180ms ease-out;
|
||
}
|
||
|
||
.caption {
|
||
margin-top: 18px;
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.doc-slide {
|
||
align-items: start;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.doc-content {
|
||
width: min(1180px, 100%);
|
||
margin: 0 auto;
|
||
padding: 4vh 0 9vh;
|
||
}
|
||
|
||
.doc-content h2 {
|
||
font-size: clamp(36px, 5vw, 64px);
|
||
}
|
||
|
||
.doc-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 18px;
|
||
margin-top: 34px;
|
||
}
|
||
|
||
.doc-card {
|
||
border: 1px solid var(--line);
|
||
border-radius: 22px;
|
||
background: rgba(255,255,255,0.78);
|
||
box-shadow: var(--shadow);
|
||
padding: clamp(20px, 2.4vw, 30px);
|
||
}
|
||
|
||
.doc-card.wide {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.doc-card h3 {
|
||
margin: 0 0 14px;
|
||
font-size: clamp(22px, 2.4vw, 32px);
|
||
line-height: 1.1;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.doc-card p,
|
||
.doc-card li {
|
||
color: var(--muted);
|
||
font-size: clamp(15px, 1.35vw, 18px);
|
||
line-height: 1.48;
|
||
}
|
||
|
||
.doc-card ul,
|
||
.doc-card ol {
|
||
margin: 12px 0 0;
|
||
padding-left: 1.2em;
|
||
}
|
||
|
||
.doc-card a {
|
||
color: var(--blue);
|
||
text-decoration: none;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.cmd {
|
||
margin: 12px 0 0;
|
||
padding: 14px 16px;
|
||
border-radius: 16px;
|
||
background: #101722;
|
||
color: #e8eef7;
|
||
font-family: "SF Mono", "Menlo", "Consolas", monospace;
|
||
font-size: clamp(13px, 1.1vw, 15px);
|
||
line-height: 1.5;
|
||
overflow-x: auto;
|
||
white-space: pre;
|
||
}
|
||
|
||
.burn-slide {
|
||
background:
|
||
radial-gradient(circle at 76% 36%, rgba(255, 114, 47, 0.22), transparent 30%),
|
||
radial-gradient(circle at 74% 66%, rgba(0, 113, 227, 0.2), transparent 34%),
|
||
linear-gradient(180deg, #070a10 0%, #152236 100%);
|
||
}
|
||
|
||
.burn-layout {
|
||
display: grid;
|
||
grid-template-columns: 0.88fr 1.12fr;
|
||
gap: clamp(28px, 5vw, 72px);
|
||
align-items: center;
|
||
}
|
||
|
||
.burn-copy {
|
||
text-align: left;
|
||
}
|
||
|
||
.burn-copy h2 {
|
||
font-size: clamp(42px, 6vw, 86px);
|
||
}
|
||
|
||
.burn-copy .lead {
|
||
margin-left: 0;
|
||
color: rgba(255,255,255,0.68);
|
||
}
|
||
|
||
.burn-shot {
|
||
position: relative;
|
||
display: grid;
|
||
align-items: center;
|
||
min-height: min(68vh, 560px);
|
||
border: 1px solid rgba(255,255,255,0.14);
|
||
border-radius: 26px;
|
||
background:
|
||
linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)),
|
||
#090d14;
|
||
box-shadow:
|
||
0 34px 90px rgba(0,0,0,0.38),
|
||
0 0 120px rgba(255, 118, 43, 0.2);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.burn-shot::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -40% -20%;
|
||
background:
|
||
conic-gradient(from 180deg, transparent, rgba(255, 111, 40, 0.22), transparent, rgba(0,113,227,0.16), transparent);
|
||
animation: spinGlow 8s linear infinite;
|
||
}
|
||
|
||
.burn-screen {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: grid;
|
||
gap: 18px;
|
||
margin: 18px;
|
||
padding: clamp(18px, 2vw, 28px);
|
||
border-radius: 18px;
|
||
background: rgba(5, 9, 16, 0.76);
|
||
backdrop-filter: blur(18px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.burn-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: rgba(255,255,255,0.6);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.lights {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.lights span {
|
||
width: 11px;
|
||
height: 11px;
|
||
border-radius: 50%;
|
||
background: #ff5f57;
|
||
}
|
||
|
||
.lights span:nth-child(2) {
|
||
background: #ffbd2e;
|
||
}
|
||
|
||
.lights span:nth-child(3) {
|
||
background: #28c840;
|
||
}
|
||
|
||
.burn-badge-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
align-items: center;
|
||
color: rgba(255,255,255,0.62);
|
||
font-size: 14px;
|
||
font-weight: 740;
|
||
}
|
||
|
||
.burn-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 36px;
|
||
padding: 0 14px;
|
||
border: 1px solid rgba(255,255,255,0.14);
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.08);
|
||
color: #fff;
|
||
}
|
||
|
||
.burn-stat-img {
|
||
width: 100%;
|
||
border-radius: 18px;
|
||
border: 1px solid rgba(255,255,255,0.12);
|
||
box-shadow: 0 28px 70px rgba(0,0,0,0.32);
|
||
animation: screenshotFloat 3.4s ease-in-out infinite;
|
||
}
|
||
|
||
.burn-evidence {
|
||
position: relative;
|
||
}
|
||
|
||
.burn-runtime-img {
|
||
position: absolute;
|
||
right: -4%;
|
||
bottom: -18%;
|
||
width: min(34%, 210px);
|
||
max-height: 260px;
|
||
object-fit: cover;
|
||
object-position: center bottom;
|
||
border-radius: 18px;
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
box-shadow: 0 24px 58px rgba(0,0,0,0.38);
|
||
transform: rotate(3deg);
|
||
animation: runtimePop 3.8s ease-in-out infinite;
|
||
}
|
||
|
||
.burn-callout {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin-top: 12px;
|
||
color: #fff;
|
||
font-size: clamp(26px, 3vw, 42px);
|
||
font-weight: 820;
|
||
line-height: 1.05;
|
||
text-align: center;
|
||
text-shadow: 0 0 34px rgba(255, 121, 36, 0.44);
|
||
animation: logPulse 2.4s ease-in-out infinite;
|
||
}
|
||
|
||
.heat {
|
||
color: #ffb067;
|
||
}
|
||
|
||
@keyframes spinGlow {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes logPulse {
|
||
50% {
|
||
transform: scale(1.015);
|
||
color: #ffb067;
|
||
}
|
||
}
|
||
|
||
@keyframes screenshotFloat {
|
||
50% {
|
||
transform: translateY(-8px) scale(1.012);
|
||
box-shadow: 0 36px 90px rgba(255, 128, 48, 0.22);
|
||
}
|
||
}
|
||
|
||
@keyframes runtimePop {
|
||
50% {
|
||
transform: rotate(0deg) translateY(-7px) scale(1.035);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 820px) {
|
||
body {
|
||
overflow: auto;
|
||
}
|
||
|
||
.slide {
|
||
padding: 76px 18px 86px;
|
||
}
|
||
|
||
.grid-3,
|
||
.grid-2,
|
||
.compare,
|
||
.doc-grid,
|
||
.burn-layout {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.burn-copy {
|
||
text-align: center;
|
||
}
|
||
|
||
.burn-copy .lead {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.burn-shot {
|
||
min-height: 52vh;
|
||
}
|
||
|
||
.burn-runtime-img {
|
||
position: relative;
|
||
right: auto;
|
||
bottom: auto;
|
||
width: 100%;
|
||
max-height: 220px;
|
||
margin-top: 12px;
|
||
transform: none;
|
||
}
|
||
|
||
.doc-slide {
|
||
align-items: start;
|
||
}
|
||
|
||
.image-stage {
|
||
min-height: 52vh;
|
||
}
|
||
|
||
.image-slide .image-stage,
|
||
.image-stage.full {
|
||
min-height: 68vh;
|
||
}
|
||
|
||
.compact-image-slide .image-stage {
|
||
min-height: 58vh;
|
||
}
|
||
|
||
.controls {
|
||
display: none;
|
||
}
|
||
|
||
.nav {
|
||
max-width: calc(100vw - 28px);
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.step {
|
||
grid-template-columns: 48px 1fr;
|
||
padding: 18px;
|
||
}
|
||
|
||
.step strong {
|
||
width: 42px;
|
||
height: 42px;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
html {
|
||
scroll-behavior: auto;
|
||
}
|
||
|
||
.dot,
|
||
.control,
|
||
.progress span {
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
@media print {
|
||
body {
|
||
overflow: visible;
|
||
}
|
||
|
||
.deck {
|
||
overflow: visible;
|
||
height: auto;
|
||
}
|
||
|
||
.slide {
|
||
break-after: page;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.nav,
|
||
.controls,
|
||
.progress {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="progress" aria-hidden="true"><span id="progressBar"></span></div>
|
||
|
||
<main class="deck" id="deck">
|
||
<section class="slide dark" id="slide-1" data-title="封面">
|
||
<div class="content center">
|
||
<p class="eyebrow">内部分享 / 30 分钟</p>
|
||
<h1>AI 编程提效分享</h1>
|
||
<p class="lead">从工具链、插件方法到实战落地。把 AI 从偶尔帮忙，变成稳定的研发生产力。</p>
|
||
<div class="hero-actions" aria-label="分享主题">
|
||
<span class="pill">工具链</span>
|
||
<span class="pill">插件方法</span>
|
||
<span class="pill">实战闭环</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" id="slide-2" data-title="问题">
|
||
<div class="content">
|
||
<p class="eyebrow">问题先讲透</p>
|
||
<h2>为什么用了 AI，还是没有稳定提效？</h2>
|
||
<div class="grid-3">
|
||
<article class="mini-card">
|
||
<span class="num">01</span>
|
||
<h3>入口散</h3>
|
||
<p>IDE、CLI、模型、供应商、插件各管各的，切换和配置本身就在耗时。</p>
|
||
</article>
|
||
<article class="mini-card">
|
||
<span class="num">02</span>
|
||
<h3>方法散</h3>
|
||
<p>会问 AI，但每个人都在手搓自己的流程，很难复制给团队。</p>
|
||
</article>
|
||
<article class="mini-card">
|
||
<span class="num">03</span>
|
||
<h3>验证弱</h3>
|
||
<p>代码生成很快，但缺少调研、设计、测试和验收，返工没有少。</p>
|
||
</article>
|
||
</div>
|
||
<p class="big-line">真正缺的不是模型能力，而是被组织起来的能力。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" id="slide-3" data-title="三层模型">
|
||
<div class="content">
|
||
<p class="eyebrow">一个适合团队落地的框架</p>
|
||
<h2>AI 编程提效，从三层来搭。</h2>
|
||
<div class="stack">
|
||
<div class="step">
|
||
<strong>1</strong>
|
||
<span>工具链 <small>统一入口、统一路由、统一配置、统一成本观察。</small></span>
|
||
</div>
|
||
<div class="step">
|
||
<strong>2</strong>
|
||
<span>插件方法 <small>把经验固化成插件、skills、MCP 和 workflow。</small></span>
|
||
</div>
|
||
<div class="step">
|
||
<strong>3</strong>
|
||
<span>实战闭环 <small>围绕真实任务，把调研、设计、编码、测试串起来。</small></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide image-slide compact-image-slide" id="slide-4" data-title="协作模型">
|
||
<div class="content image-content">
|
||
<div class="image-stage">
|
||
<img src="codex-claude-workflow.png" alt="Codex 与 Claude 协作工作流图">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide image-slide" id="slide-5" data-title="cc-switch">
|
||
<div class="content image-content">
|
||
<div class="image-stage">
|
||
<img src="cc-switch-architecture.png" alt="cc-switch 配合 Codex 和 Claude Code 的架构图">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" id="slide-6" data-title="插件方法">
|
||
<div class="content">
|
||
<p class="eyebrow">从 prompt 到 workflow</p>
|
||
<h2>插件方法层，重点不是装了什么。</h2>
|
||
<div class="grid-3">
|
||
<article class="mini-card">
|
||
<span class="num">Superpowers</span>
|
||
<h3>让 Agent 按流程工作</h3>
|
||
<p>先澄清目标，再设计，再计划，再执行和验证。</p>
|
||
</article>
|
||
<article class="mini-card">
|
||
<span class="num">UIUXProMax</span>
|
||
<h3>把专业判断技能化</h3>
|
||
<p>设计系统、风格、反模式和检查项变成可重复调用的能力。</p>
|
||
</article>
|
||
<article class="mini-card">
|
||
<span class="num">MCP / Browser</span>
|
||
<h3>补上下文</h3>
|
||
<p>让 AI 访问网页、文档、系统和运行结果，而不是只看聊天记录。</p>
|
||
</article>
|
||
</div>
|
||
<p class="big-line">不要复制聊天记录，要复制工作方法。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide dark" id="slide-7" data-title="任务模板">
|
||
<div class="content">
|
||
<p class="eyebrow">最值得带走的一页</p>
|
||
<h2>给 AI 派任务，至少说清 3 件事。</h2>
|
||
<div class="grid-3">
|
||
<article class="mini-card">
|
||
<span class="num">01</span>
|
||
<h3>目标</h3>
|
||
<p>最终要产出什么。</p>
|
||
</article>
|
||
<article class="mini-card">
|
||
<span class="num">02</span>
|
||
<h3>上下文</h3>
|
||
<p>代码、文档、截图、链接在哪里。</p>
|
||
</article>
|
||
<article class="mini-card">
|
||
<span class="num">03</span>
|
||
<h3>验收</h3>
|
||
<p>结果怎样算完成，怎么验证。</p>
|
||
</article>
|
||
</div>
|
||
<p class="lead">把“帮我做一个页面”升级成“基于这些上下文和约束，先给方案，再给计划，最后给可验证结果”。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" id="slide-8" data-title="实战">
|
||
<div class="content image-content">
|
||
<p class="eyebrow">实战层</p>
|
||
<h2>从调研到落地，才是最有说服力的提效。</h2>
|
||
<div class="image-stage full" style="margin-top:34px">
|
||
<img src="codex-end-to-end-practice.png" alt="Codex 从方案调研到验证测试的端到端能力实践图">
|
||
</div>
|
||
<p class="caption">核心不是全自动，而是中间交付物也一起生成出来。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide" id="slide-9" data-title="落地建议">
|
||
<div class="content">
|
||
<p class="eyebrow">团队怎么开始</p>
|
||
<h2>先从小范围任务跑通。</h2>
|
||
<div class="compare">
|
||
<article class="mini-card">
|
||
<span class="num" style="color:var(--green)">优先做</span>
|
||
<h3>收益稳定的任务</h3>
|
||
<div class="list">
|
||
<span>新功能 MVP</span>
|
||
<span>页面开发 / 原型搭建</span>
|
||
<span>CRUD / 后台接口</span>
|
||
<span>测试、文档、脚手架</span>
|
||
</div>
|
||
</article>
|
||
<article class="mini-card">
|
||
<span class="num" style="color:var(--orange)">谨慎做</span>
|
||
<h3>高风险或模糊任务</h3>
|
||
<div class="list">
|
||
<span>复杂遗留系统大重构</span>
|
||
<span>资金、权限、安全链路</span>
|
||
<span>验收标准不清的需求</span>
|
||
<span>无人负责拍板的任务</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide dark burn-slide" id="slide-10" data-title="总结">
|
||
<div class="content burn-layout">
|
||
<div class="burn-copy">
|
||
<h2>不要一开始追求全自动。</h2>
|
||
<p class="lead">先追求可用、可控、可复用。</p>
|
||
</div>
|
||
<div class="burn-shot" aria-label="Token 消耗模拟截图">
|
||
<div class="burn-screen">
|
||
<div class="burn-toolbar">
|
||
<div class="lights" aria-hidden="true"><span></span><span></span><span></span></div>
|
||
<span>cc-switch usage stats</span>
|
||
</div>
|
||
<div class="burn-badge-row">
|
||
<span class="burn-badge heat">TOKEN BURNING</span>
|
||
<span>真实消耗 Tokens</span>
|
||
</div>
|
||
<div class="burn-evidence">
|
||
<img class="burn-stat-img" src="token-burn-stats.png" alt="cc-switch 真实消耗 Tokens 统计截图">
|
||
<img class="burn-runtime-img" src="token-burn-runtime.jpg" alt="长时间运行截图，显示 17h 25m 33s">
|
||
</div>
|
||
<div class="burn-callout">4,490,038,048 tokens</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="slide doc-slide" id="slide-11" data-title="安装文档">
|
||
<div class="doc-content">
|
||
<p class="eyebrow">安装文档</p>
|
||
<h2>AI 编程工具安装说明</h2>
|
||
<p class="lead" style="margin-left:0">先装 Codex / Claude Code，再装 cc-switch，最后装 Superpowers 和 UI/UX Pro Max。</p>
|
||
|
||
<div class="doc-grid">
|
||
<article class="doc-card">
|
||
<h3>1. 基础环境</h3>
|
||
<p>macOS 先确认 Node.js、Git、Homebrew 可用。</p>
|
||
<pre class="cmd">node --version
|
||
npm --version
|
||
git --version
|
||
brew --version</pre>
|
||
<pre class="cmd">brew install node</pre>
|
||
</article>
|
||
|
||
<article class="doc-card">
|
||
<h3>2. Codex</h3>
|
||
<p><a href="https://developers.openai.com/codex/cli">官方文档</a> / <a href="https://chatgpt.com/codex/install.sh">安装脚本</a></p>
|
||
<pre class="cmd">curl -fsSL https://chatgpt.com/codex/install.sh | sh
|
||
codex
|
||
codex --version</pre>
|
||
</article>
|
||
|
||
<article class="doc-card">
|
||
<h3>3. Claude Code</h3>
|
||
<p><a href="https://claude.com/download">Claude 下载页</a> / <a href="https://code.claude.com/docs/en/getting-started">Claude Code 文档</a></p>
|
||
<pre class="cmd">curl -fsSL https://claude.ai/install.sh | bash
|
||
claude
|
||
claude --version
|
||
claude doctor</pre>
|
||
<pre class="cmd">brew install --cask claude-code</pre>
|
||
<pre class="cmd">winget install Anthropic.ClaudeCode</pre>
|
||
<pre class="cmd">npm install -g @anthropic-ai/claude-code</pre>
|
||
</article>
|
||
|
||
<article class="doc-card">
|
||
<h3>4. cc-switch</h3>
|
||
<p><a href="https://github.com/farion1231/cc-switch">官方仓库</a> / <a href="https://github.com/farion1231/cc-switch/releases/latest">下载页</a></p>
|
||
<pre class="cmd">brew install --cask cc-switch
|
||
brew upgrade --cask cc-switch</pre>
|
||
<ol>
|
||
<li>添加供应商并填入 API Key 或团队代理。</li>
|
||
<li>选择 Codex / Claude Code 等目标工具。</li>
|
||
<li>启用供应商，重启终端验证。</li>
|
||
</ol>
|
||
</article>
|
||
|
||
<article class="doc-card">
|
||
<h3>5. Superpowers</h3>
|
||
<p><a href="https://github.com/obra/superpowers">官方仓库</a></p>
|
||
<pre class="cmd">/plugin install superpowers@claude-plugins-official</pre>
|
||
<pre class="cmd">/plugin marketplace add obra/superpowers-marketplace
|
||
/plugin install superpowers@superpowers-marketplace</pre>
|
||
<p>Codex App：Plugins -> Coding -> Superpowers -> +</p>
|
||
</article>
|
||
|
||
<article class="doc-card">
|
||
<h3>6. UI/UX Pro Max</h3>
|
||
<p><a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill">官方仓库</a></p>
|
||
<pre class="cmd">npm install -g uipro-cli
|
||
cd /path/to/project
|
||
uipro init --ai codex
|
||
uipro init --ai claude
|
||
uipro init --ai cursor</pre>
|
||
<pre class="cmd">uipro update
|
||
uipro uninstall</pre>
|
||
</article>
|
||
|
||
<article class="doc-card wide">
|
||
<h3>最短路径</h3>
|
||
<pre class="cmd"># Codex
|
||
curl -fsSL https://chatgpt.com/codex/install.sh | sh
|
||
brew install --cask cc-switch
|
||
npm install -g uipro-cli
|
||
uipro init --ai codex</pre>
|
||
<pre class="cmd"># Claude Code
|
||
curl -fsSL https://claude.ai/install.sh | bash
|
||
brew install --cask cc-switch
|
||
/plugin install superpowers@claude-plugins-official
|
||
npm install -g uipro-cli
|
||
uipro init --ai claude</pre>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<nav class="nav" aria-label="幻灯片导航" id="slideNav"></nav>
|
||
<div class="controls" aria-label="上一页和下一页">
|
||
<button class="control" type="button" id="prevBtn" aria-label="上一页">‹</button>
|
||
<button class="control" type="button" id="nextBtn" aria-label="下一页">›</button>
|
||
</div>
|
||
|
||
<script>
|
||
const deck = document.getElementById("deck");
|
||
const slides = Array.from(document.querySelectorAll(".slide"));
|
||
const nav = document.getElementById("slideNav");
|
||
const progressBar = document.getElementById("progressBar");
|
||
let activeIndex = 0;
|
||
|
||
slides.forEach((slide, index) => {
|
||
const dot = document.createElement("button");
|
||
dot.className = "dot";
|
||
dot.type = "button";
|
||
dot.setAttribute("aria-label", `跳转到第 ${index + 1} 页：${slide.dataset.title}`);
|
||
dot.addEventListener("click", () => goTo(index));
|
||
nav.appendChild(dot);
|
||
});
|
||
|
||
const dots = Array.from(document.querySelectorAll(".dot"));
|
||
|
||
function goTo(index) {
|
||
const next = Math.max(0, Math.min(slides.length - 1, index));
|
||
slides[next].scrollIntoView({ behavior: "smooth", block: "start" });
|
||
}
|
||
|
||
function setActive(index) {
|
||
activeIndex = index;
|
||
dots.forEach((dot, dotIndex) => {
|
||
dot.setAttribute("aria-current", String(dotIndex === index));
|
||
});
|
||
progressBar.style.width = `${((index + 1) / slides.length) * 100}%`;
|
||
}
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
const visible = entries
|
||
.filter((entry) => entry.isIntersecting)
|
||
.sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
|
||
if (!visible) return;
|
||
setActive(slides.indexOf(visible.target));
|
||
}, { root: deck, threshold: [0.55, 0.75] });
|
||
|
||
slides.forEach((slide) => observer.observe(slide));
|
||
setActive(0);
|
||
|
||
document.getElementById("prevBtn").addEventListener("click", () => goTo(activeIndex - 1));
|
||
document.getElementById("nextBtn").addEventListener("click", () => goTo(activeIndex + 1));
|
||
|
||
window.addEventListener("keydown", (event) => {
|
||
if (event.key === "ArrowDown" || event.key === "ArrowRight" || event.key === "PageDown") {
|
||
event.preventDefault();
|
||
goTo(activeIndex + 1);
|
||
}
|
||
if (event.key === "ArrowUp" || event.key === "ArrowLeft" || event.key === "PageUp") {
|
||
event.preventDefault();
|
||
goTo(activeIndex - 1);
|
||
}
|
||
if (event.key === "Home") {
|
||
event.preventDefault();
|
||
goTo(0);
|
||
}
|
||
if (event.key === "End") {
|
||
event.preventDefault();
|
||
goTo(slides.length - 1);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|