frontend-design
设计独特的生产级前端界面
也可从以下获取: Azeem-2,1bertogit,1bertogit,92Bilal26,AdamAugustinsky,AJV009,AgentWorkforce,DennisLiuCk,anthropics,ZhanlinCui,anthropics,YYH211,7Spade,7Spade,92Bilal26,CesarAugustusGroB,davila7,AI-Vibe-Prompts
通用型 AI 生成的 UI 缺乏���觉识别度和记忆点。本技能应用 DFII 框架来创建有意图、高工艺的界面，具有协调统一的美学风格，从而脱颖而出。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“frontend-design”。 为太空旅游初创公司设计一个复古未来主义美学的首屏区域
预期结果:
首屏区域特点：渐变网格背景，从深紫色到青色过渡、自定义展示字体（Orbitron）用于标题、非对称文本布局，元素重叠、颗粒叠加纹理、CTA 按钮上单一高冲击力的浮动动画、仅使用 CSS 的星空粒子效果。DFII 评分：13（优秀��行，具有强烈的美学协调性）。
正在使用“frontend-design”。 创建一个奢华极简主义美学的定价卡片组件
预期结果:
三层定价卡片：充足留白（48px 基础单位）、精致的衬线展示字体（Playfair Display）与几何无衬线字体（Jost）搭配、单色调基础，仅在主 CTA 上使用金色强调、20% 不透明度的微妙盒阴影、悬停时平滑缩放变换、SVG 对勾图标。避免了通用的紫色渐变和对称布局。
安全审计
安全All 36 static analysis findings are false positives. The skill contains only markdown documentation describing a frontend design methodology (DFII framework). No executable code, network calls, or command execution present. The LICENSE.txt is standard Apache 2.0 text. Safe for publication.
质量评分
你能构建什么
落地页设计
创建一个令人难忘的落地页，采用编辑式野兽派美学风格，包括自定义字体层级、非对称布局和高冲击力的入场动画。
仪表盘组件库
构建一套协调统一的仪表盘组件，采用奢华极简主义美学，使用克制的色彩调色板、精确的间距和精致的微交互。
品牌网站重新设计
以复古未来主义美学方向重新设计现有网站，实现自定义渐变网格、分层半透明效果和独特的动态模式。
试试这些提示
使用奢华极简主义美学设计一个注册表单组件。包括有意图的字体选择、以一个主色调为主的故事配色和一个强调色，以及有目的性的留白。提供完整的 HTML 和 CSS。
创建一个产品落地页。首先，使用 DFII 框架在所有五个维度上评估设计方向。目标得分 12 分或以上。使用工业实用主义美学，配合有意图的非对称布局。
为金融科技仪表盘定义一个完整的设计系统。具体说明：展示字体和正文字体配对及其理由、CSS 变量色彩系统（一个主色调和一个强调色）、间距节奏和动效理念。然后实现一个示例卡片组件。
使用编辑式野兽派美学将这个通用按钮组件改造为令人难忘的东西。解释它使什么区别于典型的 AI 生成的 UI。包括悬停状态和焦点样式以确保可访问性。
最佳实践
- 在��写代码之前始终明确说明美学方向
- 使用 DFII 框架验证设计决策达到 8 分或以上
- 至少包含一个令人难忘的设计锚点，使设计与通用模板区分开来
避免
- 使用系统字体或 AI 默认字体如 Inter、Roboto 或 Arial，而没有有意图的理由
- 应用没有美学理由的通用紫色到白色 SaaS 渐变
- 创建对称的、可预测的区域布局，可能是任何模板