| name | infocard-white-purple-style |
| description | 白紫轻科技工作台风信息卡主题。适合 AI 驱动开发、流程方法论、阶段拆解、产品/工程工作流与多栏结构化内容；主视觉是白底、紫色强调、轻玻璃科技感与三栏流程布局。 |
| version | 1.0.0 |
| author | Hermes Agent |
| license | MIT |
| metadata | {"hermes":{"tags":["infocard","style","white","purple","glassmorphism","workflow","process","technical"]}} |
infocard-white-purple-style
Overview
infocard-white-purple-style 是一套面向 AI 驱动开发 / 方法论拆解 / 流程工作台 的白紫主题信息卡风格。
它的核心不是炫技，而是把“复杂流程”做成清晰、克制、可扫描的结构化页面：
- 白底为主，保持高可读性。
- 紫色作为唯一主强调色。
- 轻科技工作台气质，允许少量玻璃感，但不做重渐变、重霓虹。
- 优先承接“三栏流程图 / 阶段导航 / 细粒度工件说明”这类内容。
Use Cases
适合
- AI / Agent / 开发方法论
- 七阶段、四阶段、流程链路、闭环框架
- 产品设计、工程协作、任务拆解、决策流程
- Grill / Research / Prototype / PRD / Issues / Implement / Review 这类阶段卡
- 需要“白底 + 紫色强调 + 三栏组织”的技术型信息卡
不适合
- 深色海报风
- 手绘白板风
- 纸感笔记风
- 强商业广告感、强品牌传播感
- 需要大量照片、插图、复杂装饰纹理的内容
触发词
- 白紫风
- 轻科技工作台
- 玻璃感但克制
- AI 开发流程
- 三栏流程图
- 方法论工作台
强制规则（用户明确，2026-07-23）
方法论相关内容默认使用本主题。当用户提到"方法论"、"框架"、"流程"、"AI unknowns"、"认知偏差"、"系统思考"等主题时，优先选择 white-purple。
重建 vs 换色：本主题 CSS 骨架（白底、紫色accent、shell 纹理、glass-card、section-label）与 graph-paper/darkblue 等完全不同，方法论卡迁移属于重建，不是换色。
Design DNA
关键词
- 白底
- 紫色强调
- 轻玻璃科技感
- 结构化
- 克制
- 清晰
- 可扫描
视觉原则
- 白底优先：不要让背景抢走信息。
- 紫色只做重点：标题、编号、关键标签、流程高亮用紫色。
- 卡片轻浮起：可以有非常轻的阴影、边框、玻璃层次，但不能厚重。
- 流程先于装饰：任何视觉元素都必须服务于“看懂流程”。
- 三栏是主骨架：如果内容是流程拆解，优先采用三栏或三段结构。
Color Tokens
:root {
--bg: #f7f7fb;
--paper: #ffffff;
--paper-soft: #fbfbfe;
--ink: #111111;
--muted: #6b6b7a;
--line: rgba(91, 73, 255, 0.16);
--line-strong: rgba(91, 73, 255, 0.32);
--accent: #8a5cf5;
--accent-deep: #5b49ff;
--accent-soft: rgba(138, 92, 245, 0.10);
--glass: rgba(255, 255, 255, 0.72);
}
Token Usage
--bg：页面底色--paper：主卡片底色--paper-soft：次级卡片 / 面板底色--ink：正文与标题主色--muted：说明文字、辅助标签--line / --line-strong：边框、分割线、流程框线--accent：主紫色强调--accent-deep：更强对比的标题 / 编号 / 选中态--accent-soft：淡紫底、chip、highlighter--glass：轻玻璃层效果
Typography
标准层级
- Hero title：34–46px
- Section title：18–24px
- Lead / summary：14–18px
- Body：12.6–14.5px
- Caption / meta / pill：11.2–12px
规则
- 中文正文优先可读，不做过小压缩。
- 标题可以粗，但不要过度拉宽字距。
- 数字编号、阶段编号、关键名词可以用紫色加重。
- 移动端最小字号不应低于 11.2px。
Layout Skeleton
推荐结构：
-
Top bar / brand strip
-
Hero title block
- 主标题 + 一句话总结 + 右侧 stage summary
-
Stage navigation / flow bar
-
Three-column body
- 左：前置理解 / 对齐
- 中：执行链路 / 工件
- 右：原则 / 扩展能力 / 注意事项
-
Footer
Component Rules
1. Stage chips
- 用于阶段导航、步骤标签、状态标签。
- 形态应紧凑、边框细、背景浅。
- 选中态只用紫色强调，不要大面积填充。
2. Content cards
- 白底或极浅紫白底。
- 边框细，阴影轻。
- 适合承载 stage detail、principle、artifact。
3. Callouts
- 用于补充关键原则、提醒、升级版说明。
- 可用淡紫底 + 紫色边线。
4. Comparison boxes
- 用于“有代码库 / 无代码库”“推荐 / 不推荐”这种对照。
- 双盒布局应清楚分隔，不要挤成一坨。
5. Flow labels
- 适合流程串联、箭头、步骤链。
- 线条细、节点简洁、避免过多装饰。
6. Footer branding
- 可保留小型 logo / 署名 / 日期。
- 不抢主标题和流程信息的注意力。
Mobile Rules
720px 以下
- 三栏优先退化为单列或 1+1+1 堆叠。
- 流程条可横向滚动或换行，但不能压缩到不可读。
- 卡片间距要保持，不要用过窄间隔硬塞内容。
390px 视口
- 所有主内容必须可完整阅读。
- 表格、对照块、流程块优先纵向堆叠。
- 不要让玻璃效果影响对比度。
- 不要用过强阴影导致页面显得脏。
Dense-content typography floor
When this theme carries many stacked cards or repo facts, pure calc(100vw / 72) rem scaling can collapse body copy too far on 390px devices. Use a mobile floor instead of chasing smaller rem:
- Body / lead text: keep at least ~12px
- Pills / tags / labels: keep at least ~11.2px
- Footer / meta text: keep at least ~11px
- If the screen reads cramped, prefer
html { font-size: 15px; } or equivalent floors over further shrinking
- Verify the rendered
getComputedStyle() on the actual mobile viewport, not only a screenshot
底线
- 不允许横向溢出。
- 不允许过小字。
- 不允许移动端变成密集“压扁版桌面页”。
Anti-patterns
- 不要做成深色工作台。
- 不要使用大面积紫色实底铺满整个画面。
- 不要堆叠过重阴影、霓虹光晕、炫光边框。
- 不要混入手绘粗线、纸张纹理、便签贴纸语言。
- 不要让装饰盖过流程信息。
- 不要把卡片做得像广告 banner。
Acceptance Checklist
Naming / Aliases
- 英文名：
infocard-white-purple-style
- 中文名：白紫轻科技工作台风
- 常用别名：白紫风、白紫工作台、轻玻璃紫、workflow white-purple
- 适用 slug：
white-purple-style
Notes
本主题由 grill-me 对齐结果归纳而来：
- 视觉质感：轻科技工作台 / 轻玻璃感
- 主版式：三栏流程图
- 重点控制：白底、紫色少量强调、结构优先
如果后续要落地为可发布主题，应同步补充 theme 文件、预览注册和发布验证流程；这些不属于本 skill 的主职责。
