SuperAPI AI 工具集

design-webapp

设计与创作

查看项目

更新于 10-16 09:56

技能介绍

用途:在 design-system 令牌已存在、且 design-method 的 Gate 0 已锁定 product 寄存器后,用于构建或扩展仪表盘、SaaS 屏幕等已登录应用界面。若目标是营销/落地页,应改用 design-web。

主要能力:要求每个数据界面显式覆盖空、加载、错误、有数据四种状态,不允许静默空白默认;遵循前注意加工规则处理表格与数据可视化,如数字右对齐、表头吸顶、优先柱状/折线而非饼图、同一界面内类别与颜色映射保持一致。可复用 design-web 的通用组件指南(按钮、卡片、网格、图标),本技能只补充应用特有的密度、数据密集状态与持久导航。

使用方式:先读取 design-method 的路由表确认寄存器;输入 design-system.md 与 product.md,加载 reve-recode、linear-recode 两组应用参考并声明三个可命名元素。页面结构从 references/layouts/pages/ 选择仪表盘、登录、注册、引导、个人资料、设置、错误页等页面模式,再选数据表、命令面板、模态框、通知、空状态等交互模式。

表格硬规则:首列为可读标识而非原始 ID/UUID,数值列右对齐,表头吸顶滚动,必要时换行而非截断,密度为一等模式(标准 48dp 行/紧凑 36dp 行),移动端横向滚动加固定首列。数据可视化优先柱状/折线。表单单列、标签在上、行内校验。命令面板快捷键需用户手动触发过一次后再提示。响应式侧边栏在桌面完整、平板图标栏、移动端汉堡菜单。

限制:不咨询宏观结构库,应用表单命名 hero 或 body 序列即路由错误;不做行业浏览,但需打开并阅读本地语料中的两个应用界面。快照式相似度测试不适用,改用领域特异性下限检查。语料流程不适配时换用同一文档中的其他流程。Gemini Design MCP 不可用时回退到直接生成。数据界面缺少空/错误文案时应阻塞,不得交付静默空白状态。