Frontend-Design Skill 是 Anthropic 官方提供的技能包，用于提升大模型的前端设计审美。通过明确动效、质感、字体、一致性等设计维度的约束，解决普通指令下模型生成的界面排版混乱、动画生硬等问题。支持 Claude Code、Codex 及 Cursor 等工具，可通过 npx 命令快速安装。使用时需在提示词中强调调用该技能，并可根据项目需求定制品牌调性。
目前，在不额外提供风格规范、设计系统或示例参考的情况下，具备较强前端审美能力的编程大模型较少。部分在代码生成方面表现优秀的模型，在前端界面设计上往往存在字体缺乏层次、动画生硬、质感较差等问题。
可以使用 Anthropic 官方提供的 frontend-design skill 来提升主流编程大模型（包括 Claude、Codex 等）的前端审美能力。
直接要求模型重新设计页面时，生成的界面常见问题包括：
启用该技能后，字体、一致性、动画效果、质感及排版均有显著改善。
Frontend-Design Skill 通过明确的设计约束引导大模型输出更高质量的前端代码。它强调以下维度：
npx skills-installer install @anthropic/claude-code/frontend-design --client claude-code
npx skills-installer install @anthropic/claude-code/frontend-design --client codex
npx skills-installer install @anthropic/claude-code/frontend-design --local --client cursor
安装完成后，在需要前端设计能力时，提示词中强调：
使用 frontend-design skill 来完成前端设计工作
Frontend-Design Skill 针对大模型工作原理设计，能够充分调动模型自身蕴含的编码能力。无论使用 Claude Code、Codex 还是 Cursor，均可通过简单命令安装，辅助获得专业的前端审美能力。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online