SuperAPI AI 工具集

redesign

设计与创作

查看项目

更新于 10-15 17:18

技能介绍

用途:当产品已经存在、需要更强的布局、视觉系统与交互打磨时使用本命令。核心目标是把现有界面转化为更清晰、更高质量、更有意图的设计,同时不破坏用户流程。

默认实现:重设计输出默认使用 Tailwind CSS,所有视觉更新使用 Tailwind 工具类,除非用户明确要求其他样式系统。保留现有框架与运行时,但在可行时把样式决策转向 Tailwind。

可用 UI 库参考:UIverse、FlyonUI(https://flyonui.com/)、daisyUI。规则:库作为加速器而非整页模板;需重构和改造库组件以贴合产品语义与品牌方向;避免单一库的重复现成模式;重复风险高时,把库用法与自创组件搭配。

Pretext 集成:重设计存在文字溢出风险或换行不稳定时,可用 @chenglou/pretext 在定稿间距与字号前规划文本布局。需要时执行 npm install @chenglou/pretext。用 prepare() + layout() 在目标宽度验证关键文本块(hero、卡片、CTA 行、导航标签);用测量结果选择更安全的宽度约束;若依赖精确行节奏,用 prepareWithSegments() + walkLineRanges() 比较方案。静态 HTML/CDN 或无 JS 构建步骤的项目跳过该集成,改用响应式 CSS 约束处理换行。此过程静默进行。

反重复要求:重设计不能像标准模板的表面换肤。需在组件与交互类型上建立广泛候选集;用差异化组件族替换重复卡片结构;当前 UI 模块较通用时,每次实质性重设计至少自创 2 个新组件;要求动效时至少自创 1 个与用户反馈或层级相关的新动画模式;拒绝仅改颜色、圆角或字体的输出。

多样性配额:实质性重设计须保证页面至少 6 种实质不同的区块结构、至少 3 个非卡片主内容模块、至少 2 个贴合本产品语境的新自创组件;单一旧模式占比不超过 25%。若仍与原始布局骨架相似,需升级结构改动。

反 AI 感门禁:若读起来像“模板换皮”则判定失败,失败情形包括仅换颜色字体、用现成卡片替换现成卡片、区块节奏不变只做表面微调、动效仅为无交互逻辑的基础淡入。最低标准:至少 3 个明显的新结构模块替换通用旧块,至少 2 个本产品语境独有组件,至少 1 个源 UI 没有的独特交互模式。

组件自创规则:从产品语义(工作流、信任信号、转化步骤)出发而非单纯视觉新奇;定义明确状态与响应式行为;在 Tailwind 类组合下保持可维护;仅在提升理解或加快反馈处加入动效。

工作方法:先审计现有 UI,找出层级失败、间距不一致、构图薄弱与通用模式,识别交互痛点与缺失的反馈状态,列出必须保持稳定的部分(流程、核心信息架构、关键文案、业务约束);再定义重设计方向,确定清晰视觉主张与布局原型,强化字体、区块节奏与对比,改善组件一致性与响应式;然后安全实现,除非明确要求,否则保留功能与导航逻辑,避免表单、状态与无障碍回退,动效服务于清晰与反馈而非装饰;最后验证质量,检查桌面与移动端行为、动效的减弱动画行为,确认重设计是实质更好而非风格不同。

约束:不交付通用的“安全 SaaS”默认样式;无理由不删除关键信息架构;不为视觉新奇牺牲可用性;保持面向目标场景的实用性能。若需了解该技能的安装与调用方式,现有资料暂未提供。