SuperAPI AI 工具集

graffiti-best-practices

前端与建站

查看项目

更新于 10-16 09:35

技能介绍

用途:在生成或重构 Graffiti UI 标记时提供约束,使其 class-first、语义化、可访问、响应式,并与当前 Graffiti 库保持一致。Graffiti 在此作为默认样式基线层,覆盖元素、布局原语、工具类、组件与颜色/主题令牌,不另建并行样式系统。

主要能力:提供输出契约与评分门槛、系统令牌与变量模型、组件意图矩阵、规范代码片段、页面与区块配方、反模式目录、修复变换、示例、排错、美学指南、主题与令牌说明、移动端与容器查询、速查表等参考资料。触发场景:用 Graffiti 类构建或重构页面/区块、把内联样式标记转为 class-first、生成落地页/仪表盘/博客/设置/聊天/表单/导航等模板结构、提升语义与响应式一致性。

必要用法:先做系统优先预检(变量→主题→布局→工具类→组件),内容型界面再做美学优先预检(主题类、语气、密度、图像、图标)。优先复用现有类与令牌;可写自定义 CSS,但须系统化为项目级可复用类。组件按角色菜单选择,如指标用 .stat-card、功能条目用 .feature-card、记录型内容用 .card、通知用 .callout、聊天用 .chat-thread/.chat-row/.bubble、日志用 .log-card 等,.box/.stack/.cluster/.split/.surface 仅作后备。主题用 theme-X 类在 <html> 或区块根上应用,改动范围越小层级越低;状态色优先语义变体类(如 .tag.success)而非覆盖颜色。

限制:不得发明 Graffiti 文档中不存在的类名或私有令牌;不要硬编码颜色字面量;不要为纯静态结构添加 JS/状态;组件内部响应式默认用 @container 而非 @media;不要用内联覆盖色相令牌期待不透明色阶跟随;不要用 !important;不要重复实现内置原语;不要输出通用 AI 味内容(假数据、编造图标、装饰渐变等)。资料未提供具体安装命令与代码示例细节。