agentic-awesome-skills 前端设计入口技能 ckw-design 实战指南设计方向、设计系统与视觉纪律【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址: https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills本文以 AAS Core 仓库中的plugins/agentic-awesome-skills-claude/skills/ckw-design/SKILL.md为骨架结合仓库内skills/下 design-thinking、design-system、design-spatial、design-ux、design-philosophy 等子技能及layout-audit.js源码系统讲解如何用 ckw-design 完成从设计方向确立、设计系统落地到布局门禁验证的完整前端设计流程。读完你就能掌握何时调用 ckw-design、如何按子技能分层加载、为什么“渲染后让独立评审批判”是不可省略的环节、如何执行强制横向溢出门禁以及如何在 AI 辅助设计流程中保持成本透明与公式可解释。ckw-design 是 agentic-awesome-skills 生态中的前端设计入口技能entry-point skill。它不直接给出某种“风格”而是定义了一整套设计工作纪律design discipline先确定方向design-thinking再落地机制design-system用渲染-评审循环design-spatial保证输出不失控用可用性审计design-ux区分“好看”与“好用”用设计哲学design-philosophy支撑高概念作品。其核心主张是AI 生成的 UI 不能信任自己的输出必须渲染出来、用陌生眼光批判、并在窄屏下实测横向溢出。何时使用 ckw-design根据 ckw-design/SKILL.md 的定义凡是以下场景都应加载本技能构建或美化任何 Web UI组件、页面、仪表盘、落地页React/Vue/HTML-CSS 布局用户说“make this look better / nicer”“fix the spacing/layout”用户提到 styling、color、typography、fonts、responsive design、polish、aesthetics即使没出现 “design” 这个词。技能元信息frontmatter中还声明了risk: safe、source: community、license: MIT作者为 Conner K Ward适配 claude-code、antigravity、cursor、gemini-cli、codex-cli 等工具链。这意味着它属于社区来源、可安全加载的通用设计技能。技能的目标非常明确产出有辨识度distinctive、达到生产级production-grade的界面并规避通用的 AI 审美generic AI aesthetics。第一条铁律声明“设计完成”前必须渲染并让独立评审批判ckw-design 最核心的立场是盲目生成无法看见自己的碰撞collision。UI 是作为 token 流生成的而非像素模型无法感知重叠、失衡、错位的间距。因此在向用户报告任何“设计完成”之前必须渲染出真实页面用任意静态服务器如python3 -m http.server或npx serve托管并用 Playwright 无头截图至少截取几个宽度让独立的评审者批判图片而非代码评审者必须是没有写过这个页面的子代理subagent让它在截图里专门寻找“哪里是错的”——碰撞、边缘相切、参差对齐、权重失衡、无清晰焦点、某宽度下断裂修复 → 重新渲染 → 重新评审循环直到过关。关于这一点的完整推导为什么模型看不到自己做的 UI、为什么第一版总是“平均值”、为什么不要规定某种风格而要规定流程详见 design-spatial/SKILL.md 第 13 节。它特别指出模型的第一直觉就是训练数据的均值——要么是“通用 AI 均值”Inter 字体、紫底渐变、单列居中、三个等宽卡片要么是“设计师潮流均值”超大紧凑大写标题、暗黑模式加颗粒、等宽字体微文案、贴纸徽章。把第一直觉当作均值然后刻意偏离——朝这个产品专属的世界domain偏离而不是朝另一个潮流偏离。如果结果可以是任何一家初创公司的页面你就交付了均值。强制横向溢出门禁任何 Web UI 的“done”判定门槛这是 ckw-design 中唯一标注为MANDATORY强制的门禁摘自 design-spatial/SKILL.md 第 4 节。规则如下在任何 Web UI 被宣称为“完成 / working / fixed / looks good”之前必须在本轮this turn于窄宽度约 390px 和约 1024px下执行下面的scrollWidth检查并确认结果为0。不是“我加了 overflow-x:clip 所以没事”不是“我的宽度下看着没问题”必须实测、窄屏、每轮都测。没测就不算完成只能说“还没检查溢出”。检查代码document.documentElement.scrollWidth - document.documentElement.clientWidth若结果大于 0用下面的代码定位肇事元素document.querySelectorAll(*).forEach(el{ const r el.getBoundingClientRect(); if (r.right innerWidth 1 || r.left -1) console.log(Math.round(r.right), el); });为什么这个 bug 反复上线开发窗口通常足够宽溢出在桌面宽度下不可见只在窗口窄于某个元素时才出现布局会增长每次给flex/inline行添加导航 tab、工具栏按钮、头部控件、chip、更宽的公式或pre上一次的溢出检查就作废了design-spatial 记录的真实事故2026-06 两次进度条边缘标签溢出 23px一个flex-wrap:nowrap的头部增加 4 个 tab 后整页在 720–1200px 区间横向滚动 309px——两次都在开发宽度下不可见只有窄屏实测才抓到。前置默认防御让门禁天然通过头部/导航/工具栏行一律flex-wrap: wrap绝不用nowrap——行能放下时是 no-op放不下时救你一次body { overflow-x: clip }作为兜底用clip而非hidden因为 clip 不创建滚动容器不会破坏position:sticky锚定布局。注意兜底不是修复必须找到并消灭根因。溢出根因清单来自源码文档根因修复position:absolutewhite-space:nowrap锚定在边缘left:100%、right:0边缘标签向内锚定右端用right:0; transform:none左端用left:0; transform:none100vw含滚动条宽度约 15px改用100%flex/grid 子元素无min-width:0长标题撑爆卡片、grid 格里的pre加min-width:0长不可断字符串URL、hash、tokenoverflow-wrap:anywhere或word-break:break-word固定像素宽度大于视口、过大的负 margin、超大的position:absolute元素按视口重构泛化结论任何锚定在边缘或用视口单位vw尺寸的元素都是横向溢出的嫌疑对象——窄屏实测、量 scrollWidth、给 body 加 clip 兜底、把边缘锚定内容向内收。子技能导航按任务分层加载ckw-design 是入口真正的设计机制分布在五个子技能中按场景加载子技能加载时机仓库位置design-thinking每个设计任务都必须加载。定义 purpose、tone、domain、color world、review bar 与跨领域镜头skills/design-thinking/SKILL.mddesign-system实现阶段加载token、排版、动效、色彩语义、背景。构建组件、页面或设计系统时使用skills/design-system/SKILL.mddesign-spatial构图阶段加载显式网格 8 点间距约束、视觉权重/平衡/对齐、渲染-评审视觉循环。用于修复“空间感失调”——生成的布局居中成一团、错位或某些宽度下断裂skills/design-spatial/SKILL.mddesign-ux审计可用性而不只是外观UI “感觉不对/难用”、学习成本高、需要一大堵说明文字、或任何交互型工具/编辑器/应用上线前。用独立评审按 Nielsen 10 条 交互启发式打分并输出优先级修复清单。可用性 ≠ 美学skills/design-ux/SKILL.mddesign-philosophy高概念作品、campaign、用户要求视觉哲学/宣言/不折不扣的艺术性审美时skills/design-philosophy/SKILL.mddesign-thinking写码前的方向课design-thinking/SKILL.md 要求在写任何代码之前完成四件事Purpose目的这个界面解决什么问题谁用Tone基调选一个极端并刻意执行——brutally minimal、maximalist、retro-futuristic、organic/natural、luxury/refined、playful/toy-like、editorial/magazine、brutalist/raw、art deco/geometric、soft/pastel、industrial/utilitarianConstraints约束框架、性能、可访问性Differentiation差异化一件让它令人难忘的事。同时它给出三个方向工具Domain来自产品世界的 5 概念/隐喻/词汇是领地而非功能、Color world5 种“属于”那个世界的颜色不是“暖色/冷色”这种抽象词而是该领域真实存在的颜色名、Signature一个只可能为这个产品存在的元素。它还强调“保留冲击力用于标点”全出血媒体、戏剧化动效、超大字体、饱和强调色、视差——一旦成为默认就失去力量。只选 12 个时刻放大招hero、payoff其余保持安静克制。颜色同理一个强调色不是五个。Review bar 的标准是“我会把自己的名字署在上面吗”——不是“它能用吗”而是“它是否毫无疑问地刻意且精良”。两条不可谈判的工艺不变量标题/展示文字绝不闪回退字体以document.fonts.ready门控并淡入首屏先加载开屏视口内的 hero 文字/媒体/品牌标记必须优先完整绘制。design-system机械实现不变量design-system/SKILL.md 定义了实现层的机械约束重点包括Token 架构所有颜色映射到少量原语禁止随机 hex。Foregroundprimary/secondary/muted 文本层级、Backgroundbase/raised/overlay 表面抬升、Bordersubtle/default/emphasis 分隔层级、Brand身份与主强调色、Semanticdestructive/warning/success。排版层级标题更重、字距更紧正文舒适可读标签/UI 中等字重适配小尺寸数据用等宽 tabular-nums——但要克制只有真正的对齐数据ID、时间戳才配等宽不要给装饰性眉题微文案“35MM · DEVELOP · SCAN”硬套 mono 装“技术感”那是当前的潮流废料。加载顺序first seen, first loaded优先首屏集合hero 文本/图/品牌标记字体自托管 WOFF2Brotli 压缩、体积减半、字形一致link relpreload asfont typefont/woff2 crossoriginLCP 图加fetchpriorityhigh首屏以下loadinglazy decodingasync、视频preloadnone或metadata、非关键 JSdefer始终预留空间aspect-ratio或widthheight防 CLS。绝不 FOUTfont-display: swap本身就是“闪回退再换字体再回流”。对用户看着加载的文字标题、字标、hero 文案绝对禁止。做法在head同步给html加fonts-pending类让展示字体文字保持opacity: 0在document.fonts.ready后先用document.fonts.load(weight 1em Family)唤醒关键字体切到fonts-ready并约 0.5s 淡入必须带约 2.5s 的安全超时字体加载失败也不能让文字永久隐藏。慢加载内容绝不展示丑陋中间态双层杠杆——更快到达WOFF2/Draco/WebP-AVIF 压缩、preload 首屏少数资产、懒加载非首屏、预留盒防 CLS 优雅加载骨架屏、低清模糊海报、与设计语言一致的占位符替代默认的部分绘制。design-system 给了症状-修复对照表标注标签translate(0,0)堆叠、Canvas 首帧黑屏、懒加载图跳变、视频海报跳动、3D 模型无过渡出现、React 岛闪现劣质 fallback。Chrome 保持静止状态文字“loading model…”“N matching · M indexed”不得折行推挤相邻控件。white-space: nowrap; overflow: hidden; text-overflow: ellipsis 预先按最长消息预留固定高度。Motion克制、一致的时序一个编排到位的时刻胜过零散微交互。默认参考值微交互约 150ms、大过渡 200–250ms、ease-out。复杂转场路由/页面过渡、列表重排、reveal、共享元素加载 motion-choreography.md 参考文档。嵌套圆角仅当一个圆角元素嵌在另一个里时——子半径 ≤ 父半径同心圆是最佳child_radius parent_radius − gap。颜色调色板来自领域APCA 用于知觉对比判断、WCAG 24.5 / 3:1作为合规地板layout-audit.js 门禁的就是它交互态对比度必须升高而非降低hover 变淡读起来像禁用。视觉资产生成或来源当 design-thinking 识别出需要视觉资产logo、图标、hero 图、纹理、背景时生成Generate用图像生成模型或 API 制作合成/品牌资产来源真实资产Source免费图库或档案图片搜索——通常比生成更便宜、更真实用 design-thinking 的输出tone、domain、color world来构造 prompt / 查询对照设计哲学评估、精修、并入构建。LLM 辅助工作必须标注模型与成本当设计工作涉及运行 LLM生成资产、VLM 分析、布局评审、prompt 生成等时ckw-design 强制成本透明运行前声明使用哪个模型和预估成本如gpt-4o-mini · ~$0.005/image或FLUX v1 · ~$0.006 per gen结果后在输出上标注所用模型、实际成本若与预估不同、关键参数seed、prompt、设置成本要对用户可见放在消息、contact sheet 表头或资产 caption 中而不是埋在日志里为什么用户在决定“成本换质量”是否值得。未标注或隐藏的成本藏起了最重要的决策杠杆。这条规则是media-attribution-rule的延伸覆盖设计工作流中任何 LLM 操作。官方示例运行前Running gpt-4o-mini layout critique on 8 designs · est. ~$0.04 total运行后 contact sheet 表头FLUX v1 · $0.48 total (6 gen × $0.08)资产 captionhero_banner_flux-dev_seed3891.jpgseed 保证可复现不确定性滑杆的 VLM 分流前VLM triage on 46,978 images · gpt-4o-mini · ~$9.40后✓ Completed: 12,447 images classified · gpt-4o-mini · $7.62。算法 / 模型解释器展示方程并标注术语任何向用户暴露算法或模型的 UI“ⓘ 它是怎么工作的”面板、模型拆解、方法说明必须给出排版好的真实方程并逐项标注关键术语——不能只写散文。只用文字描述的打分器“按所选颜色出现多少来排名”是不可证伪的空话公式score Σ fracᵢ · max(0, 1 − ΔEᵢ/τ)加上每项标注才能让用户确切知道那个旋钮在做什么并建立“背后有真实数学”的信任。应用要点每个算法渲染一个干净的中心方程“性感的核心”而非所有细节使用规范记号σ 表示 sigmoid、Σ 表示求和、‖·‖ 表示范数、上标、ΔE、∇²等宽或衬线数学块与正文分离立即在下方标注每个符号e_x、w、τ、Q各是什么每项一行。未标注的方程是装饰标注过的方程是规格保持依赖轻量styled HTML / Unicode 数学离线可用只有表达式确实需要时才上 KaTeX/MathJax与分数并列给出决策规则如“P ≥ 0.55 判定为 personal”与模型成本标注组合方程说明“算什么”模型/成本行说明“谁跑的、花了多少”。源码示例一个 logistic headP(personal │ x) σ(w·eₓ b)σ(z) 1 / (1 e⁻ᶻ) •eₓ — 图像的 768 维 embedding ·w、b — 从你的标签学到的权重 · 决策P ≥ 0.55 判为 personalP ≤ 0.40 判为 reference。Select-all 必须配 deselect不留死胡同选择任何“全选Select all”控件必须配一个清除选择的方式——最好是同一个按钮、全选状态时翻转标签“Select all” ⇄ “Deselect all”。没有逆向的全选是陷阱用户过度选择或反射性误点后只能一个个取消勾选或刷新页面才能回去。代价是无声的——只在用户已经提交错误集合之后才咬人。应用要点切换同一按钮最简单、控件最少所有可见项已选中时按钮显示 “Deselect all” 并清除否则显示 “Select all”。一个控件无死胡同或者独立的 Clear/Deselect只要选择非空就显示取消选择必须覆盖与全选相同的范围全部“可见”/全部“已过滤”/全部“本页”——不能让“Select all”抓了 500 条而“Clear”只清掉屏幕上的 50 条泛化任何可逆的批量开关select、expand-all、mute-all、check-all都需要一键可达的逆操作——动作的对称性。纵深layout-audit.js——用确定性指标“调解”眼睛ckw-design 的横向溢出门禁只是起点design-spatial 把它泛化成了一套完整的确定性布局审计配套脚本在 skills/design-spatial/scripts/layout-audit.js。该脚本是零依赖的通过 Playwright MCP 的browser_evaluate在渲染页面上运行做两件事返回一份紧凑 JSON 测量结果并把每条发现画成 SVG 覆盖层叠到页面上——于是紧接着的browser_take_screenshot就是一张带标注的截图browser_evaluate({ function: () { 粘贴 layout-audit.js ; return __audit({}); } }) browser_take_screenshot() // ← 覆盖层现在在页面上。查看它。基于它推理。从源码看__audit(opts)支持{ align: .card .title,.card .price, space: .feature-list, draw: true }这类选项align指定“应该共享左边缘”的选择器space指定要检查子元素纵向节奏的容器contentSelector帮助非语义布局找到内容块。六项检查全部几何、颜色、像素无“看起来对不对”检查判定方式确定性层级collision 碰撞内容矩形重叠 ≥12%gatecontrast 对比度文本相对有效背景的 WCAG 亮度比4.5大字 3gatetap 点击交互目标 44×44Apple HIGgateoverflow 溢出scrollWidth − clientWidth即第 4 节门禁gatealignment 对齐左边缘聚类 → 偏离共享线 1–7px 的近失配signalspacing 间距容器子元素间隙的变异系数CoVsignalbalance 平衡墨密度加权重心 vs 光学中心signal从脚本源码可以确认的实现细节碰撞检查会用a.el.contains(b.el)跳过祖先/后代关系避免把父子元素误判为碰撞对比度检查会向上遍历祖先节点寻找有效的背景色ebg函数并用标准 WCAG 亮度公式lum/ratio计算间距检查会计算子元素间隙的变异系数并标记离群值。GATES 与 SIGNALS两类指标不可混为一谈GATES 正确性overflow、contrast、tap测量可访问性/可用性事实而非品味失败即真实缺陷可以放心阻断collision 接近 gate——通常是真 bug但也可能是有意为之眼睛确认而非自动失败SIGNALS 惯例balance、alignment、spacing rhythm测量布局与“对称、规整、网格化”美学的贴近程度——而这恰恰是 design-spatial §2 要求你推开的通用均值。把布局优化成最大化这些分数会让它更平庸。偏心的平衡、刻意的错位、不匀的节奏都是核心创作工具。纪律整个 §7 的重点绝不要接受一个你没看过的指标flag 是“去看哪里”的指针不是判决。读到collisions: 1不看标注截图就动手正是这个技能要消灭的失败用 signal 抓事故不用它强制惯例7px 的无意漂移、幽灵滚动条、1.9:1 的 caption——抓这些但同样的 signal 也会在刻意的不对称、有意的重叠、表现性节奏上报警。当指标与有趣的选择冲突时通常是有趣的选择赢门禁是必要不充分gates_pass:true清除了确定性下限绝不代表布局很好——一个乏味的居中模板能通过所有门禁却依然是均值。门禁过后真正的判断§1 陌生眼光评审、品味、品牌契合仍然要做。平衡是可测量的重心算法与验收标准design-spatial §6 给出了视觉平衡的可量化定义与 layout-audit.js 的 balance 检查配套光学中心而非几何中心目标x 0.50y ≈ 0.46略高因为字面 50% 的重心读起来“下沉”视觉权重 面积 × 墨密度而非单纯面积。源码给了标定的起始乘数const DENS {portrait:0.34, h1:0.82, kicker:0.42, lead:0.22, body:0.16, meta:0.5}重心每轴centroid Σ(wᵢ·posᵢ) / Σwᵢ修复失衡按跷跷板逻辑——力矩 权重 × 距轴距离选项包括加对侧配重、对侧放大、把重元素拉向轴心缩短力臂、或缩小它两个模型便宜的箱模型权重放在包围盒中心适合拖滑杆实时调参但系统性地把左对齐文本的墨点放偏与像素 oracle对渲染截图按距背景色的距离加权统计非纸面像素的重心与布局意图无关只数墨水。两者冲突时像素赢验收标准可测|centroid_x − 0.50| 0.03且|centroid_y − 0.46| 0.04加上低的左右/上下失衡。示例请求ckw-design/SKILL.md 给出官方使用示例可直接套用Review this interface with ckw-design, identify the highest-impact design problems, and propose an implementation-ready improvement.design-system、design-ux 同理见各子技能文档的 Example 节。局限性本技能改进视觉方向与评审纪律但不能替代在目标浏览器/设备上真实渲染并检查 UI部分建议假设可访问截图、浏览器自动化或视觉评审这些不可用时请把指导当作设计检查清单而非证明产品所有者的品牌、法律、可访问性与本地化约束优先于本技能的品味规则。小结一条可复用的 AI 设计工作流综合 ckw-design 及其子技能一条经过验证的 AI 前端设计工作流是design-thinking 定方向purpose / tone / constraints / differentiation产出 domain、color world、signaturedesign-system 定机制token 架构、字体层级、自托管 WOFF2、首屏优先加载、防 FOUT、chrome 稳定、嵌套圆角、APCA 设计 WCAG 认证design-spatial 定构图显式网格与间距、渲染 → 独立评审 → 修复循环、布局审计脚本量化门禁、平衡用重心数字而非眼睛或 VLM 的“感觉”design-ux 审可用性用独立新鲜视角评审按 Nielsen 10 条打分产出优先级修复清单横向溢出门禁收尾窄屏~390px / ~1024px实测scrollWidth − clientWidth 0头部行默认flex-wrap:wrap、body{overflow-x:clip}兜底每向水平行加一个元素就重测一次全程成本透明每次 LLM 调用前后标注模型与预估/实际成本暴露给用户的任何算法 UI 都给出带术语标注的中心方程任何批量选择都配逆操作。这套流程的价值在于把“品味”和“纪律”分离品味负责方向design-thinking / design-philosophy纪律负责不翻车design-spatial 的渲染-评审循环、溢出门禁、布局审计、成本标注。想要继续深入建议依次精读 design-thinking/SKILL.md、design-system/SKILL.md、design-spatial/SKILL.md含配套的 layout-audit.js 与 motion-choreography.md并在真实项目里跑一遍完整门禁。【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址: https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考