SuperAPI AI 工具集

design-foundations

设计与创作

查看项目

更新于 10-16 01:15

技能介绍

用途:在屏幕研究定稿前,把探索产出的原始值整理成一套干净的设计基础(令牌)。每项目运行一次,位置在 setup-design-handoff 安装令牌结构之后、第一个屏幕研究定稿之前;也可随时作为审计重跑。后续 componentize-design 只负责让屏幕与这些基础对齐,不再自行设计尺度。

五个族:色彩、字体、间距、形状、动效。只有色彩分两层——核心色阶存原始值(如 --gray-700、--indigo-500),语义角色按用途命名(如 --background、--primary、--status-working),按主题变体定义并只引用核心变量,不写原始值;角色的 alpha 变体用透明度修饰符或 color-mix 派生,不新增令牌。字体含字体栈与角色元组(字号+行高+字重+字距),按用途命名,尺寸步进只标真实层级跳跃;间距、形状、动效各一层。分层规则:原始值只在核心层,语义只引用核心,组件与研究只使用语义。

步骤:1)按偏好顺序从情绪板/样本、旗舰屏研究、现有 CSS、参考截图中提取各族的已用值,可用 grep -oE 'font-size:\s*[^;]+' <study>.html | sort | uniq -c | sort -rn 等命令得到值×次数直方图;无素材时先做一次性样本研究。2)按直方图有意识地设计各族,不做平均,并标记判断改动过的行及幅度。3)祝福检查点:每族一张表(观察聚类→建议令牌名与值),由用户调整并确认,不可跳过。4)落地契约:令牌文件含所有族、所有主题变体与完整元组,并在同一改动中写入框架接线。5)创建 docs/designs/foundations.html 活体样本,只通过 var(--token) 样式,始终反映当前契约。6)当值被有意移动时,机械地把参考研究重基到新令牌,用前后截图验证仅出现已祝福的差异。7)报告各族结论与判断改动。

限制:本资料未提供收费、价格、平台或效果信息。运行依赖已有 setup-design-handoff 与组件化设计流程;祝福步骤必须由人执行,没有确认不能落地基础值。