SuperAPI AI 工具集

open-design-landing

设计与创作

查看项目

更新于 10-16 09:34

技能介绍

用途:open-design-landing 用于制作 Atelier Zero 视觉语言的单页编辑型落地页(杂志式编辑拼贴风格),产出面向 OpenDesign 营销页的规范配方,输出为可部署的单文件 HTML。

主要能力:生成含编辑型顶栏、粘性导航(显示 GitHub 星数)、8 个罗马数字编号区块(主视觉、关于、能力、实验室、方法、精选作品、证言、CTA)以及页脚的自包含页面。页面使用暖纸背景、Inter Tight + Playfair Display、斜体衬线强调、点状细线、coral 终止点、滚动揭示动效,并支持 1280/1080/880/560 断点响应式。

使用方式:技能完全参数化,由代理按品牌简报填写类型化 inputs.json,再由 composer 结合规范 styles.css 生成产物。流程分四步:收集品牌输入(分 8 组问题,覆盖品牌、导航、主视觉、关于、能力卡、实验室卡、方法步骤、作品卡与证言、CTA 与页脚);选择图像策略(placeholder 占位、generate 生成或 bring-your-own 自带);合成产物;交付前自检。

必要命令保持原样: npx tsx scripts/placeholder.ts <out>/assets/ FAL_KEY=... npx tsx scripts/imagegen.ts <inputs.json> --out=<out>/assets/ npx tsx scripts/compose.ts <inputs.json> <out>/index.html

限制:不得新增颜色或字体,令牌以 design-systems/atelier-zero/DESIGN.md 为准;不得移除 data-reveal 属性;不得用会注入自身样式顺序的框架包裹,也不得新增会改变层叠顺序的样式表。生成图像走 fal.ai 的 openai/gpt-image-2,未设置 FAL_KEY 时脚本仅打印提示词。交付前需自检浏览器无控制台错误、16 个图槽均加载、斜体强调使用 Playfair、coral 终止点出现、滚动动效正常、880/560 无横向滚动或重叠、prefers-reduced-motion 生效、Lighthouse 对比度 AA 与 CLS < 0.05。定价、具体耗时与效果未在资料中提供,暂未提供。