专业级色彩工具开发
开发一个基于HTML5/CSS3/JavaScript的专业色彩工具,包含色彩选择器、格式转换、配色方案、渐变生成、无障碍检测等功能,支持实时联动和多格式导出。
提示词内容
构建一个面向设计师与开发者的专业级色彩工具,基于HTML5、CSS3和JavaScript技术栈实现。需包含以下核心功能模块: #### 1. 交互界面要求 - 提供多种色彩选择方式:吸管工具、色轮选择器、滑块调节器、手动输入字段 - 所有控件需支持实时联动更新 #### 2. 色彩格式转换 - 实时互转支持:RGB/RGBA、HSL/HSLA、HEX、CMYK格式 - 每种格式需自带一键复制功能 - 转换过程需保持色彩值精度不丢失 #### 3. 配色方案生成器 - 支持生成以下专业配色方案: - 互补色(Complementary) - 类似色(Analogous) - 三元色(Triadic) - 四元色(Tetradic) - 单色系(Monochromatic) - 每种方案需可视化展示色彩比例关系 #### 4. 色彩管理系统 - 收藏夹功能:支持命名分类存储 - 导出选项:支持多选收藏夹内容批量导出 #### 5. 色彩协调可视化 - 动态展示色彩和谐度规则 - 提供交互式调节手柄供微调参数 #### 6. 渐变生成器 - 支持生成类型:线性渐变(Linear)、径向渐变(Radial)、锥形渐变(Conic) - 必须支持多色标(Color Stops)自由添加/删除 - 每个色标需支持位置与透明度调节 #### 7. 无障碍检测 - WCAG标准合规性检查 - 实时对比度比率计算 - 色盲模拟可视化 - 检测结果需标注通过/失败状态 #### 8. 开发辅助功能 - 一键生成代码片段:CSS/SCSS/SVG格式 - 智能色彩命名:根据色值自动推荐语义化名称 #### 9. 导出规范 - 支持导出格式: - Adobe ASE(色板交换格式) - JSON(结构化数据) - CSS变量集合 - SCSS变量文件 - 每种导出需保留完整元数据 #### 10. 性能要求 - 所有色彩计算需在Web Worker中执行 - 界面响应延迟不超过200ms - 历史操作堆栈支持撤销/重做
使用说明
- 点击"复制提示词"按钮复制完整内容
- 粘贴到 ChatGPT、Claude 或其他 AI 对话工具中
- 根据实际需求调整提示词中的具体参数
- 可以多次迭代优化以获得更好的结果
