← 返回首页
腾讯校园招聘 Skill - 腾讯招聘官方推出的校招 AI 助手
腾讯招聘官方推出的校招 AI 助手
工具介绍
frontend-design是什么
frontend-design是Anthropic推出的前端设计Skill，用于Claude Code等AI编程Agent。工具要求模型编码前先明确目的、受众、视觉语气与技术约束，通过先设计判断再编码避免模板化AI味界面。作为设计决策，不替代UI框架，提升前端审美与可落地性，适用网页构建、组件重构与视觉升级。
frontend-design的主要功能
-
设计前思考框架：要求模型在编码前先明确界面的目的、受众、视觉语气、技术约束和记忆点，将设计判断显式写入执行流程。
- 字体排印指导：禁用Inter、Roboto等通用字体，要求选择独特有个性的字体组合来提升前端美学质感。
- 色彩与主题系统：禁用白底紫渐变等陈词滥调，要求建立主色调搭配锐利点缀色并用CSS变量保持一致性。
- 动效编排策略：主张精心编排的入场动画而非分散微交互，HTML优先用CSS、React可用Motion库实现高影响力时刻。
- 空间构图突破：鼓励用不对称、重叠、对角线等打破网格的布局，避免可预测的模板化套路。
- 背景与视觉细节：要求使用渐变网格、噪点纹理等创意形式营造氛围，细节必须严格服务整体美学主题。
如何使用frontend-design
- 自动触发：在Claude Code或Codex中提出前端相关任务，Agent会自动识别任务类型和读取Frontend-Design Skill的设计约束与执行流程。
- 显式触发：在提示词中直接写明”请使用frontend-design skill设计并实现这个页面”。
- 补充业务上下文：使用时需给出足够的产品信息，包括产品类型、目标用户、品牌气质、信息优先级、技术栈、移动端需求及可访问性要求，避免只说”做得好看点”导致设计空间过大。
- 先读取现有约定：在已有项目中使用时，应让Agent先读取现有组件、样式变量和设计约定，再进行改动，避免新页面与原系统风格割裂。
- 复用现有组件：若项目已有组件库，优先复用现有Button、Table等基础组件，只在样式层和组合方式上提升表现。
- 完成后视觉验证：实现后需进行桌面和移动端截图检查、文本溢出检查、交互状态检查、主题色对比度检查以及动效是否干扰用户等生产质量验证。
广告位 C
