SuperAPI AI 工具集

shollu-modern-design

设计与创作

查看项目

更新于 10-15 11:43

技能介绍

用途

Shollu Modern 是印度尼西亚伊斯兰祈祷时间应用的社区驱动现代化项目。本技能用于为该品牌生成风格统一、符合品牌规范的界面与素材,帮助使用者在制作原型或生产代码时保持一致的视觉语言。

主要能力

技能提供了一套完整的品牌设计系统,涵盖以下内容:

  • 品牌颜色:青绿色主色 oklch(0.72 0.17 208)(对应 --shollu-500 范围);金色辅助色 oklch(0.80 0.18 84)(对应 --gold-400 范围)。
  • 字体规范:Inter Tight 用于展示与标题;Inter 用于正文与数字,并启用 tabular-nums;Noto Naskh Arabic 用于阿拉伯语模式。
  • 主题与强调色:在 <html> 上通过 data-theme="light|dark|sepia" 切换主题,通过 data-accent="teal|indigo|emerald|rose|slate" 切换强调色。
  • 关键文件:colors_and_type.css 提供完整令牌系统,可在任意原型中导入;assets/icon.png 与 assets/icon-128.png 为青绿加金色的应用图标;ui_kits/shollu-app/index.html 为交互式应用原型(900×600 桌面尺寸);preview/ 目录包含供参考的独立组件卡片。

使用方式

使用本技能时,先阅读技能内的 README.md 文件,并浏览其他可用文件。

如果创建视觉产物(幻灯片、模型、一次性原型等),可复制素材并生成静态 HTML 文件供用户查看。如果处理生产代码,可复制素材并阅读此处的规则,从而成为使用该品牌进行设计的专家。

如果用户调用本技能时没有给出其他指引,应先询问他们想要构建或设计什么,提出一些问题,然后作为专家设计师输出 HTML 产物或生产代码(SolidJS + Tailwind v4 + TypeScript),具体取决于需求。

技术栈背景

生产代码使用 SolidJS(而非 React)、Tailwind v4 @theme 令牌,并通过 invoke() 调用 Tauri 2 命令。UI 套件原型仅使用 React + Babel,以便快速迭代。

署名规则

任何包含关于页面或页脚的界面,必须署名 Ebta Setiawan 并附上指向 ebsoft.web.id 的链接。此规则不可协商。

适用场景与限制

本技能适用于为 Shollu Modern 品牌制作界面原型、视觉素材或生产代码的场景。资料未提供该技能的收费、价格、平台支持范围或效果数据,相关内容暂未提供。