ds-design

用途：ds-design 用于构建具有清晰视觉方向的前端界面，避免产出与同类提示词雷同的默认 AI 风格。适用于创建新页面、应用屏幕或组件，或对现有界面进行样式重做。\n\n主要能力：该技能提供一套设计流程，包括在编码前阅读需求与项目、撰写简短方向说明、先定义设计 token 再构建组件、以意图进行布局、有选择地使用动效、构建完整交互状态，并检查可访问性与截图一致性。它还列出若干应避免的默认视觉做法，帮助产出更有辨识度的界面。\n\n使用方式：先读取需求和项目，找出主题、受众、期望用户执行的一个动作、技术栈、现有品牌与实际可用图片；若需求模糊，用一行写下自己的理解后继续。写不超过五行的方向说明，包含用途、受众、语气、一个令人记住的点和模式（说服、操作或阅读），并取材于主题本身而非同类产品的常见外观。接着定义 token：字体上使用明显不同的展示字体与正文字体，展示字体不用默认字体，采用 5-7 级字号，正文不小于 16px，行宽少于 80 字符；颜色使用 4-6 个命名十六进制值，大面积用主色，锐利强调色只用于操作；间距基于 4px 或 8px，圆角一两种，阴影一种或不用。自问该方案是否适用于任何类似提示词，若是则修改。布局上选择密度，说服类偏疏朗、工具类偏紧凑，可用不对称或尺度对比，使用真实文案和合理数据，不用乱数假文。动效只用于有功能意义之处，如一次编排式揭示和用户操作反馈。构建悬停、聚焦可见、禁用、空、加载、错误和长内容等所有状态。满足可访问性底线：对比度 4.5:1、焦点环可见、字段有标签、触控目标至少 44px、图片有替代文本、尊重减少动效。分别在约 1440px 和 390px 宽度截图，对照禁止默认项和方向说明检查，批量修复后重新截图，并移除一个无作用的装饰。\n\n适用场景：新建页面、应用屏幕或组件，或重设现有界面样式。\n\n限制：资料未提供安装方式、运行平台、收费信息或具体技术栈限制，这些事实暂未提供。