gridgeist

Gridgeist

概述

根据受众、内容、行为和品牌意图，打造独具特色、原生契合产品的界面。将网格作为结构逻辑；仅在有助于产品时才让它显现。

选择模式

意图和授权	模式	从以下内容开始
在没有现有设计的情况下构建界面	创建	受众、主要任务、内容和依据
获准编辑现有界面并进行更改	重新设计	保留的行为、品牌信号和状态清单
不修改文件，仅进行诊断	评审	基于渲染结果证据整理的优先问题

是否修改文件应由用户授权决定。获准重新设计，并不代表可以在存在实质差异的多种视觉主张中自行选择。应从明确的用户意图或既有品牌证据中推导设计方向；受众、任务、产品类别和内容可以帮助确定层级，但单凭这些并不能确认视觉主张。只要视觉主张仍存在歧义，就使用下方的对齐关卡。

工作流

1. 检查 — 了解受众、主要任务、品牌信号、内容、产品证据、路由、组件、设计令牌，以及桌面端和移动端的渲染 UI。检查现有设计系统资料，包括存在时的 DESIGN.md，并结合实现和渲染结果进行核对，不要假定它们彼此一致。梳理重要的交互状态和约束。不要虚构客户、指标、成果、研究或合规信息。
   • 编辑前先对齐方向 — 将方向归类为 用户已确认、源自品牌或暂定。即使用户的明确方向仍留有实现选择，也应视为已确认；同一思路下的变化并不构成实质性歧义。只有当现有视觉实现、素材、成文规则或反复出现的品牌惯例共同指向同一思路时，才将方向归类为源自品牌；仅凭产品主题或文案不足以作此判断。当广义的创建或重新设计仍存在多个实质不同的思路，且会改变核心品牌表达、层级、图像、颜色或动效时，应提供两到三个基于证据的方向，说明取舍并给出建议，然后请用户选择或授权采用建议。方向仍为暂定时，不要定义替代系统或编辑实现文件。意图或连贯的品牌证据明确时，不要重复提问。不要阻碍评审或范围较窄的修复；若评审中提出替代方向但尚未确认，应将其标记为暂定。
   • 广义工作处于暂定状态时必须停止 — 暂定方向不是可实施的方向。提供选项、取舍、建议并提出对齐问题后，本轮即应结束。除非用户选择某个方向或明确授权采用建议，否则不要确定设计思路、查阅系统规范、创建设计令牌、编辑文件、开始实施或验证重新设计。
2. 确定设计思路 — 用一句统领性陈述，结合受众、主要任务、结构逻辑、品牌表达和源自产品本身的视觉母题。在选择方向前阅读 design-language.md，尤其是对于以图像为主、温暖、活泼或其他非技术类品牌。
3. 定义系统 — 在制定新的或修改系统决策前，阅读 system-contract.md。将相关的颜色、排版、布局、间距、形状、表面、组件、状态、媒体、动效和响应式规则整合为一份精简规范。确定网格应当明显、低调还是不可见。复用语义化设计令牌和现有基础组件；修复范围较窄时，改动也应与之相称，未经授权不要创建持久化设计文档。
4. 构建 — 先建立层级，再处理细节。突出一个主导区域，对齐相关内容，在共同逻辑下丰富各个版块，并让最真实的素材——产品 UI、数据、文案、图像、艺术作品、代码或主要工具——承担视觉表现的重任。
5. 实施 — 保留所需的行为和状态。遵循代码库惯例、语义化 HTML、键盘和触控行为以及现有基础组件。重新组织移动端布局，而不是缩小桌面端布局。简单的 CSS 效果不要引入依赖。
6. 验证 — 使用 review-checklist.md。渲染具有代表性的屏幕宽度，并测试主要流程、状态、焦点行为、减少动态效果设置、溢出和动态内容。先解决清晰度和层级问题，再进行润色。将观察到的情况与仍属推断或未经测试的内容分别报告。

对于交互式产品，在适用时至少梳理默认、加载、空、错误、成功、禁用和破坏性操作状态。将隐私、安全、数据和平台约束作为产品行为予以保留，而不是视为可选的润色工作。

协同技能

• 让 Gridgeist 独自负责产品方向和视觉方向。不要自动将它与其他广泛的前端设计或艺术指导技能结合。如果用户明确要求同时使用两者，请在编辑前确定唯一的方向负责人，而不是默默混合两者的默认方案。
• 明确重叠关卡 — 当用户同时要求 Gridgeist 和另一项广泛的视觉设计技能时，在选择设计主张或编辑前，说明两者存在重叠，并建议确定一位方向负责人；对于原生于产品、适配品牌的工作，默认由 Gridgeist 负责。不要默默忽略用户指定的协同技能，也不要同时执行两套视觉设计主张。明确负责人后，除非用户选择另一项技能负责方向，否则只采用该技能中不冲突的实现或验证支持。
• 在检查阶段使用上下文能力，在确定设计主张后生成素材，在实现后进行技术审查，并在验证阶段使用浏览器自动化。
• 将协同技能视为可选项。若无法使用，不要阻碍工作或添加依赖。

反套路设计约定

• 采用一个设计主张和一套连贯的系统。
• 保留品牌，或有意地演进品牌，而不是照搬某种固定审美。
• 通过尺度、位置、密度、节奏和对比构建层级。
• 为网格可见度、边框、圆角、阴影、渐变和动效赋予明确作用。
• 优先采用真实的产品证据；标明示例或虚构内容，绝不伪造证据。
• 在共用结构逻辑的基础上，为不同区块或工作流设计各自鲜明的构图。

重复的圆角卡片、居中的主视觉文案、渐变色块、过多的胶囊形元素、千篇一律的区块、随意放置的图标框、泛泛的宣传语，以及出现在非技术品牌中的技术化装饰，都是诊断信号，并非自动构成违规。用更有产品特色的设计理念替换薄弱的结构。

决策参考

维度	决策依据
结构	信息顺序、任务流、共用对齐方式，以及品牌的规整程度
字体	品牌语调、阅读需求和角色层级；仅在内容确实具有技术属性时使用等宽字体
视觉焦点	产品 UI、数据、文案、图像、艺术作品、代码或主要交互界面
形状与表面	品牌几何、容纳方式、邻接关系、状态和交互，而非时尚潮流
色彩	现有品牌调色板和语义角色；不要想当然地采用中性色加一种强调色
组件	产品任务、共用结构、变体、密度、状态行为和仓库约定
动效	因果关系、反馈、空间变化和语气，并支持减少动态效果
响应式	各个范围下的优先级、顺序、密度、输入方式和内容行为

输出约定

对于用户已确认或依据品牌开展的创建或重新设计任务，提供 方向（包括设计主张和保留的约束）、完整的响应式 实现，以及 验证 证据，说明观察过的视口、流程、状态和剩余差距。如果系统决策发生重大变化，请指出相关约定，或说明其令牌和组件规则的实现位置。对于尚待确认的大范围创建或重新设计任务，只输出对齐选项、权衡、建议和问题；不要包含 实现，也不要声称已完成重新设计 验证。对于审查任务，不要进行任何编辑，并提供一行式 结论、按优先级排列的发现（注明位置、证据、影响和最小的连贯修正），以及一项替代 方向。未经实际观察，绝不要声称已完成验证。

常见错误

错误	修正方法
将 Gridgeist 视为可见网格预设	将网格用作底层逻辑，仅在有利于品牌时才展示
照搬参考内容	提炼原则，同时保留用户的身份与内容
未了解行为就开始设计样式	开始排版前，先梳理任务、约束和状态
让极简变得空洞	添加有用的依据和适度的信息密度
逐个设计组件样式	精修具体实例前，先定义通用结构、设计令牌、变体和状态
只改进默认状态	设计加载、空状态、错误、成功、禁用和危险操作流程
将桌面端 UI 简单堆叠到移动端	重新设计顺序、密度、导航、媒体和交互
只报告主观品味	将发现与理解、可用性、一致性、品牌或无障碍性联系起来
将自动化检查结果当作用户证据	将技术验证与可用性、安全性和研究结论分开

对比例子

重新设计内容密集的 API 文档，采用可见的信息网格、精确的代码状态，以及经过验证的移动端导航。

重新设计温暖、以图片为主的作品集，采用不可见的对齐系统、富有表现力的字体、以艺术作品为主导的节奏，以及无障碍的项目介绍。