该技能是一套面向前端 UI 的设计方法论与执行规范，适用于 Angular、React 或 Blazor 项目的界面设计、重设计、打磨或评审，包括落地页、仪表盘、组件、表单、设计系统等。它可作为设计流程的引导，帮助在编写代码前理清方向。
用途 当用户要求设计、重设计、优化或评审前端界面，或项目使用 Angular、React、Blazor，或需求涉及移动优先、响应式、布局、组件、表单、仪表盘、落地页、设计系统，或界面显得模板化、平淡、移动端损坏、需要独特视觉识别时，均可使用该技能。
核心原则 始终移动优先，从 375px 开始设计，先解决内容层级、触控目标和垂直节奏，再为更大断点增加列、侧边栏和留白。框架是交付目标，不是创意总监；设计决策优先于框架选择。断点由内容驱动的布局变化命名，而非设备型号。每个界面只保留一个令人记住的想法，其余保持克制。设计有质量底线：响应式行为、可见焦点、尊重减少动效、可访问颜色和可读字体不可妥协。
使用流程 首先确认需求简报：产品主题、用户主要任务、目标框架（Angular/React/Blazor/未知）、CSS 方案偏好（Bootstrap/Tailwind/原生 CSS/未知）、使用场景、必须保持不变的部分、需要覆盖的状态（首次运行、空、加载、错误、成功、权限、溢出）。若框架未知，先保持与框架无关的设计语言。
其次选择设计模式：Persuade（落地页、营销、定价）、Operate（仪表盘、管理、编辑器、设置）、Read（文档、文章、帮助、更新日志）、Experience（作品集、画廊、展示）。工具的落地页仍属于 Persuade。
然后构建移动概念：在 375px 下决定堆叠顺序、触控目标至少 44x44dp/px、一个明确主操作、正文不小于 16px 且行宽不超过 75 字符、8px 网格与 16px 基础边距。再按断点扩展：small 为 0–639px 单列；medium 为 640–1023px 双列；large 为 1024–1439px 十二列网格与侧边栏；xlarge 为 1440px 以上最大宽度容器与充裕留白。仅在内容需要时打破该比例。
若框架已知，加载对应参考：Angular（references/angular-design.md）、React（references/react-design.md）、Blazor（references/blazor-design.md）。若未选择 CSS 框架，可参考 references/css-frameworks.md 中的 Bootstrap 与 Tailwind 比较、移动优先示例和令牌映射指南。Bootstrap 需覆盖变量与工具类，保持 8px 间距网格；Tailwind 需先配置令牌尺度再写组件，避免类名堆砌。
交付前按需求和质量底线评审：移动端是否仍是最强叙事、是否看起来属于本产品而非模板、颜色是否和谐且达到 WCAG AA、动效是否有目的、表单与错误/空/加载状态是否经过设计。
子命令 shape：在写代码前规划 UX/UI。layout：修复间距、节奏与视觉层级。typeset：改进排版层级与字体选择。colorize：构建或优化颜色系统。adapt：跨断点适配设计。audit：检查无障碍、性能与响应式行为。harden：覆盖边缘情况、i18n、错误与真实输入。onboard：设计首次运行与空状态体验。polish：交付前最终质量检查。
质量底线 移动优先布局在 375px 定义且小屏叙事最强；触控目标至少 44x44px 且视觉分隔；正文至少 16px、行宽 45–75ch；颜色对比度满足 WCAG AA（正文 4.5:1，大文本/控件 3:1）；亮色或暗色模式根据使用场景选择；尊重减少动效偏好；键盘焦点可见且逻辑合理；悬停、焦点、激活、禁用、加载、空、错误状态均已设计；框架默认主题不得冒充品牌设计；不得使用 references/craft-floor.md 中禁止的模式。
应避免的反模式 先设计桌面再缩到移动；用框架默认主题当品牌识别；添加无实际布局变化的断点；移动端将关键内容藏在汉堡菜单后且无回退；任何屏幕使用 14px 或更小正文；每次滚动都重复纯装饰动效；全大写标签、长段落居中、标题中使用单字强调色。
参考文档 该技能附带大量参考文档，包括移动优先工作流、响应式断点、Angular/React/Blazor 设计约定、排版、颜色系统、间距系统、布局网格、组件模式、无障碍、动效、UX 写作、设计令牌、响应式测试、反模式、框架比较、CSS 框架、质量底线、边缘情况与首次运行设计等。
限制 该技能未说明具体收费、价格、平台支持范围或实际效果数据，这些信息暂未提供。