SuperAPI AI 工具集

designing-systems

设计与创作

查看项目

更新于 10-15 21:48

技能介绍

用途:该技能用于设计系统构建的第一阶段(Phase 1 RESEARCH),在读取 Phase 0 身份模板之后、撰写 design-system.md 之前执行,目标是浏览、观察并提取 CSS 规格。

主要能力:从灵感目录中挑选 4 个与项目行业(创意、金融科技、电商、开发工具、健康)匹配的 URL,且必须来自 KNOWN_DOMAINS;通过 fuse-browser 逐个浏览并截图,每个站点写出 5 条精确的 CSS 观察,而非模糊描述。观察维度包括:颜色(primary、accent、background、text 的精确 oklch() 值)、排版(font-family、font-size 的 clamp(min, preferred, max)、font-weight)、布局(grid/flex 结构与列比例如 60/40、1fr/1fr,gap 像素值)、效果(border-radius、box-shadow、backdrop-blur、opacity)、间距(section padding、元素 margin、max-width)。

使用方式:先阅读 references/design-inspiration.md 与 references/design-inspiration-urls.md;选定 4 个 URL 后,用 fuse-browser 打开一个会话并复用:browser_open 获取 sessionId,browser_navigate 到 URL,browser_scroll 到 end 加载懒加载内容,等待 5 秒后 browser_scroll deltaY: -100000 回到顶部并等待 2 秒,再 browser_screenshot fullPage: true。随后声明参考站点,格式为“Site choisi: {URL}. Je reproduis: {el1}, {el2}, {el3}”,并挑选 3 个视觉上独特的元素及其 CSS 规格。

输出:4 张 fullPage 截图(screenshots_count >= 4)、20 条精确 CSS 观察(每站 5 条)、1 个已声明的参考站点及 3 个待复现元素,之后进入 Phase 2 UX COPY。

限制:资料未提供该技能的收费、价格、平台支持范围或实际效果说明;具体命令与参数需按上述原文使用,不应改动。