frontend-design 是 xobotyi/cc-foundry 中的一项界面设计与验证技能，用于在构建或评审 Web 界面时，决定各类可见设计选择并核验其实际渲染效果。资料未提供开发者、版本、价格或平台信息。
用途与核心思路 该技能认为界面问题常出现在两处：一是颜色、字体、圆角、阴影、间距等值来自模型习惯或框架默认设置，未经审视即上线；二是结果仅通过阅读标记而非查看页面来验证。它主张“修复设计而非检测问题”：一个模式只有在无人主动选择时才构成缺陷，而非因为它与其他网站相似。
设计决策的来源 在任何可见选择之前，先确认已有何物做出了决定，按优先级依次为：用户本次指定的内容（指令、已批准的样稿、参考站点或截图、品牌、明确方向）；项目自身的设计（设计令牌、主题、设计文档、按项目主题化的组件库、相邻页面）；宿主应用（扩展、嵌入组件或插件注入时所处的界面系统）；以及产品自身主题（产品是什么、谁使用、领域材料）。若项目已有令牌源或相邻页面，应先阅读再写样式。
决定剩余开放项 对于无先例的页面结构，技能建议向用户展示两到三个结构上不同的可点击变体，使用产品真实内容，说明各自代价，并让其中一个是完成工作的最朴素排列。新控件应加入其所属的现有分组。任务型界面（应用屏幕、仪表盘、设置、工具）以用户已知的惯例优先，身份表达放在令牌与细节中；仅说服型界面（落地页、活动页、作品集）以身份表达为主。
审视继承的内容 框架布局、组件库组件和宿主类都带有无人为本项目选择的设置，变更上线后即成为你的决策。需要对照周边产品检查：布局折叠的断点与产品实际使用宽度；圆角、内边距、密度与相邻控件；选中、悬停、焦点颜色在各主题下的一致性；组件行为（单选或多选、空内容时插槽渲染什么）；默认值是否适用。
需避免的默认外观 资料列出了多种“未指定轴线的默认结果”，例如：把框架默认强调色当作品牌色、用渐变作装饰、仅重新着色的组件库主题、卡片作为唯一结构、处处相同的圆角阴影内边距、已选项的填充圆角块加边缘强调条、非请求的发光与悬停缩放和入场动画、伪装成信息的装饰（标题上方眉标、非序列内容的编号标记、无信息的状态点或版本徽章、标题中某词的异样样式）、用 emoji 作图标、起始字体或常见替代字体、先于内容选定的页面骨架。更多收敛默认值与已清理模式见技能内的 references/converged-defaults.md。
少画与控件状态 首轮只画承载信息所必需的元素：计数用纯数字，标签、胶囊、徽章仅当容器编码了纯文本无法表达的信息时才使用。一个元素主导视图，周围保持安静。不添加无人要求的控件或文字。控件仅在数据确有其可作用对象时存在；按真实取值数量选择控件类型；选中状态须在各主题下与静止和悬停明显不同，且不仅靠颜色区分，切换不影响控件尺寸与基线。导航中图标标记目的地而非分区标题。
文案与内容 标签使用产品用户已有的词汇，不用代码标识符、字段名或主机名。控件名称即其结果名称，同一动作在按钮、确认和后续消息中叫法一致。界面展示产品本身，而非变更历史（不加“new”“updated”“preview”或版本标签）。不得编造证明或数据，没有素材就省略元素或明确标记占位并报告。营销文案须是仅此产品能说的话。错误与空状态说明发生了什么及下一步。按最短、典型和最长合理长度对照真实内容设计。
跨屏一致与验证 必须相同的元素只应是一个组件，共享页眉、页脚或控件在所有布局中从单一来源渲染；修改多个同类项之一时需对照其余项检查，发现明显不一致应指出并提供扩展，而非擅自扩展；功能性变更不重设任何未新增的样式。无设计系统且需构建多个屏幕时，先定义令牌（颜色角色、字号阶梯、间距阶梯、圆角、阴影），再由令牌构建每个屏幕。
验证渲染 页面须实际查看：DOM 查询、返回的 HTML、ARIA 属性、通过的测试和框架源码都只能证明存在，不能显示排布或可见性；无头浏览器截图可以，DOM 转储不行。每个用户可见变更都要渲染，并按影响范围扩大：标签变更看最窄宽度下的元素；组件编辑看其在各状态下的表现；令牌或共享布局编辑看每个使用它的独立布局。布局变更覆盖桌面、手机及两者之间（放在最宽断点下方）三个宽度；覆盖变更可达的状态（选中、切换、筛选、空、隐藏、长内容溢出）及各主题。按具名属性而非整体印象判断：已批准样稿与请求控件均按序在位；无溢出、裁剪、脱离标签换行或横向滚动；分隔符两侧间距相等且源于同一阶梯；同一行元素共享基线、应对齐的边缘对齐；无意义输入与表面不带强调色调；文本对比度达 4.5:1，大文本达 3:1。还要实际操作新增或移动的链接与控制。视觉修复后重新检查该修复可达的所有宽度和状态。无法渲染时应说明并提供查看方式与未检查清单，不得把未渲染的排布报告为符合。修改引入或暴露的缺陷应直接修复；变更前已存在的缺陷应报告但不处理。两轮打磨后停止，后续轮次只针对缺陷而非品味。阈值与有争议规则的依据见 references/render-checks.md。
应用方式 构建时静默应用规则，仅在无继承设计的界面上说明一次决策，不叙述规则或宣告检查，报告已渲染的内容、宽度与状态及未覆盖部分。评审时以 file:line 或渲染位置引用每条发现，指出其无法追溯的来源，并提供项目自身的值作为修复；项目没有时询问或提供两个不同选项，不擅自替换。不标记用户或项目主动选择的模式，也不因惯例常见而标记。
集成关系 css 和 tailwindcss 相关技能管辖样式与令牌的书写方式（包括何时可接受一次性值），本技能管辖其持有的值及页面是否展示；accessibility 技能管辖对比度、焦点与动效合规，冲突时以其为准；框架技能管辖组件代码；面向读者的散文（文档、文章、发布说明）归 the-writer 的 humanize，界面文案留在此处。
限制与未知 资料未说明该技能的安装方式、运行环境、支持的工具或模型、许可与收费情况，这些暂未提供。技能规则依赖 references 目录下的两个参考文件，其内容未在资料中给出。