简诗专业网页UI设计系统

要解决的问题

在多人协作或长期迭代的网页项目里，界面最常见的失败不是「不够好看」，而是失控：同一个按钮在不同页面尺寸不一，间距靠手感写死成 13px、17px 之类的魔法数字，首屏并排堆出三个同权重的 CTA，用户不知道该点哪个。这类问题的根源不是缺少审美，而是缺少一套被强制执行的规范。

核心能力与关键步骤

这个技能把专业 UI 工作拆解成可逐项检查的规则：

• 网格是地基：桌面端以 12 列网格为基础，所有间距走 8px 基线（8 / 16 / 24 / 32 / 48 / 64px），内容最大宽度限制在 1200-1440px，同一应用内不允许混用两套网格。
• 层级决定感知：每个页面必须定义 primary / secondary / tertiary 三个层级，最重要的元素至少是次重要元素的 1.5 倍大，单个视口只保留一个主 CTA。
• 组件要有完整状态：标准交互沿用成熟模式，不自造轮子；所有输入元素都要定义 default、hover、focus、active、disabled、error 六种状态，多步流程必须提供进度指示。
• Token 取代魔法数字：先写 UI styleguide（颜色、字体、图标、间距），再落地为 --color-primary、--spacing-lg 这类设计令牌，实现阶段禁止硬编码像素值。

它内置了 Hero、Bento 卡片网格、Split Screen、Sticky 导航、Modal 等布局模式的明确规格，并列出五类反模式（信息过载、风格不一致、暗黑模式、轮播当内容策略、滚动劫持）及对应解法，末尾附一份可直接对照的审查清单。

适用边界

这个技能只做设计决策的规范输出与现有界面的一致性审查，不会自动安装依赖、修改系统权限或创建持久化任务。涉及发送、发布、删除、付款、部署等外部写入操作时，它会先展示目标与影响，等你明确确认后再执行。命令和代码默认仅供参考，凭据也只用于你指定的对应官方服务。