用途：这是一个前端设计入口技能，适用于构建或美化 Web UI——组件、页面、仪表盘、落地页、React/Vue/HTML-CSS 布局等，或在用户提出“更好看”、修间距/布局、配色、字体排印、响应式、打磨与审美需求时使用，即使未出现“设计”一词。
主要能力：包含多个子技能，按需加载：design-thinking 用于每个设计任务，定义目的、语气、领域、色彩世界、评审标准与跨领域视角；design-system 用于实现层面，涉及 token、字体排印、动效、颜色语义与背景；design-spatial 用于版面构成，含显式网格与 8 点间距约束、视觉重量/平衡/对齐，以及渲染后评审的视觉回路；design-ux 用于可用性审计，以独立的新鲜视角评审对渲染 UI 打分；design-philosophy 用于高概念作品、活动或视觉宣言。视觉素材可生成或检索，并结合语气、领域、色彩世界编写提示词。涉及 LLM 操作时，须标注所用模型与估算成本；界面展示算法或模型时，应给出排版后的核心公式并逐项注释符号。
必要用法与强制检查：任何 Web UI 在宣告“完成”前，必须运行横向溢出闸门——在约 390px 与 1024px 的窄宽度下测量 document.documentElement.scrollWidth - document.documentElement.clientWidth，并确认结果为 0；默认在头部/工具栏行使用 flex-wrap:wrap 加 body{overflow-x:clip}，横向行新增元素后重新测量。报告完成前须渲染并交由独立评审检查图像，而非查看代码或自评。任何“全选”控件必须配对反向操作（如按钮文字在“全选/取消全选”间切换），且取消范围需与全选范围一致。
适用场景：组件、页面、仪表盘、落地页及各类交互工具/编辑器发布前的设计实现与评审。
限制：该技能改进视觉方向与评审纪律，但不能替代在目标浏览器或设备上渲染并检查真实 UI；部分建议依赖截图、浏览器自动化或视觉评审，缺失时只能作为设计清单而非证据；来自产品方的品牌、法律、无障碍与本地化约束优先于此处审美规则。来源为 connerkward/ckw-design-skill（MIT）。