前端设计
将以下提示词粘贴到你的 AI 对话框中：
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_c03662dc/design-pro。
技能介绍
要解决什么问题
Agent 帮你搭落地页、仪表盘、表单或组件库时，很容易产出「能跑但像模板站」的界面：Inter/Roboto 默认字、纯白底、移动端事后补救、表单报错清空输入、长操作无反馈。这类问题不是缺组件，而是缺少可执行的审美与工程约束。
技能如何工作
本技能是只读指南，不发起网络请求、不读写用户数据。它把前端交付拆成可查阅的主题文件，例如 stack.md（栈与工具）、typography.md、colors.md、mobile.md、animation.md、examples.md。
核心规则可概括为七条：移动优先（栅格单列、触控区 ≥44×44px）、版式有层次（正文字号 16–18px、标题级差 2 倍以上）、配色有主次（70-20-10、明确亮/暗主题、避免死白底）、每次交互有反馈（100ms 内响应、>1s 显示加载、错误保留输入）、可访问性（对比度、焦点态、语义 HTML、键盘可用）、性能预算（懒加载、占位防 CLS、LCP/CLS 目标）、以及每页一个记忆点（字体、动效或布局上的明确主张）。
文档还用表格列出常见「前端陷阱」及修复方式，便于在评审或改稿时对照。
适用边界
技能仅提供模式、规范与响应式实现建议；不会代你发请求、访问或存储任何信息。具体框架选型与业务 API 仍需你在项目上下文中自行落地。
使用场景
- 用 Agent 搭产品落地页时，需要按移动优先栅格、版式级差和配色 70-20-10 避免「模板站」观感
- 在生成管理后台或数据仪表盘界面时，要落实加载态、乐观更新与 LCP/CLS 等性能约束
- 实现注册/登录等多步表单时，要求错误提示高亮且不清空已填字段，并保证键盘与焦点可访问
- 为组件库或设计系统补文档时，对照 typography、colors、animation 等专题文件统一栈与响应式模式
适合人员
- 负责营销页与官网改版、希望 Agent 产出具备明确视觉主张而非默认字体的全栈工程师
- 正在用 AI 生成内部仪表盘的前端，需要可访问性与交互反馈 checklist 的产品工程同学
- Review Agent 生成 HTML/CSS 的技术负责人，要用「前端陷阱」表做代码评审对照项
- 独立开发者快速搭 MVP 界面，想按 stack.md 选型并遵守触控尺寸与语义 HTML 约束
相关技能
基于 @chenglou/pretext 的文本布局引擎，在指定宽度与字体下精确计算高度、行数与逐行内容，支持批量与富文本内联。
基于 SkillHub TRACE 五维标准，约 3 分钟完成评测并输出改进建议，适合上架前自检。
按业务模块插桩结构化 AI-PERF 日志，配合脚本生成中文 HTML 报告，定位 Electron 内存与耗时热点。
用自然语言描述实体与关系，按规范化、索引与外键等实践生成可上线的 SQL/NoSQL 表结构与迁移思路。