Haizhucodex 设计技能
打造经过打磨的前端体验，具备清晰的视觉论点、可用的交互模型、无障碍组件、克制动效，并经过验证的实现质量。
运行模式
根据请求和项目状态选择一种模式：
- 设计： 在实施前确立层级结构、视觉方向、设计令牌、组件、状态和动效。
- 构建： 根据提供的简要说明、截图、设计稿或现有设计系统，在当前前端技术栈中实施。
- 重构： 保留产品行为，同时改进层级结构、品牌形象、响应式能力、可访问性和感知质量。
- 审计： 检查现有界面，按影响度对问题排序，并修复最有价值的问题。
- 设计系统： 创建或完善
DESIGN.md、设计令牌、组件规则、动效规则和可复用模式。
核心工作流
- 在编辑前检查仓库。识别框架、包管理器、路由、组件、样式系统、令牌、依赖项、构建命令和项目约定。
- 提取一个紧凑的设计简报，包含产品类型、目标用户、主要任务、内容层级、品牌属性、平台、响应式目标、可访问性要求和技术约束。
- 选择一个视觉论点。定义排印特征、色彩行为、间距密度、形状语言、层次高度、图像风格和动效层级。
- 在可用时将工作路由到五个专业子技能：
- UI UX Pro Max： 产品类别的 UX 模式、信息架构、调色板和排印选项、平台约定和可访问性约束。
- Design MD Collection： 项目级设计语言、设计令牌、可复用组件规则和
DESIGN.md指导。 - Taste Skill： 构图、差异化、视觉判断、反通用约束和艺术指导。
- shadcn： 可访问的 React 基础组件、组件 API、表单、覆盖层、导航、数据展示和状态。
- Impeccable： 最终审计，涵盖层级、排印、间距、打磨、响应式和可访问性。
- 读取
references/prompt-library.md。仅选择服务于特定产品或交互目标的源模式。 - 生成一个实施地图，涵盖页面区块、可复用组件、内容状态、响应式行为、交互、动效归属、减弱动效行为和验证命令。
- 直接在现有技术栈中实施。重用当前依赖项和约定，除非新依赖项能带来明确价值。
- 在适用时验证加载、空状态、错误、禁用、悬停、聚焦、激活、选中、成功和破坏性状态。
- 测试键盘导航、焦点可见性、语义结构、对比度、触摸目标、响应式布局、运行时错误和
prefers-reduced-motion。 - 运行格式化、lint、类型检查、测试和生产构建。修复由工作引入的失败。
- 执行一个 Impeccable 风格的最终评审，并解决剩余影响最大的缺陷。
模式选择规则
- 对于滚动叙事、编辑过渡、产品发布、作品集和沉浸式首屏部分，使用 Motion Sites。
- 对于可复用的 React 动画原语、动画文本、列表、卡片、背景和过渡，使用 React Bits。
- 对于聚焦的控件和微交互，如按钮、输入、开关、加载器和工具提示，使用 Uiverse。
- 对于协调的时间线、SVG 序列、交错动画和状态驱动的动效（CSS 无法清晰表达），使用 Anime.js。
- 对于高级 React 落地页组合、功能展示、导航、卡片和氛围背景，使用 Aceternity UI。
不要仅仅因为可用就堆叠标志性效果。每个效果都必须支持层级、反馈、导向、叙事或理解。
设计护栏
- 建立一个主导视觉概念并保持一致应用。
- 优先考虑任务完成和信息架构，而非装饰。
- 避免通用的过度渐变 AI 风格、过多的玻璃态效果、随机浮动卡片、装饰性图表、统一的圆角矩形和每个元素上的动画。
- 限制使用的主要字体、强调色、层次高度级别、边框半径和动效系列。
- 使用语义化 HTML 和可访问的组件原语。
- 将移动端视为深思熟虑的构图，而非压缩的桌面布局。
- 对于简单状态变化，优先使用 CSS 过渡；仅在需要协调或排序时引入 JavaScript 动画。
- 尽可能对
transform和opacity进行动画。避免布局抖动和不必要的持续动画。 - 在内容水合前以及禁用动画时，保留可读的内容。
- 尊重外部许可证。使用文档化的 API 或安装方法，未经许可不得重新分发第三方源代码。
依赖策略
在添加包之前：
- 检查项目是否已有等效依赖项。
- 确认框架、渲染模型和版本兼容性。
- 解释为什么 CSS 或现有工具不足。
- 使用仓库的包管理器进行安装。
- 保持导入范围狭窄，并移除未使用的实验性代码。
- 在最终摘要中记录依赖项及其用途。
如果某个命名的技能或库不可用，直接执行其角色并继续。不要因为一个可选的集成而阻塞常规实现。
所需交付物
对于纯设计工作，返回：
- 设计简报。
- 视觉论点。
- 页面和组件架构。
- 设计令牌和排印方向。
- 动效计划。
- 响应式和可访问性要求。
对于实施工作，返回：
- 选择的方案及其理由。
- 修改的文件和关键组件决策。
- 动效和交互行为。
- 可访问性和响应式验证。
- 运行的命令及其结果。
- 新增的依赖项。
- 剩余的假设或权衡。