关于 impeccable-design-polish
impeccable-design-polish 是用于打磨现有设计成果的技能,面向需要改进层级、可用性、响应式表现和无障碍性的设计与开发流程。它要求先检查当前页面,再围绕用户原意做少量重点修改,而不是从头重做。
主要功能
- 01审查层级、间距与排版
- 02评估设计一致性
- 03直接修改现有作品
- 04添加克制且有用的动效
- 05修复移动端与可访问性问题
- 06为展示和分享进行视觉检查
适用场景
- 01检查页面并找出优先修复的问题
- 02在保留原意的前提下打磨现有设计
- 03修复移动端溢出、对比度或缺失状态
- 04分享前完成最终视觉检查
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ nexu-io/ open-design --skill impeccable-design-polish安装后在 Claude Code 中输入/impeccable-design-polish确认已加载。
详细介绍
精细打磨设计
将此技能用作现有设计的生成后优化步骤。不要从头开始重做项目;应让当前成果更精致、更易用,更接近设计师愿意交付的作品。
后续模式
- 审查:找出层级、间距、颜色、字体、交互状态、响应式设计和无障碍方面影响最大的问题。
- 评析:说明哪些地方显得普通、设计过度、设计不足或不一致。
- 打磨:直接编辑成果,在保留用户意图的同时,优先改进最重要的问题。
- 添加动画:仅在有助于反馈或叙事时,添加克制且实用的动效。
- 加固:修复移动端溢出、文本裁切、对比度问题、缺失状态、失效链接和脆弱的布局假设。
- 上线准备:为展示或分享做好准备,包括最终视觉质检和明确的后续步骤。
操作规则
- 编辑前先检查当前 HTML/页面。不要只凭提示内容猜测。
- 除非用户明确要求修改,否则保留现有内容、品牌和场景。
- 优先进行少量但果断的修复,避免大范围的表面改动。
- 消除常见的 AI 痕迹:
- 没有产品理由的紫蓝色发光渐变
- 千篇一律的三卡片功能区
- 到处都是尺寸过大的圆角卡片
- 空洞的营销形容词
- 不一致的间距和字体比例
- 无助于理解的装饰效果
- 保持无障碍:焦点状态、对比度、语义化控件、易读文本,以及减少动态效果时的备用方案。
- 完成后,让成果处于更完善、可运行的状态,而不只是列出批评意见。
最佳搭配
- 搭配
design-taste-frontend或gpt-taste,以获得更有力、避免设计套路的改版。 - 搭配
emilkowalski-motion或 GSAP 技能,专门打磨动效。 - 当成果需要真实视觉素材而非仅用 CSS 装饰时,搭配图像/视频技能。
评论
支持 Markdown