Skip to content

Commit 15af829

Browse files
xpqiuclaude
xpqiu
and
claude
committed
Add Organizational Intelligence blog (EN + CN); redesign blog index
English post: complete conversion of the OI working paper — all sections, tables, figures, the eight-element state vector, the L0–L5 maturity model, a 101-entry reference list, and a Cite-as block. Chinese version mirrors it using the whitepaper's terminology. Blog index: card grid with a featured newest post; widened, justified post column; figures sized so in-figure text stays within the body size. Redirect /blog/en/ and /blog/ to /#blog as the single canonical listing. Add the OI highlight entry + thumbnail; bump style.css cache version; gitignore the local CLAUDE.md working guide. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent f73e004 commit 15af829

17 files changed

Lines changed: 2267 additions & 1650 deletions

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@
44
scripts/.fontcache/
55
# Python bytecode cache
66
__pycache__/
7-
*.pyc
7+
*.pyc
8+
# Local working guide for Claude / contributors (not published)
9+
CLAUDE.md

‎assets/css/style.css‎

Lines changed: 181 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1033,110 +1033,184 @@ html[lang="en"] .home-hero-title {
10331033
.home-section { padding: 60px 0 32px; }
10341034
}
10351035

1036-
.blog-list {
1037-
display: flex;
1038-
flex-direction: column;
1039-
border-top: 1px solid var(--border);
1040-
}
1041-
1042-
.blog-row {
1043-
display: flex;
1044-
justify-content: space-between;
1045-
align-items: center;
1046-
gap: 24px;
1047-
padding: 20px 8px;
1048-
border-bottom: 1px solid var(--border);
1049-
text-decoration: none;
1050-
color: inherit;
1051-
transition: background 0.2s ease, padding 0.2s ease;
1052-
}
1053-
1054-
.blog-row:hover {
1055-
background: var(--mist);
1056-
padding-left: 16px;
1057-
padding-right: 16px;
1058-
}
1059-
1060-
.blog-row-main {
1061-
flex: 1;
1062-
min-width: 0;
1063-
}
1064-
1065-
.blog-tags {
1066-
display: flex;
1067-
flex-wrap: wrap;
1068-
gap: 10px;
1069-
margin-bottom: 9px;
1070-
}
1071-
1072-
.blog-tag {
1073-
display: inline-block;
1074-
padding: 2px 9px;
1075-
font-size: 11.5px;
1076-
font-weight: 600;
1077-
letter-spacing: 0.3px;
1078-
color: var(--fudan-blue);
1079-
background: var(--mist);
1080-
border: 1px solid var(--border);
1081-
border-radius: 999px;
1082-
white-space: nowrap;
1083-
}
1084-
1085-
.blog-row-title {
1086-
margin: 0 0 6px;
1087-
font-size: 19px;
1088-
line-height: 1.35;
1089-
color: var(--text);
1090-
transition: color 0.2s ease;
1091-
}
1092-
1093-
.blog-row:hover .blog-row-title {
1094-
color: var(--fudan-blue);
1095-
}
1096-
1097-
.blog-row-desc {
1098-
margin: 0;
1099-
color: var(--text-light, #5b6470);
1100-
font-size: 14px;
1101-
line-height: 1.55;
1102-
}
1103-
1104-
.blog-row-thumb {
1105-
flex-shrink: 0;
1106-
width: 260px;
1107-
height: 130px;
1108-
object-fit: contain;
1109-
border-radius: 8px;
1110-
border: 1px solid var(--border);
1111-
background: var(--mist);
1112-
}
1113-
1114-
.blog-row-date {
1115-
flex-shrink: 0;
1116-
width: 52px;
1117-
text-align: right;
1118-
color: var(--text-soft, #8a929c);
1119-
font-weight: 600;
1120-
font-size: 14px;
1121-
white-space: nowrap;
1122-
}
1123-
1124-
@media (max-width: 768px) {
1125-
.blog-row {
1126-
flex-direction: column;
1127-
align-items: flex-start;
1128-
gap: 10px;
1129-
}
1130-
.blog-row-thumb {
1131-
order: -2;
1132-
width: 100%;
1133-
height: 180px;
1134-
}
1135-
.blog-row-date {
1136-
order: -1;
1137-
width: auto;
1138-
text-align: left;
1139-
}
1036+
/* ============================================================
1037+
SURFACE A — Homepage #blog listing (modern uniform card grid)
1038+
CSS-ONLY. Markup/JS unchanged. DOM order per row:
1039+
.blog-row-main -> .blog-row-thumb (img) -> .blog-row-date
1040+
Image-on-top via flex order. Thumbnails are wide banner figures,
1041+
shown IN FULL (object-fit:contain) on a flat 2:1 box so nothing
1042+
is cropped. (A full-width "feature" card for the newest post is
1043+
available on request once that post has a ~16:9 feature image.)
1044+
============================================================ */
1045+
1046+
.blog-list{
1047+
display:grid;
1048+
grid-template-columns:repeat(3,minmax(0,1fr));
1049+
gap:26px 24px;
1050+
border-top:0;
1051+
align-items:stretch;
1052+
}
1053+
1054+
.blog-row{
1055+
display:flex;
1056+
flex-direction:column;
1057+
gap:0;
1058+
padding:0;
1059+
justify-content:flex-start;
1060+
align-items:stretch;
1061+
background:var(--card,#fff);
1062+
border:1px solid var(--border);
1063+
border-radius:14px;
1064+
overflow:hidden;
1065+
text-decoration:none;
1066+
color:inherit;
1067+
box-shadow:0 1px 2px rgba(14,65,156,.05);
1068+
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
1069+
}
1070+
.blog-row:hover{
1071+
padding:0;
1072+
transform:translateY(-3px);
1073+
border-color:var(--fudan-blue-80,#145bda);
1074+
box-shadow:0 12px 28px -8px rgba(14,65,156,.20),0 2px 6px rgba(14,65,156,.07);
1075+
}
1076+
.blog-row:focus-visible{
1077+
outline:2px solid var(--fudan-blue,#0e419c);
1078+
outline-offset:2px;
1079+
}
1080+
1081+
/* Thumbnail: image-on-top; wide banner figures shown in full (contain) */
1082+
.blog-row-thumb{
1083+
order:-1;
1084+
flex-shrink:0;
1085+
width:100%;
1086+
height:auto;
1087+
aspect-ratio:2 / 1;
1088+
object-fit:contain;
1089+
object-position:center;
1090+
display:block;
1091+
border:0;
1092+
border-radius:0;
1093+
border-bottom:1px solid var(--border);
1094+
background:var(--mist,#eaf0fb);
1095+
transition:transform .4s ease;
1096+
}
1097+
.blog-row:hover .blog-row-thumb{transform:scale(1.03)}
1098+
1099+
.blog-row-main{
1100+
order:0;
1101+
flex:1 1 auto;
1102+
min-width:0;
1103+
display:flex;
1104+
flex-direction:column;
1105+
padding:18px 20px 0;
1106+
}
1107+
1108+
.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
1109+
.blog-tag{
1110+
display:inline-block;
1111+
padding:3px 10px;
1112+
font-size:11px;
1113+
font-weight:600;
1114+
letter-spacing:.4px;
1115+
text-transform:uppercase;
1116+
color:var(--fudan-blue,#0e419c);
1117+
background:var(--mist,#eaf0fb);
1118+
border:1px solid var(--border);
1119+
border-radius:999px;
1120+
white-space:nowrap;
1121+
line-height:1.5;
1122+
}
1123+
1124+
.blog-row-title{
1125+
margin:0 0 8px;
1126+
font-size:19px;
1127+
font-weight:650;
1128+
line-height:1.32;
1129+
letter-spacing:-.012em;
1130+
color:var(--text,#1a2233);
1131+
transition:color .2s ease;
1132+
display:-webkit-box;
1133+
-webkit-line-clamp:2;
1134+
-webkit-box-orient:vertical;
1135+
overflow:hidden;
1136+
}
1137+
.blog-row:hover .blog-row-title{color:var(--fudan-blue,#0e419c)}
1138+
1139+
.blog-row-desc{
1140+
margin:0;
1141+
color:var(--text-soft,#51607a);
1142+
font-size:14px;
1143+
line-height:1.6;
1144+
display:-webkit-box;
1145+
-webkit-line-clamp:3;
1146+
-webkit-box-orient:vertical;
1147+
overflow:hidden;
1148+
}
1149+
1150+
.blog-row-date{
1151+
order:1;
1152+
flex-shrink:0;
1153+
width:auto;
1154+
margin-top:auto;
1155+
padding:13px 20px 15px;
1156+
border-top:1px solid var(--border);
1157+
text-align:left;
1158+
color:var(--text-soft,#51607a);
1159+
font-weight:600;
1160+
font-size:12.5px;
1161+
letter-spacing:.2px;
1162+
white-space:nowrap;
1163+
}
1164+
1165+
/* ---- Featured: enlarge the first (newest) post to a full-width hero card ---- */
1166+
.blog-row:first-child{
1167+
grid-column:1 / -1;
1168+
}
1169+
.blog-row:first-child .blog-row-thumb{
1170+
aspect-ratio:auto; /* wide banner at natural proportions */
1171+
height:auto;
1172+
width:calc(100% - 56px); /* inset so the image's left edge lines up with the text */
1173+
margin:24px 28px 4px;
1174+
border-bottom:0;
1175+
background:transparent;
1176+
}
1177+
.blog-row:first-child .blog-row-main{
1178+
padding:16px 28px 0;
1179+
}
1180+
.blog-row:first-child .blog-tags{
1181+
margin-bottom:14px;
1182+
}
1183+
.blog-row:first-child .blog-row-title{
1184+
font-size:27px;
1185+
line-height:1.22;
1186+
letter-spacing:-.02em;
1187+
-webkit-line-clamp:3;
1188+
margin-bottom:12px;
1189+
}
1190+
.blog-row:first-child .blog-row-desc{
1191+
font-size:15.5px;
1192+
line-height:1.6;
1193+
-webkit-line-clamp:2;
1194+
}
1195+
.blog-row:first-child .blog-row-date{
1196+
padding:14px 28px 20px;
1197+
border-top:0;
1198+
}
1199+
1200+
/* Tablet -- 2 columns */
1201+
@media (max-width:1024px){
1202+
.blog-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
1203+
}
1204+
1205+
/* Phone -- single column */
1206+
@media (max-width:600px){
1207+
.blog-list{grid-template-columns:1fr;gap:18px}
1208+
.blog-row-main{padding:16px 18px 0}
1209+
.blog-row-title{font-size:18px}
1210+
.blog-row:first-child .blog-row-title{font-size:20px}
1211+
.blog-row-date{padding:12px 18px 14px}
1212+
.blog-row:hover{transform:none}
1213+
.blog-row:hover .blog-row-thumb{transform:none}
11401214
}
11411215

11421216
@media (max-width: 768px) {
@@ -1954,22 +2028,10 @@ h3.year-badge {
19542028
}
19552029

19562030
.why-join-icon {
1957-
font-size: 40px;
2031+
font-size: 26px;
19582032
margin-bottom: 16px;
19592033
line-height: 1;
1960-
animation: float 3s ease-in-out infinite;
1961-
}
1962-
1963-
.why-join-card:nth-child(1) .why-join-icon { animation-delay: 0s; }
1964-
.why-join-card:nth-child(2) .why-join-icon { animation-delay: 0.5s; }
1965-
.why-join-card:nth-child(3) .why-join-icon { animation-delay: 1s; }
1966-
.why-join-card:nth-child(4) .why-join-icon { animation-delay: 1.5s; }
1967-
.why-join-card:nth-child(5) .why-join-icon { animation-delay: 2s; }
1968-
.why-join-card:nth-child(6) .why-join-icon { animation-delay: 2.5s; }
1969-
1970-
@keyframes float {
1971-
0%, 100% { transform: translateY(0); }
1972-
50% { transform: translateY(-10px); }
2034+
color: var(--fudan-blue);
19732035
}
19742036

19752037
.why-join-card h4 {
@@ -2004,7 +2066,7 @@ h3.year-badge {
20042066
}
20052067

20062068
.why-join-icon {
2007-
font-size: 36px;
2069+
font-size: 24px;
20082070
margin-bottom: 14px;
20092071
}
20102072
}

‎assets/highlights.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,18 @@
1414
- 顺序：从上到下就是页面显示顺序（新的放最上面）。
1515
-->
1616

17+
date: 2026.6
18+
标题: 组织智能：在组织层面治理智能体 AI
19+
title: Organizational Intelligence: Governing Agentic AI at the Level of the Organization
20+
描述: 当 AI 从「模型」走向「自主智能体」，真正的瓶颈从模型转移到它所处的组织。本文主张：组织——而非孤立的模型或任务——才是设计、评估与治理智能体 AI 的正确单位，并给出八要素组织状态形式化、三层嵌套反馈循环，以及以治理为准入条件的 L0–L5 成熟度模型。
21+
desc: As AI moves from capable models to autonomous agents, the binding constraint shifts from the model to the organization around it. This essay argues the organization—not the isolated model or task—is the right unit for designing, evaluating, and governing agentic AI, with an eight-element state formalization, three nested feedback loops, and a governance-as-entry-condition L0–L5 maturity model.
22+
标签: AI4AI, 智能体
23+
tags: AI4AI, Agents
24+
图: assets/img/highlights/organizational-intelligence.png
25+
链接: /blog/en/organizational-intelligence/
26+
27+
---
28+
1729
date: 2026.6
1830
标题: Thinking with Video：用视频生成做多模态推理
1931
title: Thinking with Video: Video Generation as a Promising Multimodal Reasoning Paradigm

‎assets/img/highlights/organizational-intelligence.png‎

73.2 KB
Loading

‎blog/cn/organizational-intelligence/images/fig-architecture.png‎

95.3 KB
Loading

‎blog/cn/organizational-intelligence/images/fig-dynamic-network.png‎

68.5 KB
Loading

‎blog/cn/organizational-intelligence/images/fig-regime-shift.png‎

73.2 KB
Loading

‎blog/cn/organizational-intelligence/images/fig-three-loops.png‎

113 KB
Loading

0 commit comments

Comments
 (0)