ui-design

ui-design 技能是前端开发与视觉原型的快速生成引擎。它协助开发人员、设计师与产品经理在单一 HTML 文件中产出功能完整、响应式且视觉精致的用户界面。通过简化现代样式开发流程，使用者可专注于布局、交互模式与用户体验，无需处理繁琐的构建工具或复杂的项目结构。

• 使用 Tailwind CSS 产生适合生产环境的 HTML 代码，简化样式流程。

• 导入顶尖现代界面的设计模式，强调细腻对比、版型与响应式布局。

• 整合 Lucide 图标并统一使用 1.5 笔触宽度，确保视觉一致性。

• 支持 Chart.js 进行数据可视化，自动处理 Canvas 响应式缩放。

• 严格遵守使用者定义的设计规范，包括字体层级、色彩调色盘与组件风格。

• 实作语义化 HTML、考虑无障碍设计，并通过原生 CSS 处理悬停与焦点交互状态。

• 使用此工具时，应清晰定义界面需求，包含如切换器、滑块或下拉菜单等必要组件。

• 本工具专为产出单一代码块设计，复制产出内容至 HTML 文件即可即时预览或部署。

• 建议明确指定设计语言或风格（例如：极简、商务、暗色主题或未来感），以确保生成结果符合预期。

• 请注意，此技能专注于快速迭代与 UI 探索，而非复杂的后端整合。除非特别要求，建议避免加入过多轻量级以外的 JavaScript 库，以维持界面性能。

• 工具内置字体处理机制，确保标题使用较紧凑的间距（tracking-tight）以提升现代感，并正确运用字重以达到最佳视觉平衡。