SuperAPI AI 工具集

sdesign-design

设计与创作

查看项目

更新于 10-16 08:30

技能介绍

用途

SDesign 用于在用户想要「好看的东西」时,避免凭默认审美直接产出典型的 AI 烂味(如居中大标题、三张一样的卡、紫蓝渐变、emoji、空话)。它以网页/落地页为主(token 是 CSS 单位),也可借其配色与字体气质做 PPT/海报,尺寸自行换算。

主要能力

提供 6 个美学家族、共 64 个独特设计,每个设计系统含有精确的设计 token、本美学特别说明、内联的去「AI 味」规则与范本(reference.html 为网页范本,reference.png 用于主观品味对照)。

美学家族路由表(下表只列代表,完整见各目录或 index.json):

家族 key 中文 设计系统数 什么感觉 代表设计系统
minimal-editorial 极简留白 32 中性色+单强调色+大留白,为阅读而生 airbnb, stripe, notion
tech-dark 科技暗黑 15 深底+高对比+霓虹强调,开发者气质(含终端等宽) linear-app, supabase, warp
warm-humanist 暖色人文 7 奶油暖色+衬线+大留白,有人味 claude, cursor, arc
cinematic-dark 电影暗调 3 电影渐变+超大字+深色,震撼高级 raycast, spacex, runwayml
data-dense 数据密集 3 图表为主+暗仪表盘,信息高密度 binance, clickhouse, github
bold-playful 大胆彩色 4 高饱和/插画/硬边粗野/超大数字,强烈抓眼 duolingo, canva, huggingface

使用方式(三步流程)

  1. 选美学:按用户的氛围词或其点名的大牌,从路由表选一个家族,再进 aesthetics/<家族>/ 选一个设计系统。例如用户说「科技感/开发者/暗色」→ tech-dark;说「像 Linear」→ tech-dark/linear-app;说「温暖/有人味/像 Claude」→ warm-humanist/claude;说「高级/像 Apple」→ minimal-editorial/apple。不确定就问一句,或默认挑该家族第一个设计系统。
  2. 读设计系统的 prompt.md:路径为 aesthetics/<家族>/<设计系统>/prompt.md,内含精确 token、本美学特别说明、内联的去 AI 味规则。严格照它的 token,一个强调色都不许改。
  3. 做 + 自检:默认输出单文件 HTML + 内联 CSS(除非用户指定 React/Vue/Tailwind),加 <meta name="viewport"> + 基本 reset。做完可跑 node scripts/audit.mjs <产出> 查机械违规;主观品味对照该设计系统 reference.png。

铁律(任何美学都遵守)

rules/anti-slop.md 是总规矩,已内联进每个 prompt。核心:只用 token 给的颜色、一个强调色、字体不可获取就换 Google Fonts 公开版、文案别空话、信息密度/CTA 按页面类型给、版式别东倒西歪。

凡规则与某美学冲突,以该设计系统 prompt.md 里的「本美学特别说明」为准:大胆彩色可用 emoji/插画/硬边/故意「丑」;数据密集可一屏多信息、多 CTA;暖色人文就该衬线大留白;电影暗调就该大尺度渐变 + 超大字。

配图(另一条线,不是第 7 家族)

若用户要的是正文里一张手绘风插画(把一个判断/流程/状态/隐喻画出来),而不是整页排版,则走 illustration/prompt.md:复制那段提示词、替换变量,粘给任意图像 AI 出图。要点为纯白手绘、一图一锚点、黑/橙/红/蓝语义色、≥35% 留白。

适用场景与限制

适用于需要网页/落地页设计、并追求「好看、有设计感、不像 AI 默认味」的场景,也可借美学做 PPT/海报。产品名称、URL、安装命令与代码需保留原样。美学素材策展自 nexu-io/open-design(Apache-2.0);本库与所列各品牌无关联,品牌名仅描述其公开视觉风格。其余关于收费、价格、平台与具体效果的信息,资料暂未提供。