Frontend Design Skill for Claude
创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）。生成富有创意、精致的代码和 UI 设计，避免千篇一律的 AI 审美。
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/LeastBit/Claude_skills_zh-CN --skill frontend-designThe instruction itself
as written by the author本技能指导创建独特的、生产级别的前端界面，避免千篇一律的"AI 流水线"审美。实现真正可用的代码，对美学细节和创意选择给予极致关注。
用户提供前端需求：需要构建的组件、页面、应用程序或界面。他们可能会提供关于用途、目标受众或技术约束的背景信息。
设计思维
在编码之前，理解上下文并确定一个大胆的美学方向：
- 目的：这个界面解决什么问题？谁在使用它？
- 基调：选择一个极端方向：极简主义、极繁主义混沌风、复古未来主义、有机自然风、奢华精致风、趣味玩具风、杂志编辑风、粗野主义原始风、装饰艺术几何风、柔和粉彩风、工业实用风等。有太多风格可供选择。以这些为灵感，但设计出真正符合美学方向的作品。
- 约束：技术要求（框架、性能、可访问性）。
- 差异化：什么让这个设计令人难忘？用户会记住的那一个亮点是什么？
关键：选择一个清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都可行——关键在于意图明确，而非强度高低。
然后实现可工作的代码（HTML/CSS/JS、React、Vue 等），需满足：
- 生产级别且功能完善
- 视觉冲击力强且令人难忘
- 具有清晰美学观点的整体协调性
- 每个细节都精雕细琢
前端美学指南
重点关注：
- 字体排版：选择美观、独特、有趣的字体。避免使用 Arial 和 Inter 等通用字体；选择能提升前端美感的独特字体；出人意料的、有个性的字体选择。将独特的展示字体与精致的正文字体搭配。
- 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致性。主导色配合鲜明的强调色，效果优于胆怯的、平均分布的配色方案。
- 动效：使用动画实现效果和微交互。HTML 优先使用纯 CSS 解决方案。React 可用时使用 Motion 库。聚焦高影响力时刻：一个精心编排的页面加载动画配合错落有致的渐显效果（animation-delay）比零散的微交互更令人愉悦。使用能带来惊喜的滚动触发和悬停状态。
- 空间构图：出人意料的布局。不对称。重叠。对角线流动。打破网格的元素。大量留白或可控的密集感。
- 背景与视觉细节：营造氛围和层次感，而非默认使用纯色。添加与整体美学相匹配的情境效果和纹理。运用创意形式如渐变网格、噪点纹理、几何图案、叠加透明度、戏剧性阴影、装饰边框、自定义光标和颗粒覆盖层。
绝不使用千篇一律的 AI 生成审美，如过度使用的字体（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局和组件模式，以及缺乏情境特色的模板化设计。
创造性地诠释并做出出人意料的选择，让设计真正契合情境。没有两个设计应该雷同。在浅色和深色主题、不同字体、不同美学之间变换。绝不在多次生成中趋同于常见选择（例如 Space Grotesk）。
重要：让实现复杂度匹配美学愿景。极繁主义设计需要精心编写的代码，包含大量动画和效果。极简主义或精致设计需要克制、精准，并仔细关注间距、字体排版和微妙细节。优雅来自于对愿景的出色执行。
记住：Claude 有能力创造非凡的创意作品。不要有所保留，展示当跳出思维定式并全情投入独特愿景时能真正创造的东西。
Other skills for the same job
different authors, same section of the catalogue
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.
How to use it
Take leastbit/frontend-design from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.