SuperAPI AI 工具集

use-style

设计与创作

查看项目

更新于 10-25 19:59

技能介绍

用途:use-style 用于在开始设计或构建任何用户会看到的视觉产物(落地页、应用、仪表盘、HTML 报告、文档、视觉稿)之前,先加载一个具名视觉风格,使产出与该风格保持一致。

主要能力:支持从 $ARGUMENTS 或用户消息中解析风格名,并提供一组别名映射,例如 ios/iphone/expo → ios-app,geist → vercel,old vercel/black grid → black-grid,testsprite/test sprite → testspirite,lu.ma → luma,nyt/newspaper → new-york-times,claude → anthropic,attio → dusk。用户未指定名称时,技能会读取全局规则(~/.agents/AGENTS.md)中 ## Style 一节所指定的风格。

未指定且全局规则中也无风格时,技能按构建内容推荐:Expo / React Native 界面 → ios-app;Builder 或课程落地页 → grid;开发者基础设施营销 → vercel;极简单色工具 → black-grid;问题追踪器或高密度应用外壳 → linear;报纸、杂志、长读 → new-york-times;温暖平静的 AI 产品 → anthropic;高调创作者电商 → gumroad;光面深色营销 → raycast;数据密集的深色仪表盘 → dusk;浅色纸感仪表盘 → testspirite;活动与报名 → luma;干净浅色产品 UI 与支付 → stripe。

当名称为 list 或未匹配到任何风格时,技能会列出 styles/ 目录下每个风格的一行说明并停止,等待用户选择。为便于用户查看,可打开技能目录中的 examples/gallery.html 查看每个风格的实时预览(Mac 用 open,Linux 用 xdg-open,Windows 用 start)。

使用方式:确定风格名后,从技能目录读取 styles/<name>.md。若存在项目覆盖文件,则优先使用 .agents/styles/<name>.md 或 <name>-theme.md。加载风格后,将风格视为硬性约束,在编写新组件前优先复用项目现有的组件与设计令牌,准确匹配风格氛围,遵守风格文件中的反模式;落地页需先搭建页面外壳。

适用场景:任何需要统一视觉风格的前端、产品界面、报告与文档生成工作。

限制:资料未提供该技能的安装方式、运行环境要求、支持的风格完整列表及授权与收费信息;风格效果取决于所读取的风格文件与项目已有设计体系。