SuperAPI AI 工具集

elegant-design

设计与创作

查看项目

更新于 10-15 23:24

技能介绍

用途:elegant-design 是一套设计技能指南,用于构建世界级、可访问、响应式的界面,尤其适合 React/Next.js 等框架的 Web 应用、开发者工具、技术界面,以及包含聊天、终端、代码展示、实时或流式内容的界面。

主要能力:提供设计哲学与核心原则(清晰优先、一致性、性能优先、始终可访问、渐进披露、有意摩擦);给出设计流程工作流,包括发现与规划、设计基础、交互元素、实现、验证与优化;覆盖排版、颜色与间距、布局模式、聊天与消息、终端与代码、流式与加载、差异与日志、组件与可访问性、性能、测试与 QA 等主题;推荐优先使用 shadcn/ui、daisyUI、HeroUI 设计系统;规定界面文本使用 Geist、代码内容使用 JetBrains Mono(最小 14px);列出常见反模式与上线前检查清单。

使用方式:按工作流推进,先阅读 foundation 文件,再按需阅读 interactive 与 implementation 文件;构建自定义组件前先检索设计系统;用 Graphviz 绘制用户流程(示例命令 dot -Tpng user-flow.dot -o user-flow.png);用 OODA 循环映射用户目标;按原子设计组织组件;用 Lighthouse 测量性能。

适用场景:Web 应用、开发者工具、技术界面、聊天/终端/代码/流式/差异/日志类交互界面。

限制:资料未提供具体收费、价格、平台支持范围与效果保证;部分内容为设计建议而非强制规范,实际落地需结合项目情况验证。