SuperAPI AI 工具集

design-spec-rules

设计与创作

查看项目

更新于 10-15 17:19

技能介绍

用途:这是给“设计工程师”使用的规则型技能,用于审查代码是否忠实实现给定的设计规范,主要服务于从 Figma、视觉稿或设计说明实现 UI 时确保高还原度。

主要能力与检查项:一,禁止臆造设计,不得自行创建或发明 UI 元素、布局与样式,不得套用通用模板,设计说明不清时应先询问;二,样式取自 Figma,颜色、字体、间距、阴影、边框等全部从 Figma 提取,使用 Inspect 面板的精确值,颜色保持精确的 hex/RGB,不做近似;三,遵守布局,保持设计中的网格系统、列数与断点,不擅自为了“更好体验”重排元素,组件层级与设计一致;四,尊重间距、描边与布局,使用精确的 padding、margin、gap,保持对齐、圆角、描边宽度与轮廓样式,并注意光学对齐的 ±1px 微调;五,图标始终下载为 SVG,保留 viewBox、stroke-width 与路径数据,维持尺寸与样式属性,可用内联 SVG 或在合适时用 SVGO 优化。

使用方式:该技能接收参数 $ARGUMENTS。若提供了参数,就分析指定的文件或模式;若参数为空,则询问用户要审查哪些文件。审查前先读取文件,评估时给出具体行号与代码片段,只指出问题不够还要给出修复建议,可标记疑似臆造的 UI 元素,并在有设计 token 时把硬编码值与 token 对比;如被要求,可直接代为修复。

输出格式:按固定区块输出,包含 IMPLEMENTATION FIDELITY 标题与文件名,分列 ASSUMED DESIGNS、STYLING、LAYOUT、SPACING、ICONS 各类问题数量与逐条说明(含 [ASSUMED]、[COLOR]、[LAYOUT]、[SPACING]、[ICON] 标签、行号、问题与 Fix 建议),最后给出 SUMMARY 统计与百分制 Score。

适用场景:前端实现设计稿后的自检、设计评审前后的代码核对、多人协作中约束“不要自行发挥”的还原流程。

限制:资料未提供具体的安装命令、运行环境、收费方式与配套工具信息;其效果依赖是否具备对应的设计文件与精确数值来源。